jquery学习(三)DOM
2017-01-25 20:09
141 查看
1.获取设置内容
text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() - 设置或返回表单字段的值
不加参数就返回相应的内容,也可以加入相应参数,设置内容。
我们还可以设置回调函数,回调函数由两个参数:被选元素列表中当前元素的下标,以及原始值。
$('div').html(function (i, old) { alert(i + old); });
因为$(‘div’)可能选择多个,下标就是指这个数组的下标。
2.获取设置属性
(1)获取属性值$(selector).attr(attribute)
(2)设置属性值
$(selector).attr(attribute,value)
(3)设置多个属性值
$(selector).attr({attribute:value, attribute:value ...})
(4)使用函数来设置属性值
$(selector).attr(attribute,function(index,oldvalue))
3.获取设置 CSS 类
(1)addClass()向被选元素添加一个或多个类
$("button").click(function(){ $("#div1").addClass("important blue"); });
(2)removeClass()
从被选元素删除一个或多个类
(3)toggleClass()
对被选元素进行添加/删除类的切换操作
4.获取设置css样式
(1)获取css属性$(selector).css(name) 如:$("p").css("color");
如果想获得多个属性值,可以传入数组:
$("div").css(["background-color", "color"]);
(2)设置css属性
$(selector).css(name,value)
(3)使用函数来设置 CSS 属性
$(selector).css(name,function(index,value))
(4)设置多个css属性
$(selector).css({property:value, property:value, ...})
5.dom元素操作
(1)append$(selector).append(content) 在被选元素的结尾(仍然在内部)插入指定内容。 content:要插入的内容(可包含 HTML 标签)。 $(selector).append(function(index,html)) 使用函数在指定元素的结尾插入内容 index - 可选。接收选择器的 index 位置。 html - 可选。接收选择器的当前 HTML。
(2)prepend
在被选元素的开头(仍位于内部)插入指定内容,和append刚好相反。
(3)appendTo
$(content).appendTo(selector) 在被选元素尾部(仍位于内部)追加指定内容,注意前面是内容,后面是被选元素。
(4)prependTo
$(content).prependTo(selector) 在被选元素头部(仍位于内部)追加指定内容。
(5)after
$(selector).after(content) 在被选元素后插入指定的内容。 使用函数来插入内容 $(selector).after(function(index))
(6)before
在被选元素前插入指定的内容,用法和after一样。
(7)insertAfter
$(content).insertAfter(selector) 在被选元素之后插入 HTML 标记或已有的元素。
(8)insertBefore
$(content).insertBefore(selector) 在被选元素之前插入 HTML 标记或已有的元素。
(9)remove
$(selector).remove() 移除被选元素,包括所有文本和子节点。会返回remove的元素。
(10)empty
$(selector).empty() 从被选元素移除所有内容,包括所有文本和子节点。和remove的区别:empty只是清空内容。
(11)detach
$(selector).detach() 移除被选元素,包括所有文本和子节点。detach() 会保留所有绑定的事件、附加的数据,这一点与 remove() 不同。
(12)wrapInner
$(selector).wrapInner(wrapper) 使用指定的 HTML 内容或元素 4000 ,来包裹每个被选元素中的所有内容 (inner HTML)。
(13)wrap
$(selector).wrap(wrapper) 把每个被选元素放置在指定的 HTML 内容或元素中。
(14)wrapAll
$(selector).wrapAll(wrapper) 在指定的 HTML 内容或元素中放置所有被选的元素。
(15)unwrap
$(selector).unwrap() 删除被选元素的父元素。
(16)replaceWith
$(selector).replaceWith(content) 用指定的 HTML 内容或元素替换被选元素。 $(selector).replaceWith(function())
(17)replaceAll
$(content).replaceAll(selector) replaceAll() 与 replaceWith() 作用相同。差异在于语法:内容和选择器的位置,以及 replaceWith() 能够使用函数进行替换。
(18)clone
$(selector).clone(includeEvents) 生成被选元素的副本,包含子节点、文本和属性。
相关文章推荐
- Jquery学习DOM--来自jerry的博客
- jQuery学习笔记[1] jQuery中的DOM操作
- learning jQuery 学习笔记十二(+jQuery 1.4.1 API)-- DOM操作-基于命令改变页面 ----包装元素
- jquery中dom操作和事件的实例学习-表单验证
- jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
- jQuery函数学习之三(DOM部分之Manipulation)
- jQuery学习笔录3(jQuery学习笔记——DOM【1.DOM Core】)
- learning jQuery 学习笔记十(+jQuery 1.4.1 API)-- DOM操作-基于命令改变页面 ----插入新元素
- learning jQuery 学习笔记九(+jQuery 1.4.1 API)-- DOM操作-基于命令改变页面 ----操作属性
- jquery中dom操作和事件的实例学习 下拉框应用
- jQuery学习笔记--jQuery的DOM操作
- jQuery 学习笔记之六 (jQuery DOM的操作)
- JQuery学习笔记(二)DOM操作
- learning jQuery 学习笔记十一(+jQuery 1.4.1 API)-- DOM操作-基于命令改变页面 ----移动元素
- jQuery学习教程(四):使用jQuery操作DOM
- jQuery学习-dom与jquery包装集概念
- jQuery学习笔记之jQuery的DOM操作
- jQuery 学习笔记 (jQuery对象 和Dom 区别 )
- jQuery 学习笔记一(认识jQuery jQuery选择器 jQuery中的DOM操作)
- Jquery学习4-3---jquery用法之访问dom元素包含信息。