java web-11.1Jquery基础

Dear 丶 2023-03-14 08:12 41阅读 0赞

## JQuery基础 ##

**1.概念：**  
（1）一个JavaScript框架，简化JS开发  
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。  
（2）JavaScript框架：本质上就是一些js文件，封装了js的原生代码而已  
**2.快速入门：**  
**（1）步骤**  
**①下载JQuery**  
**a目前jQuery有三大版本：**  
**1.x** :兼容ie678，使用最为广泛，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x就可以了，最终版本：1.12.4（2016年5月20）  
**2.x**:不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x。最终版本：2.2.4（2016年5月20）  
**3.x**:不兼容ie678，只支持最新的浏览器，除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本，最终版本，3.2.1（2017年3月20日）  
**b.jquery-xxx.js与jquery-xxx.min.js的区别**  
jquery-xxx.js:为开发版本，给程序员看的，有良好的缩进和注释，体积大一些。  
jquery-xxx.min.js：为生产版本，程序中使用，没有缩进，体积小一些，程序加载更快。  
**②导入JQuery**  
导入min.js文件  
**③使用**  
代码示例：本来需要使用`var div1 = document.getElementById("div1");`  
使用jquery后：

<head>
        <meta charset="UTF-8">
        <title>jquery快速入门</title>
        <script src="js/jquery-3.3.1.min.js"></script>//导包
    </head>
    <body>
        <div id = "div1">div1...</div>
        <div id = "div2">div2...</div>
    <script>
        //使用JQuery获取元素对象
        var div1 =$("#div1");//代替原来的document.getElementById("div1")
        alert(div1.html());
        var div2 = $("div2");
        alert(div2.html());
    </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTc5NTA0OQ_size_16_color_FFFFFF_t_70]  
**3.JQuery对象和JS对象区别与转换：**

//1.通过js方式获取名称叫div的所有html元素对象
    var divs = document.getElementsByTagName("div");
     alert(divs)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTc5NTA0OQ_size_16_color_FFFFFF_t_70 1]

//2.通过jquery方式获取名称叫div的所有html元素对象
    var $divs = $("div");
    alert($divs)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTc5NTA0OQ_size_16_color_FFFFFF_t_70 2]  
**本质区别：**

//1.通过js方式获取名称叫div的所有html元素对象
        var divs = document.getElementsByTagName("div");
        alert(divs)
        //对divs中所有的div让其标签体内容变为“aaa”
        for (var i = 0; i < divs.length; i++) { 
            divs[i].innerHTML = "aaa";//(11111)
        }
    
        //2.通过jquery方式获取名称叫div的所有html元素对象
        var $divs = $("div");
        alert($divs)
        //对divs中所有的div让其标签体内容变为“bbb”
        $divs.html("bbb");//(2222222)

**(2222222)比(11111)更方便**  
juery对象在操作时，更加方便  
jquery对象和js对象方法不通用的  
**两者互换：**  
jquery -->js：jquery对象\[索引\] 或者 jquery对象.get(索引)  
js -->jquery:$(js对象)

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTc5NTA0OQ_size_16_color_FFFFFF_t_70]: /images/20230312/0c9716987b0044b08d83e3bd625a63a6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTc5NTA0OQ_size_16_color_FFFFFF_t_70 1]: /images/20230312/ae20175267fe444eb4972849d26810a5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTc5NTA0OQ_size_16_color_FFFFFF_t_70 2]: /images/20230312/43d7820412104c99be06a340a590c901.png