jquery选择器

jquery的作用: 获取标签, 修改内容。$ 等于jquery 对象。一、选择器1、<div id="n1">test</div> 找到该标签并修改： $('#n1').text('123'); // #n1 相当于 id=n12、找到页面上所有的div 并修改： $('div').text('456');3、<div id="n1" class="c1">test</div> 找到样式 等于 c1 的所有标签： $('.c1').text('789'); // .c1 相当于 class=c14、获取多个标签：<div class='c2'>22</div><a>11</a><span id='n2'>this is span</span>$('.c1, a, #n2').text('ok'); 表示 把 class=c1, a 标签，以及 id=n2 的所有标签 text值都改成 ok 。 用逗号分割，表示符合 每个条件的标签都修改。5、<div id='n3'>　　<div>　　　　<div class='c3'>　　　　　　<span>　　　　　　　　<a>test5</a>　　　　　　</span>　　　　</div>　　</div>　　<span>test6</span></div>找到 a 标签并且修改： $('#n3 div .c3 span a').text('qqq') 空格表示该标签下面的所有子元素。 上例也可以写成： $('#n3 a').text('qqq');空格根据级别往下找。 此种方法比较低效，可以把 <a>test5</a> 改成 <a class='c4'>test5</a> 直接写 $('.c4').text('qqq');综上所述： 基本的选择器有 id选择器， element 标签选择器， .class选择器， selector1, selector2 组合选择器（逗号分隔）， ancestor descendant 层级选择器（空格分隔）。6、一级子标签 $('parent > child')<form>　　<label>Name:</label>　　<input name="name" value="default input" style="color: gainsboro; width: 20px " /> //只有此处的input 输入框中的值 将被修改//此处将被修改　　<fieldset>　　　　<label>Newsletter:</label>　　　　<input name="newsletter" />　　</fieldset></form><input name="none" style="width: 100px;">$('form > input').attr("value","modified input"); //此方法只找 页面中 form 的一级子标签是 input 的 值修改 。7、 prev + next 紧跟着的下一个标签。$('label + input') 只找紧跟着 label 的input 标签。 + 找下一个相邻的标签。$("label + input").innerWidth("500px"); 把紧跟着 label 的 input 标签宽度改成 500px 。8、 prev ~ siblings 所有的兄弟标签。$("form ~ input").innerWidth("500px"); 值修改了 最后一个 name="none" 的input 标签的宽度。二、 筛选器1、$('li:first')<ul>　　<li>list item 1</li>　　<li>list item 2</li>　　<li>list item 3</li></ul>$("li:first").text("the first item"); // 这个语句会把 list item 1 修改成 the first item 。　　2、下面的语句会把页面 表中的奇数行 添加背景颜色：

　　<script>

　　　　　　$(document).ready(function(){
　　　　　　　　$("tr:even").css("background-color","#B2E0FF");
　　　　　　});
　　　</script>

3、 自定义标签属性：　　

<div myattr="alex">I defined</div>

$("div[myattr='alex']").text("myattr");

第一行给div 自定义了一个属性 myattr ， 第二行根据自定义的属性 找到此标签，并修改div 的值。4、 修改li 的第一个值： $("li:first").text("the first item");5、 找出 所有checkbox 已经被选择的项，改称未被选择： $('input:checked').attr("checked",false);6、 修改所有 input输入框中的值： $(":input").attr("value","all input modified");