什么是JQ？

JQ:一个优秀的JS库 写越少的代码，做越多的事情

JQ的好处:

简化JS的复杂操作
不再需要关心兼容性
提供大量实用方法

选择元素

• $()
• 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('#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值

属性选择器

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');

命名的规范

        $  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, 如果存在, 不执行任何操作
$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

作者：XiaoAM
链接：https://www.jianshu.com/p/c3184eff2e0e
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。