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

大家好，这里是「从零开始学 Web 系列教程」，并在下列地址同步更新……

github：https://github.com/Daotin/Web

博客园:http://www.cnblogs.com/lvonve/

CSDN：https://blog.csdn.net/lvonve/

在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！

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

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

append，appendTo ：在被选元素所有子元素的结尾插入内容（增加子元素）。

prepend，prependTo：在被选元素所有子元素的开头插入元素（增加子元素）。

before：在当前被选元素之后插入内容（相当于增加兄弟元素）。

after：在当前被选元素之前插入内容（相当于增加兄弟元素）。

语法：

案例：动态创建列表

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

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

语法：

3、元素的删除

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

语法1：

语法2：

3.2、清除单个子元素

语法：

二、元素 value 属性的操作

一般 是获取表单的 value 属性；

设置表单的 value 属性。

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

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

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

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

1、使用 val() 进行设置之后，在源码中 value 的值没有改变，但是打印出来的值改变了。

2、使用 text() 行设置之后，在源码中 value 的值也改变了。

3、成对的标签可以使用 text() 方法来获取和设置，推荐使用 text();

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

1、获取下拉框的 value 属性，就是获取 option 的 value 的值

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

三、自定义属性

1、attr

语法：

示例：

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

2、操作元素的选中 checked 属性，推荐使用 prop 方法。

自定义属性的选中问题

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

2、prop

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

语法：

示例：

案例：全选与全不选

0、 细线表格。

1、子类复选框的集合在 prop 和 click 中会自动遍历操作。

2、 中 和 中间有空格，表示的是 类 tb 下面的子元素集合中带有 checked 的元素，而没有空格表示，设置了类 tb 的所有元素集合中带有 checked 的元素。一个是 tb 下面的子元素集合中，一个是 tb 自身元素集合中。

欢迎关注

Web前端之巅

念念不忘，必有回响。