【2020Python修煉記】前端開發之 jQuery基礎+選擇器

時間 2020-06-10

標籤 2020Python修煉記前端開發 jquery 基礎選擇器欄目 JQuery 简体版

原文原文鏈接

【目錄】

1、jQuery 簡介

2、jQuery 的基本使用——選擇器

1、jQuery 簡介

一、介紹

jQuery內部封裝了原生的js代碼(還額外添加了不少的功能)
可以讓你經過書寫更少的代碼完成js操做
相似於python裏面的模塊在前端模塊不叫模塊叫「類庫」

兼容多個瀏覽器的你在使用jQuery的時候就不須要考慮瀏覽器兼容問題

jQuery在使用的時候也須要導入

可是它的文件很是的小(幾十KB) 基本不影響網絡速度

jQuery的宗旨
write less do more

讓你用更少的代碼完成更多的事情

官網：https://jquery.com/

技術指南：http://jquery.cuishifeng.cn/index.html

二、學習目標

【學習內容】

選擇器
篩選器
樣式操做
文本操做
屬性操做
文檔處理
事件
動畫效果
插件
each、data、Ajax(重點 django部分學)

如何導入jQuery框架文件

# 方法 1：文件下載到本地，在html代碼的<body>部分，使用<script> 的src屬性引入（即外聯式引入js文件）
<script src="jquery-3.3.1.min.js"></script>
<script>
    //注意，必定在引入jQuery以後，再使用jQuery提供的各類操做
</script>
如何解決多個文件反覆書寫引入語句的代碼？

能夠藉助於 pycharm 軟件的自動初始化代碼功能完成自動添加（生成模板文件）
【配置】——【編輯】——【file and code template】

"""我不想下載jQuery文件能不能使用呢？請見方法2 """

# 方法2：直接引入jQuery提供的CDN服務(基於網絡直接請求加載)
（CDN:內容分發網絡。CDN有免費的也有收費的。前端免費的cdn網站: bootcdn ）

在html代碼的<body>部分，加入如下代碼：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>css

"""此方法的前提：你的計算機必需要有網絡"""
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script> code... </script>

# jQuery基本語法
jQuery(選擇器).action()
 秉持着jQuery的宗旨 jQuery簡寫 $ jQuery() 等價於（===） $() # jQuery與js代碼對比
eg:將p標籤內部的文本顏色改成紅色 // 原生js代碼操做標籤 let pEle = document.getElementById('d1') pEle.style.color = 'red'
// jQuery操做標籤 $('p').css('color','blue')

如何定義 jQuery 對象？

jQuery對象就是經過jQuery包裝DOM對象後產生的對象。jQuery對象是 jQuery獨有的。

若是一個對象是 jQuery對象，那麼它就可使用jQuery裏的方法：例如 $(「#i1」).html()。

$("#i1").html()的意思是：獲取id值爲 i1的元素的html代碼。其中 html()是jQuery裏的方法。

至關於： document.getElementById("i1").innerHTML;

雖然 jQuery對象是包裝 DOM對象後產生的，可是 jQuery對象沒法使用 DOM對象的任何方法，同理 DOM對象也沒不能使用 jQuery裏的方法。

一個約定，咱們在聲明一個jQuery對象變量的時候在變量名前面加上$：
var $variable = jQuery對像 var variable = DOM對象
$variable[0] //jQuery對象轉成DOM對象

2、jQuery 的基本使用：如何查找標籤——選擇器/篩選器

（1）基本選擇器 —— $('#id') / $(' . 類') / $('標籤名')—— 注意：括號內不要少了單引號

// id選擇器 $('#d1') w.fn.init [div#d1]0: div#d1length: 1__proto__: Object(0)
// class選擇器 $('.c1') w.fn.init [p.c1, prevObject: w.fn.init(1)]0: p.c1length: 1prevObject: w.fn.init [document]__proto__: Object(0) // 標籤選擇器 $('span') w.fn.init(3) [span, span, span, prevObject: w.fn.init(1)] """必定要區分開(重點)"""
// jQuery對象 如何變成標籤對象 $('#d1')[0] <div id="d1">…</div> document.getElementById('d1') # 查看是否變爲 標籤對象（調用 標籤對象） <div id="d1">…</div>
 // 標籤對象如何轉jQuery對象 $(document.getElementById('d1')) w.fn.init [div#d1]

（2）組合選擇器/分組與嵌套

【組合-疊加條件】
$('div') w.fn.init(2) [div#d1, div.c1, prevObject: w.fn.init(1)]
$('div.c1') w.fn.init [div.c1, prevObject: w.fn.init(1)]0: div.c1length: 1prevObject: w.fn.init [document]__proto__: Object(0) $('div#d1') w.fn.init [div#d1, prevObject: w.fn.init(1)]
$('*') w.fn.init(19) [html, head, meta, title, meta, link, script, script, body, span, span, div#d1, span, p#d2, span, span, 
div.c1, span, span, prevObject: w.fn.init(1)]

【混用-並列】
 $('#d1,.c1,p')  # 並列+混用
w.fn.init(3) [div#d1, p#d2, div.c1, prevObject: w.fn.init(1)]
 $('div span')  # 後代
w.fn.init(3) [span, span, span, prevObject: w.fn.init(1)] $('div>span')  # 兒子
w.fn.init(2) [span, span, prevObject: w.fn.init(1)] $('div+span')  # 毗鄰
w.fn.init [span, prevObject: w.fn.init(1)] $('div~span')  # 弟弟
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]

（3）基本篩選器 —— 標籤：篩選條件

(對獲取的標籤對象，進行二次篩選（冒號後面的爲篩選條件）)

$('ul li') w.fn.init(10) [li, li, li, li, li, li, li.c1, li, li#d1, li, prevObject: w.fn.init(1)]
 $('ul li:first')  # 大兒子 
w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0) $('ul li:last')  # 小兒子
w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0) $('ul li:eq(2)')  # 放索引
w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0) $('ul li:even')  # 偶數索引 0包含在內
w.fn.init(5) [li, li, li, li.c1, li#d1, prevObject: w.fn.init(1)]0: li1: li2: li3: li.c14: li#d1length: 
5prevObject: w.fn.init [document]__proto__: Object(0)
 $('ul li:odd')  # 奇數索引
w.fn.init(5) [li, li, li, li, li, prevObject: w.fn.init(1)]0: li1: li2: li3: li4: lilength: 
5prevObject: w.fn.init [document]__proto__: Object(0) $('ul li:gt(2)')  # 大於索引
w.fn.init(7) [li, li, li, li.c1, li, li#d1, li, prevObject: w.fn.init(1)]0: li1: li2: li3: li.c14: li5: li#d16: 
lilength: 7prevObject: w.fn.init [document]__proto__: Object(0)
 $('ul li:lt(2)')  # 小於索引
w.fn.init(2) [li, li, prevObject: w.fn.init(1)]0: li1: lilength: 2prevObject: w.fn.init [document]__proto__: Object(0) $('ul li:not("#d1")')  # 移除知足條件的標籤
w.fn.init(9) [li, li, li, li, li, li, li.c1, li, li, prevObject: w.fn.init(1)] $('div') w.fn.init(2) [div, div, prevObject: w.fn.init(1)] $('div:has("p")')  # 選取出包含一個或多個標籤在內的標籤（即 判斷是否包含該標籤）
w.fn.init [div, prevObject: w.fn.init(1)]

（4）屬性選擇器——$('[屬性名]') / $('[屬性名="屬性值"]')

$('[username]') w.fn.init(3) [input, input, p, prevObject: w.fn.init(1)] $('[username="jason"]') w.fn.init [input, prevObject: w.fn.init(1)] $('p[username="egon"]') w.fn.init [p, prevObject: w.fn.init(1)] $('[type]') w.fn.init(2) [input, input, prevObject: w.fn.init(1)] $('[type="text"]') w.fn.init(2) [input, input, prevObject: w.fn.init(1)]

（5）表單篩選器——主要針對form表單【簡寫】$(':屬性名')

$('input[type="text"]') w.fn.init [input, prevObject: w.fn.init(1)]0: inputlength: 1prevObject: w.fn.init [document]__proto__: Object(0) $('input[type="password"]') w.fn.init [input, prevObject: w.fn.init(1)] 【簡寫】 $(':text')  # 等價於上面第一個
w.fn.init [input, prevObject: w.fn.init(1)]0: inputlength: 1prevObject: w.fn.init [document]__proto__: Object(0) $(':password')  # 等價於上面第二個
w.fn.init [input, prevObject: w.fn.init(1)] 
【簡寫】
input 標籤屬性 :text :password :file :radio :checkbox :submit :reset :button ... 表單對象屬性 :enabled :disabled :checked :selected
 """特殊狀況""" $(':checked')  # 它會將checked和selected都拿到
w.fn.init(2) [input, option, prevObject: w.fn.init(1)]0: input1: optionlength: 2prevObject: w.fn.init [document]__proto__: Object(0) $(':selected')  # 它不會 只拿selected
w.fn.init [option, prevObject: w.fn.init(1)] $('input:checked')  # 本身加一個限制條件（什麼標籤的什麼屬性）
w.fn.init [input, prevObject: w.fn.init(1)]

（6）篩選器方法—— 選擇器 . 方法 ()

$('#d1').next()  # 同級別下一個
w.fn.init [span, prevObject: w.fn.init(1)]0: spanlength: 1prevObject: w.fn.init [span#d1]__proto__: Object(0)
 $('#d1').nextAll() w.fn.init(5) [span, div#d2, span, span, span.c1, prevObject: w.fn.init(1)]0: span1: div#d22: span3: 
span4: span.c1length: 5prevObject: w.fn.init [span#d1]__proto__: Object(0)
 $('#d1').nextUntil('.c1')  # 不包括最後一個
w.fn.init(4) [span, div#d2, span, span, prevObject: w.fn.init(1)]0: span1: div#d22: span3: spanlength: 
4prevObject: w.fn.init [span#d1]__proto__: Object(0)
 $('.c1').prev()  # 上一個
w.fn.init [span, prevObject: w.fn.init(1)]0: spanlength: 1prevObject: w.fn.init [span.c1, 
prevObject: w.fn.init(1)]__proto__: Object(0) $('.c1').prevAll() w.fn.init(5) [span, span, div#d2, span, span#d1, prevObject: w.fn.init(1)]
 $('.c1').prevUntil('#d2') w.fn.init(2) [span, span, prevObject: w.fn.init(1)] $('#d3').parent()  # 第一級父標籤
w.fn.init [p, prevObject: w.fn.init(1)]0: plength: 1prevObject: w.fn.init [span#d3]__proto__: Object(0)
 $('#d3').parent().parent() w.fn.init [div#d2, prevObject: w.fn.init(1)]
$('#d3').parent().parent().parent() w.fn.init [body, prevObject: w.fn.init(1)] $('#d3').parent().parent().parent().parent() w.fn.init [html, prevObject: w.fn.init(1)] $('#d3').parent().parent().parent().parent().parent() w.fn.init [document, prevObject: w.fn.init(1)] $('#d3').parent().parent().parent().parent().parent().parent() w.fn.init [prevObject: w.fn.init(1)] $('#d3').parents() w.fn.init(4) [p, div#d2, body, html, prevObject: w.fn.init(1)]
 $('#d3').parentsUntil('body') w.fn.init(2) [p, div#d2, prevObject: w.fn.init(1)]
 $('#d2').children()  # 兒子
 $('#d2').siblings()  # 同級別上下全部
 $('div p') # 等價 
$('div').find('p')  # find從某個區域內篩選出想要的標籤 
              
              
"""下述兩兩等價——複雜篩選器 能夠拆分爲 篩選器方法"""
 $('div span:first') w.fn.init [span, prevObject: w.fn.init(1)] $('div span').first() w.fn.init [span, prevObject: w.fn.init(3)]0: spanlength: 1prevObject: w.fn.init(3) [span, span
#d3, span, prevObject: w.fn.init(1)]__proto__: Object(0)
 $('div span:last') w.fn.init [span, prevObject: w.fn.init(1)] $('div span').last() w.fn.init [span, prevObject: w.fn.init(3)] $('div span:not("#d3")') w.fn.init(2) [span, span, prevObject: w.fn.init(1)] $('div span').not('#d3') w.fn.init(2) [span, span, prevObject: w.fn.init(3)]