一、创建节点
1. 创建空节点
var $li=$("<li></li>")
2. 创建带文本的节点
var $li=$("<li>文本</li>")
var $li=$("<li title='text'>文本</li>")
二、插入节点
1. append: 插入子节点至父元素末尾
$("ul").append($li)
2. prepend: 插入子节点至父元素开头
$("ul").prepend($li)
3. insertBefore insertAfter移动节点
//(待移动的节点).insertBefore(参考点)
$("ul li:eq(1)").insertBefore($("ul li:eq(0)")) //将第二个li移动到第一个li之前
$("ul li:eq(0)").insertAfter($("ul li:eq(1)")) //将第一个li移动到第二个li之前
4. after/before 将子节点插入到指定的节点之前/之后
$("li").after("<li>这是新插入的节点1</li>")
$("li:first").before("<li>这是新插入的节点2</li>")
三、清空节点
empty 将元素中的子元素和文本清空
$("li").parent().empty();
四、删除节点
remove 删除所有匹配的元素
这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外,其他的比如绑定的事件,附加的数据等都会被移除。
$("li").remove()
五、克隆节点
clone(true/false)克隆匹配的DOM元素
true 是克隆出来的副本还可以继续克隆,false只能克隆一次,不写默认为false
$("li").clone(true).appendTo($("ul")) //将li克隆后在插入ul中
六、替换节点
replaceWith()将所有匹配的元素替换成指定的HTML或DOM元素。
$("p").replaceWith("<strong title='sport'>你最不喜欢的运动是</strong>")
七、包裹节点
1.wrap() 将匹配元素用其它元素包裹起来
$("strong").wrap("<b></b>"); //将strong用b标签包裹起来
2. wrapAll() 将所有匹配元素用单个元素包裹起来
$("a").wrapAll("<p></p>"); //给所有选择器包裹标签
3. wrapInner() 将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
$("li").wrapInner("<span></span>"); //给标签里面的内容包裹
八、操作属性
attr()设置/改变/获取/删除匹配元素的属性
$("p").attr("title","这是p标签"); //设置
alert($("p").attr("title")); //获取
$("p").attr("title","please choose your favouite fruit."); //改变
$("p").removeAttr("title","选择你最喜欢的水果."); //删除
设置多个属性
$("a").attr({
"href":"http://www.sohu.com",
"title":"sohu",
"target":"_blank",
})
九、操作样式
设置单个样式
$("div").css("width","200px");
设置多个样式
$("div").css({
"display":"block",
"width":"200px",
"height":"200px",
"background":"red",
})
offset获取匹配元素在当前视口的相对偏移
返回的对象包含两个整型属性:top 和 left,以像素计
var left=$("div").offset().left;
var top=$("div").offset().top;
十、获取元素的值
1. html() 获取元素中的代码(包括标签)
括号内传递参数表示设置内容
alert($("p").html());
1. text() 只获取元素中的文本(不包括标签)
括号内传递参数表示设置内容
alert($("p").text());
3. 获取/设置表单元素的值
$(":text").val()