jq选择器-1

来源：互联网发布：正元恒邦数据是假的吗编辑：程序博客网时间：2024/06/05 14:13
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jq选择器</title><script src="jquery.min.js" type="text/javascript"></script><style>.divBg{    margin:10px;    border:1px solid #F00;    padding:10px;    }.div1{    width:50px;    border:1px solid #000;    padding:30px;    }.div2{    width:50px;    border:1px solid #000;    padding:30px;    }.div3{    width:50px;    border:1px solid #000;    background:#0F0;    }</style></head><body><div class="divBg" id="a">    <p>基本选择器-#id</p>    <div  id="one">我是第一个DIV</div>    <div  id="two">我是第二个DIV</div></div><div class="divBg" id="b">    <p>基本选择器-.class</p>    <div class="div1" >我是第一个DIV</div>    <div class="div2" >我是第二个DIV</div></div><div class="divBg" id="c">    <p>基本选择器-根据给定的元素名</p>    <ul class="div1" >我是第一个DIV</ul>    <div class="div2" >我是第二个DIV</div></div><div class="divBg" id="d">    <p>基本选择器-*匹配所有元素</p>    <ul class="div1" >我是第一个DIV</ul>    <div class="div2" >我是第二个DIV</div></div><div class="divBg" id="e">    <p>匹配第一个选择器(#e)下的所有子元素(div)</p>    <div class="div1" >我是第一个DIV</div>    <div class="div2" >我是第二个DIV</div></div><div class="divBg" id="f">    <p>匹配第一个选择器(#f)下的子元素</p>    <div class="div1" >        我是第一个DIV        <div class="div3">我是第一个DIV的儿子</div>    </div>    <div class="div2" >我是第二个DIV</div></div><div class="divBg" id="g">    <p>11</p>    <div class="div1" id="k">        我是第一个DIV        <div class="div3">我是第一个DIV的儿子</div>    </div>    <div class="div2" >我是第二个DIV</div></div><div class="divBg">    <div id="aa">11</div>    <div id="bb">22</div>    <div id="cc">33</div>    <div id="dd">44</div></div><script>    //ID选择器 $(document).ready(function() {      $("#one").css("background","#eee");      $("#two").css("background","red");        })    //.class选择器 $(document).ready(function() {      //$(".div2").css("background","#eee");      //$(".div1").css("background","red");        })    //根据给定的元素名 $(document).ready(function() {      $("#c ul").css("background","blue");      $("#c p").css("background","red");        })     //*  匹配所有元素 $(document).ready(function() {      $("#d *").css("background","blue");        })     //匹配第一个选择器(#e)下的所有子元素(div),只要是#e下的DIV 都能被匹配 $(document).ready(function() {      $("#e div").css("background","blue");        })    //匹配第一个选择器(#f)下的子元素(div)，只匹配#f的儿子 $(document).ready(function() {      $("#f > div").css("background","blue");        })    //匹配第一个选择器紧接着的选择器 $(document).ready(function() {     $("#aa + div").css("background","blue");        })    //匹配同辈元素 $(document).ready(function() {     $("#k ~ div").css("background","red");        })      </script></body></html>
0 0