|
一、jQuery簡(jiǎn)介 1、什么是jQuery #jQuery 是一個(gè)高效、精簡(jiǎn)并且功能豐富的JavaScript工具庫(kù) #jQuery極大的簡(jiǎn)化了JavaScript編程 2、為何要用jQuery jQuery的優(yōu)勢(shì)（jQuery的宗旨就是：“Write less, do more.“）
#1、開源 免費(fèi)
#2、一款輕量級(jí)的JS框架。jQuery核心js文件才幾十kb，不會(huì)影響頁(yè)面加載速度。
#3、便捷的選擇器與DOM操作，
#4、鏈?zhǔn)奖磉_(dá)式。jQuery的鏈?zhǔn)讲僮骺梢园讯鄠€(gè)操作寫在一行代碼里，更加簡(jiǎn)潔。
#5、事件、樣式、動(dòng)畫支持。jQuery還簡(jiǎn)化了js操作css的代碼，并且代碼的可讀性也比js要強(qiáng)。
#6、Ajax操作支持。jQuery簡(jiǎn)化了AJAX操作，后端只需返回一個(gè)JSON格式的字符串就能完成與前端的通信。
#7、跨瀏覽器兼容。jQuery基本兼容了現(xiàn)在主流的瀏覽器，不用再為瀏覽器的兼容問(wèn)題而傷透腦筋。
#8、插件擴(kuò)展開發(fā)。jQuery有著豐富的第三方的插件，例如：樹形菜單、日期控件、圖片切換插件、彈出窗口等等基本前端頁(yè)面上的組件都有對(duì)應(yīng)插件，并且用jQuery插件做出來(lái)的效果很炫，并且可以根據(jù)自己需要去改寫和封裝插件，簡(jiǎn)單實(shí)用。
3 、jQuery版本 #1.x：兼容IE678,使用最為廣泛的，官方只做BUG維護(hù)，功能不再新增。因此一般項(xiàng)目來(lái)說(shuō)，使用1.x版本就可以了，最終版本：1.12.4 (2016年5月20日) #2.x：不兼容IE678，很少有人使用，官方只做BUG維護(hù)，功能不再新增。如果不考慮兼容低版本的瀏覽器可以使用2.x，最終版本：2.2.4 (2016年5月20日) #3.x：不兼容IE678，只支持最新的瀏覽器。需要注意的是很多老的jQuery插件不支持3.x版。目前該版本是官方主要更新維護(hù)的版本。 #ps：維護(hù)IE678是一件讓人頭疼的事情，一般我們都會(huì)額外加載一個(gè)CSS和JS單獨(dú)處理。 4 、jQuery相關(guān)網(wǎng)站 官網(wǎng) https:/// 文檔API： http://jquery./index.html 二、Jquery基本使用 1、先下載到本地，然后引用，才能使用（推薦下載壓縮版） #方式一：本地引入
<script src="jquery-3.3.1.min.js"></script>
<script>
//注意，一定在引入jQuery之后，再使用jQuery提供的各種操作
</script>
#方式二：直接使用CDN
<script src="https://cdn./jquery/3.3.1/jquery.js"></script>
<script>
code...
</script>
ps: BootCDN jQuery各個(gè)版本地址： https://www./jquery/ 2. jQuery對(duì)象 $是jQuery的別名
$對(duì)象可以用作選擇器獲取元素，還可以創(chuàng)建DOM對(duì)象
jQuery('.item').show()
//等同于
$('.item').show()
3. 文檔就緒事件 DOM文檔加載的步驟(重點(diǎn))
等待文檔加載完畢后執(zhí)行函數(shù)，有兩種方式 #1、執(zhí)行時(shí)間不同
window.onload必須等到頁(yè)面內(nèi)包括圖片的所有元素加載完畢后才能執(zhí)行。
$(document).ready()是DOM結(jié)構(gòu)繪制完畢后就執(zhí)行，不必等到加載完畢。
#2、編寫個(gè)數(shù)不同
window.onload不能同時(shí)編寫多個(gè)，如果有多個(gè)window.onload方法，只會(huì)執(zhí)行一個(gè)
$(document).ready()可以同時(shí)編寫多個(gè)，并且都可以得到執(zhí)行
#3、簡(jiǎn)化寫法不同
window.onload沒(méi)有簡(jiǎn)化寫法
$(document).ready(function(){})可以簡(jiǎn)寫成$(function(){});
4. 鏈?zhǔn)讲僮?/strong> #鏈?zhǔn)秸{(diào)用，原理就是 調(diào)用一個(gè)實(shí)例化方法返回的是當(dāng)前的對(duì)象
$('.box1').css('color','red').next().css('width','200px').css('height','200px').css('background','green').removeAttr('class')
5. jQueryDom和jsDom #1、通過(guò)原生js獲取的dom對(duì)象，我們稱之為jsDOM或者原生DOM
#2、通過(guò)jQuery選擇器獲取的dom對(duì)象，我們稱之為 jQuery DOM
#3、jQuery DOM本質(zhì)上 是由 jsDOM組成的集合，是個(gè)類數(shù)組對(duì)象?？梢酝ㄟ^(guò) [索引] 獲取其中的jsDOM，$(jsDOM) 可以轉(zhuǎn)為 jQuery DOM如下
var box = document.getElementsByClassName('box'); #獲取js DOM對(duì)象
Js DOM對(duì)象 ==> JQ DOM對(duì)象$(js DOM對(duì)象) # 例如 $(box)
JQ DOM對(duì)象 ==> JS DOM對(duì)象
$("選擇器")[0] # 或者$("選擇器").get(0)
三、 選擇器1、id選擇器 $("#id")
2、標(biāo)簽選擇器 $("tagName")
3、class選擇器 $(".className")
4、所有元素選擇器 $("*")
5、交集選擇器 $("div.c1") // 找到類為c1的div標(biāo)簽
6、并集選擇器 $("#id, .className, tagName")
7、層級(jí)選擇器 //x和y可以為任意選擇器
$("x y"); // x的所有后代y（子子孫孫）
$("x > y"); // x的所有兒子y（兒子）
$("x + y") // 找到所有緊挨在x后面的y
$("x ~ y") // x之后所有的兄弟y
8、基本篩選器 :first // 第一個(gè)
:last // 最后一個(gè)
:eq(index)// 索引等于index的那個(gè)元素
:even // 匹配所有索引值為偶數(shù)的元素，從 0 開始計(jì)數(shù)
:odd // 匹配所有索引值為奇數(shù)的元素，從 0 開始計(jì)數(shù)
:gt(index)// 匹配所有大于給定索引值的元素
:lt(index)// 匹配所有小于給定索引值的元素
:not(選擇器)// 過(guò)濾掉所有滿足not條件的標(biāo)簽
:has(選擇器)// 過(guò)濾出所有后代中滿足has條件的標(biāo)簽
#例如
$("div:has(h1)")// 找到所有后代中有h1標(biāo)簽的div標(biāo)簽
$("div:has(.c1)")// 找到所有后代中有c1樣式類的div標(biāo)簽
$("li:not(.c1)")// 找到所有不包含c1樣式類的li標(biāo)簽
$("li:not(:has(a))")// 找到所有?。。『蟠校。?！不含a標(biāo)簽的li標(biāo)簽
 JQ版自定義模態(tài)框9、屬性選擇器 [attribute]
[attribute=value]// 屬性等于
[attribute!=value]// 屬性不等于
舉例 <input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox類型的input標(biāo)簽
$("input[type!='text']");// 取到類型不是text的input標(biāo)簽
表單常用篩選 :text
:password:file
:radio
:checkbox
:submit
:reset
:button
舉例 $(":checkbox") // 找到所有的checkbox
表單對(duì)象屬性: :enabled
:disabled
:checked
:selected
舉例 找到可用的input標(biāo)簽 <form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>
$("input:enabled") // 找到可用的input標(biāo)簽
找到被選中的option： <select id="s1">
<option value="beijing">北京市</option>
<option value="shanghai">上海市</option>
<option selected value="guangzhou">廣州市</option>
<option value="shenzhen">深圳市</option>
</select>
$(":selected") // 找到所有被選中的option
四、篩選器 下一個(gè)兄弟元素： $("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
上一個(gè)兄弟元素： $("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
父親元素： $("#id").parent()
$("#id").parents() // 查找當(dāng)前元素的所有的父輩元素
$("#id").parentsUntil() // 查找當(dāng)前元素的所有的父輩元素，直到遇到匹配的那個(gè)元素為止。
兒子和兄弟元素： $("#id").children();// 兒子們
$("#id").siblings();// 兄弟們
查找 搜索所有與指定表達(dá)式匹配的元素。這個(gè)函數(shù)是找出正在處理的元素的后代元素的好方法。 $("div").find("p") //等價(jià)于 $("div p")
篩選 篩選出與指定表達(dá)式匹配的元素集合。這個(gè)方法用于縮小匹配的范圍。用逗號(hào)分隔多個(gè)表達(dá)式。 $("div").filter(".c1") // 從結(jié)果集中過(guò)濾出有c1樣式類的 等價(jià)于 $("div.c1")
補(bǔ)充： .first() // 獲取匹配的第一個(gè)元素 .last() // 獲取匹配的最后一個(gè)元素 .not() // 從匹配元素的集合中刪除與指定表達(dá)式匹配的元素 .has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。 .eq() // 索引值等于指定值的元素 舉例： 左側(cè)菜單示例
|
|
|
來(lái)自： python_lover > 《待分類》
