標籤：準備 分享 lap last cte 前端基礎 tab convert href
通過之前的學習我們已經瞭解了html、css、javascript的相關知識；本次我們就共同學習進階知識：jQuery~
一、什麼是jQuery?jQuery其實就是一個輕量級的javascript函數庫，通過它我們可以"寫的少做的多";
jQuery庫包含以下功能：
jQuery目前分為1.x 2.x和3.x版本，這裡咱們以1.12版本為例；
中文文檔連結：http://jquery.cuishifeng.cn/
1. 準備工作1. 網上下載1.12.4，網盤連結：https://pan.baidu.com/s/1hsiFumw 密碼: bfmw
2. 將js檔案放到同級目錄，匯入js:
<javascript src="jquery-1.12.4.js"></javascript>2. 尋找元素
2.1 選取器
2.1.1 #id選取器id是唯一的，可通過#id尋找元素；
執行個體：
1）建立一個html檔案，代碼如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div> <div id="i1"><a>我是i1</a></div> <div id="i2"><span>我是I2</span></div> </div> <script src="jquery-1.12.4.js"></script></body></html>
2）在Google瀏覽器中開啟html檔案，F12切換到console下，輸入以下代碼：
$(‘#i1‘);
效果：
2.1.2 .class選取器jQuery 類別選取器可以通過指定的 class 尋找元素。
文法如下：
$(".c1")
執行個體：
1）在上述html檔案中添加一行：
<div class="c1"><span>我是c1</span></div>
2）在Google瀏覽器中開啟html檔案，F12切換到console下，輸入以下代碼：
$(‘.c1‘);
效果如下：
2.1.3 標籤選取器當然，我們也可以直接尋找指定的標籤；
拿以上html檔案為例，尋找a標籤：
$(‘a‘);2.1.4 組合選取器
以上方式也可結合使用；
執行個體：
1）添加html檔案：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div> <div id="i1">按id尋找</div> <div><a>標籤a尋找</a></div> <div class="c1"><span>我是c1</span></div> </div> <script src="jquery-1.12.4.js"></script></body></html>
2）組合尋找：
$(‘#i1,a,.c1‘);
效果如下：
2.1.5 層級選取器建立html檔案：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div> <div id="i1"> <a>我是a1</a> <div> <a>標籤a2尋找</a> <a>標籤a3尋找</a> </div> </div> <div id="i2"> <a>標籤a尋找</a> </div> <div class="c1"> <span>我是c1</span> </div> </div> <script src="jquery-1.12.4.js"></script></body></html>
後代選取器
$(‘#i1 a‘);
結果如下：
子選取器：
$(‘#i1>a‘);
結果如下：
2.1.6 屬性選取器上面的這些基本能夠滿足咱們常用需求，但是如果我在html檔案中再加上兩句呢？請幫忙尋找代碼中含有cc的對象：
<div cc>我是cc</div><div cc="boy">我是boy</div>
此時，jQuery引入了一種屬性選取器：
$(‘[cc]‘);
想要查詢指定的屬性值：
$(‘[cc="boy"]‘);2.1.7 基本篩選器
$(‘a:first‘).text(); //尋找合格a標籤中的第一個元素$(‘a:last‘).text(); //尋找合格a標籤中的最後一個元素$(‘a:eq(0)‘).text(); //尋找合格a標籤中下標為0的元素$(‘a:eq(1)‘).text(); //尋找合格a標籤中下標為1的元素$(‘a:eq(2)‘).text(); //尋找合格a標籤中下標為2的元素$(‘a:eq(3)‘).text(); //尋找合格a標籤中下標為3的元素
2.1.8 其他
$("input[type=‘text‘]") #尋找input標籤中type=text的元素$(‘:text‘) #尋找text元素$(‘:enabled‘)$(‘:disabled‘)$(‘::checked‘)$(‘::selected‘)
總結：
結合以上內容，咱們來實現一個全選反選和取消的執行個體：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <table border="1"> <input type="button" value="全選" onclick="chooseALL()"/> <input type="button" value="反選" onclick="convertALL()"/> <input type="button" value="取消" onclick="cancelALL()"/> <thead> <tr> <th>選項</th> <th>姓名</th> <th>地址</th> <th>性別</th> </tr> </thead> <tbody id="tb"> <tr> <td> <input type="checkbox"/> </td> <td>CC</td> <td>北京</td> <td>男</td> </tr> <tr> <td> <input type="checkbox"/> </td> <td>CC</td> <td>北京</td> <td>男</td> </tr> <tr> <td> <input type="checkbox"/> </td> <td>CC</td> <td>北京</td> <td>男</td> </tr> <tr> <td> <input type="checkbox"/> </td> <td>CC</td> <td>北京</td> <td>男</td> </tr> </tbody> </table> <script src="jquery-1.12.4.js"></script><!--匯入jQuery檔案--> <script> function chooseALL() { $(‘#tb :checkbox‘).prop(‘checked‘,true);//全選函數：找到tb下的checkbox元素，並都置為checked } function convertALL() { $(‘:checkbox‘).each(function () { var v=$(this).prop(‘checked‘)?false:true;//反選函數-三元運算子：$(this)表示當前選擇的元素；如果當前的元素被選中則取消勾選，如果當前的元素未被勾選則選中； $(this).prop(‘checked‘,v) }) }// function convertALL() {// $(‘:checkbox‘).each(function () {// if ($(this).prop(‘checked‘)) {// $(this).prop(‘checked‘, false);// } else {// $(this).prop(‘checked‘, true);// }//反選函數：$(this)表示當前選擇的元素；如果當前的元素被選中則取消勾選，如果當前的元素未被勾選則選中；// })// } function cancelALL() { $(‘#tb :checkbox‘).prop(‘checked‘,false);//取消函數:尋找tb下的checkbox元素，若被選中則取消勾選 } </script></body></html>
2.2 篩選
3. 操作元素web前端基礎知識-（五）jQuery
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
