《JQuery基础教程.doc》由会员分享，可在线阅读，更多相关《JQuery基础教程.doc（9页珍藏版）》请在金锄头文库上搜索。
1、JQuery基础教程一、选择器1.$(div:animated)选择一个动态的DIV2.$(ul.nav li:eq(1)遍历类为.nav的ul中的li，选择第二个li(注意：如果有多个.navd)，“:eq()”是一个jQuery延伸并且不是的CSS规范的一部分, 使用:eq()查询不能充分利用原生DOM提供的querySelectorAll() 方法来提高性能。为了在现代浏览器上获得更佳的性能，请使用纯CSS选择器选择元素然后.eq(index)来代替。2.$(ul.nav li:nth-child(2)与上面不同的是遍历所有类为.nav的ul中的li，选择第二个li3.$(tr:even
2、)查找表格中索引值是偶数的行(即实际表格中的奇数行)，即匹配第一行、第三行、第五行等 (索引值是 0, 2 ,4 等 )。:even 是一个 jQuery 延伸出来的选择器， 并不是的CSS规范的一部分，使用:even 查询不能充分利用原生DOM提供的querySelectorAll() 方法来提高性能。为了当使用:even 的时候在现代浏览器上获得更佳的性能， 首先使用纯CSS选择器选择元素，然后使用.filter(:even).相反的$( :odd )选择的是奇数行4.$(:header)选择所有标题元素，像h1, h2, h3 等.:header() 是一个 jQuery 延伸出来的一个
3、选择器 并且不是的CSS规范的一部分, 使用:header()查询不能充分利用原生DOM提供的querySelectorAll() 方法来提高性能。为了在现代浏览器上获得更佳的性能，请使用.filter(:header) 代替。5.$(:target)如果文档的URI包含一个格式化的标识符，或hash（哈希）， 然后:target选择器将匹配ID和标识符相匹配的元素。 例如，给定的URI http:/ $( p:target )，将选择元素。6.$(:parent)查找含有子元素的 td 元素，包括含有文本的 td。:parent 是一个 jQuery 延伸出来的选择器，并不是的CSS规范的一
4、部分， 使用:parent 查询不能充分利用原生DOM提供的querySelectorAll() 方法来提高性能。为了当使用:parent 的时候在现代浏览器上获得更佳的性能， 首先使用纯CSS选择器选择元素，然后使用.filter(:parent)。:parent和 :empty相反。7.$(attribute$=value)选择指定属性是以给定值结尾的元素。这个比较是区分大小写的.8.$(attribute=value)选择指定属性用空格分隔的值中包含一个给定值的元素.9.$(attribute*=value)选择指定属性具有包含一个给定的子字符串的元素。（选择给定的属性是以包含某些值的元
5、素）。10.$(attribute|=value)选择指定属性值等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符“-” ）的元素。11.$(attribute!=value)选择不存在指定属性，或者指定的属性值不等于给定值的元素。12.$(attribute=value)选择指定属性是以给定字符串开始的元素13.$(ul li)选择给定的祖先元素的所有后代元素14.$(div span:first-child)选择给定的父级元素下的第一个子元素。二、属性/CSS1.$(#id).prop(disabled, true); 获取匹配的元素集中第一个元素的属性（property）值或设置每
6、一个匹配元素的一个或多个属性。2.offset()匹配的元素集合中，获取的第一个元素的当前坐标，坐标相对于文档。若元素的属性设置的是 visibility:hidden，那么我们依然可以取得它的坐标。 但是若设置的属性是 display:none，由于在绘制 DOM 树时根本就不绘制该元素，所以它的位置属性值是 undefined3. .offsetParent()方法允许我们搜索DOM树里面该元素的祖先元素，然后构建一个新的jQuery对象，该jQuery对象包着最近的被定过位的祖先元素。 一个元素被定位的意思是该元素包含一个位置属性relative, absolute, 或者 fixed.
7、 4.position()获取匹配元素中第一个元素的当前坐标，相对于offset parent的坐标。( 译者注：offset parent指离该元素最近的而且被定位过的祖先元素 )三、操作1.wrap()函数可以接受任何字符串或对象即.wrap()或者.wrap( function(index) ) 在每个匹配的元素外层包上一个html元素；2.wrapAll()函数可以接受任何字符串或对象， 所有匹配元素将会被当作是一个整体，在这个整体的外部用指定的 HTML 结构进行包裹；3.wrapInner()函数可以接受任何字符串或对象 ，在匹配元素里的内容外包一层结构；4.clone()深度 复
8、制所有匹配的元素，用.clone()可能产生id属性重复的元素的副作用，id应该是唯一的。在可能的情况下， 建议，应避免克隆有此属性或标识符的元素，使用类（class）属性代替5.detach() 方法和.remove()一样, 除了 .detach()保存所有jQuery数据和被移走的元素相关联。当需要移走一个元素，不久又将该元素插入DOM时，这种方法很有用；6.unwrap()这个方法不接受任何参数。将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置，与wrapped（）相反。7.replaceAll() 与 .replaceWith()功能一样，但是目标和源相反。
9、 用集合的匹配元素替换每个目标元素 eg: $(New heading).replaceAll(.inner); $(.inner).replaceWith(New heading);四、遍历、事件、效果1.is()判断当前匹配的元素集合中的元素，是否为一个选择器，DOM元素，或者jQuery对象，如果这些元素至少一个匹配给定的参数，那么返回true。2.map()通过一个函数匹配当前集合中的每个元素,产生一个包含新的jQuery对象,由于返回值是一个jQuery包裹的数组，所以通常会使用get()方法将其转换成普通的数组, 特别适用于获取或设置元素集合中的值.用法$(:checkbox).m
10、ap(function()return this.name;).get().join();3.add()添加元素到匹配的元素集合。通过传递这些元素组合到该方法构造一个新的jQuery对象， 如：$(li).add(p).css(background-color, red); 相当于 $(li,p).css(background-color, red);4.andSelf()添加先前的堆栈元素集合到当前组合。此函数已过时，现在是.addBack()的一个别名。在jQuery1.8和更高版本中应使用.addBack()。 如：$(li.third-item).nextAll().andSelf()
11、.css(background-color, red);5.closest()开始于当前元素,在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素,返回包含零个或一个元素的jQuery对象 .parents()开始于父元素,向上遍历DOM树到文档的根元素，每个祖先元素加入到临时集合，如果提供一个选择器，则会使用该选择器在集合中进行过滤,返回包含零个，一个或多个元素的jQuery对象.6.find()通过一个选择器，jQuery对象，或元素过滤，得到当前匹配的元素集合中每个元素的后代.如：$(li.item-ii).find(li).css(background-color, red);7
12、.slice( start , end )根据指定的下标范围(从0开始),过滤匹配的元素集合,并生成一个新的 jQuery 对象.如：$(li).slice(2, 4).css(background-color, red);8.next()取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。如果提供一个选择器，那么只有紧跟着的兄弟元素满足选择器时，才会返回此元素。9.nextAll()获得每个匹配元素集合中所有下面的同辈元素，选择性筛选的选择器。10.siblings()获得匹配元素集合中每个元素的兄弟元素,可以提供一个可选的选择器。如：$(li.third-item).sibling
13、s().css(background-color, red);11.$(window).width()查看浏览器窗口的可视宽度：12.$(window).resize(function()）监控浏览器窗口大小是否改变。13.从jQuery 1.7开始，.on() 方法是将事件处理程序绑定到文档（document）的首选方法。对于早期版本，.bind()方法用于直接附加一个事件处理程序到元素上。 处理程序附加到jQuery对象中当前选中的元素，所以，在.bind()绑定事件的时候，这些元素必须已经存在。14.index() 方法返回指定元素相对于其他指定元素的 index 位置。这些元素可通过
14、jQuery 选择器或 DOM 元素来指定。注释：如果未找到元素，index() 将返回 -1。 $(div).index(this);获得元素相对于选择器的 index 位置。5.parseInt(param, 10) 把字符串转化为数字，第二个参数为转换成数字的进制数；16.triggerHandler()方法的行为与 .trigger() 相似，不同之处有如下几点： a.triggerHandler() 方法并不会触发事件的默认行为。(例如，表单提交)。 b.使用 .triggerHandler() 创建的事件，并不会在 DOM 树中向上冒泡。如果事件没有被目标元素直接处理，那么它就不会进行任何处理。 c.与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反，.triggerHandler() 返回最后一个处理的事件的返回值。如果没有触发任何事件，会返回 undefined。 17.focusin() 事件会在元素（或者其内部的任何元素）获得焦点时触发。这跟 focus 事件的显著区别在于，它可以在父元素上检测子元素获得焦点的情况(换而言之，它支持事件冒泡)。18.focusout() 事件会在元素（或者其内部的任何元素）失去焦点时触发。这跟 blur 事件的显著区别在于，它可以在父元素上检测子元素失去焦点的情况(换而言之，它支持事件冒泡)。19.h
