jQuery

5.jQuery

1.jQuery是什么？

jQuery是一个快速、简洁的JavaScript框架

• 作用

js工具库:更少的代码完成更多的事情、不容易报错、支持动画、遍历十分方便、发ajax请求。

jQuery的好处：

• 容错性高，就算没有获取到对象，程序也会继续执行。

• 支持链式调用

$('#fruit').text('葡萄').css('color','blue');

• 拿到的是节点数组

<script>
    function fun() {
    //原生态写法
        // var nodes=document.getElementsByTagName('li');
        //     for (let i = 0; i < nodes.length; i++) {
        //         nodes[i].style.color='red';
        //         nodes[i].style.fontSize='30px';
        //     }
        // }
    
    //jQurey写法
        var nodes = $('li');
        nodes.css('color','red').css('font-size','30px');
    }
    
    $('#fruit').text('葡萄').css('color','blue');
</script>

each

text()

text()无参数时代表取值，有参数时代表设置

var nodes = $('li');
        //会将nodes中的每一个元素执行一遍这个function函数
        nodes.each(function () {
            //获取当前对象,将改标签的text写两遍
            $(this).text($(this).text()+$(this).text())
        })
        nodes.css('color', 'red').css('font-size', '30px');

2.页面加载完毕后执行事件

• document原生态写法

window.onload=function () {
        document.getElementById('xxx').innerText='小明';
    }

• jQurey写法一

 $(document).ready(function () {
        $('#xxx').text('小明').css('color','blue');
    })

• jQurey写法二

 $(function () {
        $('#xxx').text('小明').css('color','red');
    })

3.jQurey和原生态写法的区别：

• 原生JS页面加载完成之后执行

• jQuery页面加载完毕后先执行

• 原生JS会等到D0M元素加载完毕，并且图片也加载完毕才会执行
  jQuery会等到D0M元素加载完毕，但不会等到图片也加载完毕就会执行

• 原生的JS如果编写了多个入口函数，后面编写的会覆盖前面编写的
  jQuery中编写多个入口函数，后面的不会覆盖前面的

jQuery将所有函数放在一个队列里边，一个一个的执行

gt(1),下标大于1的执行该函数

<ul>
 <li class="food" name="apple">苹果果</li>
 <li class="food">梨子</li>
 <li class="food">荔枝</li>
</ul>
<script>
 $('.food:gt(1)').each(function () {
     $(this).text($(this).text()+$(this).text());
     $(this).css('color','blue').css('font-size','3px');
 })
</script>

如果id值里面包含了特殊字符则需要进行转移才能够获取

<ul>
 <li class="food" id="appl#e">苹果果</li>
 <li class="food">梨子</li>
 <li class="food">荔枝</li>
</ul>
<script>
 $('#appl\\#e').text('apple');
</script>

jquery支持json数据作为参数,javascript本身就支持json数据格式,javascript的对象就是json格式

json数据格式代表对象。

例:{ name:小明,age:1,sex:男}
jquery使用json

<ul>
<li class="fruit">苹果</li>
<li class="fruit">葡萄</li>
<li class="fruit">哈密瓜</li>
<li class="fruit">香蕉</li>
</ul>
<button onclick="fun()">点一点</button>
<script>
function fun() {
  $('.fruit').css({color: 'orange', 'font-size': '30px'})
}
</script>

jquery.css使用json格式抒写

$('.fodd').css({
    color:'orange',
    fontSize:'30px',
    background:'pink'
});

4.事件

4.1绑定点击事件

<ul>
    <li id="apple">苹果</li>
    <li class="apple">葡萄</li>
    <li class="apple">梨子</li>
    <li class="apple">哈密瓜</li>
</ul>
<script>
        //写法一
    var node = document.getElementById('apple');
     node.onclick=function () {
        alert('apple被点击');
         console.log(this.innerText);
    }
        //写法二**
    $('#apple').click(function () {
        console.log($(this));
        console.log($(this).text());
    })
</script>

$(this).text()//使用$引用

node.onclick=function () {
alert('apple被点击');
console.log(this.innerText);
}

4.2支持多个事件处理函数

  $('#apple').click(function () {
        console.log($(this));
        console.log($(this).text());
    });
    $('#apple').click(function () {
        console.log('哦豁');

    });
    $('#apple').click(function () {
        console.log('我也要执行');
    })

jquery和document参数event的区别:

document

var node = document.getElementById('apple');
node.onclick=function (event) {
        console.log(this.innerText);
        console.log(event);
    }

直接鼠标点击苹果触发函数:alteKey的值为false,按下alt在单击苹果alteKey的值为true

jquery

$('#apple').click(function (event) {
        console.log(event);
    })

4.3无参数代表点击

$('#id').click()

调用click()事件有一个返回值，在上图的最后一行

mouseover 鼠标移动到某个区域执行的事件

mouseout 鼠标移出某个区域执行的事件

$('#btn1').mouseover(function () {
        console.log('鼠标移动到这里了');
    }).mouseout(function () {
        console.log('鼠标出去该区域了');
    })

//还有更多可以查阅官方文档

4.4使用bind（）绑定函数

<script>
    $('#apple').bind('click', function (event) {
        console.log('我被点击了');
    }).bind('click', function (event) {
        console.log('我也被点了一下');
    }).bind('mouseover',function () {
        console.log('鼠标出去该区域了');
    })//链式绑定多个
</script>

4.5bind使用json格式绑定多个事件函数

$('#apple').bind({
        'click': function (event) {
            console.log('我也被点了一下')
        },
        'mouseover': function () {
            console.log('鼠标出去该区域了');
        }
    });

4.6unbind()取消绑定事件

$('#apple').unbind('mouseover')

4.7bind（）的不足之处

如果用代码在后续有产生了一些新的元素节点，bind()之前绑定的事件对新元素并不会起作用。

4.8 on()弥补bind（）不足

$('父节点').on('事件',子节点描述,function(){操作})

<ul id="ul1">
 <li id="apple">苹果</li>
 <li class="apple">葡萄</li>
 <li class="apple">梨子</li>
 <li class="apple">哈密瓜</li>
 <li>冬瓜</li>
</ul>
<button id="btn1" onclick="fun()">添加水果</button>
<script>
 $('#ul1').on('click',$('li'),function () {
     console.log('我被点击了');
 })
</script>

$('#ul1').on('click',function () {
     console.log('我被点击了');
 })

5.动画

5.1滑入、滑出动画

<p>动画</p>
<button  id="out" >滑出</button>
<button  id="in" >滑入</button>
<button  id="out_in" >通吃</button>
<div id="div1" style="width: 300px;height: 500px;background-color: orange"></div>
<script>
 function fun() {
     $('#div1').slideUp(2000);//划出
 }
 $('#out').bind('click',fun);
 function fun1() {
     $('#div1').slideDown(2000);//划入
 } function fun2(){
        //滑入或滑出
        $('#div1').slideToggle(2000);
    }
	$('#out_in').bind('click',fun2);
 $('#in').bind('click',fun1);

</script>

5.2淡入、淡出动画

<button  id="out" >淡出</button>
<button  id="in" >淡入</button>
<button  id="out_in" >通吃</button>
<div id="div1" style="width: 300px;height: 500px;background-color: orange"></div>
<script>
    function fun() {
        $('#div1').fadeOut(2000);//淡出
    }
    $('#out').bind('click',fun);
    function fun1() {
        $('#div1').fadeIn(2000);//淡入
    }
    function fun2(){
        //淡入或淡出
        $('#div1').slideToggle(2000);
    }
    $('#in').bind('click',fun1);
    $('#out_in').bind('click',fun2);
</script>

5.3 hide()、show()与toggle()

包含了淡入淡出和控制标签的大小

    $('#out_in').bind('click', fun2);

    function hide() {
        $('#div1').hide(2000);//隐藏
    }

    function show() {
        $('#div1').show(2000);//显示
    }
//在两种状态间进行切换
  function toggle() {
        $('#div1').toggle(3000);
    }

5.4 animate()

只有数字的值可以创建动画，字符串无法创建动画，（比如“background-color:red”）

语法格式:$(选择器).animate({params},speed,easing,callback)

<button onclick="fun()">变化</button>
<div id="xxx" style="width: 50px;height: 50px;background-color: orange">
    还可以
</div>
<script>
    function fun() {
        $('#xxx').animate({
            width:'300px',
            height:'400px',
            fontSize:'30px'
        },2000).animate({
            marginLeft:'200px'
        },2000).animate({
            marginLeft:'0px'
        },2000)
        console.log('哈哈');
    }
</script>

注意：如果animate后面还有代码，它会立即往下执行，而不是阻塞到动画执行完成后再继续执行

5.5会阻塞的情况

alert()就会出现阻塞直到它得到一个值之后，才会继续往下执行程序

<button onclick="xxx()">alert</button>
function xxx() {
        alert('阻塞了哦');
        console.log('我执行了');
    }

6.jquery操作DOM

6.1*再次认识$对象*

jQuery可以用这些方式选择或制作新节点。有下面各种情形：

1、$(selector字符串)：通过选择器获取节点：如$("#abc")

2、$(Dom node)：能把DOM节点转化成jQuery节点对象。

3、$(html字符串)：使用字符串内容创造*新*节点：如$("

你好

")

​ 比较特别的一种是$(this) ，一般在事件处理中使用。

<button id="btn1">点一点</button>
<ul id="ul1">
    <li>西瓜</li>
    <li id="peach">桃子</li>
    <li>梨子</li>
</ul>
<script>
     $('#btn1').bind('click', function () {
        $('#ul1').append($('#peach'));//jquery添加节点使用append(),原生态写法使用appendChild()
        //方式一
        $('#ul1').append($("#peach"));
    })
    $('#btn1').bind('click', function () {
        $(原生的node)
        var node = document.getElementById('peach');
        //方式二
        $('#ul1').append($(node));
        //方式三
        $('#ul1').append($('<li>哈密瓜</li>'));
    })
    let li1 = document.createElement('li');
    li1.style.color = 'red';
    li1.innerText = '山竹';
    //方式四
    $("#ul1").append(li1);

</script>

注意：jquery添加节点使用append(),原生态写法使用appendChild()

6.2 jquery操作class

<style>
    .peach{
        color: orange;
    }
</style>
<button id="btn1">点一点</button>
<ul id="ul1">
    <li>西瓜</li>
    <li id="peach">桃子</li>
    <li>梨子</li>
</ul>
<script>

    $('#btn1').bind('click',function () {
        $('#peach').addClass('peach');
    })
</script>

如果已有.peach类,则将该节点添加class属性并使用改属性的样式

原生态写法可以实现和上面代码一样的效果:

但是这个只是给他添加了一个样式而已，并没有添加class属性

$('#peach').css('color','orange');

6.3移除class属性

$('#btn1').bind('click',function () {
        $('#peach').addClass(' xxx peach').removeClass('peach');
    })
    $('#btn2').bind('click',function () {
        $('#peach').removeClass('peach').removeClass('xxx');
    })

6.4html()、text()

jquery的HTML()方法类似document的innerHTML属性

jquery的TEXT()方法类似document的innerText属性

html()和text()的区别:

<button id="btn1">点一点</button>
<button id="btn2">移除</button>
<ul id="ul1">
    <li>西瓜</li>
    <li id="peach"><span>桃子</span></li>
    <li>梨子</li>
</ul>
$('#btn2').bind('click',function(){
        console.log($('#peach').text());
        console.log($('#peach').html());
    })

结果:

$('#btn2').bind('click',function(){
    //text()要管所有拿到的节点
        console.log($('ul li').text());
    //html（）只管选中的第一个节点
        console.log($('ul li').html());
    })

结果:

eq(下标)

选择父标签下的第几个字标签

console.log($('ul li').eq(2).text())
console.log($('ul li').eq(2).html())

6.5 input.val()、attr()

<button id="btn1">点我</button>
<input type="text" id="xxx" value="xxx">
<div id="div1" value="123" name="xiaoming">诶嘿</div>
<script>
    $('#btn1').bind('click',function () {
        //val()无参代表取，有参代表设置
        console.log($('#xxx').val());
        //attr()一个参数代表获取，两个参数代表设置
        console.log($('#div1').attr('value'));
        console.log($('#div1').attr('name'));
        console.log($('#div1').attr('value','jack'));
    })
</script>
6.6 prepend()、prependTo()

```javascript
<input type="text" id="xxx" value="xxx">
<ul id="ul1">
    <li>苹果</li>
    <li>梨子</li>
    <li>香蕉</li>
</ul>
<script>
$('#ul1').prepend($('<li>哈密瓜</li>'));
$('<li>哈密瓜</li>').prependTo($('#ul1'));
</script>

prepend()语法:父节点.prepend(子节点)

prependTo()语法:子节点.prependTo(父节点)

> prepend()语法:父节点.prepend(子节点)
>
> prependTo()语法:子节点.prependTo(父节点)

### 6.7children()

```javascript
<button id="btn1">点一点</button>
<ul id="fruit">
    <li>葡萄</li>
    <li>西瓜</li>
    <li>桃子</li>
</ul>
<script>
    $('#btn1').bind('click', function () {
        //这种方式现方式到父节点在使用children()获取该节点的子节点组
        let nodes = $('#fruit').children();
        nodes.each(function () {
            $(this).text($(this).text() + $(this).text());
        })
    })
    $('#btn1').bind('click', function () {
        //这种方式会直接定位到该父节点的li子节点组上
        $('#fruit li').each(function () {
            $(this).text($(this).text() + $(this).text());
        })
    })
</script>