【目錄】 一、jQuery 簡介 二、jQuery 的基本使用 一、jQuery 簡介 1、介紹 jQuery內部封裝了原生的js代碼(還額外添加了很多的功能)能夠讓你通過書寫更少的代碼 完成js操作 類似於python裡面的模塊 在前端模塊不叫模塊 叫 “類庫” 相容多個瀏覽器的 你在使用jQue ...
【目錄】
一、jQuery 簡介
二、jQuery 的基本使用——選擇器
一、jQuery 簡介
1、介紹
jQuery內部封裝了原生的js代碼(還額外添加了很多的功能)
能夠讓你通過書寫更少的代碼 完成js操作
類似於python裡面的模塊 在前端模塊不叫模塊 叫 “類庫”相容多個瀏覽器的 你在使用jQuery的時候就不需要考慮瀏覽器相容問題
jQuery在使用的時候也需要導入
但是它的文件非常的小(幾十KB) 基本不影響網路速度
jQuery的宗旨
write less do more讓你用更少的代碼完成更多的事情
官網：https://jquery.com/
技術指南：http://jquery.cuishifeng.cn/index.html
2、學習目標
【學習內容】
選擇器
篩選器
樣式操作
文本操作
屬性操作
文檔處理
事件
動畫效果
插件
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>
"""此方法的前提：你的電腦必須要有網路"""
<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')
3、如何查找標簽
（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)]
$('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)]
$('[屬性名]') / $('[屬性名="屬性值"]')
$('[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)]
$(':屬性名')
$('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)]
()
$('#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)]
