jQuery

兢兢阿金
215 阅读3分钟

jQuery 可以理解为是 js原生封装了很多的好用的方法放在了jquery.js这个文件中。

1.选择器

（1）基础选择器

名称用法描述
全选选择器$('*')匹配所有元素
id选择器$('#id')获取指定id的元素
标签选择器$('div')获取同一类标签的所有元素
类选择器$('.class')获取同一类class的所有元素
并集选择器$('div,p,li')选取多个元素
交集选择器$('li.class')同时拥有这些属性的元素

（2）层级选择器

名称用法描述
后代选择器$('ul li')获取ul下的所有li元素，包括孙子等
子级选择器$('ul>li')获取亲儿子层级的元素，不会获取孙子层级的元素
相邻选择器$('p+li')选取紧邻目标元素的下一个元素
同辈选择器$('p ~ li')选取目标元素之后的所有同辈元素

（3）属性选择器

符号用法描述
[]$('a[href]')选取属性有href的a标签
!$('li[class!=a]')选取属性不是某个特定值的元素
$('a[href^=www]')指定属性值以指定值开头的元素
$$('a[href$=com]')指定属性值以指定值结尾的元素
*$('a[href*=baidu]')指定属性值包含指定值的元素

（4）过滤选择器

语法用法描述
:first$('li:first')获取第一个li元素
:last$('li:last')获取最后一个li元素
:eq(index)$('li:eq(2)')获取索引号为2的li元素（索引号从0开始）
:odd$('li:odd')获取索引号为奇数的li元素
:even$('li:even')获取索引号为偶数的li元素（0为偶数）
:not(selector)$('li:not(.a)')获取class不是a的li元素
:gt(index)$('li:gt(2)')获取索引号大于2的li元素（不包括2）
:lt(index)$('li:lt(2)')获取索引号小于2的li元素（不包括2）
:header$(':header')获取所有标题元素，h1-h6
:focus$(':focus')获取当前得到焦点的元素
:visible$('div:visible')获取所有可见的div元素
:hidden$('div:hidden')获取所有隐藏的div元素

（4）筛选方法

语法用法说明
find(selector)$('ul').find('li')获取ul元素的后代li元素
eq(index)$('li').eq(2)相当于$('li:eq(2)')
hasClass(class)$('li').hasClass(a)检查当前元素是否含有某个特定的类，有则返回true
parent()$('.a').parent()获取元素的父级元素
parents()$('.a').parents()以数组形式返回元素的所有祖先元素
closest()$('.a').closest('dl')从当前元素开始，返回所匹配到的第一个符合条件的祖先元素。效率更高，找到目标元素即停止。
children()$('ul').children()获取元素的所有子元素
siblings()$('.a').siblings()查找兄弟节点，不包括自己
next()$('.a').next()查找当前元素的下一个同辈元素
prev()$('.a').prev()查找当前元素的上一个同辈元素
filter()$('li').filter('.a')在集合元素中过滤出指定的元素

2.显示隐藏效果

show()显示元素
hide()隐藏元素

    <button style="margin:0 auto;display: block;">开关按钮</button>
    <div style="display: none;width: 100vw;height: calc(100vh - 22px);"></div>
    <script src="./jquery-1.12.4.js"></script>
    <script>
        /* 模拟 开灯 颜色变化 */
        /* 点第一次 显示 打开 显示红色div */
        /* 点第二次 显示 打开 显示黄色div */
        /* 点第三次 关闭 */
        let count = 1;
        $('button').click(function(){
            console.log(count);
            console.log( $('div').css('background-color') );
            if(count==1){
                $('div').css('background-color','red')
                $('div').show(1000);
                count++
                return;
            }
            if(count==2){
                $('div').css('background-color','yellow')
                count++
                return
            }
            if(count==3){
                $('div').hide(1000);
                count=1
            }
        })
    </script>

3.基本操作

（1）设置class的方法

①添加
$('div').addClass('a')
②删除
$('div').removeClass('a')
③切换（有则删除，无则添加）
$('div').toggleClass('a')

（2）节点操作

html()、text()、val()

语法格式描述
html()获取匹配的第一个元素的HTML内容
html('内容')设置所有匹配元素的HTML内容，可识别标签
text()获取所有匹配元素的文本内容
text('内容')设置所有匹配元素的文本内容，不可识别标签
val()返回表单元素的值
val('内容')设置表单元素的值

添加节点

语法描述
A.append(B)
B.appendTo(A)		将B添加至A的结尾
A.prepend(B)
B.prependTo(A)		将B添加至A的开头
A.after(B)
B.insertAfter(A)		将B添加至A的后面
A.before(B)
B.insertBefore(A)		将B添加至A的前面
<head>
    <style>
        .a {
            width: 50px;
            border-radius: 50%;
            margin: 5px;
        }
    </style>
</head>

<body>
//向前向后随机添加图片
    <button>向前添加</button>
    <button>向后添加</button>
    <div> </div>
    <script src="./jquery-1.12.4.js"></script>
    <script>
        let arr = ['./images/1.jpg', './images/2.jpg', './images/3.jpg'];
        $('button:first').click(function () {
            var i = Math.floor(Math.random() * (3))
            $('div').prepend("<img src='" + arr[i] + "'  class='a'>")
        })
        $('button:last').click(function () {
            var i = Math.floor(Math.random() * (3))
            $('div').append("<img src='" + arr[i] + "'  class='a'>")
        })
    </script>
</body>

删除节点

方法描述
remove()删除整个节点
empty()清空节点内容
detach()删除整个节点，保留元素的绑定事件、附加的数据

克隆节点

A.clone(flag)
flag=true 时，复制事件处理。
flag=false 或者不传参数，不能实现复制事件。

(3)遍历子元素

    <h3>祝福冬奥</h3>
    <ul>
        <li>贝克汉姆</li>
        <li>姚明</li>
        <li>张虹</li>
        <li>肖恩怀特</li>
    </ul>
    <script src="./jquery-1.12.4.js"></script>
    <script src="./cloneFn.js"></script>
    <script>
        //each()
        //第一个参数i：每个元素的索引  第二个参数e：每一个遍历的原生元素
        $('h3').click(function () {
            $('li').each(function (i, e) {
                e.innerHTML = "我要祝福冬奥" + i
            })
        })
    </script>

(4）获取与设置元素属性

方法描述
attr()获取或设置元素的自定义属性
prop()获取或设置元素的原生属性
    <img src="./练习：制作图书简介页面/素材/images/store.jpg" alt="ing">
    <script src="./jquery-1.12.4.js"></script>
    <script>
        //自定义属性
        $('img').attr('data-a', '1')
        //原有属性（表单属性不能获取）
        console.log($('img').attr('alt'));
        $('img').attr('width', '100px')
        $('img').click(function () {
            $(this).removeAttr('width')
        })
    </script>

    <input type="checkbox" id="basket">篮球
    <input type="checkbox" id="foot">足球
    <h3></h3>
    <h3></h3>
    <script src="./jquery-1.12.4.js"></script>
    <script>
        $('#basket').click(function () {
            if ($(this).prop('checked')) {
                $('h3:first').text("我爱篮球")
            } else { $('h3:first').text("") }
        })
        $('#foot').click(function () {
            if ($(this).prop('checked')) {
                $('h3:last').text("我爱足球")
            } else { $('h3:last').text("") }
        })
    </script>

(5）获取与设置元素高度、宽度

语法功能
width()获取content的宽度
height()获取content的高度
offset()返回以像素为单位的top和left坐标，top和left值会包括自己的margin值和父元素的border值。(仅对可见元素有效)
offsetParent()返回最近的已定位祖先元素。定位元素指的是元素的CSS position值被设置为relative、absolute或fixed的元素。
position()返回第一个匹配元素相对于父元素的位置
scrollLeft([position])参数可选。设置或返回匹配元素相对滚动条左侧的偏移
scrollTop([position])参数可选。设置或返回匹配元素相对滚动条顶部的偏移

4.链式调用

链式调用的原理： jQ里面的方法都会return this ，把当前调用者return出去，实现链式调用。
$('div').text('我是学生').css('color','red').attr({name:'zhangsan',age:30})

end()

end()：结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态。
$('li').eq(0).css('background','yellow').end().eq(1).css('background','red')

5.事件

鼠标事件

<head>
    <style>
        .div1{
            width: 300px;
            height: 300px;
            border:1px solid red;
        }
        .div2{
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
</head>
<body>
    <div class="div1">
        <div class="div2"></div>
    </div>
    <script src="./jquery-1.12.4.js"></script>
    <script>
        /* hover 由mouseenter和mouseleave组成 */
         $('.div1').hover(function(){
             console.log(1);
         })

        /*  mouseenter mouseleave ★在进入子元素区域的时候不会触发*/
        // $('.div1').mouseenter(function(){
        //     console.log('mouseenter');
        // })
        // $('.div1').mouseleave(function(){
        //     console.log('mouseleave');
        // })

        /*  mouseover和 mouseout 在进入子元素区域的时候也会触发*/
        // $('.div1').mouseover(function(){
        //    console.log('mouseover')
        // })
        // $('.div1').mouseout(function(){
        //     console.log('mouseout')
        // })
    </script>

键盘事件

    <script>
        /* 按下键盘时 */
        // $('input[type=text]').keydown(function(){
        //     alert('我按下了')
        // })
        /* 释放按键时 */
        // $('input[type=password]').keyup(function(){
        //     alert('鼠标抬起了')
        // })
        /* 产生可打印的字符时 连续敲击键盘的时候触发 */
        // $('input[type=password]').keypress(function(){
        //     alert('连续敲击键盘')
        // })
        $(document).keyup(function (e) {
            /* 敲击回车的时候触发 */
            if (e.keyCode == 13) {
                alert('我提交了')
            }
        })
    </script>

浏览器事件

    <script>
        /* 浏览器监听滚动事件 */
        // $(window).scroll(function(){
        //     console.log('scrollLeft',$(document).scrollLeft() )
        //     console.log('scrollTop',$(document).scrollTop() )
        // })
        /* 浏览器监听浏览器尺寸发生变化 */
        // $(window).resize(function(){
        //     console.log('我的尺寸变化了');
        //     console.log( $(window).width() )
        //     if( $(window).width() <600 ){
        //         $('div').css('background','red')
        //     }else{
        //         $('div').css('background','cyan')
        //     }
        // })
    </script>

绑定事件

    <script>
        /* 绑定单个事件 */
        // $('div').bind('click',function(){
        //     console.log('我绑定了点击事件')
        // })
        // $('div').bind('mouseover',function(){
        //     console.log('我绑定了鼠标移入事件')
        // })
        // $('div').bind('mouseout',function(){
        //     console.log('我绑定了鼠标移出事件')
        // })
        /* 绑定多个事件 */
        $('div').bind({
            click:function(){
                console.log('我绑定了点击事件')
            },
            mouseover:function(){
                console.log('我绑定了鼠标移入事件')
            },
            mouseout:function(){
                console.log('我绑定了鼠标移出事件')
            }
        })
        $('button').click(function(){
            /* 解绑 */
            // $('div').unbind('click')
            /* 当unbind()不带参数时，表示移除所绑定的全部事件 */
            $('div').unbind()
        })
        // $('div').mouseover(function(){
        //     console.log('我绑定了鼠标移入事件')
        // })
        // $('div').mouseout(function(){
        //     console.log('我绑定了鼠标移出事件')
        // })
    </script>

未来事件

<body>
    <button id="btn1">点击添加学生</button>
    <button id="btn2">解绑li点击事件</button>
    <ul>
        <li>我是学生1</li>
        <li>我是学生2</li>
        <li>我是学生3</li>
    </ul>
    <!-- 点击添加学生 点击li可以打印出对应的字 -->
    <!-- 点击学生4 或者 5 也能答应出 对应的字 -->
    <script src="./jquery-1.12.4.js"></script>
    <script>
        let count = 3;
        $('#btn1').click(function(){
            count++;
            $('ul').append( $(`<li>我是学生${count}</li>`) )
        })
        /* 这样操作 对未来元素不能实现绑定 */
        // $('li').click(function(){
        //     alert( $(this).text() );
        // })
        /* 使用bind 实现不了对未来元素的绑定 是老版本的用法
        新版的使用on*/
        /* 给已存在的body元素绑定  点击li的时候出现对应的事件 */
        $('body').on('click','li',function(){
           alert( $(this).text() );
        })
        $('#btn2').click(function(){
            /* 使用off方法来解绑li的点击事件 */
            /* 使用未来元素的方法绑定的方式不能实现使用li对off解绑 
            要使用 $('body').off('click')*/
            // $('li').off('click')
        })
    </script>
</body>

动画

<body>
    <button>点我</button>
    <div></div>
    <script src="./jquery-1.12.4.js"></script>
    <script>
        $('button').click(function(){
            // $('div').slideToggle('500')
            $('div').fadeToggle('500')
        })
        $('div').click(function(){
            /* $(selector).animate({params},speed,callback) */
            // $('div').animate({
            //     left:'200px',
            //     top:'500px'
            // },2000,function(){
            //     $(this).animate({
            //         left:'400px',
            //         top:'20px'
            //     },2000,function(){
            //         $(this).animate({
            //             left:'600px',
            //             top:'500px'
            //         },2000,function(){
            //             $(this).animate({
            //                 left:'800px',
            //                 top:'20px'
            //             },2000,function(){
            //                 /* unbind 也可以操作click直接调用的事件 */
            //                 $('div').unbind('click')
            //             })
            //         })
            //     })
            // })
            /* 可选。表示速度，默认为“0”，
            可能值：毫秒（如1000）、slow、normal、fast */
            /* 
                slideDown() 可以使元素逐步延伸显示
                slideUp()则使元素逐步缩短直至隐藏
            */
            
            // if($('div').css('display')=='block'){
            //     $('div').slideUp('500',function(){
            //         alert('向上收缩')
            //     })
            // }else{
            //     $('div').slideDown('500',function(){
            //         alert('向下展开')
            //     })
            // }

            // if($('div').css('display')=='block'){
            //     $('div').fadeOut('500',function(){
            //         alert('我淡出了')
            //     })
            // }else{
            //     $('div').fadeIn('500',function(){
            //         alert('我淡入了')
            //     })
            // }
            // $('div').toggle('slow'); 
        })
    </script>
</body>
avatar
文章
阅读
粉丝