Web前端自学记录（二十）jQuery

最新推荐文章于 2024-07-18 17:34:14 发布

淡水鳗鱼的梦Z

最新推荐文章于 2024-07-18 17:34:14 发布

阅读量133

点赞数

文章标签： jquery dom js css javascript

本文链接：https://blog.csdn.net/zqc382750716/article/details/116445449

版权

jQuery

1.初识jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 使用原生DOM
        window.onload = function () {
   
            var btn1 = document.getElementById("btn1")
            btn1.onclick = function () {
   
                var username = document.getElementById("username").value
                alert(username)
            }
        }
    </script>
    <!-- 使用jQuery实现 -->
    <script src="./JS/jquery-3.6.0.js"></script>
    <script>
        // 绑定文档加载完成的监听
        $(function () {
   
            $("#btn2").click(function () {
   //给btn2绑定点击监听
                var username = $("#username").val()
                alert(username)
            })
        })
    </script>
</head>
<body>
    <!-- 
        What？
            http://jquery.com/
            一个优秀的JS函数库
            使用了jQuery的网站超过90%
            中大型WEB项目开发首选
            Write Less，Do More
        Why？
            HTML元素读取(选择器)
            HTML元素操作
            CSS操作
            HTML事件处理
            JS动画效果
            链式调用
            读写合一
            浏览器兼容
            易扩展插件
            ajax封装
            ......
        How？
            1.引入jQuery库
            2.使用jQuery
                jQuery核心函数：$/jQuery
                jQuery核心对象：执行$()返回的对象
            区别两种js库文件
                开发版(测试版)
                生产版(压缩版)
            区别两种引入JS库的方式
                服务器本地库

                CDN远程库
                    项目上线时，一般使用比较靠谱的CDN资源库
                    减轻服务器负担
     -->
     <!-- 需求：点击"确定按钮，提示输入的值" -->
     用户名：<input type="text" name="" id="username">
     <button id="btn1">确定(原生版)</button>
     <button id="btn2">确定(jQuery版)</button>
</body>
</html>

2.jQuery的两把利器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        1.jQuery核心函数
            简称：jQuery函数($/jQuery)
            jQuert库向外直接暴露的就是$/jQuery
            引入jQuery后，直接调用$即可
                当函数用：$(xxx)
                当对象用：$.xxx()
        2.jQuery核心对象
            简称：jQuery对象
            得到jQuery对象：执行jQuery函数返回的就是jQuery对象
            使用jQuery对象：$obj.xxx()
     -->
     <script src="./JS/jquery-3.6.0.js"></script>
     <script>
        //  1.jQuery函数：直接可用
         console.log($, typeof $);
         console.log(jQuery === $);//true
        //  2.jQuery对象：执行jQuery函数得到它
        console.log($() instanceof Object);//true
        /*
        (function (window) {
            var jQuery = function () {
                return new xxx()
            }
            window.$ = window.jQuery = jQuery
        })(window)
        */
     </script>
</body>
</html>

3.jQuery函数的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <button id="btn">测试</button>
        <br>

        <input type="text" name="msg1"><br>
        <input type="text" name="msg2"><br>
    </div>
    <!-- 
        1.作为一般函数调用：$(prarm)
            1).参数为函数：当DOM加载完成后，执行此回调函数
            2).参数为选择器字符串：查找所有匹配的标签，并将它们封装成jQuery对象
            3).参数为DOM对象，将dom对象封装成jQuery对象
            4).参数为html标签字符串(用的少)：创建标签对象并封装成jQuery对象
        2.作为对象使用：$.xxx()
            1).$.each()：隐式遍历数组
            2).$.trim()：去除两端的空格
     -->
     <script src="./JS/jquery-3.6.0.js"></script>
     <script>
         /*
            需求1：点击按钮，显示按钮的文本，显示一个新的输入框
            需求2：遍历输出数组中所有元素值
            需求3：去掉"  my atguigu  "两端的空格
         */

         //参数为函数：当DOM加载完成后，执行此回调函数
        $(function () {
   //绑定文档加载完成的监听
            //参数为选择器字符串：查找所有匹配的标签，并将它们封装成jQuery对象
            $("#btn").click(function () {
   //绑定点击事件监听
                //this是什么？发生事件的dom元素(<button>)
                //alert(this.innerHTML)
                //$(this).html()参数为DOM对象，将dom对象封装成jQuery对象
                alert($(this).html())
                //参数为html标签字符串(用的少)：创建标签对象并封装成jQuery对象
                $('<input type="text" name="msg3"><br>').appendTo("div")
            })
        })

        var arr = [2,4,7]
        // 1).$.each()：隐式遍历数组
        $.each(arr,function (index,item) {
   
            console.log(index,item);
        })

        //2).$.trim()：去除两端的空格
        var str = '  my atguigu  '
        console.log('---'+$.trim(str)+'---');
     </script>
</body>
</html>

4.jQuery对象的使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=

最低0.47元/天解锁文章

淡水鳗鱼的梦Z

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端自学记录（二十）jQuery

jQuery1.初识jQuery<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
复制链接

扫一扫