day30-JQuery03

JQuery03

4.jQuery选择器03

4.4表单选择器

应用实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单选择器应用实例</title>
    <script type="text/javascript" src="./script/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //选择所有的 button
            var $buttons = $(":button");
            alert("$buttons 大小= "+$buttons.length)//3
            //得到type=‘button’的元素
            var $button = $("input[type='button']");
            alert("$button 大小= "+$button.length)//1
            //得到<button/>按照元素标签取值
            var $button2 = $("button");
            alert("$button2 大小= "+$button2.length)//2
        })
    </script>
</head>
<body>
<form>
    <input type="text"/><br/>
    <input type="checkbox"/><br/>
    <input type="radio"/><br/>
    <input type="image" src="" height="100"/><br/>
    <input type="file"/><br/>
    <input type="submit"/><br/>
    <input type="reset"/><br/>
    <input type="password"/><br/>
    <input type="button" value="按钮1"/><br/>
    <select>
        <option/>
    </select><br/>
    <textarea></textarea><br/>
    <button>按钮2</button>
    <button>按钮3</button><br/>
</form>
</body>
</html>

5.练习

5.1练习1

需求:网页中所有的p元素添加onclick事件,当点击文字时,弹窗显示段落的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p-onclick</title>
    <script type="text/javascript" src="../script/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //获取对象绑定事件
            //统一绑定
            // $("p").click(function () {
            //     //当我们点击p元素时,会隐式地传入this(dom),表示你当前点击的p元素对应的dom对象
            //     //alert(this.innerText)
            //     //或者
            //     alert($(this).text())
            // })

            //方式二
            //对所有的p标签进行遍历
            //每遍历一个p,就绑定一个
            //遍历执行function,依然会隐式地传入当前的dom对象this
            $("p").each(function () {
                $(this).click(function () {
                    alert($(this).text())
                })
            })
        })
    </script>
</head>
<body>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
</body>
</html>

5.2练习2

需求:使一个特定的表格隔行变色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格隔行变色</title>
    <script type="text/css">
        table {
            border: 1px solid;
            border-collapse: collapse;
        }
    </script>
    <script type="text/javascript" src="../script/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //先得到table,再得到tr,得到even/odd的tr元素,
            // 得到指定的table:eq(index),index从0开始编号
            //第一个表格
            $("table:eq(0) tr:odd").css("background", "#fc1515")
            $("table:eq(0) tr:even").css("background", "#454cef")
            //第二个表格
            $("table:eq(1) tr:odd").css("background", "#20d001")
            $("table:eq(1) tr:even").css("background", "#f9ff44")
        })
    </script>
</head>
<body>
<h1>第一个表格</h1>
<table border="1" width="300">
    <tr>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
        <td>5</td>
    </tr>
    <tr>
        <td>6</td>
        <td>6</td>
    </tr>
</table>
<h1>第二个表格</h1>
<table border="1" width="300px">
    <tr>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
        <td>5</td>
    </tr>
    <tr>
        <td>6</td>
        <td>6</td>
    </tr>
</table>
</body>
</html>

6.jQuery的DOM操作

6.1查找节点,修改属性

jQuery 设置内容和属性 (w3school.com.cn)

查找属性节点:找到所需要的元素之后,可以调用jQuery对象的attr()方法来获取它的各种属性值。

  • 返回属性值:返回被选元素的属性值。
$(selector).attr(attribute)
参数描述
attribute规定要获取其值的属性。
  • 设置属性/值:设置被选元素的属性和值。
$(selector).attr(attribute,value)
参数描述
attribute规定属性的名称。
value规定属性的值。

应用实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作节点的属性</title>
    <script type="text/javascript" src="../script/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //先给button绑定事件
            $("button").click(function () {
                // $("img").attr("src","../img/2.png");
                $("img").attr("height", "200");
            })
        })
    </script>
</head>
<body>
<img src="../img/1.jpg" height="150"/>
<br/>
<button>设置图像的height属性</button>
</body>
</html>

6.2创建节点

  • 创建节点介绍

    1. 创建节点:使用jQuery的工厂函数$(html标签);会根据传入的html标记字符串创建一个jQuery对象并返回
    2. 动态创建的新元素节点不会被自动添加到文档中,而是需要使用其他方法将其插入到文档中;
    3. 当创建单个元素时,需注意闭合标签和使用标准的XHTML格式。例如创建一个< p>元素,可以使用$("<p/>")或者$("<p></p>")。但不能使用$("<p>")或者$("</p>")
    4. 创建文本节点就是在创建元素节点时,直接把文本内容写出来。创建属性节点也是在创建元素节点时一起创建
  • 第1组方法(内部插入法)

    1. append(content):向每个匹配的元素的内部的结尾处追加内容

      举例: A.append(B)

      (1)A,B都需要是jquery对象(2)表示把B对象插入到A对象内部的结尾处(3)结果是B对象成为了A对象最后一个子元素/子节点,如<p id="A"><p id="B"></p></p>

    2. appendTo(content):向每个匹配的元素追加到指定的元素中的内部结尾处

      举例:A.appendTo(B)

      (1)A,B都需要是jquery对象(2)表示把A对象插入到B对象内部的结尾处(3)结果是A对象成为了B对象的最后一个子元素/子节点,如<p id="B"><p id="A"></p></p>

    3. prepend(content):向每个匹配的元素的内部的开始处插入内容

      举例:A.prepend(B)

      (1)A,B都需要是jquery对象(2)表示把B对象插入到A对象内部的开始处(3)结果是B对象成为了A对象的第一个子元素/子节点,如<p id="A"><p id="B"></p></p>

    4. prependTo(content):向每个匹配的元素插入到指定的元素内部的

      举例:A.prependTo(B)

      (1)A,B都需要是jquery对象(2)表示把A对象插入到B对象内部的开始处(3)结果是A对象成为了B对象的第一个子元素/子节点,如<p id="B"><p id="A"></p></p>

    5. 内部插入法是在元素内插入内容(该内容变成该元素的子元素或节点)

  • 第2组方法(外部插入法)

    1. after(content):在每个匹配的元素之后插入内容

      举例说明 A.after(B)

      (1) A,B都是jquery对象 (2) 表示B对象插入到A对象后面 (3) 结果是B成为A的兄弟节点,B在A后面,如<p id="A"></p><p id="B"></p>

    2. before(content):在每个匹配的元素之前插入内容

      举例 A.before(B)

      (1)A, B都是jquery对象(2) 表示B对象插入到A对象前面 (3) 结果是B成为A的兄弟节点,并且在A的前面,如<p id="B"></p><p id="A"></p>

    3. insertAfter(content):把所有匹配的元素插入到另一个指定的元素元素集合的后面

      举例说明 A.insertAfter(B)

      (1) A, B都是jquery对象 (2) 表示把A对象插入到B对象的后面 (3) 结果:A成为B的后一个兄弟节点,如<p id="B"></p><p id="A"></p>

    4. insertBefore(content) :把所有匹配的元素插入到另一个指定的元素元素集合的前面

      举例 A.insertBefore(B)

      (1) A, B都是jquery对象 (2) 表示把A对象插入到B对象的前面 (3) 结果是 A成为B的前一个兄弟,如<p id="A"></p><p id="B"></p>

    5. 外部插入法是在元素的外面插入内容(其内容变成元素的兄弟节点)

注意: 以上方法不但能将新的 DOM 元素插入到文档中, 也能对原有的 DOM 元素进行移动(可以完成很多需求)


应用实例1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建节点-应用实例</title>
    <script type="text/javascript" src="../script/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //添加重庆 li 到 上海下(使用dom的传统方法)
            $("#b1").click(function () {
                //1.创建重庆的li元素
                var cq_li = document.createElement("li");
                //2.设置相关属性和内容
                cq_li.setAttribute("id", "cq");
                cq_li.setAttribute("name", "chongqing");
                cq_li.innerText = "重庆";
                //3.添加到指定元素的后面
                document.getElementById("sh").append(cq_li);
            })
            // 添加重庆 li 到 上海下-使用jquery
            $("#b2").click(function () {
                var $cq_li = $("<li id=\"cq\" name=\"chongqing\">重庆</li>");
                $("#sh").after($cq_li);//外部插入
                //或者 $($cq_li).insertAfter($("#sh"))
            })
            // 添加成都 li 到 北京前
            $("#b3").click(function () {
                var $cd_li = $("<li id=\"cd\" name=\"chengdu\">成都</li>");
                $("#bj").before($cd_li)//外部插入
                //如果使用内部插入-$("#bj").prepend($cd_li)不正确
            })
            // 添加成都 li 到 北京和上海之间
            $("#b4").click(function () {
                var $cd_li = $("<li id=\"cd\" name=\"chengdu\">成都</li>");
                // $("#bj").after($cd_li)//外部插入
                //或者
                $("#sh").before($cd_li)//外部插入
            })
            // 添加成都 li 到 吉林前面
            $("#b5").click(function () {
                var $cd_li = $("<li id=\"cd\" name=\"chengdu\">成都</li>");
                $("#jl").before($cd_li)//外部插入
            })
        })
    </script>
</head>
<body>
<ul id="city">
    <li id="bj" name="beijing">北京</li>
    <li id="sh" name="shanghai">上海</li>
    <li id="jl" name="jilin">吉林</li>
    <li id="my" name="mianyang">绵阳</li>
</ul>
<input type="button" id="b1" value="添加重庆 li 到 上海下(使用dom的传统方法)"/><br/><br/>
<input type="button" id="b2" value="添加重庆 li 到 上海下"/><br/><br/>
<input type="button" id="b3" value="添加成都 li 到 北京前"/><br/><br/>
<input type="button" id="b4" value="添加成都 li 到 北京和上海之间"/><br/><br/>
<input type="button" id="b5" value="添加成都 li 到 吉林前面"/><br/>
</body>
</html>

应用案例2-以上方法不但能将新的 DOM 元素插入到文档中, 也能对原有的DOM元素进行移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>移动节点</title>
    <script type="text/javascript" src="../script/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //使用 after 插入法 把反恐 li 移动天津后
            $("#b1").click(function () {
                $("#tj").after($("#fk"));
            })
            //使用 append 插入法 把反恐 li 移动天津后
            $("#b2").click(function () {
                $("#tj").append($("#fk"));
            })
        })
    </script>

</head>
<body>
您喜欢的城市:<br>
<ul id="city">
    <li id="bj" name="beijing">北京</li>
    <li id="sh" name="shanghai">上海</li>
    <li id="tj" name="tianjin">天津</li>
</ul>
您爱好的游戏:<br>
<ul id="game">
    <li id="fk" name="fakong">反恐</li>
    <li id="cq" name="chuangqi">传奇</li>
</ul>
<input type="button" id="b1" value="使用 after 插入法 把反恐 li 移动天津后"/><br/><br/>
<input type="button" id="b2" value="使用 append 插入法 把反恐 li 移动天津后"/><br/><br/>
</body>
</html>

6.3删除节点

  1. remove():从dom中删除所有匹配的元素,传入的参数用于根据jQuery表达式来筛选元素,当某个节点用remove()方法删除后,该节点所包含的所有后代节点将被同时删除。这个方法的返回值是一个指向已被删除的节点的引用。
  2. empty():清空节点-清空元素中的所有后代节点(不包含属性节点)

应用实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>删除节点-应用实例</title>
    <script type="text/javascript" src="../script/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //删除所有 p
            $("#b1").click(function () {
                $("p").remove();
            })
            //所有 p 清空
            $("#b2").click(function () {
                $("p").empty();
            })
            //删除上海这个 li
            $("#b3").click(function () {
                $("#sh").remove();
            })
        })
    </script>
</head>
<body>
您喜欢的城市:<br>
<ul id="city">
    <li id="bj" name="beijing">北京</li>
    <li id="sh" name="shanghai">上海</li>
    <li id="tj" name="tianjin">天津</li>
</ul>
您爱好的游戏:<br>
<ul id="game">
    <li id="fk" name="fakong">反恐</li>
    <li id="cq" name="chuangqi">传奇</li>
</ul>
<p>Hello</p> how are <p>you?</p>
<p name="test">Hello, <span>Person</span> <a href="#">and person</a></p>
<input type="button" value="删除所有 p" id="b1"/>
<input type="button" value="所有 p 清空" id="b2"/>
<input type="button" value="删除上海这个 li" id="b3"/>
</body>
</html>

6.4复制节点

0 条评论
请不要发布违法违规有害信息,如发现请及时举报或反馈
还没有人评论呢,速度抢占沙发!
相关文章
  • JQuery04 6.jQuery的DOM操作02 6.9常用遍历节点方法 取得匹配元素的所有子元素组成的集合:children(),该方法只考虑子元素而不考虑任何后代元素 取得匹配元素后面的...

  • honeySwitch提供了类似手机switch开关的效果风格,它不仅适用于PC端,也适用于移动端。index.html Honey Switch ...

  • jQuery05 9.作业 9.1homework01 对多选框进行操作,输出选中的多选框的个数,并且把选中爱好的名称显示。 homework01 ...

  • jQuery01 参考文档1:jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm (cuishifeng.cn) ...

  • JQuery动态生成的按钮无法触发问题与解决方法 起因: 利用JQuery动态添加的按钮无法通过$(selector).click方法触发点击事件 //在网页加载完成后动态添加表格 $(functio...

  • 在项目开发过程中,在对元素进行样式控制时应用到的方法如下: function showOthers(obj){ // 通过jquery方式获取元素值 var type = $(obj).att...

  • JQuery02 4.jQuery选择器02 4.3过滤选择器 4.3.1基础过滤选择器 $("li:first") //第一个li $("li:last") //最后一个li $("l...

  • 基于jQuery的三种AJAX请求 1. 介绍 get请求 通常用于 获取服务端资源(向服务器要资源) 例如:根据URL地址,从服务器获取HTML文件、CSS文件、JS文件、图片文件、数据资...

  • 🍀作者主页:在下周周ovo 🍀系列专栏:从零开始百天学习前端基础 🍀其他平台:博客园 1️⃣前言:jQuery必备网站 jQuery下载地址 jQuery中文文档 jQuery插件库 1️...

  • JavaScript/jQuery 如何清空重置选择文件控件 input[type="file"]?请看代码JS://选择 input 元素 const input = document.queryS...

  • 1、安装jquery npm i jquery -D 2、在webpack.base.conf.js里加入 var webpack = require("webpack") 3、在module.exp...