从零开始学 Web 之 jQuery(四)元素的创建添加与删除,自定义属性

一、元素的创建添加和删除

1、方式一:以对象的方式创建元素

  • append,appendTo :在被选元素所有子元素的结尾插入内容(增加子元素)。
  • prepend,prependTo:在被选元素所有子元素的开头插入元素(增加子元素)。
  • before:在当前被选元素之后插入内容(相当于增加兄弟元素)。
  • after:在当前被选元素之前插入内容(相当于增加兄弟元素)。

语法:

// 元素的创建
$("html代码"); 
// $("<a herf='http://fengdaoting.com'>Daontin</a>")

// 元素的添加(被动)
父元素.append(子元素); // $("#dv").append($("<a>...</a>"));
// 元素的添加(主动)
子元素.appendTo(父元素); // $("<a>...</a>").appendTo($("#dv"));

案例:动态创建列表

<script>
    $("#btn1").click(function () {
        var ulObj = $("<ul></ul>");
        // 创建ul添加到div
        $("#dv").append(ulObj);

        // 创建li添加到ul,并设置鼠标进入离开事件
        $("<li>鸣人</li><li>卡卡西</li><li>佐助</li>").appendTo(ulObj).mouseenter(function () {
            $(this).css("backgroundColor","yellow");
        }).mouseleave(function () {
            $(this).css("backgroundColor","");
        });
    });
</script>

注意:获取的元素通过 append 或者 appendTo 的方式添加到另一个元素的时候,相当于剪切。如果要保留获取的元素,可以在 append 或者 appendTo 之前使用克隆 clone() 方法。

2、方式二:以字符串的方式创建元素

语法:

父元素.html("html代码");
// $("#dv").html("<a herf='http://fengdaoting.com'>Dao</a>");

3、元素的删除

3.1、清除父元素中所有的子元素

语法1:

父元素.html("");

语法2:

父元素.empty();

3.2、清除单个子元素

语法:

子元素.remove();

二、元素 value 属性的操作

一般 val() 是获取表单的 value 属性; val(值); 设置表单的 value 属性。

示例1:获取设置文本框value的值

<input type="text" value="text" id="txt">
 //------------------------------------------
<script>
    $("#btn1").click(function () {
        // 获取文本框的value属性值
        console.log($("#txt").val());
        // 设置文本框的value属性值
        $("#txt").val("text2");
    });
</script>

示例2:获取设置单选框value的值

<input type="radio" value="1" name="sex" id="nan">男
<input type="radio" value="2" name="sex">女
//-----------------------------------------------
console.log($("#nan").val());
$("#nan").val("3");

示例3:获取设置复选框value的值

<input type="checkbox" value="1">吃饭
<input type="checkbox" value="2" id="c1">睡觉
<input type="checkbox" value="3">大豆豆
//---------------------------------------
console.log($("#c1").val());
$("#c1").val("33");

示例4:获取设置文本域value的值

<textarea name="text" id="t1" cols="30" rows="10">
    等你下课
</textarea>
//------------------------------------------------
console.log($("#t1").val()); // 等你下课
$("#t1").val("Jay"); 
console.log($("#t1").val()); // Jay

// 成对的标签可以使用 text() 方法来获取和设置
console.log($("#t1").text());// 等你下课
$("#t1").text("Jay");
console.log($("#t1").text());// Jay

1、使用 val() 进行设置之后,在源码中 value 的值没有改变,但是打印出来的值改变了。 2、使用 text() 行设置之后,在源码中 value 的值也改变了。 3、成对的标签可以使用 text() 方法来获取和设置,推荐使用 text();

示例5:获取设置下拉框value的值

<select id="s1">
    <option value="1">op1</option>
    <option value="2">op2</option>
    <option value="3">op3</option>
    <option value="4">op4</option>
    <option value="5">op5</option>
</select>
//-----------------------------------
console.log($("#s1").val());
$("#s1").val("3");
console.log($("#s1").val());

1、获取下拉框的 value 属性,就是获取 option 的 value 的值 2、设置下拉框的 value 属性,就是选中相应 value 值的 option 标签。

三、自定义属性

1、attr

语法:

元素.attr("自定义属性名","自定义属性值");

示例:

<div id="dv"></div>
//-------------------------------------------
$("#dv").attr("hello","world"); //<div id="dv" hello="world"></div>

$("#dv").attr("id","box"); //<div id="box"></div>

1、attr 方法主要操作元素的自定义属性的,但是也可以操作元素的自带属性。但是操作元素是否选中的 checked 属性时不合适。 2、操作元素的选中 checked 属性,推荐使用 prop 方法。

自定义属性的选中问题

元素.attr(); // 获取某个元素是否被选中的状态
元素.attr("checked",true); //设置某个元素为选中
<input type="radio" value="1" name="sex"  id="r1">男
<input type="radio" value="2" name="sex">女
//-----------------------------------------------
console.log($("#r1").attr("checked"));
$("#r1").attr("checked", true);

PS:attr 方法针对单选框和复选框的是否选中问题操作复杂(选中返回值为 checked,未选中返回值为 undefined,不是直接显示 true 或者 false 那么简单,并且反复操作多次易失效),几乎不用。

2、prop

主要用于获取元素的选中问题。

语法:

元素.prop("checked"); // 获取这个元素是否选中
元素.prop("checked",true/false); // 设置这个元素选中或不选中

示例:

<input type="checkbox" value="1">吃饭
<input type="checkbox" value="2" id="c1">睡觉
<input type="checkbox" value="3">大豆豆
//--------------------------------------------
console.log($("#c1").prop("checked")); // false
$("#c1").prop("checked", true); // true

案例:全选与全不选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        table {
            border-collapse: collapse;
        }

        td {
            width: 100px;
            height: 30px;
            background-color: #f8f8f8;
            border: 1px solid #7b7b7b;
            text-align: center;

        }

        .th td {
            background-color: #e95d71;
            color: #f8f8f8;
        }

        .little-td {
            width: 50px;
        }

    </style>
</head>
<body>
<div id="dv">
    <table class="table">
        <thead class="th">
        <tr>
            <td class="little-td"><input type="checkbox"></td>
            <td>Web技术</td>
        </tr>
        </thead>

        <tbody class="tb">
        <tr>
            <td class="little-td"><input type="checkbox"></td>
            <td>Web技术</td>
        </tr>
        <tr>
            <td class="little-td"><input type="checkbox"></td>
            <td>Web技术</td>
        </tr>
        <tr>
            <td class="little-td"><input type="checkbox"></td>
            <td>Web技术</td>
        </tr>
        <tr>
            <td class="little-td"><input type="checkbox"></td>
            <td>Web技术</td>
        </tr>
        </tbody>
    </table>
</div>


<script src="jquery-1.12.4.js"></script>
<script>
    // 设置总的复选框对子复选框的影响
    $(".th input").click(function () {
        $(".little-td input").prop("checked", $(this).prop("checked"));
    });

    // 设置每一个子复选框事件
    $(".little-td input").click(function () {
        var childLength = $(".tb").find("input").length;//总的子复选框的个数
        var actualLength = $(".tb :checked").length;// 已经选中的子复选框的个数
        $(".th input").prop("checked", childLength === actualLength);
    });
</script>
</body>
</html>

0、border-collapse: collapse; 细线表格。 1、子类复选框的集合在 prop 和 click 中会自动遍历操作。 2、var actualLength = $(".tb :checked").length;.tb:checked 中间有空格,表示的是 类 tb 下面的子元素集合中带有 checked 的元素,而没有空格表示,设置了类 tb 的所有元素集合中带有 checked 的元素。一个是 tb 下面的子元素集合中,一个是 tb 自身元素集合中。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏菜鸟计划

javascript 事件基础

一:事件流       事件流描述的是从页面中接收事件的顺序。 ? ?  事件冒泡 <div id="one"> <div id="tw...

3675
来自专栏web前端-

HTML基础知识

  属性的作用就是就为元素提供更多的信息,大多数元素都可以拥有属性    属性的语法:<标签 属性1=参数1>   注意空格的使用

4573
来自专栏从零开始学 Web 前端

从零开始学 Web 之 jQuery(七)事件冒泡,事件参数对象,链式编程原理

事件冒泡:当一个元素触发某个事件的时候,会把这个事件传播到其父元素,一直到顶层元素。

1334
来自专栏前端说吧

JS-DOM对象知识点汇总(慕课)

3017
来自专栏沈唁志

jQuery中的9个选择器

1502
来自专栏python3

tkinter -- button1

Tkinter Relief styles: 构件的浮雕式是指某些模拟的3-D周围的部件外的影响

1294
来自专栏老马寒门IT

02-老马jQuery教程-jQuery事件处理

1. 绑简单事件 在DOM中DOM0级绑定事件的方式是直接给事件属性赋值,但是这样有个缺点就是每次指定的事件处理程序会把之前的覆盖掉。 jQuery简单绑定事件...

1888
来自专栏一个会写诗的程序员的博客

CSS 弹性布局 flex 属性详解

定义了当flex容器有多余空间时,item是否放大。默认值为0,即当有多余空间时也不放大;可能的值为整数,表示不同item的放大比例,如

873
来自专栏老马寒门IT

02-老马jQuery教程-jQuery事件处理

在DOM中DOM0级绑定事件的方式是直接给事件属性赋值,但是这样有个缺点就是每次指定的事件处理程序会把之前的覆盖掉。

2310
来自专栏落花落雨不落叶

关于Html与css的一些解释

32012

扫码关注云+社区

领取腾讯云代金券