jquery选择器

最新推荐文章于 2024-09-05 16:56:18 发布

guwen1991

最新推荐文章于 2024-09-05 16:56:18 发布

阅读量455

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/oGuWen1/article/details/12614167

版权

jquery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

/*******************基本的选择器*****************************/
//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>