标签：
jQuery 是一个 JavaScript 库。极大地简化了 JavaScript 编程,很容易学习。
jQuery 是一个 JavaScript 函数库。
jQuery 库包含以下特性：
一 ，寻找元素(重要的选择器和筛选器)
基本语法：$(selector).action()
（一）,选择器：
1.1基本选择器： $("*") $("#id") $(".class") $("element") $(".class,p,div")
$("#id") 根据id寻找元素：
<div id="xxx">sasd <p>sss</p> <a class="ca">拜拜</a> </div> <div class="c1">qqqq <span id="c3">牛逼1</span> <span id="c4">牛逼1</span> <span id="c5">牛逼1</span> </div> <script src="jquery-1.12.4.js"></script> <script> $("#xxx").css("color","red").text(‘123434‘); $("#c3").css("color","red").text(‘怂逼1‘); </script>
$("element") 根据标签寻找元素
<div id="xxx">sasd <p>sss</p> <a class="ca">拜拜</a> </div> <script src="jquery-1.12.4.js"></script> <script> $("p").css("color","#666").text("ddd"); </script> 结果： <p>ddd</p>
$(".class") 根据类名寻找元素
<div id="xxx">sasd <p>sss</p> <a class="ca">拜拜</a> </div> <div class="c1">qqqq <span id="c3">牛逼1</span> <span id="c4">牛逼1</span> <span id="c5">牛逼1</span> </div> <script> $(".ca").text(‘123‘); $(".c1").text(‘88888‘); </script> 结果: <a class="ca">123</a> <div class="c1">88888</div>
$("*") 寻找所有的元素
<div id="xxx">sasd <p>sss</p> <a class="ca">拜拜</a> </div> <div class="c1">qqqq <span id="c3">牛逼1</span> <span id="c4">牛逼1</span> <span id="c5">牛逼1</span> </div> <script> $("*") </script> 结果： <div id="xxx">sasd </div> <p>sss</p> <a class="ca">拜拜</a> <div class="c1">qqqq </div> <span id="c3">牛逼1</span> <span id="c4">牛逼1</span> <span id="c5">牛逼1</span>
$(".class,p,div") 将每一个选择器匹配到的元素合并后一起返回。
<div id="xxx">sasd <p>sss</p> <a class="ca">拜拜</a> </div> <div class="c1">qqqq <span id="c3">牛逼1</span> <span id="c4">牛逼1</span> <span id="c5">牛逼1</span> </div> $("#xxx,.c1 ").text(‘88888‘); 结果： 88888 88888
2 , 层级选择器 $(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")
<form>
<label>
<input type="button" value="xin"/>
Name
</label>
<input type="date" value="cc"/>
</form>
<input type="zzzzz" value="dd"/>
$("form input") 寻找所有的input元素
$("form>input"); 寻找所有子类元素
$("label + input"); 寻找子类下的子类元素
$("form ~ input"); 寻找父类同辈的元素
3，基本筛选器 $("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)")
$("li:first") 获取第一个元素
<ul>
<li>list item1</li>
<li>list item2</li>
<li>list item3</li>
<li>list item4</li>
<li>list item5</li>
</ul>
$("li:first");
结果：
[<li>?list item1?</li>?]
$("li:eq(2)") 获取一个给定索引值的元素
<ul>
<li>list item1</li>
<li>list item2</li>
<li>list item3</li>
<li>list item4</li>
<li>list item5</li>
</ul>
$("li:eq(2)");
结果;
[<li>?list item3?</li>?]
$("li:even") 获取所有索引值为偶数的元素，从 0 开始计数
<ul>
<li>list item1</li>
<li>list item2</li>
<li>list item3</li>
<li>list item4</li>
<li>list item5</li>
</ul>
$("li:even");
结果：
[<li>?list item1?</li>?, <li>?list item3?</li>?, <li>?list item5?</li>?]
$("li:gt(1)") 所有大于给定索引值的元素
<ul>
<li>list item1</li>
<li>list item2</li>
<li>list item3</li>
<li>list item4</li>
<li>list item5</li>
</ul>
$("li:gt(1)");
结果：
[<li>?list item3?</li>?, <li>?list item4?</li>?, <li>?list item5?</li>?]
4，属性选择器
$(‘[id="div1"]‘)
<input id="ff" type="checkbox" name="123" value="请求"/>
<input type="checkbox" name="123" value="执行"/>
<input type="checkbox" name="345" value="停止"/>
$("input[name=‘123‘]").attr("checked",true);
结果：
[<input id=?"ff" type=?"checkbox" name=?"123" value=?"请求" checked=?"checked">?, <input type=?"checkbox" name=?"123" value=?"执行" checked=?"checked">?]
$(‘["alex="sb"][id]‘)
<input id="news" name="man" /> <input name="milkman" /> <input id="letterman" name="new-letterman" /> <input name="newmilk" /> $("input[id][name$=‘man‘]") 结果： [ <input id="letterman" name="new-letterman" /> ]
6，表单选择器 $("[type=‘text‘]")----->$(":text") 注意只适用于input标签 $("input:checked")
<form>
<input type="button" value="Input Button"/>
<input type="checkbox" />
<input type="file" />
<input type="hidden" />
<input type="image" />
<input type="password" />
<input type="radio" />
<input type="reset" />
<input type="submit" />
<input type="text" />
<select><option>Option</option></select>
<textarea></textarea>
<button>Button</button>
</form>
$(":input"); 寻找所有的input元素
$(":text"); 查找所有文本框
$(":password"); 查找所有密码框
$(":radio"); 查找所有单选按钮
$(":checkbox"); 查找所有复选框
$（":submit"） 查找所有的提交按钮
$(":image"); 匹配所有图像域
$(":reset"); 查找所有重置按钮
$(":button"); 查找所有按钮.
$(":file"); 查找所有文件域
<form> <input type="checkbox" name="newsletter" checked="checked" value="Daily" /> <input type="checkbox" name="newsletter" value="Weekly" /> <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> </form> $("input:checked") [ <input type="checkbox" name="newsletter" checked="checked" value="Daily" />, <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> ]
（二），筛选器
1，过滤筛选器 $("li").eq(2) $("li").first() $("ul li").hasclass("test")
<ul>
<li>list item1</li>
<li>list item2</li>
<li>list item3</li>
<li>list item4</li>
<li>list item5</li>
</ul>
$("li").eq(2).css("color",‘red‘); 获 取匹配的第二个元素
[<li style=?"color:? red;?">?list item3?</li>?]
$(‘li‘).first() 获取匹配的第一个元素
[<li>?list item1?</li>?]
<div class="protected"></div><div></div> $("div").click(function(){ if ( $(this).hasClass("protected") ) $(this) .animate({ left: -10 }) .animate({ left: 10 }) .animate({ left: -10 }) .animate({ left: 10 }) .animate({ left: 0 }); });
标签：
原文地址：http://www.cnblogs.com/guokaixin/p/5669913.html
