大牛班高级课程笔记课件jquery day

1、程序员 web/php 学院PHP 高手-jQuery(2)作业 1：漂浮的第一步：html 代码条第二步：css 样式代码第三步：jquery 代码第 1 页程序员 web/php 学院第四步：运行结果作业 2：树形菜单第一步：html 代码第 2 页程序员 web/php 学院第二步：css 样式第三步：jquery 代码第 3 页程序员 web/php 学院第四步：运行结果一jQeuryDom 操作回顾 js 的 domcreateElementappendChildreplacechildremovechild1.1 Dom 内部追加append()：父元素追加子元素，放到后面第 4

2、页程序员 web/php 学院prepend()：父元素追加子元素，放在前面appendTo()：子元素追加到父元素后面prependTo()：子元素追加到父元素前面具体实例应用如下:第 5 页程序员 web/php 学院总结说明：（选择器）.append(内容)：先后添加（选择器）.prepend(内容)：先前添加（内容）.appendTo(选择器)：先后添加（内容）.prependTo(选择器)：先前添加通过表单输入向 ul 中添加内容的实例：1.2 Dom 外部追加after()：在指定的元素后面追加内容before()：在指定的元素前面追加内容第 6 页程序员 web/php 学院in

3、sertAfter()：将添加的内容追加到指定的元素后面insertBefore()：将添加的内容追加到指定的元素前面具体实例应用如下:第 7 页程序员 web/php 学院1.3 Dom 包裹节点wrap(html 元素)：使用 html语法：$(内容).wrap(选择器); wrapAll(html 元素)：使用 html单独包裹匹配的元素将匹配的元素整体包裹unwrap():取消包裹，这个具体实例应用 1：将移出元素的父元素第 8 页程序员 web/php 学院具体 wrapAll 实例应用 2：unwrap:取消包裹第 9 页程序员 web/php 学院1.4 Dom 替换节点repl

4、aceWith():把被选元素替换为新的内容。replaceAll():把被选元素替换为新的 HTML 元素。具体实例应用：第10程序员 web/php 学院总结说明：（选择器）.repalceWith(内容)（内容）.repalceAll(选择器)1.6 Dom 删除节点remove():直接删除节点,detach():直接删除节点，也没有了。内容都删除保留,内容都删除。empty():仅仅清空内容。清空看具体实例：的内容，保留11第程序员 web/php 学院清空节点：empty()remove 和 detach第12程序员 web/php 学院1.7 克隆节点clone()：克隆节点语法

5、：$(selector).clone(true|false)处理程序。处理程序。：true:规定需false:默认。规定不实例 1，没有第13程序员 web/php 学院实例 2：节点第14程序员 web/php 学院二jQeury Dom 遍历（重点）祖先是父、祖父、曾祖父等等。后代是子、孙、曾孙等等。同胞拥有相同的父。2.1 jQuery 遍历 - 祖先（1） parent()：返回被选元素的直接父元素。（2） parents()：返回被选元素的所有祖先元素，直到根元素html。（3）parentsUntil()：返回两个被选元素。parent 父类的具体实例：间的所有祖先元第15程序员

6、web/php 学院第16程序员 web/php 学院第17程序员 web/php 学院parents()具体实例：第18程序员 web/php 学院parentsUntil()的具体实例：第19程序员 web/php 学院2.2 jQuery 遍历- 后代children()：返回被选元素的所有直接子元素。find()：返回被选元素的后代元素，一路向下直到最后一个后代。第20children 的具体实例程序员 web/php 学院第21程序员 web/php 学院find()的具体实例：第22程序员 web/php 学院2.3 jQuery 遍历- 同胞(siblings)同胞（同一级元素）

7、拥有相同的父元素。（1）siblings()：返回被选元素的所有同胞元素。实例 1：给所有的同胞元素应用样式第23程序员 web/php 学院实例 2：给某一个同胞元素应用样式第24程序员 web/php 学院（2）next()：返回被选元素的下一个同胞元素。这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素（可以使用nextAll）。实例 1：第25程序员 web/php 学院第26程序员 web/php 学院（3）nextAll()：返回被选元素的所有跟随的同胞元素。第27程序员 web/php 学院（4）nextUntil()：返回介于的两个参数之间的所有跟随的同胞元素。第2

8、8程序员 web/php 学院第29程序员 web/php 学院（5）prev()：返回被选元素的上一个同胞元素，同胞元素就是其他的元素。不一定是同一个。（6） prevAll()：返回被选元素的所有前面的同胞元素。（7） prevUntil()：返回介于的两个参数之间的所有前面的同胞元素。第30程序员 web/php 学院2.4 jQuery 遍历-过滤eq(index)：返回被选元素中带有指定索引号的元素。first()：返回被选元素的首个元素。last()：返回被选元素的最后一个元素第31程序员 web/php 学院hasClass(class) 检查当前的元素是否含有某个特定的类，如果

9、有，则返回 true。filter(expr) ：筛选出与指定选择器匹配的元素集合第32程序员 web/php 学院not(expr):筛选出与指定选择器不匹配的元素集合第33程序员 web/php 学院is(expr) ：用一个选择器来检查当前选择的元素集合,返回值是 true 和 false.第34程序员 web/php 学院返回拥有匹配指定选择器的一个或多个元素has(expr) has()在其内的所有元素。保留包含特定后代的元素，去掉那些不含有指定后代的元素。第35程序员 web/php 学院三个最基本的过滤是：first(), last() 和 eq()，它们您基于其在一组元素中的位

10、置来选择一个特定的元素。eq(index):index 索引从 0 开始。其他过滤，比如 filter() 和 not()您选取匹配或不匹配某项指定标准的元素。2.5 jQuery 遍历-其他addBack()：添加堆栈中元素集合到当前集合。第36程序员 web/php 学院实例 1：没有添加 addBack()实例 2：添加 addBack()end()：将匹配的元素列表变为前一次的状态。具体实例如下：第37程序员 web/php 学院淘宝的一个具体实例：第一步：html 代码第二步：css 代码第38程序员 web/php 学院第三步：jquery 代码第39程序员 web/php 学院第

11、四步：运行结果三jQuery（重点）问：什么是？答：是在文档中或者在浏览器窗口中通过某些动作触发。比如，单击，鼠标经过，键盘按下等。通常和函数结合使用。Javascript 中的简化了 javascript在jquery 都是可以使用的，只是有一点区别，jQuery时，没有on 关键字。的操作，绑定第40程序员 web/php 学院我们先看一个默认触发一个单击的案例3.1jQuery 常用第41程序员 web/php 学院（1）click语法格式：click(数据，回调函数);实例 1：实例 2：单击函数中再调用函数第42程序员 web/php 学院（2）mouseover 和 mouseen

12、ter 的应用mouseover：发 。mouseenter：在鼠标移动到选取的元素及其子元素上时触只在鼠标移动到选取的元素上时触发。第43程序员 web/php 学院focus:当元素获得焦点时（当通过鼠标点击选中元素或通过键定位到元素时），发生 focustabblur:当元素失去焦点时发生。blur44第程序员 web/php 学院3.2 jQuery bind 和 unbind使用我们先看一个简单的实例：第45程序员 web/php 学院bind 绑定：，多个之间用空格（1）添加多个链式写法 mouseover 和 mouseout第46程序员 web/php 学院（2）添加（3）向函

13、数传递数据第47程序员 web/php 学院语法格式：$(selector).bind(event,data,function,map)selector:选择器。参数：event:可以添加一个或者多个。data:规定传递到函数的参数数据。function :自定义函数。map:多个函数。取消绑定 unbind第48程序员 web/php 学院3.3 jQuery on 和 off,one使用语法：$(selector).on(event,childSelector,data,function,map)八哥总结说明：语法格式：$(selector).on(event,childselector,

14、data,function,map)selector:选择器。参数：。多个有空格分割。event:可以添加一个或者多个childselector:子选择器。规定只能到子元素的data:规定传递到函数的参数数据。function :自定义函数。处理。map:多个函数。第49程序员 web/php 学院3.4 jQuery delegate语法：$(selector).delegate(childSelector,event,data,function)selector:选择器。参数：childselector:子选择器。规定只能到子元素的处理。有空格分割。event:可以添加一个或者多个。多个d

15、ata:规定传递到函数的参数数据。function :自定义函数。第50程序员 web/php 学院3.5 jQuery hover规定当鼠标指针悬停在被选元素上时要运行的两个函hover()数。语法：$(selector).hover(inFunction,outFunction) 调用:$( selector ).hover( handlerIn, handlerOut )等同以下方式：$( selector ).mouseover( handlerIn ).mouseout( han dlerOut );第51程序员 web/php 学院在鼠标移动到选取的元素及其子元素上时触发只在鼠标移

16、动到选取的元素上时触发。mouseovermouseenter3.6 jQuery 自定义语法$(selector).trigger(event,param1,param2,.)trigger()的默认行为触发被选元素上指定的以及（比如表单提交）。第52程序员 web/php 学院3.7 jQuery change（仅适用于表单字段）。当元素的值改变时发生 change触发 change，或规定当发生 change时运行change()的函数。第53程序员 web/php 学院3.8event 对象的属性的类型type:第54程序员 web/php 学院target:哪个元素的(.nodeName)which:返回鼠标的按键或者是键盘的按键的值。第55程序员 web/php 学院data:当前执行的处理程序被绑定时传递到的可选数据。pageX:返回鼠标指针的位置，相对于文档的左边缘。pageY:返回鼠标指针的位置，相对于文档的上边缘。第56程序员 web/php 学院3.9