jQuery中的DOM操作
来源:互联网 发布:百度网络硬盘登陆 编辑:程序博客网 时间:2024/06/01 20:45
jQuery中的DOM操作
@(程序猿)[jQuery, DOM]
本文是笔者读完《锋利的jQuery》后对第三章DOM操作的总结
- jQuery中的DOM操作
- DOM操作的分类
- jQuery中的DOM操作
- 查找节点
- 创建节点
- 插入节点
- 删除节点
- 复制节点
- 包裹节点
- 属性操作
- 样式操作
- 设置和获取HTML文本和值
- 遍历节点
- CSS-DOM操作
DOM操作的分类
- DOM Core
DOM Core任何一种支持DOM的程序设计语言都可使用,可以用来处理任何一种使用标记语言编写出来的文档 - HTML-DOM
- CSS-DOM
jQuery中的DOM操作
查找节点
- 查找元素节点
通过jQuery选择器完成 - 查找属性节点
通过jQuery选择器找到需要的元素后,使用attr(” “)方法获取属性值,参数值为一个时,是需要查询属性的名字
创建节点
- 创建元素节点
- 创建新元素;通过jQuery的工厂函数$(HTML)
- 将新元素插入文档中;使用jQuery的append( )等方法
var $li_1 = $("<li></li>");var $li_2 = $("<li></li>");$("ul").append($li_1);$("ul").append($li_2);
创建单个元素时,注意闭合标签
- 创建文本节点
var $li_1 = $("<li>农夫</li>");var $li_2 = $("<li>果园</li>");$("ul").append($li_1);$("ul").append($li_2);
创建元素节点时直接把文本内容写出来
- 创建属性节点
var $li_1 = $("<li tittle = '农夫'>农夫</li>");var $li_2 = $("<li tittle = '果园'>果园</li>");$("ul").append($li_1);$("ul").append($li_2);
创建元素节点时一起创建属性
插入节点
删除节点
- remove( )
所包含的后代节点将同时被删除,并返回一个指向已被删除的节点的引用;说明元素用remove( )删除后还可以继续使用 - detach( )
与remove( )相同的是:一样从DOM中去掉所匹配的元素
不同的是:删除后重新使用时原来元素绑定的事件还在,使用remove( )的话,之前绑定的事件将失效 - empty( )
清空元素里的内容,元素自己本身的标签还在
复制节点
使用clone( )方法
若传递一个值为true的参数,可在复制元素的同时复制元素所绑定的事件
包裹节点
将某个节点用其他标记包裹起来
1. wrap( )
<strong>...</strong><strong>...</strong>
$("strong").wrap("<b></b>");
<b><strong>...</strong></b><b><strong>...</strong></b>
- wrapAll( )
<strong>...</strong><strong>...</strong>
$("strong").wrapAll("<b></b>");
<b><strong>...</strong><strong>...</strong></b>
- wrapInner( )
<strong>...</strong><strong>...</strong>
$("strong").wrapInner("<b></b>");
<strong><b>...</b></strong><strong><b>...</b></strong>
属性操作
- 获取和设置属性
var p_txt = $("p").attr("title");//获取<p>的title属性$("p").attr("title" , "your title");//设置单个属性$("p").attr({"title" : "your title" , "title" : "test"});//设置多个属性
- 删除属性
$("p").attr("title" , "your title");//设置单个属性$("p").removeAttr("title");//删除tittle属性
样式操作
- 获取和设置样式
$("p").attr("class" , "high");//替换原class为新class(high)
- 追加样式
$("p").addClass("high");//给<p>元素追加新class(high)
- 移除样式
$("p").removeClass("class0");//删除<p>元素class(class0)$("p").removeClass("class1 class2");//删除<p>元素多个class(class1和class2)$("p").removeClass( );//删除<p>元素所有class
- 切换样式
$("p").toggleClass("high");//单击重复切换<p>元素的class(high)
- 判断是否含有某个样式
$("p").hasClass("high");
设置和获取HTML,文本和值
- html( )
- text( )
- val( )
获取和设置是同一个方法,用法类似attr( )
遍历节点
- children( )
取得匹配元素的子元素集合 - next( )
取得匹配元素后面紧邻的同辈元素 - prev( )
取得匹配元素前面紧邻的同辈元素 - siblings( )
取得匹配元素前后所有的同辈元素 - closest( )
取得最近的匹配元素,不匹配则向上查找父元素 - parent( ),parents( )
parent( )获得集合中每个匹配元素的父级元素
parents( )获得集合中每个匹配元素的祖先元素
CSS-DOM操作
直接利用css( )方法获取元素样式属性
$("p").css("color");//获取样式颜色$("p").css("opacity" , "0.5");//设置元素半透明$("p").css("color" : "red" , "background" : "#888");//设置多个样式
获取,设置元素的高,宽
$("p").height( );//获取元素的高,元素页面中的实际高度,不带单位$("p").height(100);//设置元素的高,默认单位(px)$("p").width( );//获取元素的宽,元素页面中的实际宽度,不带单位$("p").width("100px");//设置元素的宽
- offset( )
获取元素在当前视窗的相对偏移,包含offset.top
和offset.left
两个属性 - position( )
获取元素相对于最近的一个position
样式属性设置为relative
或absolute
的相对偏移,包含position.top
和position.left
两个属性 - scrollTop( )和scrollLeft( )
获取元素的滚动条距离顶端和左侧的距离
0 0
- jQuery中的DOM操作
- jQuery中的DOM操作
- jQuery中的DOM操作
- JQuery中的DOM操作
- jQuery中的DOM操作
- jQuery 中的 DOM 操作
- JQuery中的DOM操作
- jQuery中的DOM操作
- jQuery 中的 DOM 操作
- jquery中的DOM操作
- jquery中的Dom操作
- JQuery中的DOM操作
- jQuery中的DOM操作
- jQuery中的DOM操作
- jQuery中的DOM操作
- jQuery中的DOM操作
- jQuery 中的 DOM 操作
- jQuery中的DOM操作
- Java集合之Vector
- hdu-5543-Pick The Sticks
- split方法拆分字符串
- 安卓引导页划动中页面消失、异常退出问题
- 欢迎使用CSDN-markdown编辑器
- jQuery中的DOM操作
- 第四章 面向对象(下)
- leetcode 10 Regular Expression Matching(Dynamic Programming)
- Spring源码学习--自定义标签
- 第六讲:index$watch.html
- Html--部分标签的使用
- 【51Nod】1008 N的阶乘 mod P
- linux下TCP/IP及内核参数优化调优(TIME_WAIT)
- opencv结合MFC打开图片