JQuery

最新推荐文章于 2022-07-17 08:00:00 发布

VIP文章 m0_59908711

最新推荐文章于 2022-07-17 08:00:00 发布

阅读量196

点赞数 1

本文链接：https://blog.csdn.net/m0_59908711/article/details/118710217

版权

jQuery概述

什么是jQuery

jQuery是一款优秀的javascript的轻量级框架之一，封装了dom操作、事件绑定、Ajax等功能。

特别值得一提的是基于jQuery平台的插件非常丰富，大多数前端业务场景都有其封装好的工具可直接使用。

jQuery下载和版本介绍

官网地址：http://jquery.com

==注意事项==

如果公司使用的老版本插件，我们jq升级后，可能会让插件失效....

jQuery版本

jquery-x.js 开发版本：有良好的缩进格式和注释，方便开发者阅读
jquery-x.min.js 生产版本：代码进行压缩，体积小方便网络传输

==注意事项==

在讲解过程中我们使用 3.2.1版本

框架（Framework）是完成某种功能的半成品，抽取重复繁琐的代码，提供简洁强大的方法实现。

jquery入门

        <!-- 当前页面如果想使用jq，需要引入jq的库，通script标签中的src属性进行即可 -->
        <script src="js/jquery-3.4.1.js"></script>
        <script>
            //我们的jq代码还是在script标签中书写，前提得有jq的库
            
            //js原生版
            window.onload = function(){
                alert(666);
            }
            
            //jq版
            jQuery(function(){
                alert(888);
            })
            
            //jq简化写法1
            $(document).ready(function(){
                alert(999);
            })
            
            //jq简化写法2 推荐
            $(function(){
                //今后的jq代码都在这里书写
            });
            
        </script>

jq与js的页面加载的区别

语法

js
```
window.onload = function(){
    
}
```
jq
```
$(function(){
    
});
```

两者之间的区别

* js: 只能定义一次，如果定义多次，后面会将前面的进行给覆盖掉
* jq: 可以定义多次

代码演示

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/jquery-3.2.1.min.js"></script>
    </head>
    <body>

        <script>
            // js页面加载
           /* window.onload = function () {
                alert("js页面加载事件1");

            };

            window.onload = function () {
                alert("js页面加载事件2");

            };*/

            // jq页面加载
            $(function(){
                alert("jq页面加载事件1");
            });

            $(function(){
                alert("jq页面加载事件2");
            });

        </script>

    </body>
</html>

操作内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    <script src="../js/jquery-3.2.1.js"></script>
    <script>
        
       $(function(){
           
            //js原生写法
            //var id = document.getElementById("mydiv").innerHTML;获取内容
            var id = document.getElementById("mydiv").innerHTML='你是我的小饼干';
            alert(id);

            //jq通过#来拿到id
           alert($("#mydiv").html());//获取内容
           $("#mydiv").html("小甜心");//改变内容

       });
    </script>
</head>
<body>
    <div id="mydiv">我爱你中国</div>
</body>

</html>

jq与js的转换

jQuery虽然本质上也是js，但如果使用jQuery的属性和方法那么必须保证对象是jQuery对象而不是js对象。

通过js方式获取的是js对象，通过jQuery方式获取的是jQuery对象。

js 转 jq

$(js对象)
jq 转 js

jq对象[索引]

jq对象.get(索引)

代码演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/jquery-3.4.1.js"></script>
        <script>
            
            $(function(){
                //js写法
                document.getElementById("mydiv").innerHTML="我是dom对象的修改";
                //jq写法
                $("#mydiv").html("我是jq对象的修改");
                
                //js ---> jq
                $(document.getElementById("mydiv")).html("js 转  jq");
                
                //jq ---> js
                //方式一
                $("div")[0].innerHTML = "jq转成js方式一";
                
                //方式二
                $("div").get(1).innerHTML = "jq转成js方式二"
            });
        </script>
    </head>
    <body>
        <div id="mydiv">1111</div>
        <div id="mydiv">2222</div>
    </body>
</html>

事件绑定

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    <script src="../js/jquery-3.2.1.js"></script>
    <script>
       $(function(){
        //获取button标签
           $("button").click(function(){
               $("p").hide();//p会被隐藏标签
               $("p").hide("slow");//用600毫秒的时间将段落缓慢的隐藏
           });
       });
    </script>
</head>
<body>
    <P>我爱你,我爱你江一燕</P>
    <button type="button">点我啊</button>
</body>
</html>

解绑事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
</head>
<body>
    <button id="btn" type="button">使用on绑定事件</button>
    <button id="btn2" type="button">使用off解绑事件</button>
    
    <script src="../js/jquery-3.2.1.js"></script>
    <script>
        $(function () {
            //使用on绑定事件
            $("#btn").on("click",function () {
                alert("我被点击了。。")
            })
            //使用off解绑事件
            $("#btn2").click(function () {
                $("#btn").off("click");//解绑指定单击事件
                $("#btn").off();//解绑所有事件
            });
        });
    </script>

</body>
</html>

Jq循环

    <script src="../js/jquery-3.2.1.js"></script>
    <script>
        $(function () {
           var arr =['a','b','c','d'];
           $(arr).each(function(){
               alert(this);//代表是当前引用对象，  用的是谁，this代表谁
           });
        });
    </script>

Jq操作css样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
</head>
<body>
    
        <ul>
            <li>aaaaaaa</li>
            <li>bbbbbbb</li>
            <li>ccccccc</li>
        </ul>

    
    <script src="../js/jquery-3.2.1.js"></script>
    <script>
        $(function () {
           $("li").mouseover(function () {
               $(this).css("background","orange");
           }).mouseout(function () {
               $(this).css("background","white");
           });

        });

    </script>

</body>
</html>

jQuery选择器

基本选择器

标签选择器（元素选择器）

语法： $("html标签名") 获得所

最低0.47元/天解锁文章

m0_59908711

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JQuery

jQuery概述什么是jQueryjQuery是一款优秀的javascript的轻量级框架之一，封装了dom操作、事件绑定、Ajax等功能。特别值得一提的是基于jQuery平台的插件非常丰富，大多数前端业务场景都有其封装好的工具可直接使用。jQuery下载和版本介绍官网地址：http://jquery.com==注意事项==如果公司使用的老版本插件，我们jq升级后，可能会让插件失效....jQuery版本 jquery-x.js 开发版本：有良好的缩进格式和注释，方便开
复制链接

扫一扫