jQuery——操作DOM
来源:互联网 发布:mysql建立数据库教程 编辑:程序博客网 时间:2024/05/18 23:57
所谓Web体验,就是Web服务器与Web浏览器之间的合作。过去,都是由服务器生成HTML文档,然后浏览器负责解释并显示该文档。后来,我们可以用CSS技术来动态修改页面的外观。
操作属性
jQuery实际上是在操作DOM中的className属性。
非类属性
jQuery提供了.attr()和.removeAttr()方法,这些方法可以修改属性。
通过jQuery还可以一次修改多个属性。
.attr()方法也接受一对参数,第一个参数是属性名,第二个是属性值。更常用的是传入一个包含键值对的对象。
如果我们想让每个匹配的元素都具有相同的一个或多个属性值,那么只要给.arrt()传入一个静态的对象即可。更常见的是,为每个元素添加或修改的属性都必须具有不同的值。
值回调其实就是给参数传入一个函数,而不是传入具体的值。这个函数会针对匹配的元素集中的每个元素都调用一次,调用后的返回值将作为属性的值。
DOM元素属性
HTML属性是指页面标记中放在引号中的值,而DOM属性则是指通过Javascript能够存取的值。
在jQuery中,可以通过.prop()方法取得和设置DOM属性:
//取得"checked"属性的当前值var currentlyChecked = $('.my-checkbox').prop('checked');//设置"checked"属性的值$('.my-checkbox').prop('checked',false);
表单控件的值
在取得和设置表单控件的值时,建议使用jQuery提供的.val()方法:
//取得文本输入框的当前值var inputValue = $('#my-input').val();//取得选项列表的当前值var selectValue = $('#my-select').val();//设置单选列表的值$('#my-single-select').val('value3');//设置多选列表的值$('#my-multi-select').val(['value1','value2']);
DOM树操作
重新认识$()函数
$()函数就像一个工厂,它能够生成一个jQuery对象,指向CSS选择符所描述的一组元素。
$()函数不仅能够改变页面的视觉外观,更能改变页面中实际的内容。只要在这对圆括号中放入一组HTML元素,就能轻而易举地改变整个DOM结构。
创建新元素
在FAQ页面中,一个常见的功能是出现在 每一对“问题-答案”后面的back to top(返回页面顶部)链接。
插入新元素
若想把back to top链接插入到每个段落后面,因此就可以使用.inserAfter()方法。
.insertBefore()在现有元素外部、之前添加内容.prependTo()在现有元素内部、之前添加内容.appendTo()在现有元素内部、之后添加内容.insertAfter()在现有元素外部、之后添加内容
移动元素
动态地放置并格式化脚注,就是插入操作在实际中的一种应用。
脚注方案:
为每个标注编号
为正文中标出提取脚注的位置,使用脚注的编号
在文本中的位置上创建一个指向对应脚注的链接,在脚注中创建返回文本位置的链接。
复制元素
在复制元素时,需要使用jQuery的.clone()方法,这个方法能够创建任何匹配的元素集合的副本以便将来使用。
连同事件一起复制
在默认情况下,.clone()方法不会复制匹配的元素或其后代元素中绑定的事件。不过,可以为这个方法传递一个布尔值参数,将这个参数设置为true,就可以连同事件一起复制,即.clone(true)。
内容setter和getter方法
.html()方法,.text()方法,取得匹配元素的内容,或者用新字符串替换匹配元素的内容。
.text()始终会取得或设置纯文本内容。在使用.text()取得内容时,所有HTML标签都将被忽略,而所有HTML实体也会被转换成对应的字符。
DOM操作方法的简单归纳
(1)要在HTML中创建新元素,使用$()函数。
(2)要在每个匹配的元素中插入新元素,使用
.append() .appendTo() .perpend() .prependTo()
(3)要在每个匹配的元素相邻的位置上插入新元素,使用
.after()、inserAfter()、.before()、.inserBefore()
(4)要在每个匹配的元素外部插入新元素,使用:
.wrap()、.wrapAll()、.wrapInner()
(5)要用新元素或文本替换每个匹配的元素,使用:
.html()、.text()、.replaceAll()、.replaceWith()
(6)要移除每个匹配的元素中的元素,使用:
.empty()
(7)要从文档中移除每个匹配的元素及其后代元素,但不实际删除它们,使用:
.remove()、.detach()
- jQuery——DOM操作
- jQuery——操作DOM
- 【jQuery】jQuery操作DOM —— 示例
- JQuery——DOM操作总结
- jQuery——选择器,操作DOM
- jQuery学习笔记 — jQuery中的DOM操作
- 【jQuery】jQuery操作DOM
- jQuery——入门(三)JQuery DOM操作(属性操作/样式操作/文档过滤)
- Jquery学习——选择器、DOM操作、动画
- JavaWeb学习笔记——jquery中的dom操作
- jQuery学习笔记(二)—— 操作DOM元素
- jQuery自学教程(三)——DOM操作
- jQuery高级技巧——DOM操作篇
- Jquery李炎恢——13.14DOM节点操作
- jQuery学习笔记:DOM操作(一)——文档
- Jquery——Day2(基础DOM和css操作)
- jQuery——DOM元素 和 表单值操作
- 每天学点JQuery(2)—DOM操作
- B
- 剑指offer面试题47 不用加减乘除做加法 (java实现)
- 异构数据源海量数据交换工具-Taobao DataX 下载和使用
- uva508 莫尔斯电码(Morse Mismatches)
- Redis的安装、部署及使用
- jQuery——操作DOM
- list图解
- Codeforces Round #424 Div. 2专题
- Spring中的五种事物配置类型
- 华为OJ——从单向链表中删除指定值的节点
- 优秀机器学习视频笔记收集
- 数据仓库的定义、特征、产生和发展、现状和趋势
- jzoj. 1349. 最大公约数
- jsp页面get方式上传表单,中文乱码