JQ操作DOM、CSS

JQ操作DOM、CSS

操作DOM

创建节点

• js创建节点

	var li1 = document.createElement("li");

• jq创建节点

	var $li = $("<li>榴莲</li>");

添加节点

• 内容.appendTo(目标)
  将内容添加到目标中的最后一位

    $("<li>芒果</li>").appendTo("ul");

• 目标.prepend(“内容”)
  将内容添加到目标的第一位

	$("ul").prepend("<li>西瓜</li>");

• 目标.after(内容)
  在指定的元素之后插入元素

	$(".box").after("<span class='s'>上面卖的是假货</span>");

• 内容.insertAfter(目标)
  将内容添加到目标之后；如果该内容是页面已有元素，这些元素会被移动到指定的位置

	$("ul").insertAfter($(".box"));

• 目标.before(内容)
  在指定的元素之前插入元素

	$(".box").before("<span>我是新来的span</span>");

• 内容.insertBefore(目标)
  将内容添加到目标之前；如果该内容是页面已有元素，这些元素会被移动到指定的位置

	$(".s").insertBefore($(".box"));

删除节点

• 指定目标.remove()
  删除指定目标元素

	$(".s").remove();

• 目标.empty()
  清空目标的子节点，但不对目标自身造成影响

	$("ul").empty();

复制节点

目标.clone()
复制， 会返回指定目标的复制体，需要接受或者直接使用

	var $b = $(".box").clone();
	$b.appendTo($("body"));

操作CSS

通过jq获取HTML元素

	var oDiv = $(".box");

设置css样式

css(参数1,参数2);
参数1： 属性名
参数2： 属性值
只有参数1时 ： 会返回值指定属性名的值
有两个参数时： 会修改修改指定属性名的值
一个参数是获取，两个参数是修改

	console.log($(".box").css("width"));
	$(".box").css("background","yellow");

jq的优点之一

	//	链式编程
	$(".box").css("color","red").css("fontSize","30px");

链式写法的简单方式 – 对象
冒号赋值， 逗号间隔
最后一个属性结尾，不需要任何符号

	$(".box").css({
		width:'100px',
		height:'100px',
		color: 'green'
	});