>>>>> JQ-第一节

作者: 風隨風去 | 来源:发表于2017-03-25 19:26 被阅读0次

什么是JQ？

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

JQ的好处？

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

JQ官网

http://jquery.com/

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>

网友评论

本文标题：>>>>> JQ-第一节

本文链接：https://www.haomeiwen.com/subject/qfllpttx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

>>>>> JQ-第一节

什么是JQ？

JQ的好处？

JQ官网

jquery的版本

如何使用JQ

选择元素

绑定事件

html()

JS与JQ关系

取值与赋值的关系

多元素取值

属性选择器

引号的问题

JQ的链式操作

JQ实战小技巧

命名的规范

JQ的容错性

集合的长度

JQ实战小技巧

利用length判断元素是否存在

class的操作

显示隐藏

节点的选择(兄弟节点)

next()

prev()

nextAll()

prevAll()

siblings()

参数的筛选功能

下标

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读