JQuery学习笔记(3)——节点操作 节点查找

插入节点

内部插入

所谓的内部插入,就是指在节点里面的插入,而外部插入,则是在节点外面插入。

  • append()
  • prepend()
  • appendTo()
  • prependTo()

append和prepend是相反的
后面以To结尾的,参数为被插入内容的节点

append可以理解为尾部插入,prepend为头部插入

//在div里面的内容,末尾再追加一个p标签,插入的p标签在div所有子元素的末尾
$("#mydiv").append($("

末尾插入

")); //在div里面的内容,头部追加一个p标签,插入的p标签位于div的所有子元素的首位 $("#mydiv").prepend($("

头部插入

")); //下面两种鱼上面的效果是一样的,只是调用的对象和参数这两者换了位置 $("

末尾插入

").appendTo($("#mydiv")); $("

头部插入

").prependTo($("#mydiv"));

外部插入

  • after()
  • before()
  • insertAfter()
  • insertBefore()

这里,使用方法与之前的内部插入类似

//div之后插入一个p标签,p标签和div是同级关系
$("#mydiv").after($("

末尾插入

")); //div之前插入一个p标签,p标签和div是同级关系 $("#mydiv").before($("

头部插入

")); //把p标签插入到div之后,同级 $("

末尾插入

").insertAfter($("#mydiv")); //把p标签插入到div之前,同级 $("

末尾插入

").insertBefore($("#mydiv"));

替换节点

下面的两个方法,效果一样,只是调用对象和目标相反

  • replaceWith(content|fn)
$('div.second').replaceWith('

New heading

');
  • replaceAll(selector)
$('

New heading

').replaceAll('.inner');

删除节点 克隆节点

删除节点

  • empty()
    删除节点下面的所有元素,只保留节点
  • remove([selector])
    删除节点,包括节点本身,可以添加选择器进行过滤
  • detach([selector])
    删除节点,但保留节点属性,可以添加选择器进行过滤

克隆节点

clone()

var btn = $('#mybutton').clone();
//在添加到某个节点之前可以修改属性
btn.css({background:red});
btn.appendTo($('#mydiv'));

查找节点

我们获得一个节点,想要获取它的子节点或者父节点,都是属于查找节点

下列的方法,未标明返回类型的,都是返回一个JQuery对象

过滤

  • first() 获得第一个节点
  • last() 获得最后一个节点
  • boolean hasClass() 获得包含有某个样式的节点

上面的div有两个样式,使用hasClass,参数为两个的样式中的一个,都会返回true

$('#mydiv').hasClass('foo') 返回true
$('#mydiv').hasClass('bar') 返回true
  • has(selector) 获得包含某个元素的节点
    $('ul').has('li').css(); ul中包含有li的ul的css会被修改

    查找

    • find(selector) 查找后代元素
    • children(selector) 只查找子元素
    • eq(index) 获得节点里指定索引的子元素(调用的jQuery对象包含多个元素)
    $('tbody').eq(2)  //0开始,索引为
    $('tbody').eq(-1) //倒数第一个

    你可能感兴趣的:(JQuery学习笔记(3)——节点操作 节点查找)