jq中CSS及DOM操作

通过jq获取HTML
var oDiv = $(".box");
设置css样式 css(参数1,参数2);
参数1：属性名
参数2：属性值
只有一个参数时，会返回指定属性名的值(获取)，有两个参数时，修改指定名的值(修改)。

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'
     });

js创建节点

var lis = document.createElement("li")；

jq创建节点

 var $li = $("<li>内容</li>");

jq添加节点
方法一：内容.appendTo(目标)；将内容添加到目标中的最后一位

$li.appendTo($("ul"));

方法二：目标.prepend（内容）添加到目标中的第一位

 $("ul").prepend("<li>内容</li>");
 $("ul").prepend("<li>内容</li>");

after（）：在指定的元素之后插入元素
目标.after（内容）；

$(".box").after("<span class='cla'>内容</span>")

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

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

目标.before(内容) :将内容添加到目标之前

$(".box").before("<span>将内容添加到目标之前</span>");

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

扫描二维码关注公众号，回复： 9030545 查看本文章

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

删除节点指定目标.remove()

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

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

$("ul").empty();

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

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

发布了96 篇原创文章 · 获赞 26 · 访问量 7299

私信关注