Web前端自学记录(二十)jQuery

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
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值