核心
- 找到所有p元素,并且这些元素都为div元素的子元素1$("div>p")
设置页面背景
1$(document.body).css("background":"red")隐藏一个表单中所有元素
1$(myForm.elements).hide()在文档的第一个表单中,查找所有单选按钮(即:type值为radio的input元素)
1$("input:radio",document.forms[0])在一个ajax返回的xml文档中,查找所有div元素
1$("div",xml.responseXML)动态创建一个 div 元素(以及其中的所有内容),并将它追加到 body 元素中。在这个函数的内部,是通过临时创建一个元素,并将这个元素的 innerHTML 属性设置为给定的标记字符串,来实现标记到 DOM 元素转换的。所以,这个函数既有灵活性,也有局限性。
选择器
#id id选择器
12345678查找 ID 为"myDiv"的元素:$("#myDiv");得到的结果:[ <div id="myDiv">id="myDiv"</div> ]查找含有特殊字符的元素:$("#foo\\[bar\\]")得到的结果:[ <span id="foo[bar]"></span>]$("#foo\\.bar")得到的结果:[ <span id="foo.bar"></span>]element 元素选择器
12$("div");得到的结果:[ <div>DIV1</div>, <div>DIV2</div> ].class 类选择器
12$(".myClass");得到的结果:[ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]*通配符选择器 得到所有的标签元素
12$("*");得到的结果:[ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ]parent > child,在给定的父元素下匹配所有的子元素;
123parent可以为任何有效选择器,child用以匹配元素的选择器,并且它是第一个选择器的子元素得到的结果只能是form选择器的子元素,同一级的元素和孙子级的都得不到[ <input name="name" /> ]
|
|
- prev + next,匹配所有紧接在 prev 元素后的 next 元素;12345678910111213prev任何有效选择器,next匹配一个选择器,并且紧接着第一个选择器<!--<form><label>Name:</label><input name="name" /><fieldset><label>Newsletter:</label><input name="newsletter" /></fieldset></form><input name="none" />-->得到的结果:[ <input name="name" />, <input name="newsletter" /> ]
|
|
- prev ~ siblings,匹配 prev 元素之后的所有 siblings 元素;123prev为任何有效元素,siblings为一个选择器,并且是第一个选择器的同辈得到的结果:[ <input name="none" /> ]
|
|
:first获取匹配的第一个元素
12$("li:first");得到的结果:[ <li>list item 1</li> ]:not(selector)去除所有与给定选择器匹配的元素
123456<!--<input name="apple" /><input name="flower" checked="checked" />-->$("input:not(:checked)")查找所有未选中的 input 元素得到的结果:[ <input name="apple" /> ]:even匹配所有索引值为偶数的元素,从0开始计数
12$("tr:even")得到的结果:[ <tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr> ]:odd匹配所有索引值为奇数的元素,从0开始计数
12$("tr:odd");得到的结果:[ <tr><td>Value 1</td></tr> ]:eq(index)匹配一个给定索引值的元素,index从0开始计数
12$("tr:eq(1)")得到的结果:[ <tr><td>Value 1</td></tr> ]:gt(index)匹配所有大于给定索引值的元素,index从0开始计数
12$("tr:gt(0)")得到的结果:[ <tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr> ]:last获取匹配的最后一个元素
12$("tr:last")得到的结果:[ <li>list item 5</li> ]:lt(index)获取所有小于给定索引值的元素
12$("tr:lt(2)")获取到的结果:[ <tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr> ]:header 匹配如:h1,h2,h3之类的标题元素
12$(":header").css("background","#EEE")得到的结果:[ <h1 style="background:#EEE;">Header 1</h1>, <h2 style="background:#EEE;">Header 2</h2> ]:animated匹配所有正在执行动画效果的元素
123$("#run").click(function(){$("div:not(:animated)").animate({left:"+=20"},1000);})如果不确定返回的数据是jq对象还是js元素,可以alert一下,看返回的是object还是element,如果是object为jq元素,如果为element为js元素