jQuery 初體驗(yàn)

什么是JQ？

一個(gè)優(yōu)秀的JS庫(kù) 寫越少的代碼搜锰，做越多的事情

JQ的好處铅鲤？

簡(jiǎn)化JS的復(fù)雜操作
不再需要關(guān)心兼容性
提供大量實(shí)用方法

JQ官網(wǎng)

http://jquery.com/

jquery的版本

jQuery 分 2 個(gè)系列版本 1.x 與 2.x莺匠，主要的區(qū)別在于 2.x 不再兼容 IE6、7漩怎、8 為移動(dòng)端而優(yōu)化，由于減少了一些代碼嗦嗡，使得該版本比 jQuery 1.x 更小且更快勋锤。

壓縮版(compressed) 與開(kāi)發(fā)版(development)，我們?cè)陂_(kāi)發(fā)過(guò)程中使用開(kāi)發(fā)版（開(kāi)發(fā)版本便于代碼修改及調(diào)試）侥祭，項(xiàng)目上線發(fā)布使用壓縮版（因?yàn)閴嚎s版本體積更小叁执，效率更快）茄厘。

如何使用JQ

官網(wǎng)下載jquery.js文件
導(dǎo)入jquery文件<script src="jquery.js"></script>

選擇元素

$()
css()

<div id="div1" class="div1"></div>
<script>
document.getElementById('div1').style.background = 'red';
document.getElementsByClass('div1')[0].style.background = 'red';
document.getElementsByTagName('div')[0].style.background = 'red';

//jq選擇元素的風(fēng)格是跟CSS風(fēng)格特別類似

$('#div1').css('background','red');
$('div').css('background','red');
$('.box').css('background','red');

</script>

省略原生的循環(huán)操作

<ul>
    <li>111</li>
    <li>111</li>
    <li>111</li>
    <li>111</li>
</ul>
<script>
var aLi = document.getElementsByTagName('li');
for(){
    aLi[i].style
}

$('li').css('background','red');//當(dāng)選中的是個(gè)集合，那么css內(nèi)部執(zhí)行的一個(gè)循環(huán)操作徒恋，來(lái)修改里面集合的css樣式蚕断。jquery內(nèi)部舊執(zhí)行了個(gè)循環(huán)操作
</script>

$ 和 jQuery
- $ === jQuery
- $是jQuery的別名
- 為了簡(jiǎn)便, 我們通常使用$

jQuery('#div1').css('background', 'red');

綁定事件

通過(guò)調(diào)用的jquery對(duì)象上的click方法來(lái)

$("div").click(function(){});

this指向

指向觸發(fā)事件的原生dom對(duì)象

$("div").click(function(){
    alert(this.innerHTML)
})

html()

作用和innerHTML類似，只是該方法可以給多個(gè)元素進(jìn)行操作入挣。

傳遞字符串參數(shù)表示賦值亿乳，返回jquery對(duì)象。

不傳參數(shù)径筏，就表示取值葛假。

var $div = $('#div1');

$div.click(function(){
    alert(  $div.html()  );
});

JS與JQ關(guān)系

jq也是js
js原生dom對(duì)象與jq對(duì)象不能混用

alert(  $div.html()  );  //純JQ寫法

alert( document.getElementById('div1').innerHTML );  //純JS寫法

alert( $div.innerHTML );   //錯(cuò)誤的
alert( document.getElementById('div1').html() );  //錯(cuò)誤的

例子 : 選擇顏色填充方塊

取值與賦值的關(guān)系

我們知道原生js中取值與賦值是通過(guò)直接操作對(duì)象屬性來(lái)實(shí)現(xiàn)的

比如說(shuō)innerHTML 屬性

oDiv.innerHTML;//取值
oDiv.innerHTML = 'text';//賦值

在jquery中,實(shí)現(xiàn)相同的操作

$div.html();//取值
$div.html('text');//賦值

可以看到是否取值或賦值是通過(guò)傳入?yún)?shù)的個(gè)數(shù)決定的

具有相同特征的還有

css()
attr() 屬性
val() 值

等方法

<div id="div1" class="div1" data-index="1"></div>
<input type="text" value="123">

$('#div1').css('color','red');
alert( $('#div1').css('color') );  //red


$('#div1').attr('title','hello');

alert( $('#div1').attr('title') );//獲取title屬性
alert( $('#div1').attr('class') );//獲取class
alert( $('#div1').attr('data-index') ); //獲取自定義屬性

$('input').val('456');//設(shè)置value值
alert( $('input').val() );//獲取value值

多元素取值

jq中查找到多個(gè)元素, 取值取第一個(gè)元素的值

<ul>
    <li>001</li>
    <li>002</li>
    <li>003</li>
    <li>004</li>
    <li>005</li>
</ul>

<script>
alert($('ul li').html() );//001
</script>

屬性選擇器

css選擇器中大多的語(yǔ)法都可以在jquery中使用

包括屬性選擇器

<input type="text" value="123">
<input type="text" value="456">
<input type="text" >

<script>
$('input[value]').css('background', 'red');//有value屬性的會(huì)被選中
$('input[value=123]').css('background', 'red');//value值等于123的會(huì)被選中

</script>

<input type="text" value="123_555">
<input type="text" value="123_666">
<input type="text" value="333_888">

<script>
$('input[value^=123]').css('background', 'red');//選中以123開(kāi)頭的
$('input[value$=555]').css('background', 'red');//選中以555結(jié)尾的
$('input[value*=3]').css('background', 'red');//選中包含3的

</script>

引號(hào)的問(wèn)題

$('input[value=123]').css('background', 'red');
$('input[value="123"]').css('background', 'red');

上面的代碼加不加引號(hào)都是正確的

什么時(shí)候必須加引號(hào)呢？

<div class="box box1"></div>
<script>
$('div[class=box box1]').css('background', 'red');
//當(dāng)屬性的值有空格的 會(huì)報(bào)錯(cuò)
</script>

這個(gè)時(shí)候我們就必須加上引號(hào)

$('div[class="box box1"]').css('background', 'red');

JQ的鏈?zhǔn)讲僮?/h1>

一步一步的操作：

var $div = $('div');
$div.html('bbbb');
$div.css('background', 'red');
$div.click(function(){
    alert('111');
})

鏈?zhǔn)讲僮?:

$('div').html('bbbb').css('background', 'red').click(function(){ alert('111' )});

注意: JQ中的可以鏈?zhǔn)讲僮鞯氖轻槍?duì)設(shè)置的操作滋恬，取值的操作不能進(jìn)行鏈?zhǔn)讲僮?/p>

JQ實(shí)戰(zhàn)小技巧

命名的規(guī)范

$div$ span

JQ的容錯(cuò)性

<div id="div1"></div>

<script>
var oDiv = document.getElementById('div2');
oDiv.innerHTML = 'bbb';//會(huì)報(bào)錯(cuò)
</script>

在原生js種聊训，如果沒(méi)有找到相應(yīng)的DOM元素，執(zhí)行后續(xù)操作會(huì)報(bào)錯(cuò)

<div id="div1"></div>

<script>
$("#div2").html('bbbb');
</script>

在JQ中沒(méi)有找到也不會(huì)報(bào)錯(cuò)恢氯，最多是不執(zhí)行任何的操作

這就是JQ的容錯(cuò)性

它是把雙刃劍:

優(yōu)點(diǎn)：不報(bào)錯(cuò)带斑，不影響后續(xù)代碼的執(zhí)行
缺點(diǎn)：不好調(diào)試

集合的長(zhǎng)度

$()獲取到的都是一個(gè)集合

集合中只有一個(gè)元素，它也是一個(gè)集合　$('#id');

它的結(jié)構(gòu)很像數(shù)組勋拟，有下標(biāo)勋磕，有l(wèi)ength

<ul>
    <li>001</li>
    <li>002</li>
    <li>003</li>
    <li>004</li>
    <li>005</li>
</ul>
<script>
var $li = $('ul li');
alert($li[0].innerHTML);
alert($li.length);
</script>

JQ實(shí)戰(zhàn)小技巧

利用length判斷元素是否存在

var $span = $('#span1');
console.log( $span.length );
$span.html('bbbb');

class的操作

addClass()
removeClass()
toggleClass()

<div id="div1" class="box1 box2">aaaaa</div>

<script>
var $div = $('#div1');
$div.addClass('box3');//增加class
$div.addClass('box1');//增加class, 如果存在, 不執(zhí)行任何操作
$div.addClass('box4 box5');//增加多個(gè)class, 用空格隔開(kāi)

</script>

<div id="div1" class="box1 box2">aaaaa</div>

<script>
var $div = $('#div1');
$div.removeClass('box1');//刪除class
$div.removeClass('box3');//刪除class, 如果存在, 不執(zhí)行任何操作
$div.removeClass('box4 box5');//刪除多個(gè)class, 用空格隔開(kāi)

</script>

<div id="div1" class="box1 box2">aaaaa</div>

<script>
$('#div1').toggleClass('box3');
</script>

顯示隱藏

show()/hide()

<input type="button" value="點(diǎn)擊">
<br>
<div>div</div>
<div>div</div>
<div>div</div>

<script>
var onOff = false;
$('input').click(function(){
    if(onOff){
        $('div').hide();
    }
    else{
        $('div').show();
    }
    onOff = !onOff;
})
</script>

我們用css()也可以達(dá)到相同的效果

<input type="button" value="點(diǎn)擊">
<br>
<div>div</div>
<div>div</div>
<div>div</div>

<script>
var onOff = false;
$('input').click(function(){
    if(onOff){
        $('div').css('display', 'none');
    }
    else{
        $('div').css('display', 'block');
    }
    onOff = !onOff;
})
</script>

但是如果我們把div換成span, 隱藏之后再顯示會(huì)出問(wèn)題

因?yàn)?code>span的display默認(rèn)為inline

<input type="button" value="點(diǎn)擊">
<br>
<span>span</span>
<span>span</span>
<span>span</span>

<script>
var onOff = false;
$('input').click(function(){
    if(onOff){
        $('span').css('display', 'none');
    }
    else{
        $('span').css('display', 'block');
    }
    onOff = !onOff;
})
</script>

使用show()/hide()就可以, show()和hide() 可以智能的判斷display

節(jié)點(diǎn)的選擇(兄弟節(jié)點(diǎn))

next()

選擇下一個(gè)兄弟節(jié)點(diǎn)

<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="item">list item 3</li>
   <li>list item 4</li>
   <li class="item">list item 5</li>
   <li>list item 6</li>
</ul>

<script>
$('li.item').next().css('background-color', 'red');
</script>

prev()

選擇上一個(gè)兄弟節(jié)點(diǎn)

```html
<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="item">list item 3</li>
   <li>list item 4</li>
   <li class="item">list item 5</li>
   <li>list item 6</li>
</ul>

<script>
$('li.item').prev().css('background-color', 'red');
</script>

nextAll()

選擇下面所有的兄弟節(jié)點(diǎn)

<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>
<script>
$('li.third-item').nextAll().css('background-color', 'red');
</script>

prevAll()

選擇上面所有的兄弟節(jié)點(diǎn)

<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>
<script>
$('li.third-item').prevAll().css('background-color', 'red');
</script>

siblings()

選擇所有的兄弟節(jié)點(diǎn)

<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>
<script>
$('li.third-item').siblings().css('background-color', 'red');
</script>

參數(shù)的篩選功能

上述方法都可以傳入一個(gè)選擇器字符串作為參數(shù)，用于對(duì)結(jié)果進(jìn)行篩選

//在集合中選擇class為selectd的元素
$('item').next('.selected').css('background-color', 'red');
$('item').prev('.selected').css('background-color', 'red');
$('item').nextAll('.selected').css('background-color', 'red');
$('item').prevAll('.selected').css('background-color', 'red');
$('item').siblings('.selected').css('background-color', 'red');

下標(biāo)

eq()

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
<script>
$('li').eq(2).css('background-color', 'red');
</script>

最后編輯于：2018.12.04 14:05:56

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末敢靡，一起剝皮案震驚了整個(gè)濱河市挂滓，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌啸胧，老刑警劉巖赶站，帶你破解...
沈念sama閱讀 206,602評(píng)論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異纺念，居然都是意外死亡贝椿，警方通過(guò)查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,442評(píng)論 2贊 382
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門陷谱，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)团秽，“玉大人，你說(shuō)我怎么就攤上這事叭首∠扒冢” “怎么了？”我有些...
開(kāi)封第一講書(shū)人閱讀 152,878評(píng)論 0贊 344
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵焙格，是天一觀的道長(zhǎng)图毕。經(jīng)常有香客問(wèn)我，道長(zhǎng)眷唉，這世上最難降的妖魔是什么予颤？我笑而不...
開(kāi)封第一講書(shū)人閱讀 55,306評(píng)論 1贊 279
?港島之戀（遺憾婚禮）
正文為了忘掉前任囤官，我火速辦了婚禮，結(jié)果婚禮上蛤虐，老公的妹妹穿的比我還像新娘党饮。我一直安慰自己，他們只是感情好驳庭，可當(dāng)我...
茶點(diǎn)故事閱讀 64,330評(píng)論 5贊 373
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布刑顺。她就那樣靜靜地躺著，像睡著了一般饲常。火紅的嫁衣襯著肌膚如雪蹲堂。梳的紋絲不亂的頭發(fā)上，一...
開(kāi)封第一講書(shū)人閱讀 49,071評(píng)論 1贊 285
城市分裂傳說(shuō)
那天贝淤，我揣著相機(jī)與錄音柒竞，去河邊找鬼。笑死播聪，一個(gè)胖子當(dāng)著我的面吹牛朽基，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播离陶，決...
沈念sama閱讀 38,382評(píng)論 3贊 400
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼稼虎，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來(lái)了枕磁？” 一聲冷哼從身側(cè)響起渡蜻，我...
開(kāi)封第一講書(shū)人閱讀 37,006評(píng)論 0贊 259
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤术吝，失蹤者是張志新（化名）和其女友劉穎计济，沒(méi)想到半個(gè)月后，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體排苍，經(jīng)...
沈念sama閱讀 43,512評(píng)論 1贊 300
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡沦寂，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 35,965評(píng)論 2贊 325
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了淘衙。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片传藏。...
茶點(diǎn)故事閱讀 38,094評(píng)論 1贊 333
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖彤守，靈堂內(nèi)的尸體忽然破棺而出毯侦，到底是詐尸還是另有隱情，我是刑警寧澤具垫，帶...
沈念sama閱讀 33,732評(píng)論 4贊 323
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布侈离，位于F島的核電站，受9級(jí)特大地震影響筝蚕，放射性物質(zhì)發(fā)生泄漏卦碾。R本人自食惡果不足惜铺坞，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 39,283評(píng)論 3贊 307
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望洲胖。院中可真熱鬧济榨，春花似錦、人聲如沸绿映。這莊子的主人今日做“春日...
開(kāi)封第一講書(shū)人閱讀 30,286評(píng)論 0贊 19
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)绘梦。三九已至橘忱，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間卸奉，已是汗流浹背钝诚。一陣腳步聲響...
開(kāi)封第一講書(shū)人閱讀 31,512評(píng)論 1贊 262
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留榄棵，地道東北人凝颇。一個(gè)月前我還...
沈念sama閱讀 45,536評(píng)論 2贊 354
代替公主和親
正文我出身青樓，卻偏偏與公主長(zhǎng)得像疹鳄，于是被迫代替她去往敵國(guó)和親拧略。傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 42,828評(píng)論 2贊 345

jQuery 初體驗(yàn)

什么是JQ？

JQ的好處铅鲤？

JQ官網(wǎng)

jquery的版本

如何使用JQ

選擇元素

綁定事件

html()

JS與JQ關(guān)系

取值與賦值的關(guān)系

多元素取值

屬性選擇器

引號(hào)的問(wèn)題

JQ實(shí)戰(zhàn)小技巧

命名的規(guī)范

JQ的容錯(cuò)性

集合的長(zhǎng)度

JQ實(shí)戰(zhàn)小技巧

利用length判斷元素是否存在

class的操作

顯示隱藏

節(jié)點(diǎn)的選擇(兄弟節(jié)點(diǎn))

next()

prev()

nextAll()

prevAll()

siblings()

參數(shù)的篩選功能

下標(biāo)

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