jq -- 节点操作

最新推荐文章于 2021-02-02 22:41:28 发布

bylifan

最新推荐文章于 2021-02-02 22:41:28 发布

阅读量219

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/bylifan/article/details/100829002

前端专栏收录该内容

35 篇文章

订阅专栏

创建节点:

    // 创建节点1:      $("标签")             :类比于js中的document.createElement("li");
    console.log($("<li class='aaa'>我是li标签</li>"));


    // 创建节点2:      $("ul").html("");     :类比innerHTML属性。因为此属性，识别标签。
    $("ul").html("<li>我是html方法穿件出来的li标签</li>")

添加节点:

var jqNewLi = $("<li>我是jquery创建出来的li。用的是append方法添加</li>");

   //在盒子末尾添加
$("ul").append(jqNewLi);    //把新创建的li塞进ul中
// jqNewLi.appendTo($("ul")); //把新创建的li塞进ul中

   //在盒子最前面添加
// $("ul").prepend(jqNewLi);
// jqNewLi.prependTo($("ul"));

// 克隆节点
var newUl  = $(".box ul:eq(0)").clone();
$(".box").append(newUl);

删除 , 清空节点:

// 将ul里面的html全部清除
$("ul").empty();

// 删除指定的节点
$("li:eq(0)").remove();

attr()修改属性值:

// 两个参数,修改属性的值
$("div").attr("width","180");

// 单个参数,获取属性的值
$("div").attr("width");

attr与prop区别:

prop()一般用来获取元素自带的属性 , 入input的checked

attr()一般自定义的属性