【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);//设置距离

相关文章