jQuery 选择器

来源：互联网发布：淘客如何找商家数据编辑：程序博客网时间：2024/06/16 16:00

attribute_filter_selector.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>属性过滤选择器</title><script type="text/javascript" src="../jquery-1.11.2.js"></script><script type="text/javascript">$(document).ready(function(e) {$("div[id]").css("background","#0F0");        //具有id属性的元素的背景色$('div[id="hey"]').css("font-size","14px");    //id属性为hey元素的字体$('div[id!="hey"]').css("font-size","16px");    //id属性不为hey元素的字体$('div[id^="the"]').css("color","#090");       //id属性以the开头的的前景色$('div[id$="be"]').css("color","#C00");  //id属性以be结束的前景色$('div[id*="er"]').css("color","#360");  //id属性值中包含er的前景色    });</script></head><body> <div id="hey">具有id属性hey的元素</div>     <div id="there">具有id属性there的元素</div>    <div id="adobe">具有id属性adobe的元素</div>     <div>无id属性</div> </body></html>

simple_filter_selector.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>简单过滤选择器</title><style type="text/css">  table{  border-collapse:collapse;  }  table, td, th{     border:1px solid black;  }      th{  width:100px;  }</style><script type="text/javascript" src="../jquery-1.11.2.js"></script><script type="text/javascript">  $(document).ready(function(e) {      $("tr:first").css("background","#FF0");    //表格第一行显示黄色     $("tr:last").css("background","#FCF");    //表格的最后一行显示暖红//$("tr:odd ").css("background","#BBBBFF"); //表格的奇数行显示蓝色 //$('tr:even ').css('background', '#DADADA');     //表格的偶数行显示灰色 $("tr:even:not(:first)").css("background","#BBBBFF");  //偶数行，但滤除第一行。     $("tr:odd:not(:last)").css("background","#DADADA");  // 奇数行，但滤除最后一行。     //$("tr:eq(4)").css("background","#F00");    //让第4行的背景为红色  //$("tr:gt(4)").css("background","#000");    //大于第4行的显示黑色  //$("tr:lt(2)").css("background","#FFC");     //小于第2行显示黄色 });</script></head><body><table width="600" border="1">  <tr>    <th scope="row">表格行1</th>    <td> </td>  </tr>  <tr>    <th scope="row">表格行2</th>    <td> </td>  </tr>  <tr>    <th scope="row">表格行3</th>    <td> </td>  </tr>  <tr>    <th scope="row">表格行4</th>    <td> </td>  </tr>  <tr>    <th scope="row">表格行5</th>    <td> </td>  </tr>  <tr>    <th scope="row">表格行6</th>    <td> </td>  </tr></table></body></html>

content_filter_selector.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>内容过滤选择器示例</title><style type="text/css">  table{  border-collapse:collapse;  }table, td, th{     border:1px solid black;  }    body,td,th {font-size: 9pt;}</style><script type="text/javascript" src="../jquery-1.11.2.js"></script><script type="text/javascript">   $(document).ready(function(e) {   $("td:contains('张')").css("background","#FFC");   //将文字中含张的背景设置为淡黄    $("td:empty").css("background","#060");    //单元格中不包含内容的颜色，也不包含 空格的空单元格   $("td:has(p)").css("background","#9F0");    //单元格中包含子元素<p>的颜色   $("td:parent").css("color","#060");          //单元格中包含文本的前景色   });</script></head><body><table width="600" border="1">  <tr>    <td>张三丰</td>    <td>何足道</td>    <td>觉远大师</td>  </tr>  <tr>    <td>常敬之</td>    <td>张翠山</td>    <td>天鹰教</td>  </tr>  <tr>    <td>张五侠</td>    <td> </td>    <td>金毛狮王</td>  </tr>  <tr>    <td>张大千</td>    <td> </td>    <td> </td>  </tr>  <tr>    <td>丁乐然</td>    <td><p>丁春秋</p>    <p>有名的江湖民间高手</p></td>    <td><p>丁不四</p>    <p>江湖闲散人员，喜欢胡乱杀人，遇即避之。</p></td>  </tr>  <tr>    <td>张秋山</td>    <td>李秋水</td>    <td>颜不四</td>  </tr></table></body></html>

hidden_filter_selector.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>可见性过滤选择器</title><style>   /*定义div的外观*/div {width: 70px;height: 40px;background: #ee77ff;margin: 5px;float: left;}   span {display: block;clear: left;color: #060;}  /*让页面元素具有隐藏的效果*/ .starthidden {display: none;}   body,td,th {font-size: 9pt;}</style>   <script type="text/javascript" src="../jquery-1.11.2.js"></script><script type="text/javascript">$(document).ready(function(e) {//在一些浏览器中，隐藏元素也包含 <head>、<title>、<script>等元素//获取隐藏元素但排除<script>var hiddenEls = $("body").find(":hidden").not("script");  $("span:first").text("找到" + hiddenEls.length + "个隐藏元素"); //$("div:hidden").show(3000);  //动画的显示隐藏元素$("span:last").text("找到" + $("input:hidden").length + "个表单隐藏域"); //为可见的按钮元素关联事件处理代码$("div:visible").click(function () {       $(this).css("background", "yellow");     });     //为按钮关联事件处理代码，显示隐藏页面元素$("button").click(function () {       $("div:hidden").show("fast");     });     });</script></head> <body>   <span></span>   <div></div>   <div style="display:none;">隐藏的元素</div>   <div></div>    <div class="starthidden">隐藏的页面元素</div>   <div></div>   <form>         <input type="hidden" />          <input type="hidden" />         <input type="hidden" />   </form>   <span>    </span> <button>显示隐藏元素</button> </body></html>

$("#div1 > p") 查找div1的元素中的子标签为p的元素只查找一代

$("#div1 p") 查找div1的元素中的子标签为p的所有元素(包括孙代...

0 0