当前位置： 首页 > news >正文

【JavaScript Day21】jQuery库

news 来源：原创 2025/6/12 10:43:57

目录

JS的第三方库

jQuery库

jQuery的页面加载方法

jQuery的选择器

jQuery的元素内容操作

 jQuery的元素样式操作

 jQuery的属性操作

以下皆已引入jQuery库

JS的第三方库


        将常用的原生JS对DOM操作功能，通过JS方法的方式进行封装，并以独立的JS文件提供
        使用时，只需要引入JS文件，即可使用封装的JS方法
            + jQuery
            + lodash
            + swiper
 


jQuery库

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--
    jQuery:三方的用于简化DOM操作的极简库
        jquery.版本.min.js => 生产版本
        jquery.版本.js => 开发版本
    下载地址：https://jquery.com/
    -->
    <script src="./jquery/jquery-3.7.1.js"></script>
    <!-- jquery 库引入后，会在全局window对象中增加两个变量 
        window.$  等同于 window.jQuery
        window.jQuery 等同于 window.$

        $ jquery的核心查询方法
    -->
    <script>
        console.log(window);
        console.log(window.$);
        console.log(window.jQuery);
        console.log("============");
        console.log($);
        console.log(jQuery);
    </script>
</head>
<body>
    <h1 id="title">h1元素</h1>
    <script>
        // var obj = $(el);
        //     el css 选择器
        //     obj 被jquery重新包装的类数组对象，对象中记录的符合条件的元素
        //         => jquery 对象 => 调用jquery方法
        var $h1 = $("#title");
        console.log($h1);
        
        // jquery 对象到 DOM对象的转换
        var h1Dom = $h1[0];
        console.log(h1Dom);
        
    </script>
</body>
</html>

jQuery的页面加载方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery/jquery-3.7.1.js"></script>
    <script>
        // 查询元素的前提：html标签完成加载
        var h1Dom = document.querySelector("#title");
        console.log(h1Dom); // null
        
        var $h1 = $("#title");
        console.log($h1); // jQuery空对象

        // 方法重载
        //    : 同一个方法，因为传入的参数类型，格式，数量不同，提供不同的执行功能

        // 1.  $("el")  查询元素 - 返回jquery对象
        // 2.  $(function(){})  监听window.onload事件
        //                      window.onload = function(){ }
        //     $(document).ready(function(){}) 当页面标签加载完成后执行
        //                      document.addEventListener("DOMContentLoaded")
        // 3.  $("<标签>") 将字符串标签转换为jQuery对象 => 元素创建
        //                      等效于 document.createElement();
        //     $("<标签 class='a'>内容</标签>") 创建标签的同时完成内容或属性的增加 
        // 4.  $("el",其它jquery对象) 在指定的jquery对象元素内查询 el 选择器对应元素

        $(function(){
            // 页面加载完成
            var $title = $("#title");
            console.log($title);
        });
        $(document).ready(function(){
            // 页面标签加载完成
            var $title1 = $("#title");
            console.log($title1);
        });

        function createDiv(){
            // $("div") 基于标签查询
            // $("<div>") 创建元素并封装成jquery对象
            var $div = $("<div>");
            console.log($div);

            var $div1 = $("<div>内容</div>");
            console.log($div1);
        }

        function queryLi(){
            // var $li = $("#abc li");
            var $ul = $("#abc");
            var $li = $("li",$ul);
            console.log($li);
            
        }
    </script>
</head>
<body>
    <h1 id="title">标题</h1>
    <input type="button" value="创建div元素" onclick="createDiv()">
    <input type="button" value="查询#abc中li" onclick="queryLi()">

    <hr>
    <ul id="abc">
        <li>abc的li</li>
    </ul>
    <ol>
        <li>ol的li</li>
    </ol>
</body>
</html>

jQuery的选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery/jquery-3.7.1.js"></script>
</head>
<body>
    <ul id="app">
        <li>元素1</li>
        <li>元素2</li>
        <li>元素3</li>
        <li>元素4</li>
        <li class="abc">元素5</li>
        <li>元素6</li>
        <li class="abc">元素7</li>
        <li>元素8</li>
        <li class="abc">元素9</li>
        <li>元素10</li>
    </ul>
    <form id="form">
        <input type="text">
        <input type="date">
        <input type="radio" name="" id="">
        <input type="checkbox" name="" id="">
    </form>
    <script>
        // 查询一个元素，还是查询多个元素都是使用 $(el)
        var $a = $("#app");
        console.log($a);
        
        var $b = $("li");
        console.log($b);
        
        var $c = $(".abc");
        console.log($c);
        
        var $d = $("#app .abc");
        console.log($d);
        
        var $e = $("#app li:first");
        console.log($e);

        // 查询 id=app 内部的后代li元素，但不包含class=abc
        var $f = $("#app li:not(.abc)");
        console.log($f);
        
        var $radio = $("#form input[type=radio]");
        console.log($radio);
        
        var $radio1 = $("#form input:radio");
        console.log($radio1);
    </script>
</body>
</html>

jQuery的元素内容操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            border: 1px solid black;
            min-height: 100px;
        }
    </style>
    <script src="./jquery/jquery-3.7.1.js"></script>
</head>
<body>
    <div class="box" id="a">
        原始内容
        <span>span标签</span>
    </div>
    <div class="box" id="b"></div>
    <div class="box" id="c"></div>
    <input type="button" value="操作元素内容" onclick="testContent()">
    <script>
        // jquery 中提供：元素内容操作，属性操作 方法都存在如下两种重载功能
        //         1. 不传递参数 表示 获取对应的值
        //         2. 传递参数 表示 设置对应值(赋值)

        function testContent(){
            var $a = $("#a");
            // jquery对象.html()  取值  => innerHTML
            var text = $a.html();
            console.log(text);

            // jquery对象.html(字符串参数) 赋值[覆盖]  => innerHTML=字符串操作
            var $b = $("#b");
            // $b.html("文本字符");
            $b.html("<span style='color:red;'>文本字符</span>");

            // jqueryObj.text() 取值  => innerText
            // jqueryObj.text(sting) 赋值 => textContent=值
            var text1 = $a.text();
            console.log(text1);
            var $c = $("#c");
            $c.text("aaaaaa\nbbbbbb\ncccccc");
        }
    </script>
    <hr>
    <ul id="list">
        <li>原始内容1</li>
        <li>原始内容2</li>
        <li>原始内容3</li>
        <li>原始内容4</li>
        <li>原始内容5</li>
        <li>原始内容6</li>
        <li>原始内容7</li>
        <li>原始内容8</li>
    </ul>
    <input type="button" value="对第一个li原始进行内容获取和修改" onclick="editLi()">
    <input type="button" value="为所有的li更新内容" onclick="updateLi()">
    <script>
        function editLi(){
            // var $li = $("#list li:first");
            // console.log( $li.html() );

            // $li.html("新内容");
            // console.log( $li.html() );

            // jquery 第一特性，链式语法
            var text = $("#list li:first").html();
            console.log(text);
            
            $("#list li:first").html("新内容");
        }
    
        function updateLi(){
            var $list = $("#list li");
            console.log($list);

            // jquery对象中，由多个DOM元素组成，！！取值！！ 操作只会获取第一个元素的内容(下标0的内容)
            var text = $list.html();
            console.log(text);
            

            // jquery 第二特性 : 内置循环(内置迭代器)
            //                  查询结果是由多个DOM元素组成jquery对象
            //                  如果此时对jquery对象完成是 ！！赋值！！ 相关的操作
            //                  会自动启动内置循环，将该对象中的所有DOM元素都执行当前操作
            $list.html("新内容");
        }
    </script>
</body>
</html>

 jQuery的元素样式操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .fc{
            color: red!important;
        }
        #a{
            border: 1px solid black;
        }
        .border{
            border: 1px solid black;
        }
        .bc{
            background-color: #ccc;
        }
    </style>
    <script src="./jquery/jquery-3.7.1.js"></script>
</head>
<body>
    <!-- 行内样式操作 -->
    <p class="fc" id="a" style="color:blue;font-size: 20px;">行内样式操作</p>
    <input type="button" value="样式读取" onclick="readStyle()">
    
    <script>
        // jqObj.css("行内样式名") 读取元素行内对于的样式值
        //                jquery在封装函数对元素样式进行统一处理
        //                可以通过 该方法 获取元素行内样式,也可以获取 独立样式
        //                当样式产生优先级覆盖问题时,获取最高优先级的样式
        function readStyle(){
            var color = $("#a").css("color");
            console.log(color);
            var size = $("#a").css("font-size");
            console.log(size);
            var border = $("#a").css("border");
            console.log(border);
            
            
            // 冷门用法
            var all = $("#a").css( ["color","font-size"] );
            console.log( all );
            console.log( all.color );
            // console.log( all.font-size ); // 取不到
            console.log( all["font-size"] );
        }
    </script>

    <p id="b">行内样式修改</p>
    <p class="p">行内样式修改</p>
    <p class="p">行内样式修改</p>
    <p class="p">行内样式修改</p>
    <p class="p">行内样式修改</p>
    <input type="button" value="样式修改" onclick="setStyle()">
    <script>
        // jqObj.css(样式名,样式合法值) 行内样式设置
        function setStyle(){
            // $("#b").css("color","blue");
            // $("#b").css("font-size","20px");

            // 赋值操作可以链式调用
            $("#b")
                .css("color","blue")
                .css("font-size","30px");

            $(".p")
                .css("color","blue")
                .css("font-size","30px");
        }
    </script>


    <!-- class样式操作 -->
    <p id="c">class的添加</p>
    <input type="button" value="添加class样式" onclick="addClassFun()">
    <script>
        function addClassFun(){
            $("#c").addClass("border bc");
        }
    </script>

    <p class="border bc" id="d">class的删除</p>
    <input type="button" value="class的删除" onclick="removeClassFun()">
    <script>
        function removeClassFun(){
            $("#d").removeClass("bc");
        }
    </script>

    <p class="border bc" id="e">class的切换</p>
    <input type="button" value="class的切换" onclick="toggleClassFun()">
    <script>
        function toggleClassFun(){
            $("#e").toggleClass("bc")
        }
    </script>
</body>
</html>

 jQuery的属性操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery/jquery-3.7.1.js"></script>
</head>
<body>
    <p id="a" class="border fc" chw="自定义属性">属性操作</p>
    <!-- 标签事件绑定只能绑定全局的方法 -->
    <input type="button" value="属性操作" onclick="editProp()">
    <script>
        // jqObj.prop(标签属性名) 取值[是w3c规范属性]
        // jqObj.attr(标签属性名) 取值[自定义属性]
        function editProp(){
            var arg1 = $("#a").prop("class");
            console.log(arg1);

            var arg2 = $("#a").attr("chw");
            console.log(arg2);
        }
    </script>
    <hr>
    <p id="b" class="border fc" chw="自定义属性">属性操作</p>
    <input type="button" value="属性操作" onclick="editProp2()">
    <script>
        // jqObj.prop(标签属性名,属性值) 赋值[是w3c规范属性]
        // jqObj.attr(标签属性名,属性值) 赋值[自定义属性]
        function editProp2(){
            $("#b").prop("class","abc fs");
            $("#b").attr("chw","新值");
            $("#b").attr("ba","博昂");
        }
    </script>
    <hr>
    <p id="c" class="border fc" chw="自定义属性">属性操作</p>
    <input type="button" value="属性操作" onclick="editProp3()">
    <script>
        // jqObj.removeProp(标签属性名) 赋值[是w3c规范属性]
        // jqObj.removeAttr(标签属性名) 赋值[自定义属性]
        function editProp3(){
            $("#c").removeProp("class");
            $("#c").removeAttr("chw");
        }
    </script>

    <hr>
    <div id="box">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
    </div>
    <input type="button" value="切换选中状态" onclick="changeStatus()">
    <script>
        var flag = false;
        function changeStatus(){
            flag = !flag;
            // $("#box input:checkbox").prop("checked",true);
            $("#box input:checkbox").prop("checked",flag);
        }
    </script>

    <hr>
    <!-- 
        页面方法绑定 可以通过关键字接收特殊参数
            + event 事件对象
            + this 当前元素的DOM对象
    -->
    <input id="box2All" type="checkbox" onchange="changeStatus2( this.checked )">
    <div id="box2">
        <input type="checkbox" onchange="checkAll()">
        <input type="checkbox" onchange="checkAll()">
        <input type="checkbox" onchange="checkAll()">
        <input type="checkbox" onchange="checkAll()">
    </div>
    <script>
        function changeStatus2(flag){
            console.log(flag);
            $("#box2 input:checkbox").prop("checked",flag)
        }
        function checkAll(){
            // 都需要将所有 box2 中的子元素的状态进行获取,判断是否都是true

            // jquery取值只取第一个元素 => 下述操作是错误的
            // var flag = $("#box2 input:checkbox").prop("checked");
            // console.log(flag);

            var $checkboxs = $("#box2 input:checkbox");
            var flag = true;
            for (var i = 0; i < $checkboxs.length; i++) {
                // console.log( $checkboxs[i] ); // DOM对象
                var checkboxDom = $checkboxs[i];
                // console.log( checkboxDom.checked );
                if( !checkboxDom.checked ){
                    flag = false;
                    break;
                }
            }
            $("#box2All").prop("checked",flag);
        }
    </script>

    <hr>
    <input id="box3All" type="checkbox" onchange="changeStatus3( this.checked )">
    <div id="box3">
        <input type="checkbox" onchange="checkAll()">
        <input type="checkbox" onchange="checkAll()">
        <input type="checkbox" onchange="checkAll()">
        <input type="checkbox" onchange="checkAll()">
        <input type="checkbox" onchange="checkAll()">
        <input type="checkbox" onchange="checkAll()">
        <input type="checkbox" onchange="checkAll()">
        <input type="checkbox" onchange="checkAll()">
    </div>
    <script>
        function changeStatus3(flag){
            console.log(flag);
            $("#box3 input:checkbox").prop("checked",flag)
        }
        function checkAll(){
            // :checked 选择 匹配所有勾选的复选框
            // var $checks =$("#box3 input:checkbox:checked");
            // console.log( $checks );
            // console.log( $checks.length );

            // :not(:checked) 选择 匹配所有未勾选的复选框
            var $checks =$("#box3 input:checkbox:not(:checked)");
            console.log( $checks );
            console.log( $checks.length );
            
            $("#box3All").prop("checked",$checks.length==0);
        }
    </script>
</body>
</html>

相关文章：

  • ks 弹幕 评论解密 分析
  • llama-factory部署微调方法(wsl-Ubuntu Windows)
  • npm : 无法加载文件 E:\ProgramFiles\Nodejs\npm.ps1，因为在此系统上禁止运行脚本。
  • 当规避了不可重复读问题后,怎么保证幂等性
  • C++ 设计模式 - 并发模式概述
  • 2. EXCEL中函数和公式《AI赋能Excel》
  • 【高并发】高并发架构设计
  • Vuetify解决与旧版浏览器（如Internet Explorer 11）的兼容性问题‌
  • Redis7——基础篇（七）
  • 数据库面试题（基础常考！！！）
  • Fetch API 与 XMLHttpRequest：深入剖析异步请求的利器
  • 数字IC后端培训教程| 芯片后端实战项目中base layer drc violation解析
  • ＜tauri＞＜rust＞＜GUI＞＜PLC＞基于tauri，编写一个串口485调试助手
  • c++类知识点复习与总结
  • Spring Boot 各种事务操作实战(自动回滚、手动回滚、部分回滚）
  • PostgreSQL 使用pgAdmin 4 数据库还原sql文件报错问题分析
  • 流媒体网络协议全解析：从实时传输到自适应流，如何选择最优方案？
  • 怎么本地部署deepseek（超级详细教程）
  • linux 命令+相关配置记录（持续更新...）
  • 【Linux-网络】深入拆解TCP核心机制与UDP的无状态设计
  • 重庆璧山网站制作公司电话/精准营销理论
  • asp.net 4.0网站建设基础教程/一手项目对接app平台
  • 济南百度爱采购/重庆seo排名优化
  • 做网站的公司有哪些/常用的网络推广的方法有哪些
  • wordpress改/seo教程seo官网优化详细方法
  • 天元建设集团有限公司联系电话/整站优化和单词