Day21-Jquery基础

最新推荐文章于 2024-07-08 10:04:44 发布
最新推荐文章于 2024-07-08 10:04:44 发布
阅读量239 收藏
点赞数
分类专栏： 前端 文章标签： jquery javascript dom 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38205875/article/details/109098642
版权

title: Day21-Jquery基础
date: 2020-08-06 19:18:45
author:子陌

JQuery基础：

概念

一个JavaScript框架。简化js的书写，封装了js常用的代码功能，提供简便使用JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互

JavaScript框架：本质上就是一些js文件，封装了js的原生代码而已。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义js框架</title>
</head>
<body>
    <div id="id1">1</div>
    <div id="id2">2</div>
    <div id="id3">3</div>

<script>
    // 1.根据id获取元素对象
    var div1 = document.getElementById("id1");
    var div2 = document.getElementById("id2");
    var div3 = document.getElementById("id3");
    // 2.获取标签内容
    console.log(div1.innerHTML + div2.innerHTML + div3.innerHTML);

    // 3.封装上述方法
    function $(id) {
        var object = document.getElementById(id);
        return object;
    }
    var div11 = $("id1");
    var div22 = $("id2");
    var div33 = $("id3");
</script>
</body>
</html>

快速入门

  • 步骤：

    1. 下载Jquery：三大版本（1.xx、2.xx、3.xx）

      • 1.xx：兼容ie678，使用最广泛的版本，最终版本1.12.4（2016年5月20日）
      • 2.xx：不兼容ie678，很少使用，最终版本2.2.4（2016年5月20日）
      • 3.xx：不兼容ie678，只支持最新的浏览器，除非特殊要求，一般不会使用，最新版本3.2.1（2017年3月20日）

      jquery-xxx-js与jquery-xxx.min.js区别：

      • jquery-xxx-js：开发版本。给程序员看，有良好的缩进和注释
      • jquery-xxx.min.js：生产版本。程序中使用，没有缩进。体积小一些。程序加载更快

    2. 导入Jquery的js文件：导入jquery-xxx.min.js文件

    3. 使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义js框架</title>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <div id="id1">1</div>
    <div id="id2">2</div>
    <div id="id3">3</div>
<script>
    // 使用jquery获取元素对象
    var div1 = $("#id1");
    var div2 = $("#id2");
    var div3 = $("#id3");
    console.log(div1.html()+div2.html()+div3.html());
</script>
</body>
</html>

Jquery对象和JS对象区别于转换

  1. JQuery对象在操作时，更加方便
  2. JQuery对象和js对象方法不通用
  3. 两者相互转换
    1. JQuery --> JavaScript：jq对象[索引] 或者 jq对象.get(索引)
    2. JavaScript --> JQuery：$(js对象)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义js框架</title>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <div id="id1">1</div>
    <div id="id2">2</div>
<script>
    // 1.1通过js方式获取名称叫div所有html元素
    var divs = document.getElementsByTagName("div");    // 可以当数组使用
    // 2.1对divs所有div标签让其标签体内容变为aaa
    for (var i = 0; i < divs.length; i++){
        divs[i].innerHTML = "aaa";
    }
    
    // 1.2通过jq方式获取名称叫div所有html元素
    var $divs = $("div");   // 可以当数组使用
    // 2.2对divs所有div标签让其标签体内容变为bbb
    $divs.html("bbb");

    console.log(divs + $divs);  // [object HTMLCollection][object Object]
    // js - jq
    $(divs).html("CCC");
    // jq - js
    $divs[0].innerHTML = "ddd";
    $divs.get(1).innerHTML = "eee";
</script>
</body>
</html>

选择器

筛选具有相似特征的元素（标签）

基本语法学习：
  1. 事件绑定：$("#id名").click(function () { 处理方式 });
  2. 入口函数：$(function () {})
  3. 样式控制：
  • widown.onload(){} 和 $(function(){})区别：
    1. widown.onload只能定义一次，多次定义，后面会覆盖前面
    2. $(function(){})可以定义多次，且不会覆盖
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义js框架</title>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script>
        // 等页面加载完再获取
        /*
        window.onload =function(){
            // 给btn按钮添加单击事件
            // 1.获取btn按钮
            $("#btn").click(function () {
                alert("abc");
            });
        }
        */

        // 2.jquery入口函数(dom文档加载完成后执行该函数中的代码)
        $(function () {
            $("#btn").click(function () {
                alert("abc");
            });
        })

        function fun1(){ alert("waaa");}
        function fun2(){ alert("wbbb");}

        window.onload = fun1;
        window.onload = fun2;
        $(function () {
            alert("qaaa");
        })
        $(function () {
            alert("qbbb");
        })

        // 3.样式控制
        $(function () {
            $("#id1").css("background-color","red");
            $("#id2").css("backgroundColor","blue");
        })
    </script>
</head>
<body>
    <div id="id1">1</div>
    <div id="id2">2</div>
    <input type="button" id="btn" value="点我">
<script>
    // 给btn按钮添加单击事件
    // 1.获取btn按钮
    $("#btn").click(function () {
        alert("abc");
    });
</script>
</body>
</html>
分类：

  1. 基本选择器：

    1. 标签选择器（元素选择器）
      • 语法：$("html标签名")，获取所有匹配标签名称的子元素
    2. id选择器
      • 语法：$("#id的属性值")，获得与指定id属性值匹配的元素
    3. 类选择器
      • 语法：$(".class的属性值")，获得与指定的class属性值匹配的元素
    4. 并集选择器
      • 语法：$("选择器1,选择器2...")，获得多个选择器选中的所有元素

  2. 层级选择器

    1. 后代选择器
      • 语法：$("A B")，选择A元素内部的所有B元素
    2. 子选择器
      • 语法：$("A > B")，选择A元素内部的所有B子元素

  3. 属性选择器

    1. 属性名称选择器
      • 语法：$("A[属性名]")，包含指定属性的选择器
    2. 属性选择器
      • 语法：$("A[属性名='值']")，包含指定属性等于指定值的选择器
    3. 符合属性选择器
      • 语法：$("A[属性名='值'][]...")，包含多个属性条件的选择器

  4. 过滤选择器

    1. 首元素选择器
      • 语法：first，获得选择的元素中的第一个元素
    2. 尾元素选择器
      • 语法：last，获得选择的元素中的最后一个元素
    3. 非元素选择器
      • 语法：not(selecter)，不包括指定内容的元素
    4. 偶数选择器
      • 语法：even，even偶数，从0开始计数
    5. 奇数选择器
      • 语法：odd，odd奇数，从0开始计数
    6. 等于索引选择器
      • 语法：eq(index)，指定索引元素
    7. 大于索引选择器
      • 语法：gt(index)，大于指定索引元素
    8. 小于索引选择器
      • 语法：lt(index)，小于指定索引元素
    9. 标题选择器
      • 语法：header，获得标题元素，固定写法

  5. 表单过滤选择器

    1. 可用元素选择器

      • 语法：enabled，获得可用元素

    2. 不可用元素选择器

      • 语法：disabled，获得不可用元素

    3. 选中选择器

      • 语法：checked，获得单选/复选框选中的元素

      • 语法：selected，获得下拉框选中的元素

  • 基本选择器案例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义js框架</title>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script>
        $(function () {
            // 改变id为noe的元素的背景色为：红色
            $("#b1").click(function () {
                $("#one").css("backgroundColor","red");
            });
            // 改变元素名为div的背景色为：蓝色
            $("#b2").click(function () {
                $("div").css("backgroundColor","blue");
            });
            // 改变class为mini的所有元素的背景色为：黄色
            $("#b3").click(function () {
                $(".mini").css("backgroundColor","yellow");
            });
            // 改变span元素和id为two的元素的背景色为：粉色
            $("#b4").click(function () {
                $("span,#two").css("backgroundColor","pink");
            });
        })
    </script>
</head>
<body>
    <div id="one">one</div>
    <div class="mini">one</div>
    <div class="two">
        <div class="mini">mini</div>
        <div class="one">mini</div>
    </div>
    <div id="two">
        <div class="mini">mini</div>
        <div class="one">mini</div>
    </div>
    <span>span</span>
    <span class="mini">span</span>
    <input type="button" value="改变id为one的元素的背景色为：红色", id="b1">
    <input type="button" value="改变元素名为div的背景色为：蓝色", id="b2">
    <input type="button" value="改变class为mini的所有元素的背景色为：黄色", id="b3">
    <input type="button" value="改变span元素和id为two的元素的背景色为：粉色", id="b4">
</body>
</html>
  • 层级选择器案例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义js框架</title>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <div id="id1">
        aaaaaaa
        <div> aaa1</div>
        <div> bbb1</div>
    </div>
    <span>aaa </span>
    <div id="id2">cc</div>
    <div id="id3">ddd</div>
    <input type="button" value="保存" class="mini" name="ok" />
    <input type="button" value="改变body内所有div背景为红色" id="btn1">
    <input type="button" value="改变body内子div背景为蓝色" id="btn2">
<script type="text/javascript">
    $(function () {
        // 改变body内所有div背景为红色
        $("#btn1").click(function () {
            $("body div").css("backgroundColor","red");
        });
        // 改变body内子div背景为蓝色
        $("#btn2").click(function () {
            $("body > div").css("backgroundColor","blue");
        });
    })
</script>
</body>
</html>
  • 属性选择器案例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义js框架</title>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <span title="te11">aaa </span>
    <div id="id2" title="">cc</div>
    <div id="id2" title="test">dddd</div>
    <div title="test11">dddd</div>
    <div title="text11">dddd</div>
    <div id="id3">ddd</div>
    <input type="button" value="含有属性title 的div元素，背景红色" id="btn" />
    <input type="button" value="含有属性title=test的div元素，背景蓝色" id="btn1">
    <input type="button" value="不含有属性title=test的div元素，背景蓝色" id="btn2">
    <input type="button" value="含有属性title值以te开头的div元素，背景黄色" id="btn3">
    <input type="button" value="含有属性title值以11结尾的div元素，背景绿色" id="btn4">
    <input type="button" value="含有属性title值包含te的div元素，背景橙色" id="btn5">
    <input type="button" value="选取有id的div 含有属性title值包含te的div元素，背景橙色" id="btn6">
<script type="text/javascript">
    $(function () {
        // 含有属性title 的div元素，背景红色
        $("#btn").click(function () {
            $("div[title]").css("backgroundColor","red");
        });
        // 含有属性title=test的div元素，背景蓝色
        $("#btn1").click(function () {
            $("div[title='test']").css("backgroundColor","blue");
        });
        // 不含有属性title=test的div元素，背景蓝色
        $("#btn2").click(function () {
            $("div[title!='test']").css("backgroundColor","skyblue");
        });
        // 含有属性title值以te开头的的div元素，背景黄色
        $("#btn3").click(function () {
            $("div[title^='te']").css("backgroundColor","skyblue");
        });
        // 含有属性title值以11结尾的的div元素，背景绿色
        $("#btn4").click(function () {
            $("div[title$='11']").css("backgroundColor","skyblue");
        });
        // 含有属性title值包含te的div元素，背景橙色
        $("#btn5").click(function () {
            $("div[title*='te']").css("backgroundColor","orange");
        });
        // 选取有id的div 含有属性title值包含te的div元素，背景橙色
        $("#btn6").click(function () {
            $("div[id][title*='te']").css("backgroundColor","purple");
        });
    })
</script>
</body>
</html>
  • 过滤选择器案例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义js框架</title>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <span title="te11">aaa </span>
    <div id="id2" title="">cc</div>
    <div id="id2" title="test">dddd</div>
    <div>
        <h1>11111</h1>
        <h2>2222</h2>
    </div>
    <div>
        eeeee
        <div title="test11">e1</div>
        <div title="text11">e2</div>
    </div>
    <div title="test11">dddd</div>
    <div title="text11">dddd</div>
    <div class="one">ddd</div>
    <span title="te11">aaa </span>
    <input type="button" value="改变第一个div元素，背景红色" id="btn" />
    <input type="button" value="改变最后一个div的，背景蓝色" id="btn1">
    <input type="button" value="改变class不为one的所有div元素，背景sky蓝色" id="btn2">
    <input type="button" value="改变索引为偶数的div元素，背景黄色" id="btn3">
    <input type="button" value="改变索引为奇数的div元素，背景绿色" id="btn4">
    <input type="button" value="索引大于小于等于3，背景橙色" id="btn5">
    <input type="button" value="改变所有标题的背景色，背景橙色" id="btn6">
<script type="text/javascript">
    $(function () {
        // 改变第一个div元素，背景红色
        $("#btn").click(function () {
            $("div:first").css("backgroundColor","red");
        });
        // 改变第一个div元素，背景红色
        $("#btn1").click(function () {
            $("div:last").css("backgroundColor","blue");
        });
        // 不含有属性title=test的div元素，背景蓝色
        $("#btn2").click(function () {
            $("div:not(.one)").css("backgroundColor","skyblue");
        });
        // 改变索引为偶数的div元素，背景黄色
        $("#btn3").click(function () {
            $("div:even").css("backgroundColor","skyblue");
        });
        // 改变索引为奇数的div元素，背景绿色
        $("#btn4").click(function () {
            $("div:odd").css("backgroundColor","green");
        });
        // 含有属性title值包含te的div元素，背景橙色
        $("#btn5").click(function () {
            $("div:gt(3)").css("backgroundColor","red");
            $("div:eq(3)").css("backgroundColor","yellow");
            $("div:lt(3)").css("backgroundColor","blue");
        });
        // 选取有id的div 含有属性title值包含te的div元素，背景橙色
        $("#btn6").click(function () {
            $(":header").css("backgroundColor","purple");
        });
    })
</script>
</body>
</html>
  • 表单过滤选择器：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义js框架</title>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <input type="text" value="不可用1" disabled>
    <input type="text" value="可用1" >
    <input type="text" value="不可用2" disabled>
    <input type="text" value="可用2" >

    <input type="checkbox" value="11">
    <input type="checkbox" value="22">
    <input type="checkbox" value="33">

    <select  name = "job" id = "job" multiple="multiple" size ="4">
        <option value="1">1111111</option>
        <option value="2">2222222</option>
        <option value="3">3333333</option>
        <option value="4">4444444</option>
        <option value="5">5555555</option>
    </select >

    <input type="button" value="利用jq对象的val()方法改变表单内可用<input>元素的值" id="btn" />
    <input type="button" value="利用jq对象的val()方法改变表单内不可用<input>元素的值" id="btn1">
    <input type="button" value="利用jq对象的length属性获取复选框选中的个数" id="btn2">
    <input type="button" value="利用jq对象的length属性获取下拉框选中的个数" id="btn3">
<script type="text/javascript">
    $(function () {
        // 含有属性title 的div元素，背景红色
        $("#btn").click(function () {
            $("input[type='text']:enabled").val("aaa");
        });
        // 含有属性title=test的div元素，背景蓝色
        $("#btn1").click(function () {
            $("input[type='text']:disabled").val("bbb");
        });
        // 不含有属性title=test的div元素，背景蓝色
        $("#btn2").click(function () {
            alert($("input[type='checkbox']:checked").length);

        });
        // 利用jq对象的length属性获取下拉框选中的个数
        $("#btn3").click(function () {
            alert($("#job > option:selected").length);
            alert($("select > option:selected").length);
        });
    })
</script>
</body>
</html>

DOM操作

  • 内容操作
    1. html()：获取/设置元素的标签体内容<a><font>内容</font></a> 如果a调用则获取到<font>内容</font>
    2. text()：获取/设置元素的标签体纯文本内容<a><font>内容</font></a> 如果a调用则获取到内容
    3. val()：获取/设置元素的value属性值
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script>
        $(function () {
            // 获取myinput的value值
            var name = $("#myinput").val();
            console.log(name);
            $("#myinput").val("zimo");
            // 获取mydiv标签体内容
            var str = $("#mydiv").html();
            console.log(str);
            $("#mydiv").html("<h1>aaaaaa</h1>");
            // 获取mydiv文本内容
            var text = $("#mydiv").text();
            console.log(text);
            $("#mydiv").text("bbbbb");
        })
    </script>
</head>
<body>
    <input id="myinput" type="text" name="username" value="张三" /> <br />
    <div id="mydiv"><p><a href="#">标题标签</a> </p></div>
</body>
</html>

  • 属性操作

    1. 通用属性操作

      1. attr()：获取/设置元素属性
      2. removeAttr()：删除元素属性
      3. prop()：获取/设置元素属性
      4. removeProp()：删除元素属性
      • attr和prop区别：
        • 如果是固有属性，建议使用prop
        • 如果是自定义属性，建议使用attr
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dom</title>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script>
        $(function () {
            // 获取北京节点的name属性值
            var name = $("#bj").attr("name");
            console.log(name);
            // 设置北京节点的name属性值dabeijing
            $("#bj").attr("name","dabeijing");
            // 新增北京节点的discription属性值，属性值是didu
            $("#bj").attr("discription","didu");
            // 删除北京节点的name属性值，并校验是否存在
            $("#bj").removeAttr("name");
            // 获取hobby的选中状态
            var check = $("#hobby").prop("checked");
            console.log(check); // false 如果使用attr则显示undefined
        })
    </script>
</head>
<body>
    <ul>
        <li id="bj" name="beijing" xxx="yyy">北京</li>
        <li id="tj" name="tianjing">天津</li>
    </ul>
    <input type="checkbox" id="hobby"  />
</body>
</html>

    2. 对class属性操作

      1. addClass()：添加class属性值
      2. removeClass()：删除class属性值
      3. toggleClass()：切换class属性
        • toggleClass("one")：判断如果元素对象上存在class=“one”，则将属性值one删掉。如果元素对象上不存在class=“one”，则添加
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dom</title>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <style type="text/css">
        .second{
            width: 300px;
            height: 340px;
            margin: 20px;
            background: yellow;
            float: left;
            font-size: 22px;
            font-family: Roman;
        }
    </style>
    <script>
        $(function () {
            // 采用属性增加样式（改变id=one）的样式
            $("#btn").click(function () {
                $("#one").prop("class","second");
            });
            // addClass
            $("#btn1").click(function () {
                $("#one").addClass("second");
            });
            // removeClass
            $("#btn2").click(function () {
                $("#one").removeClass("second");
            });
            // 切换样式
            $("#btn3").click(function () {
                $("#one").toggleClass("second");
            });
            // 通过css()获得id为one北京颜色
            $("#btn4").click(function () {
                var bg = $("#one").css("backgroundColor");
                console.log(bg);
            });
            // 通过css()获得id为one背景颜色为红色
            $("#btn5").click(function () {
                $("#one").css("backgroundColor", "red");
            });
        })
    </script>
</head>
<body>
    <div id="one" title="">cc</div>
    <input type="button" value="采用属性增加样式（改变id=one）的样式" id="btn" />
    <input type="button" value="addClass" id="btn1">
    <input type="button" value="removeClass" id="btn2">
    <input type="button" value="切换样式" id="btn3">
    <input type="button" value="通过css()获得id为one北京颜色" id="btn4">
    <input type="button" value="通过css()获得id为one背景颜色为绿色" id="btn5">
</body>
</html>

  • CRUD操作：

    1. append()：父元素将子元素追加到末尾
      • 对象1.append(对象2)：将对象2添加到对象1元素内部，并且在末尾
    2. prepend()：父元素将子元素追加到开头
      • 对象1.prepend(对象2)：将对象2添加到对象1元素内部，并且在开头
    3. appendTo()：父元素将子元素追加到末尾
      • 对象1.appendTo(对象2)：将对象1添加到对象2元素内部，并且在末尾
    4. prependTo()：父元素将子元素追加到开头
      • 对象1.prependTo(对象2)：将对象1添加到对象2元素内部，并且在开头
    5. after()：添加元素到元素后边
      • 对象1.after(对象2)：将对象2添加到对象1后边，并列，兄弟关系
    6. before()：父元素将子元素追加到开头
      • 对象1.before(对象2)：将对象2添加到对象1前边，并列，兄弟关系
    7. insertAfter()：添加元素到元素后边
      • 对象1.insertAfter(对象2)：将对象1添加到对象2后边，并列，兄弟关系
    8. insertBefore()：父元素将子元素追加到开头
      • 对象1.insertBefore(对象2)：将对象1添加到对象2前边，并列，兄弟关系
    9. remove()：删除元素
      • 对象.remove()：将对象删除掉
    10. empty()：清空元素的所有后代元素
      • 对象.empty()：将对象所有后代元素全部清空。保留当前对象以及其属性节点

  • CRUD案例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>DOM-CRUD</title>
        <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(function () {
                // 将反恐放置到city的后面
                $("#b1").click(function () {
                    // append appendTo
                    $("#city").append($("#fk"));
                    $("#fk").appendTo($("#city"));
                })
                // 将反恐放置到city的最前面
                $("#b2").click(function () {
                    // prepend prependTo
                    $("#city").prepend($("#fk"));
                    $("#fk").prependTo($("#city"));
                })
                // 将反恐插入到天津的后面
                $("#b3").click(function () {
                    // after insertAfter
                    $("#tj").after($("#fk"));
                    $("#fk").insertAfter($("#tj"));
                })
                // 将反恐放置到天津的前面
                $("#b4").click(function () {
                    // before insertBefore
                    $("#tj").before($("#fk"));
                    $("#fk").insertBefore($("#tj"));
                })
                // 删除<li id="bj" name="beijing">北京</li>
                $("#b5").click(function () {
                    $("#bj").remove();
                })
                // 删除所有的子节点 清空元素中所有后代节点（不包括属性节点）
                $("#b6").click(function () {
                    $("#city").empty();
                })
            })
        </script>
    </head>
    <body>
        <input type="button" value="将反恐放置到city的后面" id="b1">
        <input type="button" value="将反恐放置到city的最前面" id="b2">
        <input type="button" value="将反恐插入到天津的后面" id="b3">
        <input type="button" value="将反恐放置到天津的前面" id="b4">
        <input type="button" value=" 删除<li id='bj' name='beijing'>北京</li>" id="b5">
        <input type="button" value="删除所有的子节点 清空元素中所有后代节点（不包括属性节点）" id="b6">
        <ul id="city">
            <li id="bj" name="beijing">北京</li>
            <li id="tj" name="tianjin">天津</li>
            <li id="cq" name="chongqin">重庆</li>
        </ul>
        <ul id="love">
            <li id="fk" name="fangkong">反恐</li>
            <li id="xj" name="xingji">星际</li>
        </ul>
        <div id="fool">hello1</div>
    </body>
</html>
  • 案例：隔行换色/全选全不选
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>隔行换色/全选全不选</title>
        <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
        <script>
            // 隔行换色
            $(function () {
                // 获取奇数行的tr，设置skyblue
                $("tr:gt(1):odd").css("backgroundColor","skyblue");
                // 获取偶数行的tr，设置pink
                $("tr:gt(1):even").css("backgroundColor","pink");
            })
            // 全选全不选
            function selectAll(obj) {
                // 下边的选中状态和第一个一致
                // 获取所有的复选框
                $(".itemSelect").prop("checked",obj.checked);
            }
        </script>
    </head>
    <body>
        <table id="tab1" border="1" width="800" align="center" >
            <tr>
                <td colspan="5"><input type="button" value= "删除"></td>
            </tr>
            <tr style="...">
                <th> <input type= "checkbox" οnclick="selectAll(this)"></th>
                <th>分类ID</th>
                <th>分类名称</th>
                <th>分类描述</th>
                <th>操作</th>
            </tr>
            <tr>
                <th> <input type= "checkbox" class="itemSelect"></th>
                <td>1</td>
                <td>手机数码</td>
                <td>手机数码类商品</td>
                <td>
                    修改|删除
                </td>
            </tr>
            <tr>
                <th> <input type= "checkbox" class="itemSelect"></th>
                <td>2</td>
                <td>手机数码</td>
                <td>手机数码类商品</td>
                <td>
                    修改|删除
                </td>
            </tr>
            <tr>
                <th> <input type= "checkbox" class="itemSelect"></th>
                <td>3</td>
                <td>手机数码</td>
                <td>手机数码类商品</td>
                <td>
                    修改|删除
                </td>
            </tr>
            <tr>
                <th> <input type= "checkbox" class="itemSelect"></th>
                <td>4</td>
                <td>手机数码</td>
                <td>手机数码类商品</td>
                <td>
                    修改|删除
                </td>
            </tr>
    </body>
</html>
  • 案例：QQ表情选择
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>QQ表情包</title>
        <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    </head>
    <style type="text/css">
        *{margin: 0;padding: 0;list-style: none;}
        .emoji{margin: 50px;}
        ul{overflow: hidden;}
        li{float: left;width: 48px; height: 48px; cursor: pointer;}
        .emoji img{cursor: pointer;}
    </style>
    <script type="text/javascript">
        $(function () {
            // 追加到发言框中
            // 1.给所有img添加onclick事件
            $("ul img").click(function () {
                // 2.追加到p标签中即可
                $(".word").append($(this).clone());
            })
        })
    </script>
    <body>
        <div class="emoji">
            <ul>
                <li><img src="QQimg/1.gif" height="24" width="24" alt="" /></li>
                <li><img src="QQimg/2.gif" height="24" width="24" alt="" /></li>
                <li><img src="QQimg/3.gif" height="24" width="24" alt="" /></li>
                <li><img src="QQimg/4.gif" height="24" width="24" alt="" /></li>
                <li><img src="QQimg/5.gif" height="24" width="24" alt="" /></li>
                <li><img src="QQimg/6.gif" height="24" width="24" alt="" /></li>
                <li><img src="QQimg/7.gif" height="24" width="24" alt="" /></li>
                <li><img src="QQimg/8.gif" height="24" width="24" alt="" /></li>
                <li><img src="QQimg/9.gif" height="24" width="24" alt="" /></li>
                <li><img src="QQimg/10.gif" height="24" width="24" alt="" /></li>
            </ul>
            <p class="word">
                <strong>请发言：</strong>
                <img src="QQimg/12.gif" height="24" width="24" alt="" />
            </p>
        </div>
    </body>
</html>
  • 下拉列表的左右移动
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>下拉左右移动</title>
        <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
        <style type="text/css">
            #left{
                float: left;
                height: 500px;
                width: 100px;
            }
            #right{
                float: left;
                height: 500px;
                width: 100px;
            }
            #btn{
                float: left;
                margin: 100px 50px 100px;
            }
            #toL{
                margin-top: 200px;
            }
            .border{
                height: 500px;
                padding: 100px;
                float: left;
            }
        </style>
        <script type="text/javascript">
            //下拉选中的左右移动
            $(function () {
                $("#toR").click(function () {
                    // 获取右边的下拉列表对象，append(左边下拉选中的option)
                    $("#right").append($("#left > option:selected"))    // 过滤器：间不能加空格
                })
                $("#toL").click(function () {
                    $("#left").append($("#right > option:selected"))    // 过滤器：间不能加空格
                })
            })
        </script>
    </head>
    <body>
        <div class="border">
            <select id="left" multiple="multiple">
                <option>张三1</option>
                <option>李四1</option>
                <option>王五1</option>
                <option>赵六1</option>
                <option>马奇1</option>
            </select>
            <div id="btn">
                <input type="button" id="toR" value="-->"><br>
                <input type="button" id="toL" value="<--">
            </div>
            <select id="right" multiple="multiple">
                <option>张三2</option>
                <option>李四2</option>
                <option>王五2</option>
                <option>赵六2</option>
                <option>马奇2</option>
            </select>
        </div>
    </body>
</html>
柳子陌
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
day20_JQuery基础.zip
02-20
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨 是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装...
day20_JQuery基础教案1
08-08
2.1.2视频详情2.1.3总结与补充 无2.1.4课堂提问与练习无2.1.5习题答案 无2.1.6 练习答案 无2.1.7 视频缺陷无2.1.8 视频扩展无2
2021/11/1 前端开发之JavaScript+jQuery入门 第十三章表单效验
Abcdzzr的博客
11-01 588
目录 1.JavaScript验证表单内容 2.表单选择器 3.表单属性过滤选择器 4.正则表达式 4.1正则表达式的定义 4.2表达式规则 5.HTML5表单验证 5.2validity属性应用 本章总结 1.JavaScript验证表单内容 获取到需要效验内容合法性的表单元素值。 使用JavaScript提供的方法对表单元素的值进行判断。 根据判断结果，针对不合法的数据给出提示信息。 2.表单选择器 语法 描述 ...
jquery的show/hide/toggle详解
weixin_33796205的博客
10-04 627
通过阅读源码我们发现show,hide,toggle调用了showHide和isHidden这2个方法，所以我们要搞明白原理必须先看一下这2个方法。 jQuery.fn.extend({ ................. show: function() { return showHide( this, true ); ...
多功能下拉分页选择插件SelectPage插件 http://www.jq22.com/jquery-info14227
damei2017的博客
12-17 756
总结了几个自己的使用心得 ①无匹配项目时，取消自动清空用户输入的关键词；还没发现怎么配置使用，只能直接改插件代码实现，如果一个项目两个地方使用，一个地方需要清空用户输入的关键词（比如允许用户自行输入下拉框的值怎么办,） } else { //无匹配项目时，取消自动清空用户输入的关键词 if (d.option.no_result_clean) /...
Web基础 day03-JQuery
张准的博客
12-19 174
JQuery概述 JQuery选择器 文档操作 JSON
javaweb学习（day12-jQuery)
weixin_51580177的博客
04-23 1018
jquery就是简化了dom的操作，也确实很方便
day14-JQuery 基础
weixin_43644567的博客
10-07 101
今日内容 JQuery 基础： 概念 快速入门 JQuery对象和JS对象区别与转换 选择器 DOM操作 案例 JQuery 基础： 1. 概念： 一个JavaScript框架。简化JS开发 * jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨 是“write ...
# day01 - jQuery
weixin_60651472的博客
05-08 200
> 学习目标： > 能够说出什么是 jQuery > 能够说出 jQuery 的优点 > 能够简单使用 jQuery > 能够说出 DOM 对象和 jQuery 对象的区别 > 能够写出常用的 jQuery 选择器 > 能够操作 jQuery 样式 > 能够写出常用的 jQuery 动画 ## 1.1. jQuery 介绍 ### 1.1.1 JavaScript 库 ​ JavaScript库：即 library，是一个封装好的特定的.
day14-jQuery.md
qq_41383195的博客
07-26 588
jQuery
# day02 - jQuery
weixin_60651472的博客
05-12 162
> 学习目标： > > 能够操作 jQuery 属性 > 能够操作 jQuery 元素 > 能够操作 jQuery 元素尺寸、位置 ## 1.1. jQuery 属性操作 ​ jQuery 常用属性操作有三种：prop() / attr() / data() ; ### 1.1.1 元素固有属性值 prop() ​ 所谓元素固有属性就是元素本身自带的属性，比如 <a> 元素里面的 href ，比如 <input> 元素里面的...
15day-study-jquery-.rar_JavaScript/JQuery_Java_
08-11
JavaScript是Web开发中的基础脚本语言，而jQuery则是JavaScript的一个扩展，提供了更加简洁、高效的API。通过学习jQuery，你可以快速地实现诸如元素选择、遍历、事件绑定等功能，而无需编写大量的原生JavaScript代码...
day37【JQuery基础】.pdf
05-30
jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 jQuery 很容易学习。 jQuery基础讲解，一个课件讲义
ES6 新特性有哪些
weixin_64684095的博客
07-06 1097
1. 拥有块级作用域，这意味着在 if 语句、for 循环、while 循环等代码块中声明的 let 变量，只在该代码块内有效。2. 不允许在同一作用域内重复声明同一个变量1. 也具有块级作用域。2. 声明时必须进行初始化赋值，且赋值后不能再重新赋值修改其值。3. 如果 const 声明的是一个对象或数组，虽然不能重新赋值整个对象或数组，但可以修改对象的属性值或数组的元素值。
HTML_表单 和 表单案例
secret010的博客
07-05 297
【代码】HTML_表单 和 表单案例。
vue-使用Worker实现多标签页共享一个WebSocket
最新发布
qq_43548590的博客
07-08 1057
最近有一个需求，需要实现用户系统消息时时提醒功能。第一时间就是想用WebSocket进行长连接。但是前端项目点击跳转需要打开新的标签页。这个时间就会出现新的标签页打开会把老的WebSocket连接挤掉。然后就想到了去共享一个WebSocket连接。就能实现多个标签页消息共享了。
Vue 3集成krpano 全景图展示
Mr丶GUO
07-06 416
Vue 3集成krpano 全景图展示，需要借助官方工具进行制作注意事项：vue@cli3没有static，需要放在public目录下。
day--和--day区别
04-18
"day--"和"day"是两种不同的操作符，它们在编程中有着不同的含义和用法。 1. "day--"是一个后缀自减操作符，用于将变量的值减1，并返回减1之前的值。例如，如果有一个变量day的值为5，执行day--操作后，day的值将...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

柳子陌

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值