Python Day17(jQuery)
阿新 • • 發佈：2017-08-04
none pre 技術 open eight 阻止 pass color .... 
一、概述
1.簡介
jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之後又一個優秀的JavaScript代碼庫（或JavaScript框架）。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。 jQuery的核心特性可以總結為：具有獨特的鏈式語法和短小清晰的多功能接口；具有高效靈活的css選擇器，並且可對CSS選擇器進行擴展；擁有便捷的插件擴展機制和豐富的插件。jQuery兼容各種主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。 參考中文文檔：http://jquery.cuishifeng.cn/ jQuery是什麽？- jquery對象[索引] => Dom對象
- $(Dom對象) => jquery對象
二、選擇器
1.id選擇器
$("#id")
2.class選擇器
$(".c1")
3.標簽選擇器
$("a")
4.組合選擇器
$("a,.c1,#i1")
5.層級選擇器
$("#i1 a") 找子子孫孫
$(
6.基本篩選器
:first 第一個
:last 最後一個
:eq(index) 根據索引來取
7.屬性選擇器
$("[alex]") 具有alex屬性的所有標簽
$("[alex=‘123‘]") alex=123的所有標簽
示例：
<input type=‘text‘/> <input type=‘text‘/> <input type=‘file‘/> <input type=‘password‘/> $("input[type=‘text‘]") $(‘:text‘) ==> 表單選擇器
全選反選取消示例:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="x-ua-compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>Title</title> 8 </head> 9 <body> 10 <div id="menu1"> 11 <input type="button" value="全選" /> 12 <input type="button" value="反選" /> 13 <input type="button" value="取消" /> 14 </div> 15 <div> 16 <table border="1" width="300px" style="text-align: center"> 17 <thead> 18 <tr> 19 <th>選擇</th> 20 <th>序號</th> 21 <th>用戶名</th> 22 </tr> 23 </thead> 24 <tbody id="table1"> 25 <tr> 26 <td><input type="checkbox"></td> 27 <td>1</td> 28 <td>breakering</td> 29 </tr> 30 <tr> 31 <td><input type="checkbox"></td> 32 <td>2</td> 33 <td>profhua</td> 34 </tr> 35 <tr> 36 <td><input type="checkbox"></td> 37 <td>3</td> 38 <td>wolf</td> 39 </tr> 40 </tbody> 41 </table> 42 </div> 43 <script src="jquery-1.12.4.js"></script> 44 <script> 45 $("#menu1 :input[value=‘全選‘]").click(function () { 46 $("#table1 :checkbox").prop("checked", true); 47 }); 48 $("#menu1 :input[value=‘反選‘]").click(function () { 49 $("#table1 :checkbox").each(function () { 50 $(this).prop("checked", $(this).prop("checked") ? false : true) 51 }) 52 }); 53 $("#menu1 :input[value=‘取消‘]").click(function () { 54 $("#table1 :checkbox").prop("checked", false); 55 }); 56 </script> 57 </body> 58 </html>View Code
三、篩選器
1.過濾
eq(index) # 根據索引來獲取對象 eg:$("li").eq(1) == $("li :eq(1)")
first() # 獲取第一個
last() # 獲取最後一個
hasClass(class) # 是否有具有某類CSS樣式
2.查找
children() # 所有的孩子
siblings() # 所有的兄弟姐妹
find() # 搜索與表達式匹配的元素
next() # 下一個
nextAll() # 後面的所有元素
nextUntil() # 下一個直到什麽為止(不包含)
prev() # 上一個
prevAll() # 上面的所有元素
prevUntil() # 上一個直到什麽為止(不包含)
parent() # 父標簽
parents() # 所有的父標簽
parentsUntil() # 所有的父標簽直到什麽為止(不包含)
3.文本操作
$(..).text() # 獲取文本內容 $(..).text(“<a>1</a>”) # 設置文本內容 $(..).html() # 獲取html內容 $(..).html("<a>1</a>") # 設置html內容 $(..).val() # 獲取val的值 $(..).val(..) # 設置val的值
4.樣式操作
addClass() # 添加一類樣式
removeClass() # 移除一類樣式
toggleClass() # 如果存在（不存在）就刪除（添加）一類樣式
5.屬性操作
# 專門用於做自定義屬性 $(..).attr(‘n‘) # 獲取屬性值 $(..).attr(‘n‘,‘v‘) # 設置屬性值 $(..).removeAttr(‘n‘) # 移除屬性 # 專門用於chekbox,radio $(..).prop(‘checked‘) # 獲取屬性 $(..).prop(‘checked‘, true) # 設置屬性
切換菜單:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .hide{ 8 display: none; 9 } 10 .menu{ 11 height: 38px; 12 background-color: #eeeeee; 13 line-height: 38px; 14 } 15 .active{ 16 background-color: brown; 17 } 18 .menu .menu-item{ 19 float: left; 20 border-right: 1px solid red; 21 padding: 0 5px; 22 cursor: pointer; 23 } 24 .content{ 25 min-height: 100px; 26 border: 1px solid #eeeeee; 27 } 28 </style> 29 </head> 30 <body> 31 32 <div style="width: 700px;margin:0 auto"> 33 34 <div class="menu"> 35 <div class="menu-item active">菜單一</div> 36 <div class="menu-item">菜單二</div> 37 <div class="menu-item">菜單三</div> 38 </div> 39 <div class="content"> 40 <div>內容一</div> 41 <div class="hide">內容二</div> 42 <div class="hide">內容三</div> 43 44 </div> 45 46 </div> 47 <script src="jquery-1.12.4.js"></script> 48 <script> 49 $(".menu-item").click(function () { 50 $(this).addClass("active").siblings().removeClass("active"); 51 $(".content").children().eq($(this).index()).removeClass("hide").siblings().addClass("hide"); 52 }) 53 </script> 54 </body> 55 </html>View Code
6.文檔處理
append() # 內部加在末尾
prepend() # 內部加在開頭
after() # 外部加在末尾
before() # 外部加在開頭
remove() # 移除整個標簽
empty() # 清空標簽的內容
clone() # 克隆標簽
7.CSS處理
$(‘t1‘).css(‘樣式名稱‘, ‘樣式值‘) # 位置 $(window).scrollTop() # 獲取 $(window).scrollTop(0) # 設置 $(window).scrollLeft([val]) offset().left # 指定標簽在html中的坐標 offset().top # 指定標簽在html中的坐標 position() # 指定標簽相對父標簽(relative)標簽的坐標 height() # 獲取某個元素的高度 innerHeight() # 獲取某個元素的高度 + 內邊距 padding outerHeight() # 獲取某個元素的高度 + 內邊距 padding + 邊框 border outerHeight(true) # 獲取某個元素的高度 + 內邊距 padding + 邊框 border + 外邊距 margin width() # 獲取某個元素的寬度 innerWidth() # 獲取某個元素的寬度 + 內邊距 padding outerWidth() # 獲取某個元素的寬度 + 內邊距 padding + 邊框 border outerWidth(true) # 獲取某個元素的寬度 + 內邊距 padding + 邊框 border + 外邊距 margin
四、其他
1.事件綁定# 第一種 $(‘.c1‘).click(function(){ }) $(‘.c1‘)..... # 第二種 $(‘.c1‘).bind(‘click‘,function(){ }) $(‘.c1‘).unbind(‘click‘,function(){ }) # 第三種（重要，委托） $(‘.c‘).delegate(‘a‘, ‘click‘, function(){ }) $(‘.c‘).undelegate(‘a‘, ‘click‘, function(){ }) # 三種方法內部均調用下面兩種方法 $(‘.c1‘).on(‘click‘, function(){ }) $(‘.c1‘).off(‘click‘, function(){ })
2.阻止事件發生:
return false
3.當頁面框架加載完成之後，自動執行
$(function(){ $(...) })
4.jQuery擴展：
- $.extend $.方法 - $.fn.extend $(..).方法 (function(){ var status = 1; // 封裝變量 })(jQuery)
Python Day17(jQuery)