Day21-Jquery基础

其他 2021-03-24 07:57:30 阅读次数: 0

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>

猜你喜欢

转载自blog.csdn.net/qq_38205875/article/details/109098642
今日推荐
周排行
Android图片与下拉框
java常用的设计模式之单例模式
zabbix自动化监控之自动注册
杨老师课堂之Excel VBA 程序开发第八讲使用工作表函数
Android 去掉底部虚拟导航栏
Android Studio 3.2 Beta 4 发布，功能改进和修复
Linux-3.5_总线驱动设备
Qt QTableView QStandardItemModel用法
session处理
分享几个实用的方法
每日归档
更多
2025-02-06(0)
2025-02-05(0)
2025-02-04(0)
2025-02-03(0)
2025-02-02(0)
2025-02-01(0)
2025-01-31(0)
2025-01-30(0)
2025-01-29(0)
2025-01-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022