文章出處

Python自動化【第十七篇】：jQuery介紹

jQuery

jQuery是一個兼容多瀏覽器的javascript庫，核心理念是write less,do more(寫得更少,做得更多)，對javascript進行了封裝，是的更加便捷的開發，并且在兼容性方面十分優秀。

http://www.php100.com/manual/jquery/ jQuery 1.12中文文檔

jQuery和dom之間的轉換關系：

jQuery對象[0] => Dom對象

Dom對象 => $(Dom對象)

查找元素：引入jQuery后用$調用其方法

1.選擇器，直接找到某個或者某類標簽

1.1 id

$('#id') #通過id找到對應標簽

1.2. class

$(".c1") #通過class找到對應標簽

1.3. 標簽

$('a') #找到所有的a標簽

1.4 組合查找

$('a') #找到所有的a標簽

$('.c2') #找到所有的class=c2的標簽

$('a,.c2,#i10') #找到所有的a標簽和class=c2的標簽以及id=i10的標簽

1.5 層級查找

$('#i10 a') #子子孫孫（匹配id=i10的標簽下面所有的a標簽）

$('#i10>a') #只匹配子標簽（只匹配id=i10的標簽子標簽中的a標簽）

1.6 基本選擇器

:first #匹配符合要求的所有標簽的第一個標簽

:last #匹配符合要求的所有標簽的最后一個標簽

:eq(index) #通過索引匹配，index從0開始

1.7 屬性

$('[tony]') #具有tony屬性的所有標簽

$('[tony="123"]') #tony屬性等于123的標簽

$("input[type='text']") #先匹配標簽后匹配屬性

$(':text') #簡寫（匹配所有的text屬性）

實例：多選，反選，全選

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <input type="button" value="全選" onclick="checkAll();">
 9     <input type="button" value="反選" onclick="reverseAll();">
10     <input type="button" value="取消" onclick="cancleAll();">
11     <table border="1">
12         <thead>
13             <tr>
14                 <th>請選擇</th><th>IP</th><th>Port</th>
15             </tr>
16         </thead>
17         <tbody id="tb">
18             <tr>
19                 <td><input type="checkbox"></td>
20                 <td>1.1.1.1</td>
21                 <td>80</td>
22             </tr>
23             <tr>
24                 <td><input type="checkbox"></td>
25                 <td>1.1.1.1</td>
26                 <td>80</td>
27             </tr>
28             <tr>
29                 <td><input type="checkbox"></td>
30                 <td>1.1.1.1</td>
31                 <td>80</td>
32             </tr>
33         </tbody>
34     </table>
35     <script src="jquery-1.12.4.js"></script>
36     <script>
37         function checkAll() {
38             $('#tb :checkbox').prop('checked',true);
39         }
40         function cancleAll() {
41             $('#tb :checkbox').prop('checked',false);
42         }
43         function reverseAll() {
44             /*$('#tb :checkbox').each(function () {
45                 var v = $(this).prop('checked')?false:true;
46                 $(this).prop('checked',v);
47             });*/
48             $('#tb :checkbox').each(function () {
49 //                dom操作:
50 //                if(this.checked){
51 //                this.checked = false;
52 //                }else{this.checked = true;}
53 
54 //                jQuery操作:
55 //                if ($(this).prop('checked')){
56 //                    $(this).prop('checked',false);
57 //                }else{$(this).prop('checked',true);}
58 
59 //                三元運算:
60                 var v = $(this).prop('checked')?false:true;
61                 $(this).prop('checked',v);});}
62     </script>
63 </body>
64 </html>

View Code

1.8對checkbox標簽的操作（prop方法）：

- $('#tb:checkbox').prop('checked'); #不傳值表示獲取值

- $('#tb:checkbox').prop('checked', true); #傳值表示設置值為true

1.9 jQuery方法內置循環：

- $('#tb :checkbox').xxxx （xxxx為直接做操作），例如：

$('#tb :checkbox').prop('checked', true) #給匹配到的每一個chackbox標簽加上checked屬性為true

或者.each() 內套函數：

- $('#tb :checkbox').each(function(k){

// k為當前索引

// this，DOM對象（代指當前循環的元素），$(this)轉換成jQuery對象

})

三元運算：

- var v = 條件 ? 真值 : 假值（若條件成立則v為true，否則false）

2.篩選：

$('#i1').next() #獲取當前標簽的下一個標簽

$('#i1').nextAll() #獲取當前標簽的下邊所有標簽

$('#i1').nextUntil('#i2') #獲取當前標簽以下直到id為i2的標簽

$('#i1').prev() #上一個

$('#i1').prevAll()

$('#i1').prevUntil('#i2')

$('#i1').parent() #父標簽

$('#i1').parents()

$('#i1').parentsUntil()

$('#i1').children() #子標簽

$('#i1').siblings() #獲取當前標簽的所有同級（兄弟）標簽

$('#i1').find(‘#c1’) #匹配當前標簽所有子孫標簽中class=c1的標簽

代碼示例：（篩選器）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .c1 {border: 1px solid #DDDDDD;
 8             height: 400px;width: 200px;}
 9         .item {color:white;}
10         .hide {display: none;}
11     </style>
12 </head>
13 <body class="c1">
14     <div>
15         <div class="item">標題一</div>
16         <div class="content">內容一</div>
17     </div>
18     <div>
19         <div class="item">標題二</div>
20         <div class="content hide">內容二</div>
21     </div>
22     <div>
23         <div class="item">標題三</div>
24         <div class="content hide">內容三</div>
25     </div>
26     <script src="jquery-1.12.4.js"></script>
27     <script>
28         $('.item').click(function () {
29             $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide');
30 //            $(this).next().removeClass('hide');
31 //            $(this).parent().siblings().find('.content').addClass('hide')
32         })
33     </script>
34 </body>
35 </html>

View Code

$('li:eq(1)') #選擇器都由字符串包裹

$('li').eq(1) #篩選器查找

first()

last()

hasClass(class) #是否具有樣式

3.文本操作：

$(..).text() # 獲取文本內容

$(..).text("<a>1</a>") # 設置文本內容

$(..).html()

$(..).html("<a>1</a>")

$(..).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         .modal {
 11             position: fixed;
 12             width: 400px;
 13             height: 200px;
 14             
 15             top:50%;
 16             left:50%;
 17             margin-left: -250px;
 18             margin-top: -200px;
 19             z-index: 10;
 20         }
 21         .shadow {
 22             position: fixed;
 23             top:0;
 24             right:0;
 25             bottom:0;
 26             left:0;
 27             background-color: black;
 28             opacity: 0.6;
 29             z-index: 9;
 30         }
 31         .edit {
 32            border-radius:2px;
 33            border: 2px outset white;
 34            cursor: pointer;
 35         }
 36     </style>
 37 </head>
 38 <body>
 39     <div class="modal hide">
 40         <div style="width: 250px;height: 150px;margin: 20px auto;">
 41             Host:<input name="hostname" type="text"><p></p>
 42             Port:<input name="port" type="text"><p></p>
 43              IP:<input name="IP" type="text">
 44             <p></p>
 45             <input style="margin-left: 75px;" type="button" value="確定">
 46             <input id="i2" type="button" value="取消">
 47         </div>
 48     </div>
 49     <div class="shadow hide"></div>
 50     <input id="i1" type="button" value="添加" >
 51     <input type="button" value="全選" onclick="checkAll();">
 52     <input type="button" value="反選" onclick="reverseAll();">
 53     <input type="button" value="取消" onclick="cancleAll();">
 54     <table border="1">
 55         <thead>
 56             <tr>             <th>HostName</th><th>Port</th><th>IP</th><th>操作</th>
 57             </tr>
 58         </thead>
 59         <tbody id="tb">
 60             <tr>
 61                 <td target="hostname">1.1.1.1</td>
 62                 <td target="port">80</td>
 63                 <td target="IP">80</td>
 64                 <td>
 65                     <input type="button" class="edit" value="編輯"/>|<a>刪除</a>
 66                 </td>
 67             </tr>
 68             <tr>
 69                 <td target="hostname">1.1.1.2</td>
 70                 <td target="port">80</td>
 71                 <td target="IP">80</td>
 72                 <td>
 73                     <input type="button" class="edit" value="編輯"/>|<a>刪除</a>
 74                 </td>
 75             </tr>
 76             <tr>
 77                 <td target="hostname">1.1.1.3</td>
 78                 <td target="port">80</td>
 79                 <td target="IP">80</td>
 80                 <td>
 81                     <input type="button" class="edit" value="編輯"/>|<a>刪除</a>
 82                 </td>
 83             </tr>
 84         </tbody>
 85     </table>
 86     <script src="jquery-1.12.4.js"></script>
 87     <script>
 88         $('#i1').click(function () {
 89             $('.modal,.shadow').removeClass('hide')
 90         });
 91         $('#i2').click(function () {
 92            $('.modal,.shadow') .addClass('hide')
 93            $('.modal input[name="hostname"]').val("");
 94             $('.modal input[name="port"]').val("");
 95             $('.modal input[name="IP"]').val("");
 96         });
 97         $('.edit').click(function () {
 98             $('.modal,.shadow').removeClass('hide');
 99             var tds = $(this).parent().prevAll();
100             tds.each(function () {
101                 var n = $(this).attr('target');
102                 var text = $(this).text();
103                 $('.modal input[name="'+n+'"]').val(text)
104             });});
105     </script>
106 </body>
107 </html>

View Code

　　TAD切換菜單代碼示例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .menu {
 8             height: 38px;
 9             line-height: 38px;}
10         .menu-item {
11             float: left;
12             border-right: 1px solid red;
13             padding: 0 10px;
14             cursor: pointer;}
15         .active {
16             }
17         .hide {
18             display: none;}
19     </style>
20 </head>
21 <body>
22     <div style="width:700px;margin: 100px auto;height: 500px;">
23         <div class="menu">
24             <div class="menu-item active" a="1">菜單一</div>
25             <div class="menu-item" a="2">菜單二</div>
26             <div class="menu-item" a="3">菜單三</div>
27         </div>
28         <div class="content" style="height: 300px;border: 1px solid #DDDDDD">
29             <div b="1">內容一</div>
30             <div class="hide" b="2">內容二</div>
31             <div class="hide" b="3">內容三</div>
32         </div>
33     </div>
34     <script src="jquery-1.12.4.js"></script>
35     <script>
36         $('.menu-item').click(function(){
37             $(this).addClass('active').siblings().removeClass('active');
38             $(".content").children().eq($(this).index()).removeClass('hide').siblings().addClass('hide')
39         });
40     </script>
41 </body>
42 </html>

View Code

　　PS: index 獲取索引位置

6.文檔處理：

append #在匹配標簽的內部最下邊添加標簽

prepend #在匹配標簽的內部最上邊添加標簽

after #在匹配標簽外部后邊追加標簽

before #在匹配標簽外部前邊追加標簽

remove #刪除某個標簽

empty #清空標簽內容，標簽不刪除

clone #復制一個標簽

7.css處理

$('.t1').css('樣式名稱', '樣式值')

點贊代碼示例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .container {padding: 50px;
 8             border:1px solid #DDDDDD;}
 9         .content {position: relative;
10             width:30px;}
11     </style>
12 </head>
13 <body>
14     <div class="container">
15         <div class="content">
16             <span>贊</span>
17         </div>
18     </div>
19     <div class="container">
20         <div class="content">
21             <span>贊</span>
22         </div>
23     </div>
24     <script src="jquery-1.12.4.js"></script>
25     <script>
26         $('.content').click(function () {
27             addFavor(this);});
28         function addFavor(self) {
29             var fontsize = 15;
30             var top = 0;
31             var right = 0;
32             var opacity = 1;
33             var tag = document.createElement('i');
34             $(tag).text('+1');
35             $(tag).css('color','green');
36             $(tag).css('position','absolute');
37             $(tag).css('fontsize',fontsize + 'px');
38             $(tag).css('top',top + 'px');
39             $(tag).css('right',right + 'px');
40             $(tag).css('opacity',opacity);
41             $(self).append(tag);
42             var obj = setInterval(function () {
43                 fontsize = fontsize + 10;
44                 top -= 10;right -= 10;opacity -= 0.2;
45                 $(tag).css('fontSize',fontsize + 'px');
46                 $(tag).css('top',top + 'px');
47                 $(tag).css('right',right + 'px');
48                 $(tag).css('opacity',opacity);
49                 if (opacity < 0) {
50                     clearInterval(obj);
51                     $(tag).remove();}},100)}
52     </script>
53 </body>
54 </html>

View Code

上例用到的方法：

- $('.t1').append()

- $('.t1').remove()

- setInterval #設置定時時間

- 透明度 1 ==> 0

- position

- 字體大小，位置

8.位置：

$(window).scrollTop() #獲取位置（高度）信息

$(window).scrollTop(0) #設置像素高度

scrollLeft([val])

offset().left #指定標簽在html中的坐標

offset().top #指定標簽在html中的坐標

position() #指定標簽相對父標簽(relative標簽)的坐標

移動面板代碼示例：

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <div style="border: 1px solid #ddd;width: 600px;position: absolute;">
 9         <div id="title" style="height: 40px;"></div>
10         <div style="height: 300px;"></div>
11     </div>
12 <script type="text/javascript" src="jquery-1.12.4.js"></script>
13 <script>
14     $(function(){
15         $('#title').mouseover(function(){
16             $(this).css('cursor','move');
17         }).mousedown(function(e){
18             //console.log($(this).offset());
19             var _event = e || window.event;
20             var ord_x = _event.clientX;
21             var ord_y = _event.clientY;
22             var parent_left = $(this).parent().offset().left;
23             var parent_top = $(this).parent().offset().top;
24             $(this).bind('mousemove', function(e){
25                 var _new_event = e || window.event;
26                 var new_x = _new_event.clientX;
27                 var new_y = _new_event.clientY;
28                 var x = parent_left + (new_x - ord_x);
29                 var y = parent_top + (new_y - ord_y);
30                 $(this).parent().css('left',x+'px');
31                 $(this).parent().css('top',y+'px');})
32         }).mouseup(function(){
33             $(this).unbind('mousemove');});})
34 </script>
35 </body>
36 </html>

View Code

9.事件

　　DOM：四種綁定方式

$('.c1').click()

$('.c1').....

$('.c1').bind('click',function(){

})

$('.c1').unbind('click',function(){

})

$('.c').delegate('a', 'click', function(){

}) #委托（delegate）（新添加的標簽也可以通過該方法綁定時間）

$('.c').undelegate('a', 'click', function(){

})

$('.c1').on('click', function(){

})

$('.c1').off('click', function(){

})

阻止事件發生

return false

# 當頁面框架加載完成之后，自動執行

$(function(){

$(...) #在function里面執行jQuery操作

})

10.jQuery擴展：

- $.extend 執行： $.方法

- $.fn.extend 執行：$(..).方法

　　第一種調用方法示例：

 1 <script src="jquery-1.12.4.js"></script>
 2 <script>
 3 //    $('#i1').css();
 4 //    $.ajax();
 5 //    jQuery擴展
 6     $.extend({
 7         'test':function () {
 8             return 'success';}});
 9     $.text();  //直接調用test方法
10 </script>

View Code

　　第二種調用方法示例：

1 <script src="jquery-1.12.4.js"></script>
2 <script>
3     $.fn.extend({
4         'test':function () {
5             return 'success';}}); //必須是$.fn.extend()
6     $('#i1').text(); //必須選中某個標簽后才可以調用
7 </script>

View Code

還可以上網找各種jQuery擴展，解決不同jQuery之間（插件和插件間）全局變量和函數名稱沖突的方法（將變量和函數封裝在自執行函數里）：

(function(arg){

var status = 1;

// 封裝變量

})(jQuery) #或者傳 $，實參是將參數傳遞給自執行函數

文章列表

不含病毒。www.avast.com

大師兄

IT工程師數位筆記本

大師兄發表在痞客邦留言(0) 人氣()

E-mail轉寄

IT工程師數位筆記本

If you give someone a program , you will frustrate them for a day; if you teach them how to program, you will frustrate them for a lifetime.IT 這段話的意思是，如果你交給某人一隻程式，你將折磨他一整天;如果你教會某人如何寫程式，你將折磨他一輩子。

BloggerAds

python自動華（十七） - honey01

Python自動化【第十七篇】：jQuery介紹

歷史上的今天

留言列表

參觀人氣

文章搜尋

最新文章

文章精選

誰來我家

熱門文章

文章分類

最新留言

QR Code

POWERED BY

IT工程師數位筆記本

If you give someone a program , you will frustrate them for a day; if you teach them how to program, you will frustrate them for a lifetime.IT 這段話的意思是，如果你交給某人一隻程式，你將折磨他一整天;如果你教會某人如何寫程式，你將折磨他一輩子。

BloggerAds

python自動華 （十七） - honey01

Python自動化 【第十七篇】：jQuery介紹

歷史上的今天

留言列表

參觀人氣

文章搜尋

最新文章

文章精選

誰來我家

熱門文章

文章分類

最新留言

QR Code

POWERED BY

python自動華（十七） - honey01

Python自動化【第十七篇】：jQuery介紹