jquery 篩選

時間 2019-12-13

標籤 jquery 篩選欄目 JQuery 简体版

原文原文鏈接

end()javascript

<p><span>Hello</span>, how are you?</p>
<script>$("p").find("span").end().css("border", "2px red solid");</script>css

找到p 的子元素span ，end（）返回去找到p 設置p 元素的樣式html

<body>
<ul class="first">
<li class="foo">list item 1</li>
<li>list item 2</li>
<li class="bar">list item 3</li>
</ul>
<ul class="second">
<li class="foo">list item 1</li>
<li>list item 2</li>
<li class="bar">list item 3</li>
</ul>
<script>$('ul.first').find('.foo').css('background-color', 'red')
.end().find('.bar').css('background-color', 'green');</script>

 先找到類名爲 first  的ul，在

在類名爲 first 的ul 下面找到類名爲foo 的元素，設置它的樣式，

 返回去找到ul ，在ul下面找到類名爲bar的元素，設置它的樣式 </body>

　　andSelf()java

<style>
  p, div { margin:5px; padding:5px; }
  .border { border: 2px solid red; }
  .background { background:yellow; }
</style>
</head>
<body>
<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>
<script>
$("li.third-item").nextAll().andSelf().css("background-color", "red");    最後三個li 的背景顏色成紅色
</script>

<style>
  p, div { margin:5px; padding:5px; }
  .border { border: 2px solid red; }
  .background { background:yellow; }
</style>
</head>
<body>
  <div>
    <p>First Paragraph</p>
    <p>Second Paragraph</p>
  </div>
<script>
    $("div").find("p").andSelf().addClass("border");  div  和  p  都被添加類 
    $("div").find("p").addClass("background");     p 添加類
</script>

　　siblings()jquery

<body>
<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>

<script>
$('li.third-item').siblings().css('background-color', 'red');
類名爲third-item 的li 元素  的同級元素  的樣式

$('li.third-item').siblings().andSelf().css('background-color', 'red');
類名爲third-item 的li 元素  的同級元素  包括它本身的樣式

$("li.start").siblings().css({"color":"red","border":"2px solid red"});

$("div").siblings(".selected")

找到每一個div的全部同輩元素中帶有類名爲selected的元素this

</script>
</body>

$("p").prev()    找到每一個段落緊鄰的前一個同輩元素。

$("p").prev(".selected")   
找到每一個段落緊鄰的前一個同輩元素中類名爲selected的元素。

$("div:last").prevAll().addClass("before");
給最後一個以前的全部div加上一個類

<script>$("div:last").prevAll('.aa').addClass("before");</script>

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
<dl>
  <dt id="term-1">term 1</dt>
  <dd>definition 1-a</dd>
  <dd>definition 1-b</dd>
  <dd id='ha'>definition 1-c</dd>
  <dd>definition 1-d</dd>

  <dt id="term-2">term 2</dt>
  <dd>definition 2-a</dd>
  <dd>definition 2-b</dd>
  <dd>definition 2-c</dd>

  <dt id="term-3">term 3</dt>
  <dd>definition 3-a</dd>
  <dd>definition 3-b</dd>
</dl>

<script>
$("#term-2").prevUntil("dt")
  .css("background-color", "red");

id爲term-2 的元素前面全部的元素，知道dt  結束
  
var term1 = document.getElementById('ha');
$("#term-3").prevUntil(term1, "dd")
  .css("color", "blue");
id爲term-3  往前到id爲ha 的元素，這之間的dd 元素
</script>
</body>
</html>

next()

nextAll()

nextUntil()

parent()

parents()

parentsUntil()

$("div").children()

$("div").children(".selected")

從全部的段落開始，進一步搜索下面的span元素。與$("p span")相同。  $("p").find("span")

$("p").eq(1) 查找索引爲1 的 p 元素 ，即第二個 p 元素

$("p").eq(-2) 查找倒數第二個p元素

獲取匹配的第一個元素$('li').first()

$('li').last() 獲取最後個元素

檢查當前的元素是否含有某個特定的類，若是有，則返回true。
  if ( $(this).hasClass("protected") )

<body>
  <div></div>

  <div class="middle"></div>
  <div class="middle"></div>
  <div class="middle"></div>
  <div class="middle"></div>

  <div></div>

<script>
  $("div").css("background", "#c8ebcc")
    .filter(".middle")
    .css("border-color", "red");
</script>

</body>

保留第一個以及帶有select類的元素$("p").filter(".selected, :first")

$("input[type='checkbox']").parent().is("form")   返回 true 或false

slice() 把匹配元素集合縮減爲指定的指數範圍的子集。

<body>
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

<script>
$('li').slice(0,2).css('background-color', 'red');    索引從1開始，直到索引爲2結束不包括2
查找全部的li元素 ，在其中選取索引爲0和1 的元素，即選取第一和第二個

$('li').slice(-4,-2).css('background-color', 'red');
slice（負數，負數），從最後的開始數，-1，-2，-3，-4 ，選取-4到-2 不包括-2

</script>

<body>
<ul>
  <li>list <strong>item 1</strong></li>
  <li><span>list item 2</span></li>
  <li>list item 3</li>
</ul>

<script>
$("ul").click(function(event) {
  var $target = $(event.target);
  if ( $target.is("li") ) {
    $target.css("background-color", "red");
  }
});
</script>

</body>

$("input[type='checkbox']").parent().is("form")   因爲input元素的父元素是一個表單元素，因此返回true。

map()spa

  $(function(){
           var arr1=[0,3,5];
            var arr2= $.map(arr1,function(item){return item*2;});
            document.write(arr2)
            alert(arr2);
        });

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

$('li').has('ul').css('background-color', 'red');
給含有ul的li加上背景色

查找DIV中的每一個子元素。
$("div").children()
在每一個div中查找 .selected 的類。
$("div").children(".selected")

1. jQuery 篩選器2
2. jquery篩選查詢
3. jQuery 篩選查找
4. jQuery 篩選器1
5. jQuery篩選--過濾
6. jQuery代碼節選（篩選）
7. jquery-5 jQuery篩選選擇器
8. jquery篩選元素函數
9. jquery——5篩選和查找
10. jQuery篩選--查找，串聯
更多相關文章...
• jQuery Mobile 表單選擇菜單 - jQuery Mobile 教程
• Scala Option(選項) - Scala教程
• 爲了進字節跳動，我精選了29道Java經典算法題，帶詳細講解
• Composer 安裝與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。