JQuery自己总结.docx

1、JQuery自己总结选择器： 41. 基础选择器 Basics 5选择器：$(id名)：返回一个dom对象；等同于：document.getElementById(id名);/根据ID获取jQuery包装集 var jQueryObject= $(#testDiv);/$是jQuery对象的引用: var jQueryObject= jQuery(#testDiv);1. 基础选择器 Basics名称说明举例#id根据元素Id选择$(divId) 选择ID为divId的元素element根据元素的名称选择,$(a) 选择所有.class根据元素的css类选择$(.bgRed) 选择所用CSS类

2、为bgRed的元素*选择所有元素$(*)选择页面所有元素selector1, selector2, selectorN可以将几个选择器用,分隔开然后再拼成一个选择器字符串.会同时选中这几个选择器匹配的内容.$(#divId, a, .bgRed)2.层次选择器 Hierarchy名称说明举例ancestor descendant使用form input的形式选中form中的所有input元素.即ancestor(祖先)为from, descendant(子孙)为input.$(.bgRed div) 选择CSS类为bgRed的元素中的所有 元素.parent child选择parent的直接子

3、节点child. child必须包含在parent中并且父类是parent元素.$(.myListli) 选择CSS类为myList元素中的直接子节点 对象.prev + nextprev和next是两个同级别的元素. 选中在prev元素后面的next元素.$(#hibiscus+img)选在id为hibiscus元素后面的img对象.prev siblings 选择prev后面的根据siblings过滤的元素注:siblings是过滤器$(#someDivtitle)选择id为someDiv的对象后面所有带有title属性的元素 3.基本过滤器 Basic Filters名称说明举例:fir

4、st匹配找到的第一个元素查找表格的第一行:$(tr:first):last匹配找到的最后一个元素查找表格的最后一行:$(tr:last):not(selector)去除所有与给定选择器匹配的元素查找所有未选中的 input 元素: $(input:not(:checked):even匹配所有索引值为偶数的元素，从 0 开始计数查找表格的1、3、5.行:$(tr:even):odd匹配所有索引值为奇数的元素，从 0 开始计数查找表格的2、4、6行:$(tr:odd):eq(index)匹配一个给定索引值的元素注:index从 0 开始计数查找第二行:$(tr:eq(1):gt(index)匹配所

5、有大于给定索引值的元素注:index从 0 开始计数查找第二第三行，即索引值是1和2，也就是比0大:$(tr:gt(0):lt(index)选择结果集中索引小于 N 的 elements注:index从 0 开始计数查找第一第二行，即索引值是0和1，也就是比2小:$(tr:lt(2):header选择所有h1,h2,h3一类的header标签.给页面内所有标题加上背景色: $(:header).css(background, #EEE);:animated匹配所有正在执行动画效果的元素只有对不在执行动画效果的元素执行一个动画特效: $(#run).click(function() $(div:

6、not(:animated).animate( left: +=20 , 1000);); 4. 内容过滤器 Content Filters名称说明举例:contains(text)匹配包含给定文本的元素查找所有包含 John 的 div 元素:$(div:contains(John):empty匹配所有不包含子元素或者文本的空元素查找所有不包含子元素或者文本的空元素:$(td:empty):has(selector)匹配含有选择器所匹配的元素的元素给所有包含 p 元素的 div 元素添加一个 text 类: $(div:has(p).addClass(test);:parent匹配含有子元素

7、或者文本的元素查找所有含有子元素或者文本的 td 元素:$(td:parent) 5.可见性过滤器 Visibility Filters名称说明举例:hidden匹配所有的不可见元素注:在1.3.2版本中, hidden匹配自身或者父类在文档中不占用空间的元素.如果使用CSS visibility属性让其不显示但是占位,则不输入hidden.查找所有不可见的 tr 元素:$(tr:hidden):visible匹配所有的可见元素查找所有可见的 tr 元素:$(tr:visible)6.属性过滤器 Attribute Filters名称说明举例attribute匹配包含给定属性的元素查找所有含有

8、 id 属性的 div 元素:$(divid)attribute=value匹配给定的属性是某个特定值的元素查找所有 name 属性是 newsletter 的 input 元素:$(inputname=newsletter).attr(checked, true);attribute!=value匹配给定的属性是不包含某个特定值的元素查找所有 name 属性不是 newsletter 的 input 元素:$(inputname!=newsletter).attr(checked, true);attribute=value匹配给定的属性是以某些值开始的元素$(inputname=news)

9、attribute$=value匹配给定的属性是以某些值结尾的元素查找所有 name 以 letter 结尾的 input 元素:$(inputname$=letter)attribute*=value匹配给定的属性是以包含某些值的元素查找所有 name 包含 man 的 input 元素:$(inputname*=man)attributeFilter1attributeFilter2attributeFilterN复合属性选择器，需要同时满足多个条件时使用。找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的:$(inputidname$=man)7.子元素过滤器 Chi

10、ld Filters名称说明举例:nth-child(index/even/odd/equation)匹配其父元素下的第N个子或奇偶元素:eq(index) 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！可以使用:nth-child(even):nth-child(odd):nth-child(3n):nth-child(2):nth-child(3n+1):nth-child(3n+2)在每个 ul 查找第 2 个li:$(ul li:nth-child(2):first-child匹配第一个子元素:first 只匹配一个元素，而

11、此选择符将为每个父元素匹配一个子元素在每个 ul 中查找第一个 li:$(ul li:first-child):last-child匹配最后一个子元素:last只匹配一个元素，而此选择符将为每个父元素匹配一个子元素在每个 ul 中查找最后一个 li:$(ul li:last-child):only-child如果某个元素是父元素中唯一的子元素，那将会被匹配如果父元素中含有其他元素，那将不会被匹配。在 ul 中查找是唯一子元素的 li:$(ul li:only-child)8.表单选择器 Forms名称说明解释:input匹配所有 input, textarea, select 和 button

12、 元素查找所有的input元素:$(:input):text匹配所有的文本框查找所有文本框:$(:text):password匹配所有密码框查找所有密码框:$(:password):radio匹配所有单选按钮查找所有单选按钮:checkbox匹配所有复选框查找所有复选框:$(:checkbox):submit匹配所有提交按钮查找所有提交按钮:$(:submit):image匹配所有图像域匹配所有图像域:$(:image):reset匹配所有重置按钮查找所有重置按钮:$(:reset):button匹配所有按钮查找所有按钮:$(:button):file匹配所有文件域查找所有文件域:$(:fil

13、e)9.表单过滤器 Form Filters名称说明解释:enabled匹配所有可用元素查找所有可用的input元素:$(input:enabled):disabled匹配所有不可用元素查找所有不可用的input元素:$(input:disabled):checked匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)查找所有选中的复选框元素:$(input:checked):selected匹配所有选中的option元素查找所有选中的选项元素:$(select option:selected) Js和jquery函数增删节点：使用dom添加节点：var selec

14、t= document.createElement(select); select.options0= new Option(加载项1,value1); select.options1= new Option(加载项2,value2); select.size= 2;var object= testDiv.appendChild(select);使用innerHTML添加节点：document.getElementById(testDiv).innerHTML= 动态创建的div;jQuery内部使用document.createElement创建元素:$().css(border,solid

15、 1px #FF0000).html(动态创建的div).appendTo(testDiv);jQuery内部使用innerHTML创建元素:$(动态创建的div).appendTo(testDiv)jQuery 使用动态创建的$(document).ready(function)方法$(document).ready(function() testDiv.innerHTML= 使用动态创建的$(document).ready(function)方法; 或者使用简便语法:/jQuery 使用$(function)方法$(function() testDiv.innerHTML+= 使用$(fu

16、nction)方法; );使用jQuery操作元素的属性与样式操作元素属性名称说明举例attr( name )取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined 。返回文档中第一个图像的src属性值:$(img).attr(src);attr( properties )将一个“名/值”形式的对象设置为所有匹配元素的属性。这是一种在所有匹配元素中批量设置很多属性的最佳方式。 注意，如果你要设置对象的class属性，你必须使用className 作为属性名。或者你可以直接使用.addClass( class ) 和

17、 .removeClass( class ).为所有图像设置src和alt属性:$(img).attr( src: test.jpg, alt: Test Image );attr( key, value )为所有匹配的元素设置一个属性值。为所有图像设置src属性:$(img).attr(src,test.jpg);attr( key, fn )为所有匹配的元素设置一个计算的属性值。不提供值，而是提供一个函数，由这个函数计算的值作为属性值。把src属性的值设置为title属性的值:$(img).attr(title, function() return this.src );removeAtt

18、r( name )从每一个匹配的元素中删除一个属性将文档中图像的src属性删除:$(img).removeAttr(src);1. 修改CSS类名称说明实例addClass( classes )为每个匹配的元素添加指定的类名。为匹配的元素加上 selected 类:$(p).addClass(selected);hasClass( class )判断包装集中是否至少有一个元素应用了指定的CSS类$(p).hasClass(selected);removeClass( classes )从所有匹配的元素中删除全部或者指定的类。从匹配的元素中删除 selected 类:$(p).removeCla

19、ss(selected);toggleClass( class )如果存在（不存在）就删除（添加）一个类。为匹配的元素切换 selected 类:$(p).toggleClass(selected);toggleClass( class, switch )当switch是true时添加类,当switch是false时删除类每三次点击切换高亮样式:var count = 0;$(p).click(function() $(this).toggleClass(highlight, count+ % 3 = 0););注意 addClass( class ) 和removeClass( classe

20、s ) 的参数可以一次传入多个css类, 用空格分割,比如:$(#btnAdd).bind(click,function(event) $(p).addClass(colorRed borderBlue); );removeClass方法的参数可选, 如果不传入参数则移除全部CSS类:$(p).removeClass()2. 修改CSS样式名称说明实例css( name )访问第一个匹配元素的样式属性。取得第一个段落的color样式属性的值:$(p).css(color);css( properties )把一个“名/值对”对象设置为所有匹配元素的样式属性。这是一种在所有匹配的元素上设置大量样

21、式属性的最佳方式。将所有段落的字体颜色设为红色并且背景为蓝色:$(p).css( color: #ff0011, background: blue ); css( name, value )在所有匹配的元素中，设置一个样式属性的值。数字将自动转化为像素值将所有段落字体设为红色:$(p).css(color,red);3.宽和高相关 Height and Width名称说明举例height( )取得第一个匹配元素当前计算的高度值（px）。获取第一段的高:$(p).height();height( val )为每个匹配的元素设置CSS高度(hidth)属性的值。如果没有明确指定单位（如：em或%）

22、，使用px。把所有段落的高设为 20:$(p).height(20);width( )取得第一个匹配元素当前计算的宽度值（px）。获取第一段的宽:$(p).width();width( val )为每个匹配的元素设置CSS宽度(width)属性的值。如果没有明确指定单位（如：em或%），使用px。将所有段落的宽设为 20:$(p).width(20);innerHeight( )获取第一个匹配元素内部区域高度（包括补白、不包括边框）。此方法对可见和隐藏元素均有效。见最后示例innerWidth( )获取第一个匹配元素内部区域宽度（包括补白、不包括边框）。此方法对可见和隐藏元素均有效。见最后示例

23、outerHeight( margin )获取第一个匹配元素外部高度（默认包括补白和边框）。此方法对可见和隐藏元素均有效。见最后示例outerWidth( margin )获取第一个匹配元素外部宽度（默认包括补白和边框）。此方法对可见和隐藏元素均有效。见最后示例4.位置相关 Positioning名称说明举例offset( )获取匹配元素在当前窗口的相对偏移。返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效。获取第二段的偏移:var p = $(p:last); var offset = p.offset(); p.html( left: + offset.left +

24、 , top: + offset.top );position( )获取匹配元素相对父元素的偏移。返回的对象包含两个整形属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。获取第一段的偏移:var p = $(p:first); var position = p.position(); $(p:last).html( left: + position.left + , top: + position.top );scrollTop( )获取匹配元素相对滚动条顶部的偏移。此方法对可见和隐藏元素均有效。获取第一段相对滚动条顶部的偏移:var

25、p = $(p:first); $(p:last).text( scrollTop: + p.scrollTop() );scrollTop( val )传递参数值时，设置垂直滚动条顶部偏移为该值。此方法对可见和隐藏元素均有效。设定垂直滚动条值:$(div.demo).scrollTop(300);scrollLeft( )获取匹配元素相对滚动条左侧的偏移。此方法对可见和隐藏元素均有效。获取第一段相对滚动条左侧的偏移:var p = $(p:first); $(p:last).text( scrollLeft: + p.scrollLeft() );scrollLeft( val )传递参数值

26、时，设置水平滚动条左侧偏移为该值。此方法对可见和隐藏元素均有效。设置相对滚动条左侧的偏移:$(div.demo).scrollLeft(300);jQuery 事件与事件对象document.getElementById(testDiv2).onclick = showMsg;等效于: 单击事件 1注意两者的区别了吗? 我们常用的修改元素属性添加事件的方式, 实际上是建立了一个匿名函数:document.getElementById(testDiv1).onclick= function(event) alert(!);这种方式的弊端是:1. 只能为一个事件绑定一个事件处理函数. 使用=赋值会

27、把前面为此时间绑定的所有事件处理函数冲掉.2. 在事件函数(无论是匿名函数还是绑定的函数)中获取事件对象的方式在不同浏览器中要特殊处理:IE中,事件对象是window对象的一个属性.事件处理函数必须这样访问事件对象:obj.onclick=function()var oEvent= window.event;在DOM标准中,事件对象必须作为唯一参数传给事件处理函数: obj.onclick=function() var oEvent= arguments0; 除了使用argument0访问此参数, 我们也可以指定参数名称,上面的代码等同于: obj.onclick=function(oEven

28、t) 目前兼容DOM的浏览器有Firefox,Safari,Opera,IE7等.3. 添加多播委托的函数在不同浏览器中是不一样的.下面是在Javascript公共脚本库系列(二): 添加事件多播委托的方法文章中, 提供的兼容多浏览器添加多播委托的方法:/统一的为对象添加多播事件委托的方法/* 参数说明: oTarget : 要添加事件的对象.比如document. sEventType : 事件类型.比如单击事件click. fnHandler : 发生事件时调用的方法. 比如一个静态函数hideCalendarScriptHelper.addEventListener方法 使用举例: /单击页面的任何元素,只要没有取消冒泡,都可以关闭日历控件 var cf = document.getElementById(CalFrame); if( cf != null & h