jQuery 的篩選操作1
阿新 • • 發佈:2018-12-11
<!DOCTYPE html> <html lang="en"> <head> <script src="jquery-1.11.1.min.js"></script> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>========jQuery 的篩選操作=========</p> <p> This is just a test.</p> <p> So is this</p> <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> <div class="protected">this is div1 class="protected"</div> <div>this is div2</div> <p>Hello</p> <p>Hello Again</p> <p class="selected">And Again</p> <div>this is outer div <div>this is inner div <p class="testp">Hello111</p> <p>Hello222</p> </div> </div> <div><p>Hello</p></div> <div class="selected"><p>Hello Again</p></div> <form><input type="checkbox"/></form> <ul> <li><strong>list</strong> item 1 - one strong tag</li> <li><strong>list</strong> item <strong>2</strong> - two <span>strong tags</span></li> <li>list item 3</li> </ul> <p class="testpp"><b>Values: </b></p> <form> <input type="text" name="name" value="John"/> <input type="text" name="password" value="password"/> <input type="text" name="url" value="http://ejohn.org/"/> </form> <ul> <li>list item 1</li> <li>list item 2 <ul> <li>list item 2-a</li> <li>list item 2-b</li> </ul> </li> <li>list item 3</li> <li>list item 4</li> </ul> </body> </html> <script> $(function () { //eq //$("p").eq(1).css("color", "red"); //$("p").eq(-1).css("color", "red"); //first // $('li').first().css("color", "red"); //last //$('li').last().css("color", "red"); //hasClass // $("div").click(function () { // if ($(this).hasClass("protected")) { // $(this).css("color", "red"); // } // }); //filter //$("p").filter(".selected, :first").css("color", "red"); //parent //$("p.testp").parent().css("color", "red"); // $("p").parent(".selected").css("color", "red"); //is 返回一個boolean //alert($("input[type='checkbox']").parent().is("form")); /** * 判斷點選li標籤增加背景色為紅色,如果點選的是第2個strong,當前的li增加背景色為綠色, */ // $("li").click(function () { // var $li = $(this); // var isTwoStrong = $li.is(function () { // return $("strong", this).length === 2;//當前點選的是strong的標籤的個數為2的li // }) // if(isTwoStrong){ // $li.css("color", "red"); // }else{ // $li.css("color", "blue"); // } // // }) //map // $("p.testpp").append($("input:text").map(function () { // return $(this).val(); // }).get().join(", ")) //has 給含有ul的li加上背景色 // $('li').has('ul').css('color', 'red'); }); </script>