jquery選擇器《-》

時間 2019-11-07

標籤 jquery 選擇器欄目 JQuery 简体版

原文原文鏈接

1.DOM篩選，遍歷查找相關方法php

2.選擇器中特殊符號的處理css

3.改寫原生js例子html

a.表格隔行變色

b.tab標籤頁python

4.選擇器的優化準則(初級)jquery

篩選web

eq()選擇指定索引的元素

filter(表達式)篩選指定表達式的元素編程

first()選擇第一個元素數組

last()選擇最後一個元素緩存

is()檢測是否元素返回布爾值ruby

has()保留包含特定後代的元素，去掉那些不含有指定後代的元素

not()從匹配的元素集合中移除指定的元素。

map()將一組元素轉換成其餘數組

slice()根據指定的下標範圍，選取匹配的元素集合

alert(typeof arr);
$('p').html(arr);
</script>
</body>

遍歷查找

a.children()選取子元素

b.parent()選取父元素

c.parents()選取祖先元素

d.parentsUntil()全部的父輩元素，直到遇到匹配的那個元素爲止 1.6+ //與有參數的parents()等價

e.offsetParent()返回父元素中第一個其position設爲relative或者absolute

的元素,僅對可見元素有效

f.next()選擇後面緊臨的兄弟元素

g.nextAll()查找當前元素以後全部的同輩元素

h.nextUntil()全部的同輩元素，直到遇到匹配的那個元素爲止 1.6+

i.prev()前一個兄弟元素

j.prevAll()前面全部的兄弟元素

k.prevUntil()全部的兄弟元素，直到遇到匹配的那個元素爲止 1.6+

<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>demo3</title>
<script src="jquery.js"></script>
</head>
<body>

<div id="outer" style="position:relative">
  outer
  <div id="wrap" style="">
   wrap
   <div>111111111</div>
   <div>222222222</div>
   <p id="p1">我是<span>第1個P</span>標籤</p>
   <p id="p2">我是第2個P標籤</p>
   <p>我是第3個P標籤</p>
   <div>我是div標籤</div>
  </div>
</div>
<script>
// $('#wrap').children('p').css('background','red');
// $('#p1').parent().css('background','red');
// $('#p1').parents('#wrap').css('background','red');
//
//$('#p1').offsetParent().css('background','red');
//$('#p1').next().css('background','red');
//$('#p1').nextAll('p').css('background','red');
//
//$('#p2').prev().css('background','red');
//$('#p2').prevAll('div').css('background','red');
//
//$('#p2').siblings('div').css('background','red');
//
//$('span').parent().css('background','red').end().css('background','#abcdef');
//$('span').css('background','#abcdef');
//
$('#p1').nextAll().addBack().css('background','red');
</script>

</body>
</html>

l.sinlings()先後全部的兄弟元素

m.closest()從元素自己開始，在DOM 樹上逐級向上級元素匹配，並返回最早匹配的祖先元素

n.contents()元素的子元素，包括文字和註釋節點

o.end()終止在當前鏈的最新過濾操做，並返回匹配的元素的之前狀態

p.andself()1.8版本中已廢棄

q.addBack()添加堆棧中元素集合到當前集合，一個選擇性的過濾選擇器

r.each()遍歷一個jQuery對象，爲每一個匹配元素執行一個函數

特殊符號的處理

使用轉義符

/* $('input[name=gender\\[\\]]').click(function(){
alert($(this).val());
});*/

$('input[type=\'checkbox\']').click(function(){
alert($(this).val());
});
</script>
</body>

改寫實例

a.表格隔行變色

//js

</script>

//jquery

$('#table tr').filter(':even').css('background','#abcdef').end().filter(':odd').css('background','yellow');
</script>

b.tab標籤頁

//js

  #content div{
   width: 300px;
   height: 200px;
   border: 1px solid #abcdef;
   display: none;
  }
  #content div.show{
   display: block;
  }
</style>
</head>
<body>
<ul id="ul">
  <li>php</li>
  <li>ruby</li>
  <li>python</li>
</ul>
<div id="content">
  <div>php。。。。。。介紹</div>
  <div>ruby。。。。。。介紹</div>
  <div>python。。。。。。介紹</div>
</div>

  for (var i = 0; i < li.length; i++) {
   li[i].index = i;
   li[i].onclick=function(){
    for (var i = 0; i < li.length; i++) {
     li[i].className='';
     div[i].style.display='none';
    };

    this.className='current';
    div[this.index].style.display='block';
   }
  };

</script>

</body>
</html>

//jquery

   //一、點擊li的時候要切換樣式
   //$(this).addClass('current').siblings().removeClass('current');
   //二、根據li的索引值，來肯定哪一個div顯示，其它div隱藏
   //$('#content>div').eq($(this).index()).show().siblings().hide();

//$(this).addClass('current').siblings().removeClass('current').parent().next().children().eq($(this).index()).show().siblings().hide();

});

$(this).addClass('current').siblings().removeClass('current').parent().next().find('div').eq($(this).index()).show().siblings().hide();

});
</script>

jquery選擇器的優化

1.優先使用id選擇器

2.在class選擇器前添加標籤名

3.採用find(),而不使用上下文查找

4.強大的鏈式操做比緩存更快

5.從左至右的模型1.3+版本更新