jQuery选择器深度解析.doc

jQuery选择器2jQuery选择器的分类2基本选择器3Id选择器的特殊：只返回单个元素，这个由html的规定决定的。3class选择器4基本选择器的大例子4层次选择器7用空格分开的层次选择器的特点7+层次选择器8等价关系9层次选择器的大例子9过滤选择器12基本过滤13基本过滤的例子13内容过滤16内容过滤的例子16可见性过滤18可见性过滤的例子18属性过滤20属性过滤的例子20子元素过滤23子元素过滤23表单对象属性过滤26表单对象属性过滤例子26表单选择器29表单选择器的例子29jQuery的text和html的区别31js里面的innerText和innerHtml的区别32html的知识：文本框不能输入32html的知识：下拉列表的类型33视频问题34问题34问题1jQuery中基本选择器34问题2jQuery拥有这么多的选择器，该怎么进行选择？好像有些内容是重复的35jQuery选择器jQuery选择器的分类基本选择器$(“id”),根据id值找到匹配的元素，最多只返回一个元素(如果该元素存在)，如果不存在，则返回一个空的jQuery对象。$(“.class”)，根据css的class属性来返回一个集合，无论该css类是否真的存在，只要定义在元素中就能被jQuery查询到。Id选择器的特殊：只返回单个元素，这个由html的规定决定的。注意跟css的区别，css可以控制所有id相同的元素的样式jQuery1.html New Document $(document).ready(function()/结果是1，而不是2,有多个相同id的元素只返回单个元素alert($(#test1).length);alert($(#test1).text();alert($(#test1)0.href);); googleyahoo class选择器jQuery4.html New Document $(document).ready(function()/在这个html中没有class为test的css，但是jQuery并不关心是否存在相应的css，只关心元素是否有名为test的class修饰alert($(.test).length); /结果为2); googleyahoo 基本选择器的大例子jQuery5.html $(document).ready(function()$(#button1).click(function()/id选择器$(#one).css(background,red););$(#button2).click(function()/里面隐藏了循环/class选择器$(.mini).css(background,green););$(#button3).click(function()/里面隐藏了循环/标签选择器$(div).css(background,orange););$(#button4).click(function()/里面隐藏了循环/所有的元素$(*).css(background,blue););$(#button5).click(function()/里面隐藏了循环/组合$(span,#two,.mini).css(background,pink););); 基本选择器id为one，class为one的divclass为miniid为two，class为one,title为test的divclass为mini,title为otherclass为mini,title为testclass为miniclass为miniclass为miniclass为miniclass为miniclass为miniclass为mini,title为tesststyle的display为none的divclass为“hide”的div包含input的type为hidden的div style.cssdiv,span,pwidth:140px;height:140px;margin:5px;background:#aaa;border:#000 1px solid;float:left;font-size:17px;font-family:Verdana;div.miniwidth:55px;height:55px;background-color:#aaa;font-size:12px;div.hidedisplay:none;层次选择器用空格分开的层次选择器的特点jQuery6.html $(document).ready(function()$(div span).css(background,red);); 基本选择器 $(div span)这个选择器选择的是div下面的span，包括它下面直接的span还有下面其他标签里面的span 例如a链接里面的span这个是div下的span这个是a下的span +层次选择器上面解释了$(.one + div)会选中的元素是哪一些等价关系层次选择器的大例子 jQuery7.html $(document).ready(function()$(#button1).click(function()/body里面的所有div改变背景色 用单引号或者双引号都可以$(body div).css(background,red);/下面这个写法跟上面的写法是一样的，但是含义不一样，上面那个是选择body下面的所有div/$(div).css(background,red););$(#button2).click(function()/里面隐藏了循环/直接的子元素$(body div).css(background,blue););$(#button3).click(function()/里面隐藏了循环/class为one的下一个元素，在这个例子中由于很多的div的class都是one，所以它们的下一个被选中/总共选择了四个/这个$(.one + div返回的是一个集合，因为可能有很多class叫做one的元素/下面两句话是等价的/$(.one + div).css(background,green);$(.one).next(div).css(background,green););$(#button4).click(function()/里面隐藏了循环/#two后面的所有兄弟元素/$(#two div).css(background,orange);/等价写法$(#two).nextAll().css(background,orange););$(#button5).click(function()/里面隐藏了循环/查找同辈的div，没有上下顺序$(#two).siblings(div).css(background,orange););); 基本选择器id为one，class为one的divclass为miniid为two，class为one,title为test的divclass为mini,title为otherclass为mini,title为testclass为miniclass为miniclass为miniclass为miniclass为miniclass为miniclass为mini,title为tesststyle的display为none的divclass为“hide”的div包含input的type为hidden的div Style.cssdiv,span,pwidth:140px;height:140px;margin:5px;background:#aaa;border:#000 1px solid;float:left;font-size:17px;font-family:Verdana;div.miniwidth:55px;height:55px;background-color:#aaa;font-size:12px;div.hidedisplay:none;过滤选择器基本过滤基本过滤的例子jQuery8.html $(document).ready(function()$(#button1).click(function()/选择第一个div元素$(div:first).css(background,red););$(#button2).click(function()$(div:last).css(background,blue););/even odd包括隐藏和孙子元素的所有元素$(#button3).click(function()/even是偶数，从0开始$(div:even).css(background,green););$(#button4).click(function()/odd是奇数，从0开始$(div:odd).css(background,orange););$(#button5).click(function()/div等于3的元素，即第四个$(div:eq(3).css(background,pink););$(#button6).click(function()/div的class属性不为one的元素$(div:not(.one).css(background,yellow););$(#button7).click(function()/div大于3的元素$(div:gt(3).css(background,#abcdef););$(#button8).click(function()/div小于3的元素$(div:lt(3).css(background,#fedcba););$(#button9).click(function()/基本选择器$(:header).css(background,#fedcba););); 基本选择器id为one，class为one的divclass为miniid为two，class为one,title为test的divclass为mini,title为otherclass为mini,title为testclass为miniclass为miniclass为miniclass为miniclass为miniclass为miniclass为mini,title为tesststyle的display为none的divclass为“hide”的div包含input的type为hidden的div 内容过滤内容过滤的例子jQuery9.html /$(document).ready 等价于$().ready $(function()这个三个完全等价$(function()$(#button1).click(function()/注意“为”并没有加引号，这是1.8.0的特点，其他的版本可能需要加,当然加上去也行$(div:contains(为).css(background,red););$(#button2).click(function()/div不包含子元素和文本$(div:empty).css(background,green););$(#button3).click(function()/标签选择器$(div:has(.mini).css(background,blue););$(#button4).click(function()/具有子元素和文本$(div:parent).css(background,#abaaee););); 内容过滤选择器id为one，class为one的divclass为miniid为two，class为one,title为test的divclass为mini,title为otherclass为mini,title为testclass为miniclass为miniclass为miniclass为miniclass为miniclass为miniclass为mini,title为tesststyle的display为none的divclass为“hide”的div包含input的type为hidden的div 可见性过滤可见性过滤的例子jQuery10.html /$(document).ready 等价于$().ready $(function()这个三个完全等价$().ready(function()$(#button1).click(function()/不可见的body 结果是0alert($(body:hidden).length);alert($(div:hidden).length);alert($(input:hidden).length);/动画效果，参数是时间，多久显示出来 以毫秒为单位$(div:hidden).show(5000).css(background,blue););$(#button2).click(function()/div不包含子元素和文本$(div:visible).css(background,red););); 可见性过滤选择器id为one，class为one的divclass为miniid为two，class为one,title为test的divclass为mini,title为otherclass为mini,title为testclass为miniclass为miniclass为miniclass为miniclass为miniclass为miniclass为mini,title为tesststyle的display为none的divclass为“hide”的div包含input的type为hidden的div 属性过滤属性过滤的例子jQuery11.html /$(document).ready 等价于$().ready $(function()这个三个完全等价$().ready(function()$(#button1).click(function()/包含title属性的div$(divtitle).css(background,green);$(#button2).click(function()/属性title等于test的div$(divtitle=test).css(background,red););$(#button3).click(function()/属性title等于test的div$(divtitle!=test).css(background,pink););$(#button4).click(function()/属性title是以test开头的div$(divtitle=test).css(background,pink););$(#button5).click(function()/属性title是以st结尾的div$(divtitle$=test).css(background,pink););$(#button6).click(function()/属性title包含st的div$(divtitle*=st).css(background,pink););$(#button7).click(function()/有id属性title以t开头的div$(dividtitle=ttitle$=t).css(background,pink););); 属性过滤选择器id为one，class为one的divclass为miniid为two，class为one,title为test的divclass为mini,title为otherclass为mini,title为testclass为miniclass为miniclass为miniclass为miniclass为miniclass为miniclass为mini,title为tesststyle的display为none的divclass为