jQuery是什么鸿吆?
就像是 python 中的模塊、 類庫
就是把 JavaScript 的語句封裝起來的一個(gè)模塊文檔
JavaScript 中有:
1.直接查找:
2.間接查找
Jquery 有:
選擇器
篩選器
特點(diǎn)
強(qiáng)大選擇器 --- 類似于css的選擇器
DOM操作
Ajax封裝 (后面項(xiàng)目的時(shí)候講)
JQuery 下載與使用
官網(wǎng): [https://jquery.com](https://jquery.com/)
中文文檔:<http://jquery.cuishifeng.cn/>
如何使用:
建議把要使用的源文件更名為不帶版本號(hào)的文件名列赎,引入的時(shí)候也不帶版本號(hào),在代碼塊引入的附近寫上注釋,注明版本即可尚蝌。
image
選擇器
/*1.id 選擇器:*/
$('#test')
/*2.標(biāo)簽選擇器*/
$("div")
/*3.class選擇器*/
$('.class')
/*4.組合選擇器 --> 會(huì)找到所有的在小括號(hào)內(nèi)的標(biāo)簽琐谤,寫的時(shí)候每個(gè)標(biāo)簽之間用 逗號(hào)分開*/
$('div,p,span')
5. 祖先 --- 子孫
--> 找到這個(gè)標(biāo)簽的下的所有的 目標(biāo)標(biāo)簽,不論在第幾層加缘,都會(huì)被找到;
寫的時(shí)候標(biāo)簽之間用 空格隔開。
$('form input')
6. parent > child
--> 只會(huì)找到這個(gè)標(biāo)簽的下一層里的所有的符合目標(biāo)的標(biāo)簽琅捏,也就是只在其下面的第一層中找生百;
$('form > input')
7. 根據(jù)明確的層級(jí)找
:first --> 在同級(jí)別的標(biāo)簽中找到第一元素
:last --> 在同級(jí)別的標(biāo)簽中找到最后一個(gè)元素
:eq() --> 在同級(jí)別的標(biāo)簽中利用標(biāo)簽所在的索引位置找到匹配的標(biāo)簽,索引號(hào)從 0 開始
8. 過濾器
jQuery filter() 方法
filter() 方法允許您規(guī)定一個(gè)標(biāo)準(zhǔn)柄延。只要匹配的元素蚀浆。
下面的例子返回帶有類名 "url" 的所有 <p> 元素:
$(document).ready(function(){
$("p").filter(".url");
});
9. 屬性選擇器 ☆☆☆☆☆
--> 匹配到某個(gè)標(biāo)簽下且具有某一屬性的所有標(biāo)簽
<input type="text" name='username'/>
$("input[type='text']")
或者
$("input[name='username']")
更多
image.png
篩選器
next() --> 獲取同級(jí)緊鄰的下一個(gè)元素
next("#test") --> 獲取到同級(jí)標(biāo)簽下一個(gè)元素中 id 為 test 的元素
nextAll() --> 獲取同級(jí)緊鄰的下方的所有元素
nextUntil(".c1") --> 獲取同級(jí)標(biāo)簽緊鄰的其下的所有元素,直到類名為 c1 的標(biāo)簽為止搜吧,就不在向下匹配
prev() --> 獲取同級(jí)緊鄰上一個(gè)元素
prevAll() --> 獲取同級(jí)緊鄰上方所有的元素
prevUtil() --> 獲取同級(jí)緊鄰下方所有的元素
children() --> 獲取所有的子元素
parent() --> 獲取自己的父元素
siblings() --> 獲取兄弟元素
jQuery 操作
// css 樣式操作
// 添加樣式
$(".c1").css("display", "none");
// 文本操作
$("div").text("dsadsa")
input系列框里面的值市俊,
$("xxx").val("dsadsa")
$("xxx").html()
// 屬性操作
給某一個(gè)標(biāo)簽的屬性賦值
$("xxx").attr("class","c1");
獲取屬性 target 的值
$("xxx").attr("key");
移除標(biāo)簽的屬性
$("xxx").removeAttr("key");
添加類 注意類名前面沒有點(diǎn)
$("xxx").addClass("c1" );
移除類
$("xxx"). removeClass("c1" );
沒有這個(gè)類,就設(shè)置為這個(gè)類,有這個(gè)類滤奈,就移除這個(gè)類
$("xxx").toggleClass("hidden");
判斷有沒有這個(gè)類
$("xxx").hasClass("c1" );
在操作關(guān)于input系列【radio checkbox】 我們選中或者取消摆昧,
不能采用attr來進(jìn)行設(shè)值, 不過,在1.3 版本修復(fù)了這個(gè)bug---
prop()專門是用來對(duì)input【radio checkbox】
$("xxx").prop("checked", true);
// 文檔操作
往選中的元素內(nèi)部的后面添加元素
append();
往選中的元素的前面添加元素
prepend();
往選中元素的外部的后面進(jìn)行添加
after();
往選中元素的外部的前面進(jìn)行添加
before();
將元素內(nèi)部的內(nèi)容刪除
empty();
將元素的標(biāo)簽刪除蜒程; 如:$("xxx").remove()
remove();
事件
// 綁定事件 目前推薦的方式
$("xxx").on("click",function(){})
// 移除事件 目前推薦的方式
$("xxx").off("click",function(){})
// 頁面加載事件的兩種方式:
// 允許我們?cè)谖臋n完全加載完后執(zhí)行函數(shù)
$(function(){
$("div").click(function(){
console.log("dsadsadsa");
})
});
$(document).ready(function(){
$("div").click(function(){
console.log("dsadsadsa");
})
});
其他事件
image.png