jQuery基础-DOM篇1

一、.html(),.text(),.val()

1、.html(),.text(),.val()三种方法都是用来读取选定元素的内容；只不过.html()是用来读取元素的html内容（包括html标签），.text()用来读取元素的纯文本内容，包括其后代元素，.val()是用来读取表单元素的"value"值。其中.html()和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上；另外.html()方法使用在多个元素上时，只读取第一个元素；.val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的"value"值，但是.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。

2、.html(htmlString),.text(textString)和.val(value)三种方法都是用来替换选中元素的内容，如果三个方法同时运用在多个元素上时，那么将会替换所有选中元素的内容。

3、.html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。

二、.addClass与.css方法

.addClass与.css方法各有利弊，一般是静态的结构，都确定了布局的规则，可以用addClass的方法，增加统一的类规则

如果是动态的HTML结构，在不确定规则，或者经常变化的情况下，一般多考虑.css()方式

通过.css方法设置的样式属性优先级要高于.addClass方法

.addClass()本质只是针对class的类的增加删除，不能获取到指定样式的属性的值，.css()可以获取到指定的样式值。

 

三、jQuery提供的存储接口：

  jQuery.data( element, key, value )   //静态接口,存数据

  jQuery.data( element, key )  //静态接口,取数据   

  .data( key, value ) //实例接口,存数据

  .data( key ) //实例接口,存数据

 删除：

  jQuery.removeData( element [, name ] )

  .removeData( [name ] )

四、外部插入：

  after向元素的后边添加html代码，如果元素后面有元素了，那将后面的元素后移，然后将html代码插入

before向元素的前边添加html代码，如果元素前面有元素了，那将前面的元素前移，然后将html代码插

内部插入：

append()前面是要选择的对象，后面是要在对象内插入的元素内容

appendTo()前面是要插入的元素内容，而后面是要选择的对象

对于.prepend() 而言，选择器表达式写在方法的前面，作为待插入内容的容器，将要被插入的内容作为方法的参数

而.prependTo() 正好相反，将要被插入的内容写在方法的前面，可以是选择器表达式或动态创建的标记，待插入内容的容器作为参数。

内部操作四个方法的区别：

append()向每个匹配的元素内部追加内容

prepend()向每个匹配的元素内部前置内容

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

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

外部操作四个方法的区别：

.before()和.insertBefore()实现同样的功能。主要的区别是语法——内容和目标的位置。 对于before()选择表达式在函数前面，内容作为参数，而.insertBefore()刚好相反，内容在方法前面，它将被放在参数里元素的前面

.after()和.insertAfter()实现同样的功能。主要的不同是语法——特别是（插入）内容和目标的位置。 对于after()选择表达式在函数的前面，参数是将要插入的内容。对于.insertAfter(), 刚好相反，内容在方法前面，它将被放在参数里元素的后面

before、after与insertBefore。insertAfter的除了目标与位置的不同外，后面的不支持多参数处理

insertAfter将JQuery封装好的元素插入到指定元素的后面，如果元素后面有元素了，那将后面的元素后移，然后将JQuery对象插入；

insertBefore将JQuery封装好的元素插入到指定元素的前面，如果元素前面有元素了，那将前面的元素前移，然后将JQuery对象插入；

$('<p style="color:red">测试insertBefore方法增加</p>', '<p style="color:red">多参数</p>').insertBefore($(".test1"))

$('<p style="color:red">测试insertAfter方法增加</p>', '<p style="color:red">多参数</p>').insertAfter($(".test2"))