1、创建属性:在DOM规范中,属性节点比较特殊,用户无法通过node对象提供的方法遍历或者定位属性节点,必须使用element对象定义的特定方法来创建和访问属性节点。jQuery创建属性节点和创建文本节点类似。如创建一个h1元素及创建title属性和class属性为例:
$(function(){
$('body').append("<h1 class= 'red' title= '一级标题'>DOM文档对象模型</h1>");
});
2、插入元素:在节点内部插入元素的方法:
append():向每个匹配的元素内部追加内容。
prepend():向每个匹配的元素内部前置内容
appendTo():把所有匹配的元素追加到另一个指定的元素集合中。该方法颠倒了append()的用法
prependTo():把所有匹配的元素前置到另一个指定的元素集合中。该方法颠倒了prepend()的方法
例:
$(function(){
$('div').append('<ul></ul>'); //在div内部后面加一个ul元素,prepend的方法类似,是被插在之前。后两个方法则颠倒过来使用
});
在元素节点外部插入内容:
after():在每个匹配元素之后插入内容
before():在每个匹配元素之前插入内容
insertAfter():把所有匹配的元素插入到另一个指定的元素集合的后面(与appendTo方法类似)
insertBefore():把所有匹配的元素插入到另一个指定的元素集合的前面(与prependTo方法类似)
例:$(function(){
$('div').after("<p>最后一段文本</p>"); //在div元素后面插入文本
$('div').before("<p>第一段文本</p>"); //在div元素前面插入文本
});
3、删除元素:
remove():从DOM中删除所有匹配的元素
empty():删除所有匹配的元素集合中所有的子节点
4、复制元素: jQuery定义了clone()方法用来复制节点,与之对应的DOM定义了cloneNode()方法来实现相同的操作功能。例:
$(function(){
$('div').click(function(){
$('div').clone().inserAfter('div'); //复制匹配的div元素,并将其添加到当前div元素的后面
});
});
5、替换元素:replaceWith()方法能够将所有匹配的元素替换成指定的html或DOM元素,replaceAll()方法功能相同,但是操作相反。
$(function(){
$("p").replaceWith("<div>盒子</div>"); //替换所有p元素为div元素
});
$(function(){
$("<div>盒子</div>").replaceAll("p"); //替换所有p元素为div元素,与上面的操作相反。
});
6、包裹元素:jQuery定义了3种包裹元素的方法:wrap()、wrapAll()、wrapInner()方法。这些方法的主要区别就在于包裹的形式不同。例如使用wrap方法为p元素包裹span元素,则文档中的每个p元素都会被一个span元素包裹。如果使用wrapAll方法,则连续一起的p元素被一个span元素包裹。如果使用wrapInner方法,则span元素被包裹在p元素内部。
7、操作属性:jQuery使用attr()方法设置元素的属性。该方法有两个参数,当只设置一个参数时,表示读取参数指定名称的属性值。当设置两个参数时,第一个参数指定属性名,第二个参数指定属性值。
$(function(){ //设置属性值
$('p').attr('title','段落文本');
});
$(function(){ //获取属性值
alert($('p').attr('title')); //弹出段落文本的信息
});
8、删除属性:jQuery定义了removeAttr()方法删除指定的元素属性。例:
$( function() { $('p').removeAttr('title'); });
9、操作类样式:jQuery定义了addClass()方法来为元素添加样式,removeClass()方法来移除指定类名的样式
$(function(){ $('p').addClass('red'); }); //为p元素追加类样式。removeClass()方法的使用方法类似
10、切换样式:jQuery的toggleClass()方法包含两个参数,第一个参数指定座位开关的类样式名称,第二个用于决定元素是否打开类样式。如果没有设置第二个参数,则toggleClass方法根据指定元素是否存在来决定参数设置的样式。如果存在,则清除该样式,如果不存在,则添加该样式,实现动态切换效果。
11、判断样式:hasClass()方法用来判断元素是否包含指定的类样式。
12、操作HTML、文本和值:
(1)、读写html字符串:jQuery定义了html()方法,该方法可以以字符串形式读写html文档结构。当html()方法不包含参数时,表示以字符串形式读取指定节点下的所有html结构;当html()方法包含参数时,表示指定节点下写入html结构字符串,同时覆盖该节点原来所包含的所有内容
(2)、读写文本内容:jQuery定义了text()方法用来读写指定元素下包含的文本内容,这些内容主要是指文本节点包含的数据。当该方法不包含参数时,表示以字符串形式读取指定节点下的所有文本内容;当包含参数时,表示向指定节点下写入文本字符串,同时会覆盖该节点原来包含的所有文本内容。
(3)、读写表单的值:jQuery定义了val()方法来读写表单元素包含的值。当val方法不包含参数时,调用此方法表示将读取指定表单元素的值;当包含参数时,调用此方法表示向指定表单元素写入值
13、绝对偏移位置:jQuery定义了offset()方法,该方法能够获取匹配元素在当前窗口的偏移。该方法没有参数,返回值为一个对象,包含两个属性:top和left属性,切该方法仅对可见元素有效。
14、相对偏移:所谓相对偏移位置就是指定元素距离最近父级定位元素(只被定义了相对、绝对火固定定位的元素)左上角的偏移距离。jQuery定义了position()方法,该方法可以获取匹配元素的相对偏移位置,与offset()方法用法相同,都返回一个包含两个属性的对象。
15、元素的宽和高:jQuery定义了width()和height()方法来读写元素的宽和高。这两个方法在没有设置参数时,表示读取元素的宽和高,返回值的单位为像素;设置了参数时表示设置元素的宽和高,默认单位值为像素。
除了width()和height()方法之外,还有innerHeight()、innerWidth()、outerWidth()、outerHeight()方法。这些方法实际上是在width和height方法的基础上,计算了元素的边框和边距。outerWidth()、outerHeight()方法能够返回元素的总宽和总高(包括宽高、边距和边框),innerHeight()、innerWidth()方法能够返回元素的内容高度和宽度(包括宽高和边距)
16、元素的遍历方法:jQuery定义了children()、next()、prev()和parent()四个基本元素便利方法。children()方法获取当前元素包含的所有子元素,next()方法获取当前元素相邻的下一个同级元素,prev()方法获取当前元素相邻的上一个同级元素,parent()方法获取当前元素的父元素。不过这些方法返回的都是jQuery对象,而不是DOM对象或集合
17、要在每个匹配的元素外部插入新元素,使用:
.wrap(),.wrapAll(),.wrapInner()
例如:要将一个元素包裹在另一个元素中时:
$(document).ready(function(){
$('span.footnote').insertBefore('#footer').wrapAll('<ol id="notes"></ol>').wrap('<li></li>');
});