2.03.23jQuery

最新推荐文章于 2024-06-28 16:20:01 发布

以哲_ok

最新推荐文章于 2024-06-28 16:20:01 发布

阅读量218

点赞数

文章标签： javascript jquery 前端

本文链接：https://blog.csdn.net/m0_59593735/article/details/124759125

版权

2.03.23 jQuery

1.概念

是一个js封装的一个函数，jq里面有许多js封装的方法
jQuery 是一个快速、小型且功能丰富的 JavaScript 库。它使 HTML 文档遍历和操作、事件处理、动画和 Ajax 之类的事情变得更加简单，它具有易于使用的 API，可在多种浏览器中使用。jQuery 结合了多功能性和可扩展性，改变了数百万人编写 JavaScript 的方式。
jQuery是个函数， $符号是 j Q u e r y 的别名， j Q u e r y = = =$ (true) typeof(jQuery) “function”
简单看一看相关代码,认识jq:

    <script src="../js/jquery-3.6.0.min.js"></script>
    <script>
        // jQuery 是个函数
        // $ 是个函数,是jQuery的别名
        // jQuery === $   true

        // console.log(jQuery); // 函数  
        // console.log(typeof jQuery); // 'function'
        // console.log($); //函数
        // console.log(typeof $);// 'function'
        // console.log(jQuery === $);// true

        // JS 加载函数
        // window.onload = function(){ console.log("load 11") }
        // window.onload = function(){ console.log("load 22") }

        // JQ 入口函数
        // $(document).ready(function(){
        //     console.log("ready 11");
        // })

        // $(document).ready(function(){
        //     console.log("ready 22");
        // })

        // 入口函数简写：
        // $(function(){
        //     console.log("执行JQ代码 11");
        // })
        // $(function(){
        //     console.log("执行JQ代码 22");
        // })
        
        // 如果想控制页面的div.box标签，jq代码写在div.box之后即可
        // $(".box") 表示获取页面上div.box标签，返回jquery对象
        // .css("width",100); 表示是div.box的css属性和属性值
        $(".box").css("width",100);
        $(".box").css("height",100);
        $(".box").css("background","red");

        // jQuery(".box").css("width",100);
        // jQuery(".box").css("height",100);
        // jQuery(".box").css("background","green");

    </script>

2.模仿jq去封装自己的jq

自己封装的jq

    /*
    *  author: ok
    *  time: 2022-03-23 15:30
    *  library: JS库
    * 
    */  
    // 匿名函数
    (function(win,dom){
        // 封装函数A（普通函数）
        var myJquery = function(selector){
            // console.log("test");
            // 返回构造函数的实例（属性和方法）
            return new S(selector)
        }
        //  封装函数B（构造函数）
        function S(selector){
            // 记录数据
            this.element = dom.querySelector(selector);
        }
        // 添加Css方法
        S.prototype.css = function(prop,value){
            // 处理元素的css样式
            if(typeof value == 'string'){
                if(value.indexOf("px")){
                    this.element.style[prop] = value
                }else {
                    var v = parseInt(value)
                    if(typeof v == 'number'){
                        this.element.style[prop] = value + "px";
                    }else {
                        this.element.style[prop] = value;
                    }
                }
            }else {
                this.element.style[prop] = value +"px"
            }
        }

        // 把封装函数A挂载到window对象
        win.myjQuery = win.my$ = win._ = myJquery;
    })(window,document)

使用自己封装的jq

    <!DOCTYPE html>
    <html lang="zh_cn">
    <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>
        <h3>模拟jquery</h3>

        <div class="box"></div>

        <!-- 引入自定义的myjQuery文件 -->
        <script src="./myjQuery.js"></script>

        <script>

            // 可以调用自定义的myjQuery函数
            // my$(".box")

            // 调用my$函数也是一样
            // my$(".box").css("width",100);
            // my$(".box").css("height",100);
            // my$(".box").css("backgroundColor","red");

            // 调用_函数也是一样 
            _(".box").css("width",100);
            _(".box").css("height",100);
            _(".box").css("backgroundColor","blue");

        </script>
    </body>
    </html>

3.常用的jQuery的DOM操作

1.常用DOM操作自划分第一类

获取元素

语法：$(选择器)
对比：

    var ele = document.querySelector(选择器)
    ele 是个dom对象(标签)

    var $obj = $(选择器)
    $obj 是jquery对象(实例)

jquery有个强大的选择器函数 (核心功能),例如：

    <!DOCTYPE html>
    <html lang="zh_cn">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JQ 学习 </title>
    </head>
    <body>
        <h3>jquery的DOM操作</h3>
        <div class="box">111</div>
        <div id="demo">222</div>
        <div data-role="div">333</div>

        <ul>
            <li>列表aaa</li>
            <li>列表bbb</li>
            <li>列表ccc</li>
        </ul>

        <script src='./jquery/jquery-3.6.0.min.js'></script>
        <script>
            // 获取元素
            var $obj =  $(".box");
            // jquery对象 一个数组
            // console.log($obj);
            $obj[0].style["background-color"]="red";
            console.log(typeof $obj);//object

            // 获取.box的div元素 记录在jquery对象中
            console.log($(".box"));
            // 获取#demo的div元素 记录在jquery对象中
            console.log($("#demo"));
            // 获取div[data-role='div']的div元素  记录在jquery对象中
            console.log($("div[data-role='div']"));
            // 获取所有的li标签 把这些标签记录在jquery对象中
            console.log($("ul li"));

            // 总结：
                // jquery有个强大的选择器函数 (核心功能)
                // $()
                // 需要获取指定的元素，直接$(选择器)

        </script>
    </body>
    </html>

添加元素

jq对象.append(html字符串)
- 在容器元素的最后的索引位置添加元素
jq对象.prepend(html字符串)
- 在容器元素的索引值为0的位置添加元素
jq对象.before(html字符串)
- 在当前元素的前面插入元素
jq对象.after(html字符串)
- 在当前元素的后面插入元素
语法：

    <div id="container">
        <div class="box-1">1111</div>
    </div>
    
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
        var divStr2 = "<div class='box-2'>22222</div>";
        var divStr3 = "<div class='box-3'>33333</div>";
        var divStr0 = "<div class='box-0'>00000</div>";

        // $obj.append(html字符串)
        // 在容器元素的最后的索引位置 添加元素 （父子关系）
        // 应用场景：上拉加载（滚动加载）
        $("#container").append(divStr2);
        $("#container").append(divStr3);

        // $obj.prepend(html字符串)
        // 在容器元素的索引为0的位置 添加元素（父子关系）
        // 应用场景：下拉加载
        $("#container").prepend(divStr0);


        // $obj.before(html字符串)
        // 在当前的元素之前插入元素(兄弟关系)
        var divStra = "<div class='box-a'>aaaaaaaa</div>";
        $(".box-1").before(divStra);

        // $obj.after(html字符串)
        // 在当前的元素之后插入元素(兄弟关系)
        var divStrb = "<div class='box-b'>bbbbbbbb</div>";
        $(".box-1").after(divStrb);
</script>

删除元素

jq对象.remove()
- 删除当前元素
jq对象.empty()
- 清空当前容器的内容
jq对象.html=“”
- 清空当前容器的内容
语法：

    <div id="layout">
        <div class="demo-1">demo-1</div>
        <div class="demo-2">demo-2</div>
    </div>
    
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
        // 删除元素
        //$(".demo-1").remove();
        // 清空容器的内容
        //$("#layout").empty();
        //$("#layout").html("");
</script>

设置文本

jq对象.text(文本内容)
- 设置当前元素的文本内容
jq对象.html(超文本内容)
- 设置当前元素的超文本内容
jq对象.val(内容)
- 设置输入框的内容
语法：

    <div id="layout">
        <div class="demo-2">demo-2</div>
        <div class="demo-3">demo-3</div>
        <input type="text" class="demo-4" value="输入框、关键字">
        
    </div>
    
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
        $(".demo-2").text("demo-2 123");//设置纯文本
        console.log($(".demo-2").text());

        $(".demo-3").html("<b>demo-2 456 </b>");//设置超文本
        console.log($(".demo-3").html());

        $(".demo-4").val("hello world");// 设置输入框的文本
        console.log($(".demo-4").val());
</script>

设置样式

jq对象.css(“属性名”,属性值) 或者 jq对象.css(属性对象)
- 设置当前对象的属性
语法：

    <div id="layout">
        <div class="demo-5">demo-5</div>
    </div>
    
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
        // $obj.css(属性名称，属性值)
        $(".demo-5").css("width",200);

        // $obj.css(属性对象)
        $(".demo-5").css({
            width: 200,
            height: 200,
            backgroundColor: "green"
        })

</script>

注意：css方法有隐式遍历的功能

    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    
    <script src='./jquery/jquery-3.6.0.min.js'></script>
    <script>
    // 需求：
        // 设置5个按钮的背景色

    // JQ:
    $("button").css("backgroundColor","deepskyblue");



    // JS:
    // var buttons = document.querySelectorAll("button");
    // for(var i = 0 ; i < buttons.length ; i ++){
    //     buttons[i].style.backgroundColor = "yellowgreen";
    // }


    // 总结：
        // jquery获取元素，返回的是jquery对象
        // css 方法是由jquery对象调用
        // css 方法封装过程，已经对获取的元素进行了遍历
        // jq其中一个特点：隐式迭代（函数封装，内部循环）
    </script>

设置属性

jq对象.attr(“属性名”)
- 获取当前对象的属性
jq对象.attr(“属性名”,“属性值”)
- 设置当前元素的属性
jq对象.removeAttr(“属性名”)
- 删除当前元素的属性
语法：

    <div id="layout">
        <input type="button">
    </div>
    
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
        var type = $("#layout input").attr("type");//获取type属性
        console.log(type);
        //$("#layout input").attr("type","text");//设置type属性
        //$("#layout   input").removeAttr("type");//删除type属性

</script>

控制类名

jq对象.addClass(“属性名”)
- 添加类名
jq对象.removeClass(“属性名”)
- 删除类名
jq对象.toggleClass(“属性名”)
- 切换类名（有，则删除；无，则添加）
jq对象.hasClass(“属性名”)
- 判断是否包含某个类名
语法：

    <style>
        .active {
            background-color: red;
        }
    </style>

    <div id="layout">
        <div class="demo-6">demo-6</div>
    </div>
    
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
        $(".demo-6").addClass("active");// 添加类名
        $(".demo-6").removeClass("active");//删除类名
        $(".demo-6").toggleClass("active");//切换类名（有，则删除；无，则添加）
        $(".demo-6").toggleClass("active");
        var isHas = $(".demo-6").hasClass("active");//判断是否包含某个类名
        console.log("isHas:",isHas); 
        console.log($(".demo-6"));//jq数组对象

</script>

可以发现这几个方法也有隐式遍历的作用，因为可知 $(“.demo-6”)得到的是一个jq数组对象

2.jq对象.eq方法

语法：

    <div id="container">
        <div>container</div>
        <section>
            <div>section</div>
            <button>按钮1</button>
            <button>按钮2</button>
            <button class="btn-3">按钮3</button>
            <button>按钮4</button>
            <button>按钮5</button>
        </section>
   </div>
    
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
    $("#container button").eq(2).css("backgroundColor","red");
    console.log($("#container button"));//长度为5的数组
    console.log(typeof $("#container button"));//object
    console.log($("#container button").eq(2));//长度为1的数组
    console.log(typeof $("#container button").eq(2));//object
    console.log($("#container button").eq(2)[0]);//<button class="btn-3" style="background-color: red;">按钮3</button>

eq方法获取的结果也是一个数组，要想获取到元素对象得在下面加上相应的下标

3.常用DOM操作自划分第三类

jq对象.children(选择器)

参数可选获取全部子元素或者指定的子元素

jq对象.parent()

获取父元素

jq对象.prev()

获取上一个兄弟元素

jq对象.next()

获取下一个兄弟元素

jq对象.siblings(选择器)

获取兄弟元素（除了自身以外）

jq对象.find(选择器)

获取容器标签的指定的后代元素
语法：

<div id="container">
        <div>container</div>
        <section>
            <div>section</div>
            <button>按钮1</button>
            <button>按钮2</button>
            <button class="btn-3">按钮3</button>
            <button>按钮4</button>
            <button>按钮5</button>
        </section>
   </div>
    
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
        // 获取#container子元素
        // $obj.children(选择器)，不设置参数也可以的  
        // $("#container").children().css("backgroundColor","blue");
        $("#container").children("section").css("backgroundColor","blue");

        // 获取section标签的父元素
        // $obj.parent()
        $("section").parent().css("backgroundColor","gray");


        // 获取当前标签的上一个元素
        $("#container .btn-3").prev().css("backgroundColor","green");


        // 获取当前标签的下一个元素
        $("#container .btn-3").next().css("backgroundColor","purple");

        // 获取兄弟元素（除了自身以外）
        // $("#container .btn-3").siblings(选择器)
        $("#container .btn-3").siblings("button").css("border-radius","20px");


        // 获取容器标签的指定的后代元素
        // $("#container").find(选择器)
        $("#container").find("div").css("backgroundColor","white");
</script>

以哲_ok

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2.03.23jQuery

2.03.23 jQuery1.概念是一个js封装的一个函数，jq里面有许多js封装的方法jQuery 是一个快速、小型且功能丰富的 JavaScript 库。它使 HTML 文档遍历和操作、事件处理、动画和 Ajax 之类的事情变得更加简单，它具有易于使用的 API，可在多种浏览器中使用。jQuery 结合了多功能性和可扩展性，改变了数百万人编写 JavaScript 的方式。jQuery是个函数，符号是jQuery的别名，jQuery===符号是jQuery的别名， jQuery===符号是j
复制链接

扫一扫