【Jquery】- 選擇器用法

Jquery 屬性選擇器

介面

<input type="button" value="屬性title 的div元素綠色"  id="b1"/><br>
<input type="button" value="屬性title值等於test的div元素紅色"  id="b2"/><br>
<input type="button" value="屬性title值不等於test的div元素(包含沒有title屬性)黃色"  id="b3"/><br>
<input type="button" value="屬性title值不等於test的div元素(包含title屬性)藍色"  id="b4"/><br>
<input type="button" value="屬性title值 以te開始 的div元素紫色"  id="b5"/><br>
<input type="button" value="屬性title值 以est結束 的div元素橙色"  id="b6"/><br>
<input type="button" value="屬性title值 含有es的div元素粉色" id="b7"/><br>
<input type="button" value="選取有屬性id的div元素，結果中選取屬性title值含有“es”的 div元素藍色"  id="b8"/><br>
<input type="button" value="input元素型別為text顯示為紅色"  id="b9"/><br>
<input type="text" value="hidden1"/><br>
<input type="hidden" value="hidden2"/><br>

<div id="one"  title="test">div id="one"  title="test"</div>
<div id="one"  title="texxx">div id="one"  title="texxx"</div>
<div id="one">div id="one"</div>
<div id="one"  title="xxxesxxxxxt">div id="one"  title="xxxesxxxxxt"</div>
<div id="two"   title="xxxxx">div id="two"  title="xxxxx"</div> 
<div id="three"  class="one" >XXXXXXXXX</div>

js操作邏輯

//元素名[屬性名]：屬性選擇器
$('#b1').click(function(){
    $("div[title]").css("background","green");
});

//[屬性=屬性值]；篩選特定的屬性值元素
$('#b2').click(function(){
    $("div[title='test']").css("background","red");
});

//篩選出title屬性值不是test的div元素，包含沒有title屬性的元素
$('#b3').click(function(){
    $("div[title!='test']").css("background","green");
});


//[val][val]類似過濾器
$('#b4').click(function(){
    $("div[title!='test'][title]").css("background","blue");
});

//^正則表示式:以....結束
$('#b5').click(function(){
    $("div[title^='tes']").css("background","blue");
});

//$正則表示式:以....結束
$('#b6').click(function(){
    $("div[title $='st']").css("background","orange");
});

//*正則表示式:包含
$('#b7').click(function(){
    $("div[title *='es']").css("background","pink");
});

$('#b8').click(function(){
    $("div[id][title *='es']").css("background","pink");
});

$('#b9').click(function(){
    //$("#one").hide();  //隱藏id標記的div
    $("input[type='hidden']").css("display","block");
    $("input[type='text']").css("background","red");
// $("#one").show();  //顯示id標記的div
});

效果：

Jquery 層次選擇器

diverse.css：

div,span{
width: 140px;
height: 140px;
margin: 10px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}

.min{
width: 50px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}

介面

<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
<link href="js/diverse.css"  rel="stylesheet" type="text/css">

<br>
<input type="button" value="設定<body>內所有<div>的背景色為綠色"    id="b1"/><br>
<input type="button" value="設定div02內子 <div>的背景色為黃色"    id="b2"/><br>
<input type="button" value="設定id 為 div01 的下一個 <div> 的背景色為紫色"  id="b3"/><br>
<input type="button" value="設定id 為 div02 的元素後面的所有兄<div>的元素的背景色為藍色"  id="b4"/><br>
<input type="button" value="設定id 為 div02 的元素所有 <div> 兄弟元素的背景色為黃色"  id="b5"/><br>
<input type="button" value="改變含有文字 ‘div01’ 的 div 元素的背景色為黃色"  id="b6"/><br>
<input type="button" value="改變不包含子元素(或者文字元素) 的 div 的背景色為紅色"    id="b7"/><br>
<input type="button" value=" 改變含有子元素(或者文字元素)的div元素的背景色為紫色"  id="b8"/><br>
<input type="button" value=" 改變不含有文字 di; 的 div 元素的背景色"  id="b9"/><br>
<input type="button" value="迴圈div元素的值"  id="b10"/><br>

<div id="div01" class="min" value="hello">div01</div>
<div id="div02">div02
<div id="div021" class="min">div021</div>
<div id="div022" class="min">div022</div>
</div>
<div id="div03" >div03
<div id="div031" class="min">div31</div>
</div>
<span id="sp01">span01</span>
<div id="div04"></div>

js操作邏輯

<script type="text/javascript">
$('#b1').click(function(){
  $('div').css("background","green");
});

//parent > child:父元素下的第一級子元素獲取
$('#b2').click(function(){
   $('#div02 > div').css("background","yellow");
});

//pre + div :pre元素下一個同一級子元素
$('#b3').click(function(){
   $('#div01 + div').css("background","purple");
});

//pre ~ div:pre元素之後所有的兄弟div元素獲取
$('#b4').click(function(){
  $('#div01 ~ div').css("background","blue");
});

//siblings("div"):相鄰的兄弟元素
$('#b5').click(function(){
  $("#div02").siblings("div").css("background","yellow");
});

//contains 包含文字
$('#b6').click(function(){
  $("div:contains('div01')").css("background","yellow");
});

//不包含子元素和文字元素
$('#b7').click(function(){
   $("div:empty").css("background","red");
});

//parent:含子元素
$('#b8').click(function(){
  $("div:parent").css("background","purple");
});

//不含文字
$('#b9').click(function(){
   $("div:not(:contains('div01'))").css("background","green");
});

$('#b10').click(
function(){

//迴圈函式
var $objs=$("div");
/*
$.each($objs,function(i,obj){
alert(i+"---"+obj.innerText);
})
*/
//this表示$objs[i]
$.each($objs,function(){
   alert("---"+this.innerText);
})
}
);

效果：

Jquery 父子選擇器

介面

<input type="button" value="div父元素下的第2個子元素紅色"  id="b1"/><br>
<input type="button" value="div父元素下的第一個子元素紫色"    id="b2"/><br>
<input type="button" value="div父元素下的最後一個子元素黃色"  id="b3"/><br>
<input type="button" value="div父元素下的僅僅只有一個子元素，那麼選中這個子元素橙色"  id="b4"/><br>
<input type="button" value="div父元素下奇數紅色偶數黃色"  id="b5"/><br>
<input type="button" value="div父元素下2n+1綠色"  id="b4"/><br>
<br><br>		   
<div> 
 <div id="one" class="mini" >XXXXXXXXX  one</div>		 	 
 <div id="two" class="mini" >XXXXXXXXX  two </div>	 
 <div id="three" class="mini" >XXXXXXXXX  three</div>
 <div id="four"  class="mini" >XXXXXXXXX  four</div>
</div>	

<div> 
   <div id="one" class="mini" >XXXXXXXXX  one</div>
</div>

js操作邏輯

   $("#b1").click(function(){
      $("div:nth-child(2)").css("background","red");
   });

    $("#b2").click(function(){
      $("div:first-child").css("background","purple");
   });

     $("#b3").click(function(){
      $("div:last-child").css("background","yellow");
   });

    $("#b4").click(function(){
      $("div:only-child").css("background","orange");
   });

   $("#b5").click(function(){
     $("div:nth-child(even)").css("background","yellow");
     $("div:nth-child(odd)").css("background","red");
   });

    $("#b6").click(function(){
      $("div:nth-child(2n+1)").css("background","green");
   });

效果：

【Jquery】- 選擇器用法

Jquery 屬性選擇器介面 <input type="butt

【JQuery】選擇器

jQuery 的選擇器可謂之強大無比，這裡簡單地總結一下常用的元素查詢方法基本選擇器 $("#myELement") 選擇id值等於myElement的元素，id值不能重複在文件中只能有一個id值是myElement所以得到的是唯一的元素 $("div"

【jQuery】選擇器與一些常用方法應用詳解

一、常用選擇器 1、基本物件獲取 (“∗”)‘表示獲取所有對象(“∗”)‘表示獲取所有對象(“#element”) ’獲得想CSS中的ID號一樣 (“.abc”)‘所有使用.abc樣式的元素(“.abc”)‘所有使用.abc樣式的元素(“div”) ‘標籤

【css】選擇器

通配符選擇器標簽、通配符選擇器<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>標簽選擇器</title> <styl

【CSS3】選擇器-純css實現輪播

ica 焦點集合 meta 表示 style disable 設置 :active CSS選擇器：基本選擇器：通配符選擇器：*；元素選擇器：元素標簽； class選擇器：相當於身份證上的名稱； id選擇器：相當於身份證號（唯一性）；多元素組合選擇器

【JavaScript】選擇器

JavaScript選擇DOM元素的方法 getElementById：根據指定元素的id屬性返回元素 getElementByClassName：返回所有指定類名的元素 getElementsByName：返回所有指定name屬性的元素 getElemen

【css】選擇器+盒子模型

做牛腩的時候曾接觸過css，有一篇部落格總結如下：【牛腩】HTML+CSS基礎瞭解【如何引入css】曾寫了一篇文章：【JavaScript】什麼是JavaScript？提到如何把JavaScript程式碼引入html程式碼中的幾種方式。類似的，c

【CSS3】選擇器（表單元素選擇器 & 其他）--慕課網【學習總結】

1.表單元素選擇器 (１):enabled選擇器　　在Web的表單中，有些表單元素有可用狀態（“:enabled”）和不可用狀態（“:disabled”），比如輸入框，密碼框，複選框等。我們可以通過偽選擇器“:enabled”對這些表單元素設定樣式。

【CSS3】選擇器（屬性 & 結構性偽類）--慕課網【學習總結】

1.屬性選擇器 CSS3新增了3個屬性選擇器，使得屬性選擇器有了萬用字元的概念，這三個屬性選擇器與CSS2的屬性選擇器共同構成了CSS功能強大的屬性選擇器。如下表所示：【例如】  <a href=

【jQuery】方法和選擇器的雙重使用詳解

節點使用詳解選擇器 query 除了 nbsp clas pos ren 1.jQuery選擇直接子節點+除了某個元素　　1》方法 $(".begon").children(".row:not(.moreDetail)") 　　2》選擇器 $(".begon

【jQuery】jQuery常用選擇器

注意：jQuery是一個集合，所有很多時候返回值也是一個集合常用選擇器 $("*") 所有元素 $("#id") id選擇器 $(".class") 類選擇器 $("tagName") 標籤選擇器 $("#id1,.class,tagName

【JS】【jQuery】【獲取物件,選擇器】

通過$(“XXX”)方式獲取的都是jQuery物件,由Dom的節點元素組成的偽陣列物件 - 基本選擇器 $("#id值"); //返回一個偽陣列,裡面只有一個對應id的節點元素 $("di

【jQuery】2、選擇器

一、基本選擇器 1. 是什麼? - 有特定格式的字串 2. 作用 - 用來查詢特定頁面元素 3. 基本選擇器 - #id : id選擇器 - element : 元素選擇器 - .class : 屬性選擇器 - * : 任意標籤 - selector1,se

【jquery原始碼二】$選擇器--是如何將DOM封裝成jquery物件的②

前言：前面一篇已經看過$是如何封裝jQuery物件的，可以簡單的概述為，把DOM物件放在了屬性名為0、1、2....下面，然後給jQuery添加了context,length,selector屬性，還有一些例項出來的方法。這篇文章來說說jQuery是如何實現眾多選

【JQuery/整理】篩選器用法小結+JQ追加HTML/獲取屬性

大家好呀，好久不見，正所謂一日不見如隔三秋，咱這兩個月沒見估計都快把小D給忘了哈，額，這個主要怪我啦，這段時間都在趕畢業設計，這不看著快做完了，眼下整理下有關web前臺的資料，這回先貼出一部分JQuery相關的用法和小技巧，一來呢方便我檢視；

【jQuery】:checkbox複選框選擇器

表單中的複選框常用於多項資料的選擇，使用:checkbox選擇器可以快速定位並獲取表單中的複選框元素。例如，在表單中增加多個不同型別的元素，使用:checkbox選擇器獲取其中的全部複選框元素，

【JQuery】[attribute=value]屬性選擇器

獲取與屬性名和屬性值完全相同的全部元素. 其中[]是專用於屬性選擇器的括號符，引數attribute表示屬性名稱，value引數表示屬性值，value兩邊可以不加引號的。用例子一目瞭然。 &

jquery的gt跟lt選擇器用法

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>gt與lt用法</title><style>li{list-style-

【Jquery】jQuery獲取URL參數的兩種方法

ont ras mil scrip line 兩種方法 lower quest request jQuery獲取URL參數的關鍵是獲取到URL，然後對URL進行過濾處理，取出參數。 location.href是取得URL。location.search是取得URL“？

【jQuery】動畫小練習

current href slow alt cart () chan move == 1.jQuery部分代碼如下 <script type="text/javascript"> $(function(){ var page = 1; var

【Jquery】- 選擇器用法

Jquery 屬性選擇器

Jquery 層次選擇器

Jquery 父子選擇器

相關推薦