Jquery操作简单的认识

Jquery操作简单的认识

JQuery DOM操作

1.内容&属性操作

 1.1内容

方法：

Text()：设置或返回所选元素的文本内容就是开始标签与结束标签之间的文本内容

Html()：设置或返回所选元素的内容(包括HTML标记)就是类似于js当中的HTML的innerHTML;

Val()：设置或返回表单字段的值。

例如：

2.元素属性的操作

1.2属性

方法：

attr():设置或返回被选元素的属性值

removAttr():从每一个匹配的元素中删除一个属性

prop():获取在匹配的元素集中的第一个元素的属性值也可以设置和返回元素的属性值。

RemovProp():删除由.prop()方法设置的属性

attr()与prop()的区别:

1. 对于HTML元素本身就带有的固有属性，在处理时，需使用prop方法。
2. 对于HTML元素我们自己自定义的DOM属性，在处理时，需使用attr方法。
3. 具有true和false两个值的属性，如checked，selected或者disabled，使用prop()。

Prop()函数的结果：有相应的属性，返回指定的属性值；否则返回空字符串；

Attr()函数的结果：有相应的属性，返回指定属性值，否则返回undefined·。

例如：

1.3CSS类

 方法：

addClass() 向被选元素添加一个或多个类

removeClass() 从被选元素删除一个或多个类

toggleClass() 对被选元素进行添加/删除类的切换操作

例如：

2、添加/删除/替换元素

2.1、添加元素

方法：

内部插入：append() ：在被选元素的结尾插入内容（结束标签之前插入）

appendTo() ：把所有匹配的元素追加到另一个指定的元素元素集合中。

prepend() ：在被选元素的开头插入内容（开始标签之后插入）

prependTo() ：把所有匹配的元素前置到另一个、指定的元素元素集合中。

外部插入：after()： 在被选元素之后插入内容

insertAfter() ：在被选元素后插入 HTML 元素

before() ：在被选元素之前插入内容

insertBefore() ：在被选元素前插入 HTML 元

 

包裹:

 wrap():指定的 HTML 元素来包裹每个被选元素

unwrap() 移除被选元素的父元素

wrapAll() 将所有匹配的元素用单个元素包裹起来 ，会破坏原有文档结构

wrapInner() 使用指定的 HTML 元素来包裹每个被选元素中的所有内容（innerHTML）

2.2、删除元素

方法

empty() ：从被选元素中删除子元素

remove() ：从 DOM 中删除所有匹配的元素，绑定的事件，附加的数据等都会被 移除

detach() ：从 DOM 中删除所有匹配的元素，所有绑定的事件、附加的数据等都会保留下来

2.3、替换元素

方法

replaceWith():将所有匹配的元素替换成指定的HTML或DOM元素。

replaceAll(): 用匹配的元素替换掉所有 selector 匹配到的元素。