jQuery

努力当一个优秀的程序员

已于 2024-02-26 17:44:36 修改

阅读量261

点赞数 3

分类专栏： Web 文章标签： jquery 前端 javascript

于 2024-02-26 17:30:09 首次发布

本文链接：https://blog.csdn.net/m0_70078527/article/details/136304867

版权

Web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1：介绍：

1.1 jQuery的概述：

jQuery是一个快速、简洁的JavaScript的框架.宗旨是"write Less,Do More",即写的少，做的多；

jQuery封装了JavaScript常用的功能代码，提供一套抑郁使用的API，可以跨多种浏览器工作，使HTML文档的便利和操作、事件处理、动画设计和Ajax交互等操作变得更加简单。

1.2 jQuery框架的下载与引入：

（1）jQuery官方下载地址：jQuery

（2）jQuery版本（了解）:

1.x：兼容IE678，使用广泛，官方只做bug维护，功能不在新增。
2.x：不兼容IE678，很少有人使用，官方只做bug维护，功能不在新增。
3.x：不兼容IE678，只支持最新浏览器。

（3）jQuery的引入：

在需要使用jQuery的html中使用js引入的方式进行引入，如下：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery的引入</title>
    <!-- 
        jQuery的引入：在html页面中如何使用jQuery
            1：把外部的jQuery文件复制到当前的项目中
            2：在HTML页面中使用script标签引入外部的jQuery文件
     -->
    <script src="jquery-3.7.1.js"></script>
    <!-- 
        在jQuery中有一个核心函数叫jQuery（），可以被简化成一个$
        调用这个jQuery函数参数需要传递一个匿名函数
        当页面加载完毕就会执行这个匿名函数
        就相当于页面加载事件（windom.onload=function(){}）
        格式：
            jQuery(function(){
                页面加载事件
            })；
            $(function(){
                页面加载事件
            });
     -->
     <script>
        jQuery(function(){
            alert(1);
        })
        $(function(){
            alert(2)
        })
     </script>
</head>
<body>
    <div>我是一个div标签</div>
</body>
</html>

（4）jQuery和js中页面加载事件的区别：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery中页面加载事件和js中页面加载事件的区别</title>
    <script src="jquery-3.7.1.js"></script>
    <script>
        /* 
            jQuery中页面加载事件和js中页面加载事件的区别：
                js中页面加载事件：
                    只能写一个（写多个后面的会被覆盖）
        */
       window.onload = function(){
            alert(1);
       }
       window.onload = function(){
            alert(2);
       }
       /* 
        jQuery中页面加载事件：
            写多个，都会被执行
       */
      $(function(){
        alert(3);
      })
      $(function(){
        alert(4);
      })
    </script>
</head>
<body>
    <div>我是一个div标签</div>
</body>
</html>

1.3 jQuery对象与js对象之间的转换：

jQuery本质上虽然是js，但如果使用jQuery的属性和方法那么必须保证对象是jQuery对象，而不是介绍方式获取DOM对象，二者的API方法不能混用，若想使用对方的API，需要进行对象的转换。

使用js方式获取对象是js的DOM对象，使用jQuery方式获取的对象是jQuery对象，两者的转换关系如下：

==js的DOM对象转换成jQuery对象==，语法：${js的DOM对象}
==jQuery的对象转换成js对象==，语法：jquery对象[索引] 或 jquery对象.get(索引)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery对象与js对象之间的转换</title>
    <script src="jquery-3.7.1.js"></script>
    <script>
        /* 
            jQuery对象与js对象之间的转换：
            （1）jQuery本质是一个数组，数组包含了多个dom对象{document对象}
                var jQuery = {dom对象，dom对象，……}
            （2）注意：
                jQuery对象不能使用dom对象中的属性和方法
                dom对象也不能使用jQuery对象中的属性和方法
                但是二者之间可以相互转换
            （3）转换格式：
                1：dom对象--》jQuery对象：穿马甲
                    格式：
                        dom对象 --》${dom对象}；
                2：jQuery对象--》dom对象：脱马甲（取出jQuery数组中的dom对象）
                    格式：
                        jQuery对象--》jQuery对象[索引]
                        jQuery对象--》jQuery对象.get（索引）
        */
       $(function(){
        /* 
            使用dom对象获取id是mydiv的标签
                获取标签体：dom对象.innerHTML     
                设置标签体：dom对象.innerHTML = 新的标签体；  
        */
            var div=document.getElementById("mydiv");
            // alert(div.innerHTML);
        /* 
            使用jQuery对象获取id是mydiv的标签：
                在jQuery对象中把设置标签体和获取标签体封装为一个函数，函数名叫html
                获取标签体：jQuery对象.html();
                设置标签体：jQuery对象.html(新的标签体)；
        */
            var $div=$("#mydiv");
            // alert($div.html());

            // 1:dom对象-->jQuery对象：穿马甲
            var $mm=$(div);
            $mm.html("你是一个div");
            // $mm.innerHTML='他是一个div'; //jQuery对象不能使用dom对象的属性和方法
           
            // 2.jQuery对象-->dom对象：脱马甲，取出jQuery数组中的dom对象
            var d1=$div[0];
            d1.innerHTML="他是一个div";

            var d2=$div.get(0);
            alter(d2.innerHTML);
            // alter(d2.html());
       })
    </script>
<body>
    <div id="mydiv">我是一个div标签</div>
</body>
</html>

努力当一个优秀的程序员

关注

3
点赞
踩
7

收藏

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

jQuery是一个快速、简洁的JavaScript的框架.宗旨是"write Less,Do More",即写的少，做的多；jQuery封装了JavaScript常用的功能代码，提供一套抑郁使用的API，可以跨多种浏览器工作，使HTML文档的便利和操作、事件处理、动画设计和Ajax交互等操作变得更加简单。
复制链接

扫一扫