【jQuery基础学习】02 jQuery的DOM操作

时间:2023-11-10 14:53:44

DOM操作分为3个方面:

  1. DOM Core    任何一种支持DOM Core的语言都可以使用它,比如getElementById就是DOM Core操作
  2. HTML-DOM  只能用来处理web文档
  3. CSS-DOM    针对CSS的操作

关于jQuery中的DOM操作

查找节点可以很轻易通过就jQuery选择器来找到,这里略过。

创建节点

var $myli= $('<li title="troy">troy123</li>');//创建jQuery对象
$("ul").append($myli);//将创建的DOM元素添加到ul中

插入节点

  • append()          向每个匹配的元素内部追加内容(上面已有示例)
  • appendTo()       将所匹配的元素追加到指定的元素中
    $myli.appendTo("ul");//改编自创建节点中的代码,效果一样
  • prepend()         向每个匹配的元素内部前置内容(与append相反,append是加在元素里子元素的后面)

  • prependTo()      将所匹配的元素追加到指定的元素中
  • after()              在每个匹配的元素之后插入内容,其实就是$("#liId").after($myli)的意思
  • insertAfter()      将所匹配的元素追加到指定的元素后面,同理,只不过不知道为什么没有写成afterTo,这样同一起来其实好理解一点
  • before()            在每个匹配的元素之前插入内容,其实就是$("#liId").before($myli)的意思
  • insertBefore()    将所匹配的元素追加到指定的元素前面,同理
    var $one_li=$("ul li:eq(1)");
    var $two_li=$("ul li:eq(2)");
    $two_li.insertBefore($one_li);//这样就实现了两个节点互换

删除节点

  • remove()   当某个节点调用remove方法后,该节点及其后代节点都会被删除。该方法的返回值是一个只想该被删除节点的引用。
    var $li= $("ul li:eq(0)").remove();
    $li.prependTo("ul");//结果没变化 $("ul li").remove("li[title=troy]");//选择性删除
  • detach()   和remove效果一样。但是用这个删除再像上面的例子那样插入的话,你会发现绑定在元素节点上的事件和附加的数据都还在,而remove的就不行。detach翻译为英文为拆分,似乎可以说明这就是为了先拿出来再插入的。
  • empty()   清空节点的所有后代节点

复制节点

  clone()方法进行复制节点,如果传参clone(true)就表示连节点的事件都会复制。

替换节点

我们当然可以先删后增来达到替换的效果,当然也有更简单的方法,那就是用replaceWith()和repalceAll();

包裹节点

$("strong").wrap("<b></b>");//每一个被匹配的<strong>元素都将被<b>包裹起来
$("strong").wrapAll("<b></b>");//所有被匹配到的<strong>元素被同一个<b>包裹起来
$("strong").wrapInner("<b></b>");//每一个被匹配到的<strong>元素的所有子元素都被一个<b>包裹起来

关于jQuery中的属性操作

var $myDiv=$("div");
var text=$myDiv.attr("title");//获取属性
$myDiv.attr("title","Troy123");//设置单个属性
$myDiv.attr({title:"Troy123",name:"Troy"});//设置单个属性
$myDiv.removeAttr("title");//删除属性

关于jQuery中的样式操作

  • attr("class")                       样式的获取和设置,$myDiv.attr("class")和$myDiv.attr("class","myClass")即可。
  • addClass("myClass")          追加样式。如果在不同的class中设置同一样式,那么后者覆盖前者。也就是说,此函数追加的样式中某一样式属性,如果在前面已经被某样式决定了,那么新的这个会覆盖旧的。
  • removeClass("myClass")     仅仅只删除myClass样式。而如果不要参数,直接$myDiv.removeClass(),那么将删除所有样式。
  • toggleClass("myClass")       当点击div时增加样式myclass,当再点击一次则移除,反复如此。
  • hasClass("myClass")           如果含有则返回true,如果没有则返回false。实际上在内部是用了$myDiv.is(".myClass")操作来实现。

设置和获取HTML、文本和值

  • html()        设置和获取某节点的html,玩法和attr()一样
  • text()         设置和获取某节点的文本内容,玩法同上
  • val()           设置和获取某节点的value属性,而val方法还能使select,checkbox和radio相应的选项被选中。
    $("#mySelect").val("选项2");//选中选项2
    $("#mulSelect").val(["选项2","选项3"]);//选中选项2,选项3
    $(":checkBox").val(["check2","check3"]);//选中value为check2和check3的多选框
    $(":radio").val(["radio1"]);//选中value为radio1的单选框
    //下面用attr方法实现
    $("#mySelect option:eq(1)").attr("selected",true);
    $("[value=radio2]:radio").attr("checked",true);

遍历节点

  • children()       该方法取得匹配元素的子元素集合,只取得子元素,不考虑后代元素
  • next()            取得匹配元素后面紧邻的同辈元素
  • prev()            取得匹配元素前面紧邻的同辈元素
  • siblings()       取得匹配元素前后所有的同辈元素
  • closest()        取得最近的匹配元素。先检查该元素是否匹配,不匹配就向上查父元素,有就返回匹配元素,无就返回空的jQuery对象
  • parent()        获取集合中每个匹配元素的父元素
  • parents()       获取集合中每个匹配元素的祖先元素,还可以加匹配参数
    $("#mydiv").parent();
    $("#mydiv").parents("div");
    $("#mydiv").closest("div");

CSS-DOM操作

css()方法无论是color属性,还是外部CSS导入,还是拼接在HTML的元素里,css方法都可以获取到属性style里的其他属性的值。

$("#mydiv").css("height");//获取样式高度值,可能为auto之类的
$("#mydiv").height();//获取真实高度值,必定为数值px

关于元素定位

  • offset()                             获取元素在当前视窗的相对偏移,其中返回的对象有两个属性:top和left。它只对可见元素有效。
    var myOffset=$("#mydiv").offset();
    var left=myOffset.left;
    var top=myOffset.top;
  • position()                          获取元素相对于最近的一个Position样式属性设置为relative或者absolute的祖先节点的相对偏移,也返回top和left。用法同上。
  • scrollTop()和scrollLeft()       获取和设置滚动条滑块距顶端和左侧的距离。
    $("#myTextArea").scrollTop();//获取距离
    $("#myTextArea").scrollTop(300);//设置距离