JQuery基础学习笔记

最新推荐文章于 2024-01-20 21:49:50 发布

暮光乐鱼

最新推荐文章于 2024-01-20 21:49:50 发布

阅读量265

点赞数

分类专栏： java-web-JQuery java-web 文章标签： JQuery

本文链接：https://blog.csdn.net/LSGBB/article/details/102510723

版权

主要内容

JQuery基础
1. 概念
2. 快速入门
3. Jquery对象和JS对象的区别与转换
4. 选择器
5. DOM操作
6. 案例

1. Jquery基础

概念
- 一个javaScript框架，简化js开发
- javaScript框架：本质上是一些js文件，封装了js的原生代码而已
快速入门
- 步骤
1. 下载JQuery
  - 目前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日）
  - jquery-xxx.js和jquery-xxx.min.js文件的区别
    - jquery-xxx.js ：开发版本，给程序员看的，有良好的缩进和注释。文件体积稍大些
    - jquery-xxx.min.js ：生产版本，程序中使用，没有缩进。体积更小一些，程序加载更快
2. 导入Jquery的js文件；导入min.js文件
3. 使用：本次学习使用的是最新的3.3.1版本的JQuery

    <!DOCTYPE html>
    <html lang="en">
    <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");
            var div2 = $("#div2");
    
            alert(div1.html())
            alert(div2.html())
        </script>
    </body>
    </html>

Jquery对象和JS对象的区别与转换
- 获取的所有元素对象可以当作数组来使用
1. JQuery对象在操作时，更加方便
2. js对象和JQuery对象的方法是不通用的
3. 两者之间可以相互转换
  - js – > JQuery ：$(js对象)
  - JQuery – > js : JQuery对象[索引] 或者 JQuery对象.get(索引)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JQuery对象与js对象的转换</title>
        <script src="js/jquery-3.3.1.min.js"></script>
    </head>
    <body>
        <div id="div1">div1...</div>
        <div id="div2">div2...</div>
    
        <script>
           // 1.通过js方式获取名称叫做div的所有html元素对象
            var divs = document.getElementsByTagName("div");
            alert(divs);
    
            // 2.通过Jquery方式获取名称叫做div的所有html元素对象
            var $divs = $("div");
           alert($divs)
           /*
                获取的所有元素对象可以当作数组来使用
                1. JQuery对象在操作时，更加方便
                2. js对象和JQuery对象的方法是不通用的
                3. 两者之间可以相互转换
                    * js -- > JQuery ：$(js对象)
                    * JQuery -- > js : JQuery对象[索引] 或者 JQuery对象.get(索引)
            */
           // JQuery的使用更加方便；改变中的内容
            // 1. 改变divs中的所有div为"bbb"
            for (var i=0; i<divs.length; i++){
   
                divs[i].innerHTML = "bbb";
            }
            // 2.改变$divs中的所有div为"ccc"
            $divs.html("ccc");
    
           // js对象和JQuery对象可以相互转换
            // 1.js --> JQuery
            $(divs[0]).html("ddd");
            // 2.JQuery --> js
            $divs[0].innerHTML = "eee";
            $divs.get(1).innerHTML = "fff";
    
        </script>
    </body>
    </html>

选择器
- 用来删选具有相似特征的元素（标签）
1. 基本语法
  - 事件绑定
  - 入口函数
  - 样式控制

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>选择器之基本语法</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <script>

                // 若将script写在head中，则此时事件直接绑定则不成功；
                // 因为事件的加载顺序不同，所以需要为script添加入口函数来避免此现象

                // 2.入口函数

                /*// js写法
                window.onload = function () {
                    // 1.事件绑定
        
                    // 给bt1按钮对象添加单击事件
                    $("#bt1").click(function () {
                        alert("你好");
                    })
                }*/

               /* // JQuery写法
                $(function () {
                    // 1.事件绑定
        
                    // 给bt1按钮对象添加单击事件
                    $("#bt1").click(function () {
                        alert("你好");
                    })
                });*/

                /*
                    js写法与JQuery写法的区别
                        window.onload 只能定义一次，如果定义多次，则后面的会将前面的覆盖
                         $(function () {}) 可以定义多次
                 */

               /* function fun1() {
                    alert("我是fun1");
                }
                function fun2() {
                    alert("我是fun2");
                }

                /!*window.onload = fun1;
                window.onload = fun2;   // 会覆盖上面的定义值*!/

                $(fun1);
                $(fun2);    //两次赋值都成功，没有被覆盖*/

               // 3.样式控制

                $(function () {
   
                   $("#div1").css("background-color", "red");
                   $("#div2").css("backgroundColor", "pink");
                });
            </script>
        </head>
        <body>
            <div id="div1">div1...</div>
            <div id="div2">div2...</div>
            <button id="bt1">我是按钮</button>
        
            <!--<script>
                // 1.事件绑定
        
                // 给bt1按钮对象添加单击事件
                $("#bt1").click(function () {
   
                    alert("你好");
                })
            </script>-->
        </body>
        </html>

选择器的分类

最低0.47元/天解锁文章

暮光乐鱼

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery基础学习笔记

主要内容JQuery基础概念快速入门Jquery对象和JS对象的区别与转换选择器DOM操作案例1. Jquery基础概念一个javaScript框架，简化js开发javaScript框架：本质上是一些js文件，封装了js的原生代码而已快速入门步骤下载JQuery目前jQuery有三个大版本：1.x：兼容ie678,使用最为广泛的，官方只...
复制链接

扫一扫

专栏目录