jquery選擇器

時間  2019-11-10
標籤 jquery 選擇器 欄目 JQuery 简体版
原文   原文鏈接 
基本選擇器：************************************
<!DOCTYPE html>
 <html> 
<head lang="en"> 
<meta charset="UTF-8"> 
<title></title> 
 <style> 
 dd{ display: none;<!--進行隱藏--> } 
</style> 
</head>
 <body> 
<section id="book"> 
 <div class="imglift"><img src="../tupian/qq圖書.jpg" ></div> <div class="textright"> 
 <h1>島上書店【薦書聯盟推薦】[love you lift xia]</h1> 
 <p class="intro">自營圖書幾十萬暢銷品種；抽獎贏魅藍note3</p> 
 <p id="zhang">[美]加。譯文（hahahaha）著 孫仲旭 李玉姚 譯</p> 
 <div class="price"> 
<div class="jdpirce">京東價<span>$24.1</span>[6.9折]<p><span>$35..00</span></p></div> 
 <p id="mopildprice">促銷信息<span>手機專項價</span><span>$40.0</span></p> 
 <dl> 
 <dt>如下促銷可在購物車內任你選其一</dt> 
 <dd><span>加夠價</span>滿一百減90</dd> 
 <dd><span>滿減</span>滿一千減999</dd> 
 </dl> 
 <p id="ticked">領卷<span>105-6</span><span>200-16</span></p>
 </div> 
</div> 
</section>
 <script language="JavaScript" src="../e/jquery-3.2.1.min.js"></script> 
<script>
$(document).ready(function() { 
 //全局選擇器；全部標記，具備加粗效果  
 $("*").css("font-weight", "bold"); 
//標籤選擇器；h1添加顏色  
$("h1").css("color", "blue"); 
//並集選擇器  
$(".intro,dt,dd").css("color", "#ff0000"); 
 //id選擇器 
 $("#zhang").css("color", "#083499"); 
//類選擇器  
$(".price").css({"background-color": "#efefef", "padding": "5px"}); 
 $("dt").click(function () { 
 $("dd").css("display", "block"); 
}); 
});

</script>
層次選擇器****************************************************************8
<html>
 <head lang="en"> 
 <meta charset="UTF-8"> 
 <title></title> 
</head> 
<body> 
<section id="book"> 
 <div class="imglift"><img src="../tupian/qq圖書.jpg" ></div> 
 <div class="textright"> 
<p>我喜歡夏麗洋</p> 
 <h1>島上書店【薦書聯盟推薦】[love you lift xia]</h1> 
 <p class="intro">自營圖書幾十萬暢銷品種；抽獎贏魅藍note3</p> 
 <p id="zhang">[美]加。譯文（hahahaha）著 孫仲旭 李玉姚 譯</p> 
 <div class="price"> 
 <div class="jdpirce">京東價<span>$24.1</span>[6.9折]<p><span>$35..00</span></p></div> 
 <p id="mopildprice">促銷信息<span>手機專項價</span><span>$40.0</span></p> 
 <dl> 
<dt>如下促銷可在購物車內任你選其一</dt> 
 <dd><span>加夠價</span>滿一百減90</dd> 
 <dd><span>滿減</span>滿一千減999</dd> 
 </dl> 
 <p id="ticked">領卷<span>105-6</span><span>200-16</span></p>
 </div> 
 </div> 
</section> 
<script language="JavaScript" src="../e/jquery-3.2.1.min.js"></script> 
<script >
$(document).ready(function(){ 
//空格隔開；是後代選擇器；  $(".textright p").css("color","red"); 
//子選擇器構成一層嵌套；$(".textright>p").css("color","red");  
 //相鄰選擇器,控制相鄰的下一個標記；後面的同輩元素  $("h1+p").css("text-decoration","underline"); 
 //同輩選擇器；h1後面的同輩元素  $("h1~p").css("background","yellow"); 
//同輩元素上下都包括的方式  //$("h1").siblings("p").css("background","yellow");  });

</script> 
屬性選擇器********************************************************
<html> <head lang="en"> 
 <meta charset="UTF-8"> 
 <title></title>
 </head> 
<body> 
<section id="mews"> 
 <header>京東快報<a href="#" class="more" id="haha">更多</a></header> 
<ul> 
 <li><a href="sale.jd.com/act/h7mf8.html" class="hot"><span>[618]</span>志玲姐姐：墨鏡300減30</a></li> 
 <li><a href="www.jd.com/news.aspx?id=20257" ><span>[公告]</span>京東無錫館正式啓動</a></li> 
 <li><a href="sale.jd.com/act/k2ad45v.html"><span>[特惠]</span>99元強平板</a></li> 
 <li><a href="www.jd.com/news.aspx?id=29252" ><span>[公告]</span>節能領跑京東現行</a></li> 
 <li><a href="sale.jd.com/act/ugk2973.html" class="last"><span>[特惠]</span>高潔絲實力燎火</a></li> 
</ul> 
</section>
<script language="JavaScript" src="../e/jquery-3.2.1.min.js"></script> 
<script >
$(document).ready(function(){ 
 //屬性選擇器;是a標籤而且含有class屬性的進行選擇更改  $("#mews a[class]").css("background-color","#c9cbcb"); 
//含有多個屬性的設置  $("#mews a[class][id]").css("background-color","red" ); 
 //指定屬性和屬性值來獲取並設置  $("#mews a[class='last']").css("background-color","yellow"); 
 //指定屬性值不等於last的屬性進行添加背景顏色  $("#mews a[class!='last']").css("background-color","blue"); 
//指定屬性值以什麼開頭  $("#mews a[href^='www']").css("background-color","pink"); 
//指定屬性以什麼結尾的  $("#mews a[href$='.html']").css("background-color","red"); 
 //指定屬性包含什麼內容的  $("#mews a[href*='k2']").css("font-size","30px");
});

<script >
 </body> 
</html>
過濾選擇器***********************************************************
<html> 
<head lang="en"> 
 <meta charset="UTF-8"> 
 <title></title> 
 <style>
*{     
padding: 0px; 
margin: 0px auto;
 } 
ul{ 
padding-left: 5px; 
 font-size: 12px;
} 
ul li{ 
list-style: none; 
 line-height: 40px; 
border-bottom: 1px dotted #CCC; } 
.contain{ 
 border: 1px solid deepskyblue; 
 height: 300px; 
 width: 300px; }
 h2{ 
 line-height: 30px; 
 padding-left: 5px; 
}

</style> 
 </head>
 <body> 
<div class="contain"> 
 <h2>祝福東奧</h2> 
 <ul> 
 <li>夏麗洋：衷心的但願你能學成</li> 
 <li>陌生人：誰會管你；只有本身約束本身</li> 
 <li>老員工：沒人會結識一個沒有能力的人</li> 
 <li>朋友：永遠在你繁榮的時候出現</li> 
 <li>朋友：永遠在你落魄的時候給傷害</li> 
 <li>人型：沒有終點；只有更加黑暗</li> 
</ul> 
</div> 
<script language="JavaScript" src="../e/jquery-3.2.1.min.js">
<script>

</script>
$(document).ready(function(e){ 
 //獲取標題標記 h1-h6  $(".contain :header").css("background","#2a65ba"); 
 //找到第一個li標記  $(".contain li:first").css("color","#e90202"); 
 //找到最後一個li標記  $(".contain li:last").css("color","blue"); 
//奇數行添加背景  $(".contain li:odd").css("background-color","#cccccc"); 
//偶數行添加背景  $(".contain li:even").css("background-color","red"); 
//給前兩個li添加字體顏色 從零開始算；不包含2  $(".contain li:lt(2)").css("color","pink"); 
//給大於2的字體添加顏色爲紅色 不包含2  $(".contain li:gt(2)").css("color","red"); 
//給第二給屬性改變字體樣式  $(".contain li:eq(2)").css("font-size","15px");
 });

</script>
 </body> 
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程