浅析JQuery

JQuery的概述

• Jquery是一个轻量级的js库，它将js的功能进行了封装（所有的都是函数）。
• 它在封装的基础上做了进一步的兼容（兼容性好）。
• 它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

特点

• 链式调用 ：所有对象的方法返回的都是对象本身，也就是说没有返回值（里面所有的方法返回的都是一个jquery对象）
• 丰富的选择器和筛选器
• 良好的动画兼容（动画库很强大 借助了animated.js (主要css3的动画)）
• 拥有便捷的插件扩展机制和丰富的插件

JQuery的简单入门

• dom对象转为jQuery对象，将dom对象传入jQuery的函数
• 将jQuery对象转为dom对象，使用下标获取对应的dom元素

    //需要先引用<script src="./jquery.min.js"></script>
    <div class="box"></div>
    <script>
        // jQuery对象使用$符号获取jquery对象或者使用jquery获取
        console.log(jQuery()); //S.fn.init
        console.log($()); //S.fn.init
        //获取dom元素，原生获取,得到dom对象
        let box = document.querySelector('.box')
        console.log(box); //<div class="box"></div>
        // 通过jquery获取dom元素，得到jquery对象
        // jquery对象无法调用dom中的内容，反之也不可以
        console.log($('.box')); //S.fn.init [div.box, prevObject: S.fn.init(1)]
        // jquery对象和dom对象间的转换
        // jquery对象转dom对象
        let toElement = $('.box')[0]
        console.log(toElement); //<div class="box"></div>
        // dom对象转jquery对象
        console.log($(box)); //S.fn.init [div.box]
        console.log(jQuery(box)); //S.fn.init [div.box]
    </script>

jQuery的选择器

• 所有css选择器都可以使用
• 新增相关选择器（odd even first last eq）

odd：根据下标，获取下标为奇数的元素，返回jquery对象

even：根据下标，获取下标为偶数的元素，返回jquery对象

first：获取第一个元素，返回jquery对象

last：获取最后一个元素，返回jquery对象

eq：获取指定下标的元素，返回jquery对象

        //使用jquery获取对应的元素
        console.log($('#box'));//S.fn.init(1)
        console.log($('li:odd')); //根据下标 获取下标为奇数的
        console.log($('li:even')); //根据下标 获取下标为偶数的
        console.log($('li:first-child()'));
        console.log($('li:first')); //获取第一个
        console.log($('li:last')); //获取最后一个
        console.log($("li:eq(2)"));
        //隔行变色
        let odd = $('li:odd')
        let even = $('li:even')
            //length获取里面元素的个数
        for (var i = 0; i < odd.length; i++) {
            odd[i].style.backgroundColor = 'red'
        }
        for (var i = 0; i < even.length; i++) {
            even[i].style.backgroundColor = 'yellow'
        }

jQuery的筛选器

• 它是用于筛选获取的元素的
• 它可以根据条件（根据选择器）及关系筛选（节点关系）

相关筛选器

• eq ：筛选对应下标的元素
• last ：筛选最后一个
• first ：筛选第一个
• parent ：父元素
• children ：子元素
• siblings ：兄弟元素
• prev ：前面的兄弟
• next ：后面的兄弟
• prevAll ：前面的所有兄弟
• nextAll ：后面的所有兄弟
• find ：查找子元素内容

 <div>
        <ul>
            <li>1</li>
            <li class="box">2</li>
            <li>3
                <p></p>
                <a href="#"></a>
                <span></span>
            </li>
            <li class="box">4</li>
        </ul>
    </div>
    <script>
        // 获取元素进行筛选
        console.log($('ul>li').eq(2)); //得到第三个li
        console.log($('ul>li').first()); //获取第一个
        console.log($('ul>li').last()); //获取最后一个
        //父子关系
        console.log($('ul>li').eq(2).parent('div'));
        //获取符合选择器的父元素 （不符合就没有），拿不到
        console.log($('ul>li').eq(2).parent());
        //获取对应的父元素
        console.log($('ul>li').eq(2).children());
        //获取所有的子元素
        console.log($('ul>li').eq(2).children('a'));
        //获取所有的子元素a
        //兄弟关系
        console.log($('ul>li:eq(2)').children().eq(1).siblings('span'));
        //获取第三个li的第二个子元素的所有span的兄弟
        console.log($('ul>li:eq(2)').children().eq(1).siblings());
        //获取第三个li的第二个子元素的所有的兄弟
        console.log($('ul>li:eq(2)').prev());
        //获取第三个li的前一个元素
        console.log($('ul>li:eq(2)').prev('.box'));
        //获取第三个li的前一个box元素(符合条件才返回结果)
        console.log($('ul>li:eq(2)').next());
        //获取第三个li的后一个box元素(符合条件才返回结果)
        console.log($('ul>li:eq(2)').next('.box'));
        //获取第三个li的后一个box元素(符合条件才返回结果)
        console.log($('ul>li:eq(2)').nextAll());
        //获取第三个li后面的所有
        console.log($('ul>li:eq(2)').nextAll('.box'));
        //获取第三个li后面的所有
        console.log($('ul>li:eq(2)').prevAll());
        //获取第三个li前面的所有
        console.log($('ul>li:eq(2)').prevAll('.box'));
        //获取第三个li前面的所有box
        //查找 find
        console.log($('ul').find('.box'));
        //查找所有子元素内容找到对应的条件 对应的class名字为box的
    </script>

jQuery的属性操作

【传入一个参数就是获取，传入两个参数就是设置】

• prop ：只能操作原生属性（原生属性 本身自带属性）
• attr ：可以操作任意属性
• removeProp ：删除prop设置的属性（原生的属性）
• removeAttr ：删除属性（removeAttribute）

    <input type="text" value="你好" placeholder="点我" hello="hello">
    <script>
        // prop只能操作原生属性,attr可以操作任意属性
        // 传入一个参数就是获取，传入两个参数就是设置
        console.log($('input').prop('value')); //你好
        console.log($('input').attr('hello')); //hello
        // prop设置本身有的属性
        $('input').prop('name', '本身有的属性') //name本身存在的属性
        console.log($('input').prop('name')); //本身有的属性
        // prop设置本身不存在的属性，虽然可以在控制台上打印，但是元素标签上没有设置上
        $('input').prop('enen', '本身没有的属性')
        console.log($('input').prop('name')); //本身没有的属性
        //attr可以设置本身没有的属性
        $('input').attr('hi', '本身没有的属性')
        console.log($('input').attr('hi')); //本身没有的属性、
        // removeProp 删除prop设置的属性（原生的属性）
        // removeAttr 删除属性（removeAttribute）
        $('input').removeProp('name') //无法删除本身的属性
        $('input').removeProp('enen') //只能删除本身没有的属性
        $('input').removeAttr('hi') //可以删除本身没有的属性
        $('input').removeAttr('name') //可以删除本身自带的属性
    </script>

class相关操作

• addClass ：添加一个class
• removeClass ：移除一个class
• toggleClass ：切换（有就删除 没有就添加）

    <div class="box1 box3 box4"></div>
    <script>
       // addClass 添加一个class
       // removeClass 移除一个class
       // toggleClass 切换（有就删除 没有就添加）
        $('div').addClass('box2')
        $('div').removeClass('box2')
        $('div').toggleClass('box2')
    </script>

原生 js 模拟 removeClass 和 addClass

        //原生模拟removeClass
        function removeClassName(element, className) {
            classNames = element.className.split(' ')
            classNames.forEach(v => {
                if (v == className) {
                    classNames.pop(className)
                }
            });
            element.className = classNames.join(' ')
        }
        //$('div')[0]通过下标获取的原生的dom
        removeClassName($('div')[0], 'box4')

        //模拟addClass
        function addClass(element, className) {
            //判断是否为空
            if (!element.className) {
                element.className = className
            } else {
                //将元素的class用空格分隔得到一个数组
                classNames = element.className.split(' ')
                    //在后面添加要加入的类名
                classNames.push(className)
                    // 再将修改后的数组转为字符串赋值给元素
                element.className = classNames.join(' ')
            }
        }
        addClass($('div')[0], 'box2')

样式操作

• 获取设置了的样式,采用了getComeputedStyle 和 element.currentStyle

        console.log($('div').css('backgroundColor'));

        console.log($('div').css('height'));

• 设置没有的样式,内部采用style赋值

        $('div').css('width', '60px')

显示内容

【html和text、val，传入一个参数表示设置，不传参表示获取】

• html ：相当于innerHTML
• text ：相当于innerText
• val ：获取或者设置 value 属性的值

        // 显示内容
        // html和text、val，传入一个参数表示设置，不传参表示获取
        console.log($('div').html()); //你好世界
        $('div').html('你应该点击') //设置
        console.log($('div').text()) //获取,你应该点击
        $('input').val('val设置的值') //设置value的值
        console.log($('input').val()) //val设置的值,获取value值

Dom操作

• append ：从后面追到里面
• prepend ：从前面追到里面
• before ：插入到当前的前面
• after ：插入到当前的后面
• insertAfter ：将要插入的元素插到指定元素之后
• insertBefore ：将要插入的元素插到指定元素之前
• empty ：清空标签的内容，标签还在
• remove ：将自己删除，就是删除标签和内容
• replaceWith ：替换
• clone ：克隆，深拷贝

    <div>我是div</div>
    <script>
        //创建对象
        let jqueryObj = $('<a href="#">我是新建的标签</a>')
        console.log(jqueryObj);
        //增删改方法
        //添加
        $('div').append(jqueryObj) //从后面追加到div里面
        $('div').prepend(jqueryObj) //从前面追加到div里面
        $('div').before(jqueryObj) //插入到前面
        $('div').after(jqueryObj) //插入到后面
        $('div').insertAfter(jqueryObj) //将div插到jqueryObj之后
        $('div').insertBefore(jqueryObj) //将div插到jqueryObj前
        //克隆 深拷贝
        let copy = jqueryObj.clone(true, true)
        $('div').before(copy)
        //改
        copy.replaceWith($('<b>我是替换copy的b标签</b>'))
        //删除
        $('div').empty() //清空标签的内容，标签还在
            //$('div').remove() //将自己删除，就是删除标签和内容
    </script>

获取宽高

• width ：获取本身的宽度
• height ：获取本身的高度
• innerWidth ：获取本身的宽度+填充
• innerHeight ：获取本身的高度+填充
• outerWidth ：获取本身的宽度+填充+边框
• outerHeight ：获取本身的高度+填充+边框

        //获取宽高
        //宽高相关的方法 传参就是设置 没传参就是获取，当里面传入true为参数时表示是否包含margin
        $('div').width(200) // 只包含自身本身的宽度
        console.log($('div').width()); // 300 返回number类型的值
        console.log($('div').height()); //300 返回number类型的值
        //innerWidth innerHeight 包含padding
        console.log($('div').innerWidth()); //340
        console.log($('div').innerHeight()); //340
        //outerWidth outerHeight 包含padding和border
        console.log($('div').outerWidth()); //350
        console.log($('div').outerHeight()); //350
        //里面传入true表示是否包含margin
        console.log($('div').outerWidth(true)); //370
        console.log($('div').outerHeight(true)); //370

获取位置

• offset ：获取当前的盒子离页面的距离，返回一个jquery对象
• position ：获取当前盒子离父元素的距离（不受margin影响）

        //获取当前的p标签在页面上的位置 获取当前元素在页面上的位置
        console.log($('div').offset());
        //{top: 30, left: 30}返回一个对象
        console.log($('div').position());
        //{top: 20, left: 20}
        console.log($('p').offset());
        //{top: 85, left: 85}
        console.log($('p').position());
        //{top: 50, left: 50}

事件

jQuery的事件采用观察者模式，来设计对应的方法

• on ：监听事件
• off ：取消事件
• one ：执行一次

//事件名 处理函数
$('div').on('click',function(){
    console.log('点击了');
})
$('div').on('click',handler)
    function handler(){
        console.log('点击了1');
}
//取消事件监听
$('div').off('click',handler)
//one方法 只执行一次(事件监听)
$('div').one('mouseenter',()=>{
    console.log('鼠标移进');
})

jQuery针对所有的常用事件都实现了对应的方法

• click
• dblclick
• mouseenter
• mouseleave
• keydown
• keyup
• change
• hover (总和了mouseleave mouseenter)

...

//事件名 处理函数
$('div').on('click',function(){
    console.log('点击了');
})
$('div').on('click',handler)
    function handler(){
        console.log('点击了1');
}
//取消事件监听
$('div').off('click',handler)
//one方法 只执行一次(事件监听)
$('div').one('mouseenter',()=>{
    console.log('鼠标移进');
})
//针对对应的事件的相关函数
$('button').click(()=>{
    console.log('button点击了');
})
$('button').mouseenter(()=>{
    console.log('移进去了');
})
$('button').mouseleave(()=>{
    console.log('移出去了');
})
$('button').mousemove(()=>{
    console.log('移动');
})
$('input').change(()=>{
    console.log('改变值');
})
//hover方法 结合了移进和移出（mouseenter和mouseleave）
$('p').hover(()=>{
    console.log('移进');
},()=>{
    console.log('移出');
})

jQuery实现对应的事件委托

// 利用事件委托来操作
$('ul').mouseover((e)=>{
        //获取事件源
        e = e || window.event
        if(e.target.tagName == 'LI'){
                //给对应的li添加class
                $(e.target).addClass('selected')  //给自己添加样式
                $(e.target).siblings().removeClass('selected')  //移出兄弟的样式
        }
})

jQuery的动画

animate 动画

• animate ({ option，delay，callback }）
• option 里面只传 number 类型的值 (可以带单位)，如果传入的时颜色需要使用 Color 这个类

         $('div').animate({
             width: 200,
             left: 200,

         }, 2000, () => {
             $('div').animate({
                 width: 100,
                 top: 300,
                 opacity: 0.5
             }, 2000, () => {
                 console.log('动画完成了');
             })
         })

show 显示 ；hide 隐藏 ；toggle 切换

slideUp 上去 ；slideDown 下去 ；slideToggle 切换

fadeOut 隐藏 ；fadeIn 显示 ；fadeToggle 切换 ；fadeTo 切换到对应透明度

        //淡入淡出切换
        $('div').fadeIn(2000, function() {
             console.log(this);
             $(this).fadeOut(3000,
                 function() {
                     $(this).fadeToggle(3000)
                 })
        })
        //滑动显示隐藏
        $('div').hide(2000, () => {
            $('div').show(2000) //宽高都会变化
        })
        //显示隐藏 slideDown 变化高度
        $('div').slideUp(2000, () => {
            $('div').slideDown(2000)
        })
        //show和hide配对的 显示就调用hide 隐藏调用show
        //slideToggle 显示调用slideUp 隐藏调用slideDown
        $('div').toggle(2000, () => {
            $('div').slideToggle(2000)
        })

jQuery的Ajax

概述：

• jquery 的 ajax 对应的原生 ajax 的 xmlhttprequest 进行了封装
• 原生的 ajax 的 xmlhttprequest 只支持 get 请求和 post
• 但是 jQuery 的 ajax 在此基础上进行了增强它还支持其他的请求如：putdelete patch option...

resultFul

resultFul 是一种接口风格，它遵从 rest 规范，它是以返回 json 格式数据，以请求的方式来区分对应的功能（跨平台）。

常见的result请求

• get请求 获取数据
• post请求 添加数据
• delete请求 删除数据
• put请求 修改一条
• patch请求 批量修改数据

对应的方法

• get 方法
• post 方法
• ajax 方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="
viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>get方法</button>
    <button>post方法</button>
    <button>ajax方法</button>
    <script src="./jquery.min.js"></script>
    <script>
        $('button:eq(0)').click(() => {
            //url地址 参数 回调函数
            $.get('https://jsonplaceholder.typicode.com/todos', {
                _limit: 10
            }, (res) => {
                console.log(res);
            })
        })
        $('button:eq(1)').click(() => {
            //url地址 参数 回调函数
            $.post('https://jsonplaceholder.typicode.com/posts', {
                username: 'jack '
            }, (res) => {
                console.log(res);
            })
        })
        $('button:eq(2)').click(() => {
            // $.ajax('https://jsonplaceholder.typicode.com/todos',{
            // data:{
            //
            // _limit: 10
            // },
            // method:'get',
            // timeout:3000,
            // async:true,
            // dataType:'json',
            // success(res){
            //
            // console.log(res);
            // },
            // error(err){
            //
            // console.log(err);
            // },
            // complete(){
            //
            // console.log('完成了');
            // }
            // })
            $.ajax({
                url: 'https://jsonplaceholder.typicode.com/todos',
                data: {
                    _limit: 10
                },
                method: 'get',
                timeout: 3000,
                async: true,
                dataType: 'json',
                success(res) {
                    console.log(res);
                },
                error(err) {
                    console.log(err);
                },
                complete() {
                    console.log('完成了');
                }
            })
        })
    </script>
</body>

</html>

ajax的钩子函数（生命周期函数 自动调用）

• ajaxComplete ：请求完成调用
• ajaxError ：请求错误调用
• ajaxSend ：请求发送调用
• ajaxStart ：请求开始发送
• ajaxStop ：请求发送停止
• ajaxSuccess ：请求发送成功

jQuery的多库共存

当你使用其他的库和 jQuery 库结合使用的，我们有可能在其他库里面有对应的一个方法叫做jQuery 或者有一个变量叫 $ ,那么这个时候就会发生冲突。多库共存就是为了解决这个问题。

noConflict

console.log(jQuery);
console.log($);
//如果不传参数， 默认干掉$， 传入true俩个都干掉
let a = $.noConflict(true)
console.log($);      //被干掉了
console.log(jQuery);
console.log(a);

jQuery的插件扩展

使用extend方法

给jQuery对象扩展 静态方法
//第一个名字 扩展的配置
$.extend({
        sayHello() {
                console.log('hello');
        }
})
//调用
$.sayHello()

给jQuery对象的方法扩展 原型方法
$.fn.extend({
        redColor(){
                $(this).css('color','red')
        }
})
$('div').redColor()
$('p').redColor()