jQuery学习笔记（二）

jQuery DOM 小结

结点

创建结点

var $p = $("<p title='sb'>这是一个jqurey创建的结点</p>")，直接使用html字符串来创建DOM结点。

插入结点

$("body").append($p):将结点作为body的最后一个结点插入
$("body").prepend($p):将结点作为body的第一个结点插入
$("#id1").before($p):将结点插入到id为id1的结点的前面
$("#id1").after($p):将结点插入到id为id1的结点的后面
$($p).appendTo("body"):将结点作为body的最后一个结点插入
$($p).prependTo("body"):将结点作为body的第一个结点插入
$($p).insertBefore("#id1"):将结点插入到id1的前面
$($p).insertAfter("#id1"):将结点插入到id1的后面

注意：后面4种方法可以移动元素。即先删除，再添加

删除结点

$(“ul li:eq(1)”).remove():删除ul的第2个li
$("ul li").remove("li:eq(1)"):删除ul的第2个li
$("ul").empty():清空ul中的元素，只剩下ul标签
$("ul").detach():这个只是删除ul，并不清除ul上面绑定的事件，其余的跟remove一样

克隆结点

$("#id1").clone(true):克隆结点（可以是多个），有没有参数true的区别在于是否保存结点上的事件等等

包裹结点

$("p").wrap("<b></b>"):用标签b将每一个标签p包裹起来
$("p").wrapAll("<b></b>"):用标签b将所有的p包裹起来，如果有中间有其他的元素，则将其放到后面
$("p").wrapInner("<b></b>"):用标签将p内的内容包裹起来，b标签将紧挨着放在p标签内部

替换结点

$(“#id1”).replaceWith($p): 使用结点p替换id1结点
$($p).replaceAll("#id1"): 使用结点p替换id1结点

遍历结点

$("#id1").parent():id1结点的父节点
$("#id1").parents("ul"):id1结点的祖先结点中所有的ul标签元素
$("#id1").closest("ul"):id1结点的祖先结点的第一个匹配的ul标签元素
$("#id1").children("ul"):id1结点的子结点中的ul结点
$("#id1").siblings("ul"):id1兄弟结点中的所有的ul结点
$("#id1").next("ul"):id1后面的兄弟结点的第一个ul结点
$("#id1").nextAll("ul"):id1后面的兄弟结点中的所有ul结点，注意跟siblings不一样
$("#id1").prev("ul")和$("#id1").prevAll("ul"):同next，只是prev选的是前面的结点

属性

获取属性

$("#id1").attr("name"):获取id1结点的name属性

设置属性

$("#id1").attr("name", "sam"):设置id1结点的name属性为sam
$("#id1").attr({"name": "sam", "title": "niubi"}): 设置id1结点的多个属性

删除属性

$("#id1").removeAttr():删除id1结点的所有属性
$("#id1").removeAttr("name"): 删除id1结点的name属性

内容

获取内容

$("#id1").html():获取id1结点的innerHTML值
$("#id1").text():获取id1结点的文本值
$("#id1").val():获取id1(应为表单元素)的value值

注意：如果有多个匹配项，那么只返回第一个匹配项的值

设置内容

同获取内容的方法，但是应为其设置一个字符串值

类class

添加css类

$("#id1").addClass("class1"): 为id1结点添加一个class1的类

删除css类

$("#id1").removeClass("class1 class2"): 为id1结点移除类（可以是多个）

切换css类

$("#id1").toggleClass("class1"): 为id1结点切换类，有则删，无则添。
$("#id1").toggleClass("class1", true): 为id1结点切换类，true则添，false则删

样式

获取一般样式值

$("#id1").css("color"):获取id1结点的color值

设置一般样式值

$("#id1").css("color", "red"):设置一个样式的值
$("#id1").css({"color": "red", "back-ground-color": "red"}):设置多个样式的值

注意：设置多个样式的值时，如果键没有用引号引起来，那么需要使用小驼峰式键值，如果有引号，可以使用小驼峰式或者带-的方式，建议都使用引号

宽高的设置和获取

直接使用.height和.width方法即可。

定位相关

.position()方法：返回一个对象Object(top,left)，表示某个结点相对于父元素的偏移
.offset()方法：返回一个对象Object(top, left),表示某个结点相对于当前视窗的偏移