jQuery

最新推荐文章于 2022-12-22 10:38:45 发布

嘿！呆桃日记～

最新推荐文章于 2022-12-22 10:38:45 发布

阅读量1.3k

点赞数

文章标签： jquery 原型模式 javascript

本文链接：https://blog.csdn.net/m0_53456432/article/details/123450367

版权

一.jQuery概念

jQuery 是一个快速、简洁的 JavaScript 库。j是JavaScript，Query是查询，jQuery封装了JavaScript常用的功能代码，优化了DOM操作、事件处理、动画设计和Ajax交互。

学习jQuery的本质就是学习调用这些函数（方法）。

1.JavaScript 库

即library，是一个封装好的特定的集合（方法和函数）。在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。

常见的JavaScript 库有jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto，这些库都是对原生 JavaScript 的封装，内部都是用JavaScript 实现的，我们主要学习的是 jQuery。

简单理解JavaScript 库就是JS文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。

2.jQuery的下载与使用

官网地址: https://jquery.com/

各个版本的下载： https://code.jquery.com/

版本：1x ：兼容 IE 678 等低版本浏览器，官网不再更新。

2x ：不兼容 IE 678 等低版本浏览器，官网不再更新。

3x ：不兼容 IE 678 等低版本浏览器，是官方主要更新维护的。

1.进入官网点击

2.选择压缩版本

3.全选复制

4.新建JS文件

5.引入

 <script src="js/jquery-3.6.0.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        div{
            height: 200px;
            width: 200px;
            background-color: purple;
        }
    </style>
    <script src="js/jquery-3.6.0.js"></script>
</head>
<body>
    <div></div>
    <script>
        $('div').hide()
    </script>
</body>
</html>

2.1jQuery入口函数

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script src="js/jquery-3.6.0.js"></script>
</head>
<body>
    <script>
        // //当页面加载完毕后运行里面的代码(加载完毕后会触发onload事件) 
        //js的入口函数
        // window.onload=function(){
        //     document.querySelector('button').onclick=function(){
        //         alert(1)
        //     }
        // }

        //jQ入口函数 本质还是JS
        $(function(){
            document.querySelector('button').onclick=function(){
                alert(1)
            }
        })
    </script>
    <button>按钮</button>
</body>
</html>

jq的入口函数和 js的入口函数有什么区别?

原生js的入口函数里面的代码:页面文档、外部的 js 文件、css 文件、图片等加载完毕才执行。

jquery的入口函数里面的代码: dom节点加载完毕时执行。

2.2jQuery顶级对象$

1.$ 是 jQuery 的别称，在代码中可以使用 jQuery 代替 $，但一般为了方便，通常都直接使用 $。

2.$ 是jQuery 的顶级对象，相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用jQuery 的方法。

2.3*DOM对象和jQuery对象

1.DOM对象：利用原生JS获取来的对象就是DOM对象【document.getElement等方法】

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script src="js/jquery-3.6.0.js"></script>
</head>
<body>
    <button>按钮</button>
    <script>
        var a = document.querySelector('button')
        console.log(a);//DOM对象 <button>按钮</button>
    </script>
</body>
</html>

2.jQuery对象：jQuery 方法获取的元素就是 jQuery 对象【$('div')等】

本质：通过$把DOM元素进行了包装(以伪数组形式存储)

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script src="js/jquery-3.6.0.js"></script>
</head>
<body>
    <button>按钮</button>
    <script>
        var b = $('button')
        console.log(b);//JQ对象 可能是数组或者伪数组
    </script>
</body>
</html>

dom对象只能使用原生js方法，jquery对象只能使用jq的方法，不能混用。

如隐藏功能：dom对象：div.style.display='none' jquery对象:$('div').hide()

2.4DOM对象和jQuery对象相互转换

DOM 对象与 jQuery 对象之间是可以相互转换的。

因为原生js 比 jQuery 更大，原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。（例如jQuery中没有play方法）

JQ对象转换成DOM $( )[0]或者; $( ).get(0) DOM对象转换JQ对象：$(DOM对象)

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script src="js/jquery-3.6.0.js"></script>
<body>
   <video src=".mp4"  muted></video>
   <script>
    //    1.DOM对象转为JQ对象
    //    (1)直接获取视频就是JQ对象
       $('video')
    //    (2)使用原生JS获取DOM对象
       var myv=document.querySelector('video')
       $(myv).play()//JQ里没有play这个方法
       myv.play()
    // //  2.JQ对象转为DOM对象
    $('video')[0].play()//或者
    $('video').get(0).play()
   </script>
</body>
</html>

二.jQuery常用API

1.jQuery选择器

1.1jQuery基础选择器

1.2jQuery层级选择器

1.3隐式迭代

遍历内部 DOM 元素（伪数组形式存储）即把匹配的所有元素内部进行遍历循环的过程就叫做隐式迭代。ps:迭代会对元素做相同的操作

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script src="js/jquery-3.6.0.js"></script>
<body>
   <div>隐式迭代</div>
   <div>隐式迭代</div>
</body>
<script>
    $('div').css('background-color','red')
//把匹配的的所有元素内部进行遍历循环，给每一个元素添加css方法
</script>
</html>

1.4jQuery筛选选择器

补充：checked选择器查找被选中的表单元素

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script src="js/jquery-3.6.0.js"></script>
    <script>
        $(function(){
            console.log($('li:first'));//第一个元素
            console.log($('li:last'));//最后一个元素
            console.log($('li:eq(2)'));//索引为2【查找指定索引的元素】
            console.log($('li:odd'));//索引为奇数
            console.log($('li:even'));//索引为偶数
        })
    </script>
</head>
<body>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</body>
</html>

2.*jQuery筛选方法

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <script src="js/jquery-3.6.0.js"></script>
    <script>
        $(function () {
            console.log($('.a').parent());  //父节点
            console.log($('ul').children());  //子节点【如果不加参数，获取所有的，如果添加指定的元素，按照指定的找】
            console.log($('ul').find('li'));  //子节点
            console.log($('.a').siblings().css('color','red'));  //兄弟节点 排他
            console.log($('.a').nextAll().css('color','red'));  //后面的节点 排他
            console.log($('.a').prevAll().css('color','green'));  //前面的节点 排他
            //判断是否有指定类名
            console.log($('li').hasClass('a'));//true
            //---------------------------
            console.log($('li').eq(2));    //jq
            console.log($('li:eq(2)'));   //jq
            console.log($('li:eq("+index+")'));   //jq
            console.log($('li').get(2));   //dom
            console.log($('li')[2]);   //dom
        })
    </script>
</head> 
<body>
<ul>
    <li>0-测试</li>
    <li>1-测试</li>
    <li class="b">2-测试</li> 
    <li class="a">33333</li>
    <li>4-测试</li>
    <li>5-测试</li>
    <span>123</span>
</ul>

</body>
</html>

3.例：下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script src="js/jquery-3.6.0.js"></script>
    <style>
        div{
            margin: auto;
            border: solid 1px black;
            border-radius: 5px;
            width: 160px;
            /* overflow: hidden;溢出隐藏 */
        }
        span{
            display: block;
            text-align: center;
            width: 160px;
            height: 40px;
            line-height: 40px;
        }
        ul{
            margin: 0px;
            padding: 0px;
            display: none;
            list-style: none ;
        }
        li{
            text-align: center;
            background-color: aquamarine;
            margin-top: 2px;
            line-height: 40px;
        }
    </style>
    <script>
        $(function(){
            $('div').mouseenter(function(){
                $('ul').show(300)
            })
            $('div').mouseleave(function(){
                $('ul').hide(200)
                // console.log(1);
            })
            $('li').click(function(){
                $('span').html($(this).html())
                $('ul').hide(200)
            })

            // $('div').hover(function(){
            //     $('ul').slideDown()
            // },function(){
            //     $('ul').slideUp()
            // })
            // $('li').click(function(){
            //     $('span').html($(this).html())
            //     $('ul').slideUp()
            // })
        })
    </script>
</head>
<body>
    <div>
        <span>下拉菜单</span>
        <ul>
            <li>111</li>
            <li>222</li>
            <li>333</li>
            <li>122</li>
            <li>233</li>
            <li>344</li>
        </ul>
    </div>
</body>
</html>

4.jQuery排他思想

想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。

案例：多个按钮点击改变当前按钮颜色，其他的不变

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script src="js/jquery-3.6.0.js"></script>
    <script>
        $(function(){
            //1.隐式迭代，给所有按钮添加点击功能
            $('button').click(function(){
                //2.当前元素设置样式
                $(this).css('color','red')
                //3.其余兄弟元素去除样式
                $(this).siblings().css('color','')
            })
        })
    </script>
</head>
<body>
    <button>11111</button>
    <button>22222</button>
    <button>33333</button>
</body>
</html>

5.例：淘宝

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            width: 500px;
            height: 400px;
            border: solid 1px black;
            margin: auto;
        }
        .l{
            float: left;
            height: 400px;
            width: 100px;
            border: solid 1px black;
            box-sizing: border-box;
        }
        li{
            list-style: none;
            height: 100px;
            width: 100px;
            line-height: 100px;
            text-align: center;   
        }
        .r{
            height: 400px;
            width: 400px;
            float

最低0.47元/天解锁文章

嘿！呆桃日记～

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery

一.jQuery概念jQuery 是一个快速、简洁的 JavaScript 库。j是JavaScript，Query是查询，把js中的DOM进行封装，可以快速查询使用里边的功能，jQuery封装了JavaScript常用的功能代码，优化了DOM操作、事件处理、动画设计和Ajax交互。（学习jQuery的本质就是学习调用这些函数（方法））1.JavaScript 库常见的JavaScript 库有jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto，这些库都是对原生
复制链接

扫一扫