11Jquery笔记详细Word格式.docx

1、next（）; 这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素（可以使用nextAll）。 取得匹配元素前面紧邻的同辈元素的集合:prev（）; 取得匹配元素前后所有的同辈元素: siblings（）; 【关于select radio checkbox 选中的问题】 select - $（#one）.val（2号）; / -val（）下拉框的选中是选取文本值 /-记住：对于下拉框的选中是option:selected 或者是select option:selected下拉框是在select中加 onchange（） 事件 通过$（）.val（） 可以获取改变的值 /-记住：用v

2、al时，获取的是value属性的值，text（）获取的是文本值 checkbox -inputtype=checkbox）.val（check2,check4）; /-val（）多选框的选中是选取属性value的值（记住要加） /-在复选框中和单选按钮中 当判断是否选中时 一般先转为dom判断 $（domEle）0.checked 返回值是 true 或者 false radio -radioradio2 /-val（）单选框的选中是选取属性value的值（记住要加） / -val（）对于复选框和单选按钮，选取的是属性value的值 /-记住：text（）获取不到复选框和单选按钮的文本值 /记

3、住val（） 获得的就是一个字符串 不分jQuery和dom对象 【jQuery附加笔记:】jQeuery中的.代表class #代表id: 代表过滤器选择器$（） 等同于 jquery（） 也就是一个jquery的对象使用$（）,实际上，该函数省略了一个参数context，可以指定context为一个dom元素集或者jquery对象。那么依照，$（）返回的是一个jquery对象的这一结论，我们可以得出$（this）得到的是一个jQuery对象。在jQuery中，jQuery.表示全局函数在jQuery中，获取事件时，获得的是dom对象 即this表示的是dom对象在jQuery中，通过val

4、（）设置select,checkbox,radio被选中在jQuery中，jquery中退出用 return【比较jQuery 和dom】对于获取文本值的比较：jQuery是通过它的上一级获得$（）.text（）和设置的文本 而dom中是到文本这一节点后再通过nodeValue获得该文本值.jQuery删除元素是本身删除本身 而dom中是通过它的父节点删除自己 = 【 jQuery对象是一个数组对象】 为了简化 JavaScript 的开发, 一些 JavsScript 库诞生了. JavaScript 库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互的 Web2.0 特性的富

5、客户端页面, 并且兼容各大浏览器 当前流行的 JavaScript 库有: jQuery, MooTools, Prototype, Dojo, YUI, EXT_JS DWR 【www.open-】- 【一、jquery是什么】【jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是WRITE LESS,DO MORE,写更少的代码,做更多的事情。jQuery能够使用户的html页保持代码和htm

6、l内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。$（document）.ready（function（）/等待dom元素加载完毕,类似window.onload = function（）alert（您好,我是张三丰; ）;【二、什么是jQuery对象: jQuery 对象就是通过jQuery包装DOM对象后产生的对象。-1、DOM对象转成jQuery对象 var $id = document.getElementById（username）.value; alert（$id）;2、jQuery对象转DOM对象 两种转换方式将一个jQuery对象转换成DOM

7、对象：index和.get（index）; 2.1）数组 var id = $（#username）0; alert（id.value） 2.2）get（index） var id2 = $（）.get（0）; alert（id2.value）;*【三、jQuery 选择器】 选择器是jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器. jQuery 选择器的优点: 1、简洁的写法 2、完善的事件处理机制 $#id 等价于 document.getElementById（id 等价于 document.getElementsByTagN

8、ame（ -【一、基本选择器】 基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器。 它通过元素 id, class 和标签名来查找 DOM 元素（在网页中 id 只能使用一次, class 允许重复使用）.1、#id 用法: $（”#myDiv”）; 返回值 单个元素的组成的集合 说明: 这个就是直接选择html中的id=”myDiv”）.css（backgroundred2、Element 用法: $（”div”） 返回值 集合元素 element的英文翻译过来是”元素”,所以element其实就是html已经定义的标签元素,例如 div, input, a 等等.#323

9、3af3、class 用法: $（”.myClass”） 返回值 集合元素 这个标签是直接选择html代码中class=”myClass”的元素或元素组（因为在同一html页面中class是可以存在多个同样值的）.mini#2233324、* 用法: $（”*”） 返回值 集合元素 匹配所有元素,多用于结合上下文来搜索*#99933a5、selector1, selector2, selectorN 用法: $（”div,span,p.myClass”） 返回值 集合元素 将每一个选择器匹配到的元素合并后一起返回.你可以指定任意多个选择器, 并将匹配到的元素合并到一个结果内.其中p.myCla

10、ss是表示匹配元素p class=”myClass”#two,span#43342a-【二、层次选择器】如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器.1 、ancestor descendant 【/当用空格查找子元素时，获得的是该父元素下（不管多少级，只要是该父元素下就行）的所有该元素，不管在哪】 用法: $（”form input”） ; 返回值 集合元素 在给定的祖先元素下匹配所有后代元素.这个要和下面讲的”parent child”区分开.body div#ff99aa2、parent child 【/

11、当用获取子元素时，获取的只是该父元素下一级（限于一级中）中的该元素，只能在一级中】 $（”form input”） ; 在给定的父元素下匹配所有子元素.注意:要区分好后代元素与子元素 $（body#a9eeff3、prev + next 【 /该元素同级下（在该元素同级下面的）的第一个元素 不包括自己】 $（”label + input”） ; 匹配所有紧接在 prev 元素后的 next 元素#one+div#affbbb4、prev siblings 【/该元素同级下（在该元素同级下面的）的所有元素 不包括自己】 $（”form input”） ; 匹配 prev 元素之后的所有 sibl

12、ings 元素.注意:是匹配之后的元素,不包含该元素在内,并且siblings匹配的是和prev同辈的元素,其后辈元素不被匹配. 注意: （“prev div”） 选择器只能选择 “# prev ” 元素后面的同辈元素; 而 jQuery 中的方法 siblings（） 与前后位置无关, 只要是同辈节点就可以选取#twodiv#aaeeff5、prev.siblings（） 【/该元素同级中的所有元素（包括它上面同级的） 不包括自己】 注意在siblings（）括号中引入另一个选择器时不需要加$ 取该元素同级中的所有元素 返回值 集合元素 改变 id 为 two 的元素所有 兄弟元素的背景色为

13、 #0000FF id=b5#two）.siblings（#ff6eff【三、过滤选择器】 主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头 按照不同的过滤规则, 过滤选择器可以分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器.【A.基础过滤选择器】1、:first 【 /通过该元素获得元素数组后 找到该元素数组中第一个元素】div:first#eeff00 $（”tr:first”） ; 匹配找到的第一个元素2、:last 【/通过该元素获得元素数组后 找到该元素数组中最后一个元素】last#ccdd99last”）

14、返回值 集合元素 匹配找到的最后一个元素.与 :first 相对应.3、:not（selector） 【/通过该元素找到元素数组后 再找到另一个选择器所控制的元素】 【/然后加:not找不为后一个选择器所控制的元素】 【/注意，后一个选择器不必写not（.one）#ccdd11 $（”input:not（:checked）”）返回值 集合元素 去除所有与给定选择器匹配的元素.有点类似于”非”,意思是没有被选中的input（当input的type=”checkbox”）.4、:even 【/通过该元素找到元素数组后 找到索引值为偶数的元素（索引是从0开始）】even#ccff99even”） 返

15、回值 集合元素 匹配所有索引值为偶数的元素，从 0 开始计数.js的数组都是从0开始计数的. 例如要选择table中的行,因为是从0开始计数,所以table中的第一个tr就为偶数0.5、: odd 【/通过该元素找到元素数组后 找到索引值为奇数的元素（索引是从0开始）】odd#dd5511 用法:odd”） 返回值 集合元素 匹配所有索引值为奇数的元素,和:even对应,从 0 开始计数.6、:eq（index） 【/通过该元素获得元素数组后 查找索引为index的值】eq（3）#ffbbcceq（0）”） 返回值 集合元素 匹配一个给定索引值的元素.eq（0）就是获取第一个tr元素.括号里面

16、的是索引值,不是元素排列数.7、:gt（index） 【/通过该元素获得元素数组后 查找索引为index后的值】gt（3）#ddffe1gt（0）”） 返回值 集合元素 匹配所有大于给定索引值的元素.8、:lt（index） 【/通过该元素获得元素数组后 查找索引为index前的值】lt（3）#ff9911lt（2）”） 返回值 集合元素 匹配所有小于给定索引值的元素.9、:header（固定写法）header#dd11ff $（”:header”）.css（”background”, “#EEE”） 返回值 集合元素 匹配如 h1, h2, h3之类的标题元素.这个是专门用来获取h1,h2这

17、样的标题元素.10、:animated（固定写法） animated 匹配所有正在执行动画效果的元素 附注：通过高度变化来切换所有匹配元素的可见性（文本值高度变化）function ca（）#mover）.slideToggle（slow,ca）; ca（）;【B.内容过滤选择器】 内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上.contains（text） 【/表示获取的jQuery对象中 包含指定文本内容的 所有匹配元素的集合】contains（di）#1199ff $（”div:contains（John）”） 返回值 集合元素 匹配包含给定文本的元素.这个选择器比较有用

18、，当我们要选择的不是dom标签元素时,它就派上了用场了, 它的作用是查找被标签”围”起来的文本内容是否符合指定的内容的.empty 【/表示获取的jQuery对象中 指定文本内容为空的 所有匹配元素的集合】empty（div $（”td:empty”） 返回值 集合元素 匹配所有不包含子元素或者文本的空元素has（selector） 【/has（css选择器）表示获取的jQuery对象中 包含有参数的 所有匹配的元素集合】 【/注：这里的has（）中包含的css选择器只限于标签选择器，而不包含ID选择器和class选择器】div.has（p）.addClass（test） 结果：p./divhas（p）”）.addClass（”test”） 返回值 集合元素 匹配含有选择器所匹配的元素的元素.这个解释需要好好琢磨,但是一旦看了使用的例子就完全清楚了:给所有包含p元素的div标签加上class=”test”.parent 【/匹配含有子元素和文本的 元素集合（即包括文本或者 子元素）】parentparent”） 返回值 集合元素 匹配含有子元素或者文本的元素.注意:这里是”:parent”,可不是”.parent”哦!感觉与上面讲的”:empty”形成反义词.contains（text） 【 匹配不包含给定文本的元素】 改变不含有文本 di; 的 div 元素的背景色）bac