• JQuery


    1、js和jquery对象 获取值
    <body>
        <div id="div">hello world</div>
        <input id='div2' onblur="hello()"></input>
    </body>
    
    <script>
        var el = $("#div");
        alert(el.html())
        var s = document.getElementById("div");
        alert(s.innerHTML)
    
        function hello() {
            var name = $("#div2");
            alert(name.val())
            var s = document.getElementById("div2");
            alert(s.value)
        }
    </script>
    
    2、对象转换
    • js -> jquery
      • $(JS的DOM对象)
    • jquery -> js
      • JQuery对象[索引]
      • JQuery对象.get(索引)
    3、事件
    • 基本使用
      <body>
          <input type="button" id="btn" value="点我"/>
      </body>
      <script src="../js/jquery-3.6.0.js"></script>
      <script>
          $("#btn").click(function(){
              alert('hello world')
          });
      </script>
      
    • 事件的绑定与解绑
      • jQuery 对象.on(事件名称,执行的功能);

        $("#btn").on("click",function(){
        	alert("hello")
        })
        
      • jQuery 对象.off(事件名称);

        如果指定,则会把该对象绑定的所有事件都解绑

        $("#btn2").on("click",function(){
            $("#btn").off("click")
        })
        
    • 事件的切换

      同一个元素可以绑定多个事件

      • 单独定义

      • 链式定义

        hover函数,只能鼠标移动元素之上 和 鼠标移出元素之上 两个事件起作用。

    • 遍历
      • 传统方式

        $("#btn").on("click", function () {
                var lis = $("li")
                for (var i = 0; i < lis.length; i++) {
                    alert(i + ':' + lis[i].innerHTML)
                    //[] 得到的是JS对象
                }
            });
        
      • 对象.each() --- 得到js对象

        <body>
            <div id="div1">我</div>
            <br>
            <div id="div2">喜欢</div>
            <br>
            <div id="div3">你</div>
            <br>
        
            <input type="button" id="btn" value="遍历">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </body>
        <script src="../js/jquery-3.6.0.js"></script>
        
        <script>
            // 获取id以div开头的
            // 开头$("*[id^=AA]")
            // 结尾$("*[id$=AA]")
            $("*[id^=div]").each(function () {
                alert($(this).html())
            })
            $("#btn").click(function () {
                $("li").each(function (index, ele) {
                    alert(index + ':' + ele.innerHTML)
                })
            });
        </script>
        
    4、选择器
    1、基础选择器
    选择器 语法 作用
    元素选择器 $("元素的名称") 根据元素名称获取元素对象们
    id选择器 $("#id的属性值") 根据id属性值获取对象们
    类选择器 $(.class的属性值) 根据class属性值获取对象们
    2、层级选择器
    选择器 语法 作用
    后代选择器 $("A B") A下所有的B(包括B的子集)
    子选择器 $("A > B") A下所有的B(不包括B的子集)
    兄弟选择器 $("A + B") A相邻的下一个B
    兄弟选择器 $("A ~ B") A相邻的所有B
    3、属性选择器
    选择器 语法 作用
    属性名选择器 $("A[属性名]") 根据指定属性名获取元素对象们
    属性值选择器 $("A[属性名 = 属性值]") 根据指定属性名和属性值获取元素对象们
    <body>
        <input type="text">
        <div>
            <input type="password">
            <input type="password">
        </div>
    
    </body>
    <script src="../js/jquery-3.6.0.js"></script>
    <script>
        var it = $("input[type]")
        alert(it.length)
        var it1 = $("input[type='password']")
        alert(it1.length)
    </script>
    
    4、过滤器选择器
    选择器 语法 作用
    首元素选择器 $("A:first"); 获得选择的元素中的第一个元素
    尾元素选择器 $("A:last"); 获得选择的元素中的最后一个元素
    非元素选择器 $("A:not(B)"); 不包括指定内容的元素
    偶数选择器 $("A:even"); 偶数,从 0 开始计数
    奇数选择器 $("A:odd"); 奇数,从 0 开始计数
    等于索引选择器 $("A:eq(index)"); 指定索引元素
    大于索引选择器 $("A:gt(index)"); 大于指定索引元素
    小于索引选择器 $("A:lt(index)"); 小于指定索引元素
    5、表单属性选择器
    选择器 语法 作用
    可用元素选择器 $("A:enabled"); 获得可用元素
    不可用元素选择器 $("A:disabled"); 获得不可用元素
    单选/复选框被选中的元素 $("A:checked"); 获得单选/复选框选中的元素
    下拉框被选中的元素 $("A:selected"); 获得下拉框选中的元素
    <body>
        <input type="text" disabled>
        <input type="text" >
        <input type="radio" name="gender" value="men" checked>男
        <input type="radio" name="gender" value="women">女
        <input type="checkbox" name="hobby" value="study" checked>学习
        <input type="checkbox" name="hobby" value="sleep" checked>睡觉
        <select>
            <option>---请选择---</option>
            <option selected>本科</option>
            <option>专科</option>
        </select>
    </body>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        // 1.可用元素选择器  $("A:enabled");
        let ins1 = $("input:enabled");
        //alert(ins1.length);
    
        // 2.不可用元素选择器  $("A:disabled");
        let ins2 = $("input:disabled");
        //alert(ins2.length);
    
        // 3.单选/复选框被选中的元素  $("A:checked");
        let ins3 = $("input:checked");
        //alert(ins3.length);
        //alert(ins3[0].value);
        //alert(ins3[1].value);
        //alert(ins3[2].value);
    
        // 4.下拉框被选中的元素   $("A:selected");
        let select = $("select option:selected");
        alert(select.html());
    </script>
    </html>
    
    5、DOM
    1、操作文本

    常用方法

    方法 作用
    html() 获取标签的文本
    html(value) 设置标签的文本内容,解析标签
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>操作文本</title>
    </head>
    <body>
        <div id="div">我是div</div>
        <input type="button" id="btn1" value="获取div的文本">
        <input type="button" id="btn2" value="设置div的文本">
    </body>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
         //1. html()   获取标签的文本内容
         $("#btn1").click(function(){
             //获取div标签的文本内容
             let value = $("#div").html();
             alert(value);
         });
    
         //2. html(value)   设置标签的文本内容,解析标签
         $("#btn2").click(function(){
             //设置div标签的文本内容
             //$("#div").html("我真的是div");
             $("#div").html("<b>我真的是div</b>");
         });
    </script>
    </html>
    
    2、操作标签
    • 标签父子关系方法: append(element) prepend(element)
    • 标签兄弟关系方法:before(element) after(element)
    • 移除自己:remove() ;移除自己嵌套的所有子标签:empty()
    • 注意:append prepend before after 这四个方法均为移动标签到指定位置

    常用方法

    方法 作用
    $("元素") 创建指定元素
    append(element) 添加成最后一个子元素,由添加者对象调用
    appendTo(element) 添加成最后一个子元素,由被添加者对象调用
    prepend(element) 添加成第一个子元素,由添加者对象调用
    prependTo(element) 添加成第一个子元素,由被添加者对象调用
    before(element) 添加到当前元素的前面,两者之间是兄弟关系,由添加者对象调用
    after(element) 添加到当前元素的后面,两者之间是兄弟关系,由添加者对象调用
    remove() 删除指定元素(自己移除自己)
    empty() 清空指定元素的所有子元素
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>操作对象</title>
    </head>
    <body>
        <div id="div"></div>
        <input type="button" id="btn1" value="添加一个span到div"> <br><br><br>
    
        <input type="button" id="btn2" value="将加油添加到城市列表最下方"> &nbsp;&nbsp;&nbsp;
        <input type="button" id="btn3" value="将加油添加到城市列表最上方"> &nbsp;&nbsp;&nbsp;
        <input type="button" id="btn4" value="将雄起添加到上海下方"> &nbsp;&nbsp;&nbsp;
        <input type="button" id="btn5" value="将雄起添加到上海上方"> &nbsp;&nbsp;&nbsp;
        <ul id="city">
            <li id="bj">北京</li>
            <li id="sh">上海</li>
            <li id="gz">广州</li>
            <li id="sz">深圳</li>
        </ul>
        <ul id="desc">
            <li id="jy">加油</li>
            <li id="xq">雄起</li>
        </ul>  <br><br><br>
        <input type="button" id="btn6" value="将雄起删除"> &nbsp;&nbsp;&nbsp;
        <input type="button" id="btn7" value="将描述列表全部删除"> &nbsp;&nbsp;&nbsp;
    </body>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        /*
            1. $("元素")   创建指定元素
            2. append(element)   添加成最后一个子元素,由添加者对象调用
            3. appendTo(element) 添加成最后一个子元素,由被添加者对象调用
            4. prepend(element)  添加成第一个子元素,由添加者对象调用
            5. prependTo(element) 添加成第一个子元素,由被添加者对象调用
            6. before(element)    添加到当前元素的前面,两者之间是兄弟关系,由添加者对象调用
            7. after(element)     添加到当前元素的后面,两者之间是兄弟关系,由添加者对象调用
            8. remove()           删除指定元素(自己移除自己)
            9. empty()            清空指定元素的所有子元素
        */
        
        // 按钮一:添加一个span到div
        $("#btn1").click(function(){
            let span = $("<span>span</span>");
            $("#div").append(span);
        });
        
    
        //按钮二:将加油添加到城市列表最下方
        $("#btn2").click(function(){
            //$("#city").append($("#jy"));
            $("#jy").appendTo($("#city"));
        });
    
        //按钮三:将加油添加到城市列表最上方
        $("#btn3").click(function(){
            //$("#city").prepend($("#jy"));
            $("#jy").prependTo($("#city"));
        });
        
    
        //按钮四:将雄起添加到上海下方
        $("#btn4").click(function(){
            $("#sh").after($("#xq"));
        });
        
    
        //按钮五:将雄起添加到上海上方
        $("#btn5").click(function(){
            $("#sh").before($("#xq"));
        });
    
        //按钮六:将雄起删除
        $("#btn6").click(function(){
            $("#xq").remove();
        });
        
    
        //按钮七:将描述列表全部删除
        $("#btn7").click(function(){
            $("#desc").empty();
        });
        
    </script>
    </html>
    
    3、操作样式
    • 都玩一玩:addClass(value) removeClass(value)

    常用方法

    方法 作用
    css(name) 根据样式名称获取css样式
    css(name,value) 设置CSS样式
    addClass(value) 给指定的对象添加样式类名
    removeClass(value) 给指定的对象删除样式类名
    toggleClass(value) 如果没有样式类名,则添加。如果有,则删除
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>操作样式</title>
        <style>
            .cls1{
                background: pink;
                height: 30px;
            }
        </style>
    </head>
    <body>
        <div style="border: 1px solid red;" id="div">我是div</div>
        <input type="button" id="btn1" value="获取div的样式"> &nbsp;&nbsp;
        <input type="button" id="btn2" value="设置div的背景色为蓝色">&nbsp;&nbsp;
        <br><br><br>
        <input type="button" id="btn3" value="给div设置cls1样式"> &nbsp;&nbsp;
        <input type="button" id="btn4" value="给div删除cls1样式"> &nbsp;&nbsp;
        <input type="button" id="btn5" value="给div设置或删除cls1样式"> &nbsp;&nbsp;
    </body>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        // 1.css(name)   获取css样式
        $("#btn1").click(function(){
            alert($("#div").css("border"));
        });
    
        // 2.css(name,value)   设置CSS样式
        $("#btn2").click(function(){
            $("#div").css("background","blue");
        });
    
        // 3.addClass(value)   给指定的对象添加样式类名
        $("#btn3").click(function(){
            $("#div").addClass("cls1");
        });
    
        // 4.removeClass(value)  给指定的对象删除样式类名
        $("#btn4").click(function(){
            $("#div").removeClass("cls1");
        });
    
        // 5.toggleClass(value)  如果没有样式类名,则添加。如果有,则删除
        $("#btn5").click(function(){
            $("#div").toggleClass("cls1");
        });
        
    </script>
    </html>
    
    4、操作属性
    • 带选中状态的标签,比如:radio checkbox option 标签的属性设置,推荐使用 prop(name,[value]) 和 removeProp():
    • 其他标签使用:attr(name,[value]) 和 removeAttr() 即可

    常用方法

    方法 作用
    attr(name,[value]) 获得/设置属性的值
    removeAttr(): 删除属性
    prop(name,[value]) 获得/设置属性的值(checked,selected)
    removeProp(): 删除属性
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>操作属性</title>
    </head>
    <body>
        <input type="text" id="username"> 
        <br>
        <input type="button" id="btn1" value="获取输入框的id属性">  &nbsp;&nbsp;
        <input type="button" id="btn2" value="给输入框设置value属性">
        <br><br>
    
        <input type="radio" id="gender1" name="gender">男
        <input type="radio" id="gender2" name="gender">女
        <br>
        <input type="button" id="btn3" value="选中女">
        <br><br>
        
        <select>
            <option>---请选择---</option>
            <option id="bk">本科</option>
            <option id="zk">专科</option>
        </select>
        <br>
        <input type="button" id="btn4" value="选中本科">
    </body>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        // 1.attr(name,[value])   获得/设置属性的值
        //按钮一:获取输入框的id属性
        $("#btn1").click(function(){
            alert($("#username").attr("id"));
        });
        
        //按钮二:给输入框设置value属性
        $("#btn2").click(function(){
            $("#username").attr("value","hello...");
        });
        
    
        // 2.prop(name,[value])   获得/设置属性的值(checked,selected)
        //按钮三:选中女
        $("#btn3").click(function(){
            $("#gender2").prop("checked",true);
        });
    
        //按钮四:选中本科
        $("#btn4").click(function(){
            $("#bk").prop("selected",true);
        });
    </script>
    </html>
    

    DOM 操作小结

    • 操作文本 html() html(…):获取或设置标签的文本,解析标签。

    • 操作对象

      $(“元素”):创建指定元素。

      append(element):添加成最后一个子元素,由添加者对象调用。 prepend(element):添加成第一个子元素,由添加者对象调用。 before(element):添加到当前元素的前面,两者之间是兄弟关系,由添加者对象调用。

      after(element):添加到当前元素的后面,两者之间是兄弟关系,由添加者对象调用。

      remove():删除指定元素(自己移除自己)。

      empty(): 清空调用者标签所有嵌套的其他标签

    • 操作样式

      addClass(value):给指定的对象添加样式类名。

      removeClass(value):给指定的对象删除样式类名。

    • 操作属性

      attr(name,[value]):获得/设置属性的值。

      prop(name,[value]):获得/设置属性的值(checked,selected)。

    镜花水月
  • 相关阅读:
    Thrift在微服务中的使用
    MySQL 必知必会
    IDEA 内使用 git
    分布式锁
    LeetCode 图
    LeetCode 位运算
    LeetCode 数组
    LeetCode 字符串
    LeetCode 哈希表
    LeetCode 栈和队列
  • 原文地址:https://www.cnblogs.com/fengbingshui/p/14907717.html
Copyright © 2020-2023  润新知