Jquery

jQuery是什么鸿吆?

 就像是 python 中的模塊、 類庫

 就是把 JavaScript 的語句封裝起來的一個(gè)模塊文檔

JavaScript 中有:
1.直接查找:
2.間接查找

Jquery 有:

選擇器

篩選器

特點(diǎn)

  1. 強(qiáng)大選擇器 --- 類似于css的選擇器

  2. DOM操作

  3. 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
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末绅你,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子昭躺,更是在濱河造成了極大的恐慌忌锯,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,865評(píng)論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件领炫,死亡現(xiàn)場(chǎng)離奇詭異偶垮,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,296評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門似舵,熙熙樓的掌柜王于貴愁眉苦臉地迎上來脚猾,“玉大人,你說我怎么就攤上這事砚哗×” “怎么了?”我有些...
    開封第一講書人閱讀 169,631評(píng)論 0 364
  • 文/不壞的土叔 我叫張陵蛛芥,是天一觀的道長(zhǎng)泌参。 經(jīng)常有香客問我,道長(zhǎng)常空,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,199評(píng)論 1 300
  • 正文 為了忘掉前任盖溺,我火速辦了婚禮漓糙,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘烘嘱。我一直安慰自己昆禽,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,196評(píng)論 6 398
  • 文/花漫 我一把揭開白布蝇庭。 她就那樣靜靜地躺著醉鳖,像睡著了一般。 火紅的嫁衣襯著肌膚如雪哮内。 梳的紋絲不亂的頭發(fā)上盗棵,一...
    開封第一講書人閱讀 52,793評(píng)論 1 314
  • 那天,我揣著相機(jī)與錄音北发,去河邊找鬼纹因。 笑死,一個(gè)胖子當(dāng)著我的面吹牛琳拨,可吹牛的內(nèi)容都是我干的瞭恰。 我是一名探鬼主播,決...
    沈念sama閱讀 41,221評(píng)論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼狱庇,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼惊畏!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起密任,我...
    開封第一講書人閱讀 40,174評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤颜启,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后批什,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體农曲,經(jīng)...
    沈念sama閱讀 46,699評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,770評(píng)論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了乳规。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片形葬。...
    茶點(diǎn)故事閱讀 40,918評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖暮的,靈堂內(nèi)的尸體忽然破棺而出笙以,到底是詐尸還是另有隱情,我是刑警寧澤冻辩,帶...
    沈念sama閱讀 36,573評(píng)論 5 351
  • 正文 年R本政府宣布猖腕,位于F島的核電站,受9級(jí)特大地震影響恨闪,放射性物質(zhì)發(fā)生泄漏倘感。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,255評(píng)論 3 336
  • 文/蒙蒙 一咙咽、第九天 我趴在偏房一處隱蔽的房頂上張望老玛。 院中可真熱鬧,春花似錦钧敞、人聲如沸蜡豹。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,749評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽镜廉。三九已至,卻和暖如春愚战,著一層夾襖步出監(jiān)牢的瞬間娇唯,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,862評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工寂玲, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留视乐,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,364評(píng)論 3 379
  • 正文 我出身青樓敢茁,卻偏偏與公主長(zhǎng)得像佑淀,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子彰檬,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,926評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 第一章 入門 基本功能:訪問和操作 dom 元素伸刃,控制頁面樣式,對(duì)頁面的事件處理逢倍,與ajax完美結(jié)合捧颅,有豐富的插件...
    X_Arts閱讀 1,048評(píng)論 0 2
  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計(jì)者無需花費(fèi)時(shí)間糾纏JS復(fù)雜的高級(jí)特性较雕。 1....
    LaBaby_閱讀 1,350評(píng)論 0 2
  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式碉哑。設(shè)計(jì)者無需花費(fèi)時(shí)間糾纏JS復(fù)雜的高級(jí)特性挚币。 1....
    LaBaby_閱讀 1,182評(píng)論 0 1
  • jQuery jQuery是JavaScript世界中使用最廣泛的一個(gè)庫。 jQuery這么流行扣典,肯定是因?yàn)樗鉀Q...
    星騰_范特西閱讀 2,100評(píng)論 0 27
  • 昨天晚上妆毕,一個(gè)同事打來電話,帶著很憤怒的情緒贮尖,她與上司(我們共同的)之間的關(guān)系已經(jīng)破裂笛粘,績(jī)效打分的不公正成了兩次發(fā)...
    小窗寄語閱讀 442評(píng)論 1 2