什么是JQ？
一个优秀的JS库 写越少的代码，做越多的事情
JQ的好处？
- 简化JS的复杂操作
- 不再需要关心兼容性
- 提供大量实用方法
JQ官网
jquery的版本
jQuery 分 2 个系列版本 1.x 与 2.x，主要的区别 在于 2.x 不再兼容 IE6、7、8 为移动端而优化，由于减少了一些代码，使得该版本比 jQuery 1.x 更小且更快。
压缩版(compressed) 与 开发版(development)，我们在开发过程中使用开发版（开发版本便于代码修改及调试），项目上线发布使用压缩版（因为压缩版本体积更小，效率更快）。
如何使用JQ
- 官网下载jquery.js文件
- 导入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选择元素的风格是跟CSS风格特别类似
$('#div1').css('background','red');
$('div').css('background','red');
$('.box').css('background','red');
</script>
- 省略原生的循环操作
<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');//当选中的是个集合，那么css内部执行的一个循环操作，来修改里面集合的css样式。jquery内部旧执行了个循环操作
</script>
-
$ 和 jQuery
- $ === jQuery
- $是jQuery的别名
- 为了简便, 我们通常使用$
jQuery('#div1').css('background', 'red');
绑定事件
通过调用的jquery对象上的click方法来
$("div").click(function(){});
- this指向
指向触发事件的原生dom对象
$("div").click(function(){
alert(this.innerHTML)
})
html()
作用和innerHTML类似，只是该方法可以给多个元素进行操作。
传递字符串参数表示赋值，返回jquery对象。
不传参数，就表示取值。
var $div = $('#div1');
$div.click(function(){
alert( $div.html() );
});
JS与JQ关系
- jq也是js
- js原生dom对象与jq对象不能混用
alert( $div.html() ); //纯JQ写法
alert( document.getElementById('div1').innerHTML ); //纯JS写法
alert( $div.innerHTML ); //错误的
alert( document.getElementById('div1').html() ); //错误的
- 例子 : 选择颜色填充方块
取值与赋值的关系
我们知道原生js中取值与赋值是通过直接操作对象属性来实现的
比如说innerHTML 属性
oDiv.innerHTML;//取值
oDiv.innerHTML = 'text';//赋值
在jquery中,实现相同的操作
$div.html();//取值
$div.html('text');//赋值
可以看到是否取值或赋值是通过传入参数的个数决定的
具有相同特征的还有
- 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');//设置value值
alert( $('input').val() );//获取value值
多元素取值
jq中查找到多个元素, 取值取第一个元素的值
<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选择器中大多的语法都可以在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结尾的
$('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');
//当属性的值有空格的 会报错
</script>
这个时候我们就必须加上引号
$('div[class="box box1"]').css('background', 'red');
JQ的链式操作
一步一步的操作：
var $div = $('div');
$div.html('bbbb');
$div.css('background', 'red');
$div.click(function(){
alert('111');
})
链式操作 :
$('div').html('bbbb').css('background', 'red').click(function(){ alert('111' )});
注意: JQ中的可以链式操作的是针对设置的操作， 取值的操作不能进行链式操作
JQ实战小技巧
命名的规范
$div $span
JQ的容错性
<div id="div1"></div>
<script>
var oDiv = document.getElementById('div2');
oDiv.innerHTML = 'bbb';//会报错
</script>
在原生js种， 如果没有找到相应的DOM元素， 执行后续操作会报错
<div id="div1"></div>
<script>
$("#div2").html('bbbb');
</script>
在JQ中没有找到也不会报错， 最多是不执行任何的操作
这就是JQ的容错性
它是把双刃剑:
- 优点： 不报错， 不影响后续代码的执行
- 缺点： 不好调试
集合的长度
$()获取到的都是一个集合
集合中只有一个元素，它也是一个集合 $('#id');
它的结构很像数组，有下标， 有length
<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实战小技巧
利用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, 如果存在, 不执行任何操作
$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, 如果存在, 不执行任何操作
$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()也可以达到相同的效果
<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默认为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
节点的选择(兄弟节点)
next()
选择下一个兄弟节点
<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()
选择上一个兄弟节点
```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()
选择下面所有的兄弟节点
<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()
选择上面所有的兄弟节点
<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()
选择所有的兄弟节点
<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>
参数的筛选功能
上述方法都可以传入一个选择器字符串作为参数，用于对结果进行筛选
//在集合中选择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');
下标
- 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>
