Jquery的DOM操作
来源:互联网 发布:2016年服装行业数据 编辑:程序博客网 时间:2024/05/17 17:57
Jquery中DOM的操作
节点操作
一、查找节点
1、查找元素节点 ;利用Jquery的选择器
2、查找属性节点 ;利用Jquery的选择器查找到需要的元素之后,就可以使用attr()方法来获取它的各种属性的值。Attri()方法的参数可以是一个,也可以是零个。当参数是一个时,则是要查询的属性的名字。
二、创建节点
1、创建元素节点
第一 创建元素节点 第二将其插入文档中
$(html) --->创建节点 ,append()添加到文档中
2、创建文本节点
创建文本节点就是在创建元素节点时直接把文本内容写出来,然后使用append()等方法将它们添加到文档中就可以了。
3、创建属性节点
创建属性节点与创建文本节点类似,也是之金额在创建元素节点时一起创建
三、插入节点
append() 向每个匹配的元素内部追加内容
appendTo() 与上诉追加相反
Perpend() 向每个匹配的元素内容前置内容
perpendTo() 与上诉前置内容相反
After() 在每个匹配的元素之后插入内容
inserAfter() 与上诉插入相反
Before() 在每个匹配的元素之前插入内容
Insertbefore() 与上诉插入相反
四、删除节点
remove() 从DOM中删除所有匹配的元素,其后面的子节点也将同时删除 , 也可以设置其参数进行有选择性的删除
detach() 跟remove()不同的是,所有绑定的事件、附加的数据都会保留下来
empty() 并不是删除节点,而是清空节点。,也能清空所有后代的子节点。
五、复制节点
(通过鼠标拖动商品并将其放到购物车中)商品拖动就是用的复制节点
Clone() 复制节点后,被复制的新元素并不具有任何行为,如果需要新元素也具有复制功能,可以使用clone(true)
六、替换节点
replacewith() 将所有匹配的元素都替换成指定的HTML或DOM元素
replaceaAll() 与上诉方法作用相同,只是颠倒了replaceWith()的操作。
七、包裹节点
wrapAll() \ wrap()
将所有匹配的元素用一个元素来包裹,wrap()方法是将所有的元素进行单独的包裹。
wrapInner()方法
将每一个匹配的元素的子内容(包括文本节点)用其他结构化的标记包裹起来。
属性操作
1获取属性和设置属性
获取 attr(name);
设置单个属性值 atrr(name,value) ;
设置多个属性值 attri(name:value ,name:value) ;
2 删除属性
removeAttr(name)
样式操作
1获取样式和设置样式
可以使用attr()来获取样式和设置样式
$(“p”).attr(“class”)
$(“p”).attr(“class”,”hight”)
2追加样式
addClass()
多次使用addClass()样式,不会覆盖其原先的样式。使用attr()方法会覆盖其原先的样式
3删除样式
removeClass(name) ,如果不带任何参数则就删除其所有的样式
4切换样式
Toggle()方法主要是控制行为上的重复切换。
toggleClass()方法控制样式上的重复切换
5判断是否含有某个样式
hasClass()可以用来判断元素是否含有某个class,如有,则返回TRUE,否则为FALSE
$(“p”).hasClass(“another”) 等价于 $(“p”).is(“.another”);
设置和获取HTML、文本 和值
1html() 用来读取或者设置某个元素中的HTML内容,设置时只需在括号里写入值即可
2text() 用来读取或者设置某个元素中的TEXT内容,设置时只需在括号里写入值即可
3val() 此方法类似JavaScript中的value属性,用来设置和获取元素的值,无论元素是文本框,还是下拉列表还是单选框,都可以返回元素的值,如果元素是多选,则返回一个包含所有选择的值的数组 设置时只需在括号里写入值即可
遍历节点
1children() 获得子元素
2next() 后面紧邻的同辈元素
3prev() 前面紧邻的同辈元素
4siblings() 前后所有的同辈元素
5closest() 从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素
6parent(),parents(),closest()之间的区别
parent() 获得集合中每个匹配元素的父级元素
Parents() 获得集合中每个匹配元素的祖先元素
CSS-DOM操作
Css()方法获取元素的样式属性 如 $(“p”).css(“color”);
也可以通过css()设置某个元素的单个样式 如$(“p”).css(“color”,”red”);
也可以同时设置多个样式属性 如$(“p”).css({“color”:”red” ,”fontSize”,”30px”});
设置透明度 $(“p”).css(“opacity”,”0.5”);
可以通过height()方法获取元素高度。 它的作用是取得匹配元素当前计算的高度值
Css()获取的高度跟样式有关,但是height()获取的高度跟样式设置无关的,是元素在页面中的实际高度
通过width()方法取得匹配元素的宽度值
元素定位
1 1offset()方法 获取元素在当前视窗的相对偏移,其中返回的对象包含两个属性,即top和left,它只对可见元素有效
2 position()方法 获取元素相对于最近的一个position样式属性设置为relative或者absolute的父节点的相对偏移,其中返回的对象包含两个属性,即top和left
3scrollTop()方法和scrollLeft()方法
获取元素的滚动条距顶端和距左端的距离。
另外,可以为这两个方法指定一个参数,控制参数的滚动条到指定位置。
Jquery事件绑定类型比普通的JavaScript事件绑定类型少了”on”.
- 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操作
- sphinx配置文件
- 枚举实现
- ASP.NET MVC数据验证 登录 注册用 学习留用
- ZOJ-1766
- PHP目录下php-config的作用
- Jquery的DOM操作
- 在从1 到n 的正数中1 出现的次数
- alignof/alignas
- 本贾尼-斯特劳斯特卢普(Bjarne Stroustrup)1950年出生于丹麦
- 图像算法在DSP嵌入式移植中常用的优化方法
- Jquery常用方法
- mybatis学习笔记
- ListView Adapter
- RTSP Analysis Report