jquery与php简介.ppt

jquery与php简介 赵渭洛() JQuery 之语法模式与开发基础 Jquery的引入与$的作用 script type=text/javascript src=jquery-1.5.1.js/script 在JQ中使用 $ 来调用相关对象和DOM元素 script type=text/javascript $(document).ready(function(){  $(button).click(function(){  $(p).hide();  }); }); /script 先通过简单的例子 了解$符号的作用 后面的课程会详细 讲解$符号的作用 Jquery基础语法 基础语法是：$(selector).action() $符号定义 jQuery 选择符（selector）HTML 元素 jQuery 的 action() 执行对元素的操作 $(this).hide() - 隐藏当前元素 $(p).hide() - 隐藏所有P $(.test).hide() - 隐藏所有 class=test 的段落 $(#test).hide() - 隐藏所有 id=test 的元素 例： JQuery 之语法模式与开发基础 Jquery基础语法 $(document).ready(function(){ --- 相关代码---- }); //函数的相关载入类似window.onload 但又有区别 Window.onload $(document).ready 网页全部加载完毕后执行 只需网页结构加载完毕即可执行 一个网页只能允许一次执行 一个网页允许多次执行 简写（无） 简写：$(); JQuery 之选择器、事件器详解 Jquery选择器的各种用法 $(this) 当前元素 $(p) 所有p元素 $(input) 所有input元素 $(.intro) 所有 class=“intro” 的元素 $(ro) 所有 class=intro 的p元素 $(#intro) id=intro 的第一个元素 $(ul li) ul下的所有li节点 $(ul li:first) 每个 ul 的第一个 li 元素 $([href$=.jpg]) 所有带有以 .jpg 结尾的 href 属性的属性 $(div#intro .head) id=intro 的 div 元素中的所有 class=head 的元素 $(li[a:contains(Register)]) 内容包含Register的a元素 $(input[@name=bar]) name是bar的input元素 $(input[@type=radio][@checked]) type是radio的input元素 $(“li”).not(“ul”) li下没有包含ul节点的节点元素 $(span[@id]) 包含id属性的span元素 $([@id=span1]) id为span1的节点元素 JQuery 之选择器、事件器详解 Jquery事件器的介绍 基本用法 $(selector).click() 被选元素的点击事件 $(selector).dblclick() 被选元素的双击事件 $(selector).focus() 被选元素的获得焦点事件 $(selector).mouseover() 被选元素的鼠标悬停事件 $(selector).css(); 被选元素的CSS事件 $(selector). hide(); 被选元素的隐藏事件 $(selector). show(slow); 被选元素的显示事件 …… $(元素). 事件( 事件属性); 常见事件 JQuery 之选择器、事件器详解 $(“a”).addClass(“red”) 为所有a增加class=”red” $(“a”).removeClass(“red”) 为所有a去掉class=”red” $(“li”).append(“BB!”) 为li增加”BB!”innerHTML Dom节点操作 //hover是在执行完第一个函数后再执行第二个 $(“p”).hover(function(){ $(this).addClass(hover); },function(){ $(this).removeClass(hover); }); //toggle第一次点击执行第一个函数，再点击执行第二个 $(“p”).toggle(function(){ $(this).addClass(selected); },function(){ $(this).removeClass(sel