jQuery中的DOM操作

一,查找节点
  1,查找元素节点
  使用选择器 var $li = $("ul li:eq(1)");
  2,查找属性节点
  attr()方法,传人一个参数返回相应属性值,传人两个参数,设置相应属性
二,创建节点
  1,创建元素节点
  var $li_1 = $("<li></li>");
  $("ul").append($li_1);
  2,创建文本节点
  var $li_1 = $("<li>香蕉</li>");
  $("ul").append($li_1);
  3,创建属性节点
  var $li_1 = $("<li title="li">香蕉</li>");
  $("ul").append($li_1);
三,插入节点
  append():$(A).append(B),向元素A内部追加B
  appendTo():$(A).appendTo(B),向元素B内部追加A
  prepend():$(A).prepend(B),向元素A内部前置B
  prependTo():$(A).prependTo(B),向元素B内部前置A
  after():$(A).after(B),在A元素的后面添加B
  insertAfter():$(A).insertAfter(B),在B元素的后面添加A
  before():$(A).before(B),在A元素的前面添加B
  insertBefore():$(A).insertBefore(B),在B元素的前面添加A
四,删除节点
  1,remove()方法
  同时删除了其后代节点,删除了绑定的事件,返回一个指向已被删除的节点的引用,还可以继续使用
  可以通过传递参数选择性的删除
  2,detach()方法
  所有绑定的事件,附加的数据都会保留下来
  3,empty()方法
  清空节点,删除所有后代节点
五,复制节点
  clone(),传人参数true,表示同时复制了元素绑定的事件
六,替换节点
  replaceWith(),$("p").replaceWidth("<li></li>"),用li替换p标签,同时替换了原有绑定的事件
  replaceAll(),$("<li></li>").replaceAll("p"),同上
七,包裹节点
  wrap(),$("strong").wrap("<b></b>"),用b标签包围strong标签,标签之前没有空隙
  1,wrapAll()方法,用法同上,效果是有格式,包围标签和被包围标签之间换行
  2,wraplnner()方法,$("strong").wraplnner("<b></b>"),将strong标签的子元素用b标签包围
八,属性操作
  1,获取属性设置属性
  attr()方法,传入一个参数即属性名称,返回相应的属性值,传入两个参数属性名和属性值,设置属性
  attr("":"","":""),用来设置同一个元素的多个属性
2,删除属性
  removeAttr(),传入要删除的属性名称
九,样式操作
  1,获取样式和设置样式
  $("").attr("class"),返回某个对象的class属性
  $("").attr("class",""),设置某个对象的class属性,会替换原有类
  2,追加样式
  addClass(),追加一个新的class属性
  3,移除样式
  removeClass(),传入一个要删除的类
  4,切换样式
  toggle(function(){},function(){})
  toggleClass(),传入一个类名,进行交替添加删除
  5,判断是否含有某个样式
  hasClass(),传入一个要判断的类名,存在返回true,不存在返回false
  is(".class")
十,设置和获取HTML,文本和值
  1,html(),获取和设置某个元素中的HTML内容,参数为空表获取,参数为html格式为设置
  2,text(),获取和设置某个元素中的文本内容,参数为空表获取,参数为文本表添加设置
  3,val(),用来获取和设置某个元素(文本框,下拉列表,单选框)的值,如果为多选返回所有选择的值的数组
  defaultValue属性,指当前文本框的默认值
十一,遍历节点
  1,childer(),返回所有子元素
  2,next(),后面紧邻的同辈元素
  3,prev(),前面紧邻的同辈元素
  4,siblings(),前后所有的同辈元素
  5,closest(),返回最先匹配的祖先元素,从自身开始搜索
  6,parent(),返回父元素,parents(),返回祖先元素,closest(),最先匹配的祖先元素
十二,css-dom操作
  css(),获取和设置元素的样式属性
  设置透明度使用opacity属性,获取设置高度使用height属性,获取设置宽度使用width属性
  $("p").css("opacity":"0.5").height(100).width()
  1,offset()
  获取元素当前视窗的相对偏移,返回两个属性top和left
  $("p").offset().left;
  2,position()
  获取元素position样式设置为relative或者absolute的父节点的相对偏移,返回对象包括两个属性top和left
  3,scrollTop()和scrollLeft()
  分别 获取和设置滚动条距顶端和左端的距离

原文地址:https://www.cnblogs.com/b0xiaoli/p/3675110.html