JQ:一個優(yōu)秀的JS庫 寫越少的代碼，做越多的事情
JQ的好處:
簡化JS的復(fù)雜操作
不再需要關(guān)心兼容性
提供大量實用方法
選擇元素
- $()
- 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)選中的是個集合，那么css內(nèi)部執(zhí)行的一個循環(huán)操作，來修改里面集合的css樣式。jquery內(nèi)部舊執(zhí)行了個循環(huán)操作
</script>
$ 和 jQuery
- $是jQuery的別名
- 為了簡便, 我們通常使用$
jQuery('#div1').css('background', 'red');
綁定事件
通過調(diào)用的jquery對象上的click方法來
$("div").click(function(){});
this指向
指向觸發(fā)事件的原生dom對象
$("div").click(function(){
alert(this.innerHTML)
})
html()
作用和innerHTML類似，只是該方法可以給多個元素進(jìn)行操作。
傳遞字符串參數(shù)表示賦值，返回jquery對象。
不傳參數(shù)，就表示取值。
var $div = $('#div1');
$div.click(function(){
alert( $div.html() );
});
JS與JQ關(guān)系
jq也是js
js原生dom對象與jq對象不能混用
alert( $div.html() ); //純JQ寫法
alert( document.getElementById('div1').innerHTML ); //純JS寫法
alert( $div.innerHTML ); //錯誤的
alert( document.getElementById('div1').html() ); //錯誤的
例子 : 選擇顏色填充方塊
取值與賦值的關(guān)系
我們知道原生js中取值與賦值是通過直接操作對象屬性來實現(xiàn)的
比如說innerHTML 屬性
oDiv.innerHTML;//取值
oDiv.innerHTML = 'text';//賦值
在jquery中,實現(xiàn)相同的操作
$div.html();//取值
$div.html('text');//賦值
可以看到是否取值或賦值是通過傳入?yún)?shù)的個數(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值
屬性選擇器
css選擇器中大多的語法都可以在jquery中使用
包括屬性選擇器
<input type="text" value="123">
<input type="text" value="456">
<input type="text" >
<script>
$('input[value]').css('background', 'red');//有value屬性的會被選中
$('input[value=123]').css('background', 'red');//value值等于123的會被選中
</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開頭的
$('input[value$=555]').css('background', 'red');//選中以555結(jié)尾的
$('input[value*=3]').css('background', 'red');//選中包含3的
</script>
引號的問題
$('input[value=123]').css('background', 'red');
$('input[value="123"]').css('background', 'red');
上面的代碼加不加引號都是正確的
什么時候必須加引號呢？
<div class="box box1"></div>
<script>
$('div[class=box box1]').css('background', 'red');
//當(dāng)屬性的值有空格的 會報錯
</script>
這個時候我們就必須加上引號
$('div[class="box box1"]').css('background', 'red');
命名的規(guī)范
$ div $span
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');//增加多個class, 用空格隔開
</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');//刪除多個class, 用空格隔開
</script>
<div id="div1" class="box1 box2">aaaaa</div>
<script>
$('#div1').toggleClass('box3');
</script>
顯示隱藏
show()/hide()
<input type="button" value="點擊">
<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="點擊">
<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, 隱藏之后再顯示會出問題
因為span的display默認(rèn)為inline
<input type="button" value="點擊">
<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
下標(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>
