从零开始学 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前端之巅

念念不忘,必有回响。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180709G1MQ1I00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券