Python Day17(jQuery)

時間 2019-12-06

標籤 python day17 day jquery 欄目 Python 简体版

原文原文鏈接

1、概述

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跟python裏面的模塊同樣，它至關因而一個封裝了DOM/BOM/JavaScriptd的一個模塊。

版本選擇?

jQuery版本有不少，1.*,2.*,3.*，通常咱們選擇1.*的最高版本，由於比較穩定，兼容性好。

jQuery對象和Dom對象的轉換?

jquery對象[索引] => Dom對象
$(Dom對象) => jquery對象

2、選擇器

1.id選擇器css

$("#id")

2.class選擇器html

$(".c1")

3.標籤選擇器python

$("a")

4.組合選擇器jquery

$("a,.c1,#i1")

5.層級選擇器設計模式

$("#i1 a") 找子子孫孫
$("#i1>a") 只找兒子

6.基本篩選器瀏覽器

:first     第一個
:last      最後一個
:eq(index) 根據索引來取

7.屬性選擇器app

$("[alex]")        具備alex屬性的全部標籤
$("[alex='123']")  alex=123的全部標籤

示例：框架

<input type='text'/>
<input type='text'/>
<input type='file'/>
<input type='password'/>

$("input[type='text']")
$(':text')      ==>  表單選擇器

全選反選取消示例:ide

 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

3、篩選器

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

4、其餘

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)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。