JQuery

选择器

id选择器

                <div id="notMe">  
                <p>id="notMe"</p></div>
                <div id="myDiv">id="myDiv"</div>jQuery  

代码: $("#myDiv");
用于查找id=myDiv的那个元素。

element

用于整个标签的查找》  
<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>  

$("div");所等到的结果是查找到所有的div元素

class

用于查找到所有class为什么的的元素

<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>  

查找方式：$(".myClass");
将会查找到所有的class=myClass的元素。注意是用的点

*

匹配所有元素多用于结合上下文来搜索。

HTML 代码:
<div>DIV</div>
<span>SPAN</span>
<p>P</p>  

查找方法：$("*")
则可以用于查找到所有的元素，可以用于到所有的元素设置统一的性质的时候用这个。。。

selector1

将每一个选择器匹配到的元素合并后一起返回。 你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。

HTML 代码:
<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>  

查找的用法是：$("div,span,p.myClass")
找到元素div span p标签下面的myclass。这样可以用一次返回所有的元素。。。中间是用的逗号隔开的，类似于元素的选择的用法

ancestor descendant

任何有效选择器，用以匹配元素的选择器，并且它是第一个选择器的后代元素

找到表单中所有的 input 元素

HTML 代码:
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

查找的写法是：$("form input")

则会查找到：
[ <input name="name" />, <input name="newsletter" /> ]

查到到所有form表单里面的input。查找父级元素下面的子集元素

parent > child

在给定的父元素下匹配所有的子元素
child：用以匹配元素的选择器，并且它是第一个选择器的子元素

HTML 代码:
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

查找的写法：$("form > input")
直接查找到form下面的input 这个标签：

结果:
[ <input name="name" /> ]

prev + next

匹配所有紧接在 prev 元素后的 next 元素
next：一个有效选择器并且紧接着第一个选择器

匹配所有跟在 label 后面的 input 元素

HTML 代码:
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

查找的写法：$("label + input")。
查找到label下面的input的元素。就是label紧跟着的下一个标签。。只会找到一个

结果:
[ <input name="name" />, <input name="newsletter" /> ]  

prev ~ siblings

匹配 prev 元素之后的所有 siblings 元素

siblings ：一个选择器，并且它作为第一个选择器的同辈

找到所有与表单同辈的 input 元素

HTML 代码:
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

查找方法：$("form ~ input")
找到的是和form平级的所有的input标签。。。****有多少个就会找到多少个。并且要是同级的标签。。。

结果:
[ <input name="none" /> ]  

first

获取第一个元素
获取匹配的第一个元素
获取匹配的第一个元素

HTML 代码:

• list item 1
• list item 2
• list item 3
• list item 4
• list item 5

查找的写法：$(‘li:first‘);
找到li标签里面的第一个元素
结果是找到:

• list item 1

eq

匹配一个给定索引值的元素
写法：元素 :eq(index)
例如：查找第二行 HTML 代码:

<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>  

查找写法：$("tr:eq(1)")

查找结果是：
<tr><td>Value 1</td></tr>   

查找到这个结果的原因是：调用了 eq（）这个方法是从0开始的计算的。 找到的是《tr》里面的《td》的第2个元素。于是查找到 Value 1

:gt(index)

匹配所有大于给定索引值的元素
index;里面的参数的一个 number。
例如： 查找第二第三行，即索引值是1和2，也就是比0大

HTML 代码:
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

写法：
jQuery 代码: $("tr:gt(0)")

查找到的结果是：  
[ <tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr> ]

查找这样结果的原因是：gt 是找到比填入的索引大的所有满足条件的元素。也是从0开始，这里填的的是gt(0)也就是找到比第一个(tr)大的所有的，也就是从第二个开始的都会被找到..

:lt(index)

匹配所有小于给定索引值的元素  
写法：查找第一第二行，即索引值是0和1，也就是比2小
HTML 代码:
<table>
  <tr><td>Header1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>  

jQuery 代码: $("tr:lt(2)")

查找到的结果:
[ <tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr> ]  

找到这样结果的原因是：当调用It的这个方法时，这个方法的索引也是从0开始的。当写入lt(2)时，查找到的是从开始0-1的所有的tr（tr在代码中的第1-2个）。

:animated

只有对不在执行动画效果的元素执行一个动画特效

HTML 代码:
<button id="run">Run</button><div></div>  

jQuery 代码:
$("#run").click(function(){
  $("div:not(:animated)").animate({ left: "+=20" }, 1000);
});  

代码的解析：给按钮一个点击事件，给没有动画效果的div添加上一个动画效果的，向左+20，在1秒钟内完成这个效果，
animate({ left: "+=20" }, 1000);这句代码的解析，animate添加一个动画，传入的参数用{}括号包起来，最后的1000是1000毫秒。

focus

触发每一个匹配元素的focus事件。
当页面加载后将 id 为 ‘login‘ 的元素设置焦点:

jQuery 代码:
$("#login:focus");  

自己的例子：

可以给一些input添加一些聚焦事件。  
例如：<input type="text" id="one">  

在jq的代码写法：

<script>
$("#one").focus(function(){
alert("已绑定一个聚焦事件")
})
</script>  

:hidden

匹配所有不可见元素，或者type为hidden的元素，可找出所有隐藏的元素
查找隐藏的 tr

HTML 代码:
<table>
  <tr style="display:none"><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>   

jQuery 代码:$("tr:hidden")

结果:
[ <tr style="display:none"><td>Value 1</td></tr> ]  

代码解析：tr:hidden，是查找在文件中被隐藏的tr元素。结果就会找到Value 1
也可以找到属性是hidden的元素。代码写法同上。

attribute

匹配包含给定属性的元素。注意，在jQuery 1.3中，前导的@符号已经被废除！如果想要兼容最新版本，只需要简单去掉@符号即可。
查找所有含有 id 属性的 div 元素

HTML 代码:
<div>
  <p>Hello!</p>
</div>
<div id="test2"></div> 

jQuery 代码:$("div[id]")

结果:
[ <div id="test2"></div> ]  

代码解析：$("div[id]")查找出div中含有id这个属性的。

attribute=value

匹配给定的属性是某个特定值的元素
value：元素中的属性。

查找所有 name 属性是 newsletter 的 input 元素
    HTML 代码:
    <input type="checkbox" name="newsletter" value="Hot Fuzz" />
    <input type="checkbox" name="newsletter" value="Cold Fusion" />
    <input type="checkbox" name="accept" value="Evil Plans" />

jQuery 代码: $("input[name=‘newsletter‘]").attr("checked", true);

结果:
[ <input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />, <input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" /> ]  

代码解析：$("input[name=‘newsletter‘]").attr("checked", true); 找出input中含有name属性=‘newsletter’的所有元素。

attribute!=value

匹配所有不含有指定的属性，或者属性不等于特定值的元素。

代码写法和上面一样

attribute^=value

匹配给定的属性是以某些值开始的元素

代码和上面一样

nth-child

述 匹配其父元素下的第N个子或奇偶元素 ‘:eq(index)‘ 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！

在每个 ul 查找第 2 个li
HTML 代码:
<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>

jQuery 代码: $("ul li:nth-child(2)")

结果：
[ <li>Karl</li>,   <li>Tane</li> ]  

代码解析：ul li:nth-child(2)，会查询到两个ul里面都有li的第二个，所以的到的结果是2个。

attr(name|properties|key,value|fn)

设置或返回被选元素的属性值。

nameV属性名称:图像的src属性值

properties作为属性的“名/值对”对象:为所有图像设置src和alt属性。

key,value 1:属性名称，属性值 key,function(index, attr) 2:返回属性值的函数,第一个参数为当前元素的索引值，第二个参数为原先的属性值。
注：传入一个参数是返回元素的属性质；两个参数是设置元素。

$("img").attr("src");这样的写法是查询元素的属性值。传入是的是src这一个参数。
$("img").attr({ src: "test.jpg", alt: "Test Image" });这样的写法是设置元素。 "test.jpg"可以传入路经，用于改变成另一张图片。
写法：$("Img").attr("src","../css/imge/3.jpg")
如果需要改变。背景图片可以用.css的方法
写法：$("Img").css("url","../css/imge/3.jpg")

removeAttr(name)

从每一个匹配的元素中删除一个属性

name要删除的属性名

将文档中图像的src属性删除

HTML 代码:
<img src="test.jpg"/>  

jQuery 代码:$("img").removeAttr("src"); 则删除图片中的src属性。

remove

删除那个节点。
例：$("img").remove()则删除了img这整个的节点。

prop

获取在匹配的元素集中的第一个元素的属性值。

写法：选中复选框为true，没选中为false
jQuery 代码:
$("input[type=‘checkbox‘]").prop("checked");参数properties 描述:
禁用页面上的所有复选框。

代码解析：在input中找到有type=chaeckbox的元素，调用Prop这个函数，将选中的设为真，可以和另外的属性一起用。prop（“ ”）括号里面的就是设为真的属性。

jQuery 代码:
$("input[type=‘checkbox‘]").prop({
  disabled: true
}); 

代码解析：在input框中将设置为真的所有的元素都设为无效（disabled，可将元素设为无效）

参数key,value 描述: 禁用和选中所有页面上的复选框。

jQuery 代码:
$("input[type=‘checkbox‘]").prop("disabled", false);
$("input[type=‘checkbox‘]").prop("checked", true);  

参数key,回调函数 描述: 通过函数来设置所有页面上的复选框被选中。

jQuery 代码: $("input[type=‘checkbox‘]").prop("checked", function( i, val ) { return !val; });

addClass(class|fn)

为每个匹配的元素添加指定的类名。添加class，并且可以设置这个添加上去的class

HTML 代码:
<ul>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
</ul>

jQuery 代码: $(‘ul li:last‘).addClass(function() { return ‘item-‘ + $(this).index(); });

代码解析：首先找到那个需要设置的元素写一个函数。return ‘item-‘ + $(this).index()返回的就是那个新添加上去的class名字,在这个函数里面就是。item-。 $(this).index()，这个是自动排序的函数，若不写就是你自己设置的那个名字,可写可不写。（个人建议写上）

html([val|fn])

相当于js当中的innerhtml。用法也相同。 写法：$("#one").html("设置的字体，内容")

text([val|fn])

取得所有匹配元素的内容。 结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
相当于js当中的innertext。用法也相同。 
写法：$("#one").text("设置的字体，内容")

val([val|fn|arr])

获得匹配元素的当前值。

相当于js当中的value。用法也相同。

写法：$("#one").val("得到的值，或是添加到什么地方")

一些个人觉得简单实用的筛选器总结.

map(callback)

将一组元素转换成其他数组（不论是否是元素数组）

把form中的每个input元素的值建立一个列表。
HTML 代码:
<p><b>Values: </b></p>
<form>
  <input type="text" name="name" value="John"/>
  <input type="text" name="password" value="password"/>
  <input type="text" name="url" value="http://ejohn.org/"/>
</form>

jQuery 代码:
$("p").append( $("input").map(function(){
  return $(this).val();
}).get().join(", ") );  

结果: [

John, password, http://ejohn.org/

slice(start, [end])

选取一个匹配的子集

start：开始选择的，从0开始
end：结束选择的位置。
选择第一个p元素

HTML 代码:
<p>Hello</p><p>cruel</p><p>World</p>

jQuery 代码:
$("p").slice(0, 1).wrapInner("<b></b>");

结果: [

Hello