jquery选择器

来源：互联网发布：阿里云邮箱地址怎么填编辑：程序博客网时间：2024/05/21 02:48

/*******************基本的选择器*****************************///alert("欢迎使用！");//$("h1").css("color","red");  //$("#a").css("color","red");//$(".b").css("color","red");//$("h1,h2,ul").css("color","red");//$("*").css("color","red"); //匹配body中所有元素/*******************层次选择器*****************************///$("ul h1").css("color","red");//$("li>h1").css("color","red"); //子元素//$("#li1+li").css("color","red");   //下一个同辈元素//$("#li").next("li").css("color","red"); // $("#li1~li").css("color","red");   //下面所有的同辈元素// $("#li1").nextAll().css("color","red"); // $("#li1").siblings().css("color","red");  //所有的同辈元素，无论上下  /*******************过滤选择器*****************************/ /**********************************************************/ /*******************基本过滤选择器*****************************///$("h1:first").css("color","red"); //$("h1:last").css("color","red"); //$("h1:eq(0)").css("color","red"); //$("li:lt(3)").css("color","red"); //索引小于//$("li:gt(3)").css("color","red"); //索引大于//$("li:not(#li1)").css("color","red"); //$("li li:even").css("color","red"); //$("li li:odd").css("color","red"); //$(":header").css("color","red"); //所有标题//$(":focus").css("color","red");  //获得焦点/*******************子元素过滤选择器*****************************///$("ul li li:nth-child(1)").css("color","red"); //索引从1开始   //注意与下面的区别//$("ul li li:eq(1)").css("color","red"); //索引从0开始//$("ul li li:first-child").css("color","red"); //$("ul  li li:last-child").css("color","red"); //$("ul  li li:nth-child(even)").css("color","red"); //$("ul  li li:nth-child(odd)").css("color","red"); //$("ul  li li:nth-child(2n)").css("color","red"); //$("ul  li li:nth-child(2n+1)").css("color","red"); //n从1开始/*******************内容过滤选择器*****************************///$("li:contains('大')").css("color","red");  //文本//$("h3:empty").text("我是空的！！");     //文本或子元素//$("li:has('h3')").css("color","red");//$("h1:parent").css("color","red");/*******************属性过滤选择器*****************************///$("li[title]").css("color","red");//$("li[title=大番茄]").css("color","red");//$("li[title!=大番茄]").css("color","red");//$("li[title^=大]").css("color","red");//开头//$("li[title$=菜]").css("color","red");//结尾//$("li[title*=大]").css("color","red");//含有//$("li[title|=大]").css("color","red");//大-番茄//$("li[title~=大]").css("color","red");//大 番茄//$("li[title][name]").css("color","red");/*******************表单选择器*****************************/ /**********************************************************/ /*******************表单选择器*****************************///$(":input").css("color","red");//$(":text").css("color","red");//$(":password").css("color","red");//$(":radio").css("color","red");//$(":checkbox").attr("checked","true");//$(":submit").css("color","red");//$(":reset").css("color","red");//alert($(":button").length);//$(":file").css("background-color","red");/*******************表单属性选择器*****************************///alert($("#form1 :disabled").length);//alert($("#form1 :enabled").length);//alert($(":checked").length);//alert($("#form1 :selected").length);/*******************可见性选择器*****************************/ //alert($("div:hidden").attr("id"));//$("#div1 :visible").css("background-color","red");

<body><div class="div1" id="div1">  <h1 id="a">我是中国人</h1>  <h1 class="b">我的祖国是中国</h1>  <h2>中国人爱吃的蔬菜：</h2>  <h3></h3>    <ul >    <li id="li1">      <h1>青菜</h1>      <ul>        <li >          <h1>大青菜</h1>        </li>        <li><h1>小青菜</h1></li>        <li><h1>小小青菜</h1></li>      </ul>    </li>    <li>      <h1>番茄</h1>      <ul>        <li title="大番茄">大番茄</li>        <li>小番茄</li>      </ul>    </li>    <li>      <h1>韭菜</h1>      <ul>        <li title="青韭菜">青韭菜</li>        <li>黄韭菜</li>      </ul>    </li>    <li>      <h1>莴苣</h1>      <ul>        <li title="大 莴苣">大莴苣</li>        <li>小莴苣</li>      </ul>    </li>    <li>      <h1>南瓜</h1>      <ul>        <li title="大-南瓜" name="aa">大南瓜</li>        <li>小南瓜</li>      </ul>    </li>  </ul></div><div class="div2" id="div2" style="float:right">  <form action="#" method="get" enctype="multipart/form-data" id="form1" target="_blank">    单行文本框：    <input name="1" type="text" value="1" size="40" maxlength="5" disabled="disabled" />    <br />    密码框：         <input name="2" type="password" value="12345" size="40" maxlength="5" />    <br />    多行文本框：    <textarea name="4" cols="40" rows="7"></textarea>    <label> <br />    <br />    单选按钮组：    <input type="radio" name="RadioGroup1" value="1" />    单选1</label>         <label>    <input name="RadioGroup1" type="radio" value="2" checked="checked" />    单选2 </label>    <label>    <input name="RadioGroup1" type="radio" value="2" checked="checked" />    单选3</label>    <br />    <br />    <input type="checkbox" name="checkbox" value="checkbox" />    选项1    <label>    <input type="checkbox" name="checkbox2" value="checkbox" />    选项2</label>         <label>    <input type="checkbox" name="checkbox3" value="checkbox" />    选项3</label>    <br />    <br />    列表：    <select name="select" size="5">      <option value="1">1</option>      <option value="2">2</option>      <option value="3">3</option>      <option value="4" selected="selected">4</option>    </select>    <p>      <input name="5" type="image" src="a.jpg" alt="大闸蟹"  style="width:30%; height:30%"/>      <br />      <br />      <label for="file">文件域</label>      <input type="file" name="file" id="file"  />      <br />      <input type="submit" name="Submit" value="提交" />      <input type="button" name="Submit2" value="重置" />      <button>button</button>    </p>  </form></div><div id=div3 style="background-color:red; width:200px; height:200px; display:none" >a</div><div id=div4 style="background-color:blue; width:200px; height:200px;">b</div></body>