標籤：type屬性 scrollto isp next 樣式 定義 索引 dcl val
一，jQuery 知識詳解
利用jquery 尋找元素，操作元素
1，jquery 引入
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="i1">123</div> <script src="jquery-1.12.4.js"></script> #下載jq檔案並放到本地 $("#id"） #jq引用jQuery方法或者$ $符相當於jQuery #$("#id"）利用jQuery或者i1標籤 $("#id").xxxx xxxx為jQuery方法</body></html>
2，jquery和DOM之間的轉換
jquery對象[0] => DOM 對象，DOM 對象 => $(DOM對象)
3，jquery 選取器
1，標籤選取器
（1）根據id尋找 $(‘#id‘)
（2）根據class尋找 $(".c1")
（3）標籤選取器 $(‘a‘) 選取所有的a標籤
（4）組合選取器 $(‘a,.c2,#i10‘) 找到所有的a標籤和所有的class為c2的標籤，以及ID為i10的標籤
2，層級選取器
（1）$(‘#i10 a‘) 先找到id 為i10的標籤，然後再找i10下面的子子孫孫a標籤
（2）$(‘#i10>a‘）只找i10下面的子標籤為a為標籤
3，篩選器
（1）$(‘#i10>a:first)找到id為i10的子標籤的第一個a標籤，:last 表示最後一個用法同：first
（2）$(‘#i10 a:eq(0)‘) 找到id為i10的所有a標籤並且索引值為0的a標籤 ：gt(index),:lt(index)用法同:eq
4，根據屬性尋找
（1）$(‘[alex]‘) 找到所有具有屬性alex的標籤
（2）$(‘[alex="123"]‘) 找到具有屬性alex且值為123的標籤，注意雙引號
（3）$("input[type=‘text‘]") 找到所有input 標籤 type屬性為text的標籤
5，表單選取器
（1）$(":test") 找到所有的input標籤type屬性為text的標籤
（2）$(":disabled") 找到所有表單對象中不可編輯的標籤
6，全選，反選，取消範例程式碼
（1）$(‘#tb:checkbox‘).prop(‘checked‘,true) 傳值表示設定值
（2）$(‘#tb:checkbox‘).prop(‘checked‘) 沒傳值表示擷取值
（3）$(‘#tb:checkbox‘).xxx jquery方法內建迴圈
（4）$(‘#tb:checkbox‘).each(function(k){
each 為jquery迴圈
k為當前的索引
this,DOM元素，指當前迴圈的元素 $(this)為 jquery元素
}
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <input type="button" value="全選" onclick="checkAll();" /> <input type="button" value="反選" onclick="reverseAll();" /> <input type="button" value="取消" onclick="cancleAll();"/> <table border="1"> <thead> <tr> <th>選項</th> <th>IP</th> <th>PORT</th> </tr> </thead> <tbody id="tb"> <tr> <td><input type="checkbox" /></td> <td>1.1.1.1</td> <td>80</td> </tr> <tr> <td><input type="checkbox" /></td> <td>1.1.1.1</td> <td>80</td> </tr> <tr> <td><input type="checkbox" /></td> <td>1.1.1.1</td> <td>80</td> </tr> </tbody> </table> <script src="jquery-1.12.4.js"></script> <script> function checkAll() { $(‘#tb :checkbox‘).prop(‘checked‘,true); } function cancleAll() { $(‘#tb :checkbox‘).prop(‘checked‘,false); } function reverseAll() { $(‘:checkbox‘).each(function(k){ // this,代指當前迴圈的每一個元素，並且為dom 對象，需要加$() 轉化為jquery對象 /* if(this.checked){ #利用DOM對象處理 this.checked = false; }else{ this.checked = true; } */ /* if($(this).prop(‘checked‘)){ #利用jquery對象處理 $(this).prop(‘checked‘, false); }else{ $(this).prop(‘checked‘, true); } */ // 三元運算var v = 條件? 真值：假值 var v = $(this).prop(‘checked‘)?false:true; $(this).prop(‘checked‘,v); }) } </script></body></html>
7，jquery操作class
（1） $(‘#i1‘).addClass(‘hide‘) 增加hide class $(‘#i1‘).removeClass(‘hide‘)移除hide class
8，篩選器
在篩選器中可以增加參數，例如find(“#i1”)
（1）$(this).next() 擷取當前標籤的下一個標籤
（2）$(this).prev() 擷取當前標籤的上一個標籤
（3）$(this).parent() 擷取當前標籤的父標籤
（4）$(this).children()擷取當前標籤的子標籤
（5）$(this).sibings() 擷取當前標籤的兄弟標籤
（6）$(this).parent().find(“.content”) 擷取父級標籤的子子孫孫標籤中所有的class 包含content的標籤
左側菜單範例程式碼
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .header{ background-color: black; color: wheat; } .content{ min-height: 50px; } .hide{ display: none; } </style></head><body> <div style="height:400px;width: 200px;border: 1px solid #dddddd"> <div class="item"> <div class="header">標題一</div> <div id="i1" class="content hide">內容</div> </div> <div class="item"> <div class="header">標題二</div> <div class="content hide">內容</div> </div> <div class="item"> <div class="header">標題三</div> <div class="content hide">內容</div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $(‘.header‘).click(function(){ $(this).next().removeClass(‘hide‘).parent().siblings().find(‘.content‘).addClass(‘hide‘) }) </script></body></html>
（7）和$(‘li:eq(1)‘)類似的方法$(‘li‘).eq(1) 同.eq(1) 類似的還有first(),last(),hasClass(class)
（8）$(‘#i1‘).next() 找到下一個 $(‘#i1‘).nextAll()找到下面所有的 $(‘#i1‘).nextUntil(‘#i1‘) 找到下面所有的知道id為i1的標籤
9，文本操作
（1） $(..).text() #選取器加上.text() 方法擷取標籤的內容
（2） $(..).text(“<a>1</a>”） .text的括弧中加上內容為修改標籤的內容
（3） $(..).html() #擷取標籤
（4） $(..).html("<a>1</a>") #設定標籤內容
（5） $.(..).val() #擷取值
（6） $.(..).val() #設定值
10，樣式操作
<script> #開關燈代碼 $(‘#i1‘).click(function(){ if($(‘.c1‘).hasClass(‘hide‘)){ $(‘.c1‘).removeClass(‘hide‘); }else $(‘.c1‘).addClass(‘hide‘); $(‘.c1‘).toggleClass(‘hide‘) #用一句可以替代上面的if{}else{}語句 })</script>
11，自訂屬性的操作
（1）$(..).attr
$(..).attr(‘n‘) 擷取自定屬性的值 例$(‘#i1‘).attr(‘file‘)擷取id為i1的標籤的file 屬性的值
$(..).attr(‘n‘,‘v‘) 為標籤n 屬性設定值為v
$(..).removeAttr(‘n‘) 取標籤的n屬性
（2）$(..).prop 用於checkbox,radio選中操作 用法同attr
12，CSS cursor:pointer; 點擊設定為小手
13，增加標籤
<script> $(‘#a1‘).click(function () { var v = $(‘#t1‘).val(); var temp = "<li>" + v + "</li>"; // $(‘#u1‘).append(temp); #在擷取的標籤下面添加標籤 $(‘#u1‘).prepend(temp); #在擷取的標籤的上面添加標籤 // $(‘#u1‘).after(temp) #在最外邊的後面添加標籤 // $(‘#u1‘).before(temp) #在最外邊的上面添加標籤 }); $(‘#a2‘).click(function () { var index = $(‘#t1‘).val(); //$(‘#u1 li‘).eq(index).remove(); #刪除常值內容 //$(‘#u1 li‘).eq(index).empty(); #清空常值內容 }); $(‘#a3‘).click(function () { var index = $(‘#t1‘).val(); var v = $(‘#u1 li‘).eq(index).clone(); $(‘#u1‘).append(v); //$(‘#u1 li‘).eq(index).remove(); //$(‘#u1 li‘).eq(index).empty(); })
14 ，滾輪設定
（1） scrollTop([val]) 上線滾輪
（2）scrollLeft([val]) 左右滾輪
15，事件綁定
（1） $(‘.c1‘).click() 綁定click事件
（2） $(‘.c1‘).bind(‘click‘,function(){}) 綁定click事件
（3） $(‘.c1‘).unbind(‘click‘,function(){}) 解除綁定定
（4） $(‘.c1‘）.delegate(‘a‘,‘click‘,function(){}) 給c1下面的所有的a標籤綁定一個事件，以委託的方式綁定
（5） $(‘.c1‘).undelegate(‘a‘,‘click‘,function(){}) 給c1下面的所有的a標籤解除綁定定
（6） $(‘.c1‘).on(‘click‘.function(){}) 給c1綁定click事件
（7） $(‘.c1‘).off(‘click‘,function(){}) 給c1解除綁定定click事件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <a onclick="return ClickOn()" href="http://www.oldboyedu.com">走你1</a> <a id="i1" href="http://www.oldboyedu.com">走你2</a> <script src="jquery-1.12.4.js"></script> <script> function ClickOn() { alert(123); return true; #綁定事件執行 } $(‘#i1‘).click(function () { alert(456); return false; #綁定事件不執行 }) </script></body></html>
Python 學習第十七天 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
