所谓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的更多相关文章

  1. jQuery操作Dom、jQuery事件机制、jQuery补充部分

    jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要 ...

  2. web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记

    hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...

  3. Hybrid App开发之jQuery操作DOM

    前言: 前面学习了JQuery的选择器,今天开始学习新的知识,JQuery操作DOM元素. 元素属性的访问与设置 attr(name) 获取元素属性 attr(name,value) 单个属性设置 a ...

  4. jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法

    一.jQuery操作DOM 内部插入操作: append(content|fn):向每个匹配的元素内部追加内容. prepend(content):向每个匹配的元素内部前置内容. 外部插入操作: af ...

  5. 第四章 使用jQuery操作DOM

    第四章 使用jQuery操作DOM 一.DOM操作 在jQuery中的DOM操作主要可分为样式操作.文本和value属性值操作.节点操作: 节点操作又包含属性操作.节点遍历和CSS-DOM操作. 其中 ...

  6. 原生JS和jQuery操作DOM的区别小结

    一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...

  7. jQuery权威指南(第2版) 学习一 jQuery操作DOM

    jQuery操作DOM 获取元素的属性 attr(name) 获取元素属性的语法格式如下: attr(name) 其中,参数 name 表示属性的名称. 例子: <img alt="& ...

  8. *jquery操作DOM总结 (原创:最全、最系统、实例展示)

    jquery操作DOM包括八个方面: 一:jquery对DOM节点的基本操作:二:jquery对DOM节点的CSS样式操作:三:jquery遍历DOM节点:四:jquery创建DOM节点:五:jque ...

  9. jQuery操作dom事件

    参考:jQuery权威指南jQuery初步jQuery选择器jQuery操作domjQuery操作dom事件jQuery插件jQuery操作AjaxjQuery动画与特效jQuery实现导航栏jQue ...

  10. Unit01: jQuery概述 、 jQuery选择器 、 jQuery操作DOM

    Unit01: jQuery概述 . jQuery选择器 . jQuery操作DOM 使用jQuery放大字体: <!DOCTYPE html> <html> <head ...

随机推荐

  1. 深入理解linux-free命令原理(2)

    linux free 命令用法说明 概述: 这篇文章比较深入的从free为起点  折射出的一些概念:比如  buff/cache是怎么一回事[涉及内存页等话题]:  available这个参数与fre ...

  2. 探讨EFCore如何优雅的实现读写分离

    前言     我们都知道当单库系统遇到性能瓶颈时,读写分离是首要优化手段之一.因为绝大多数系统读的比例远高于写的比例,并且大量耗时的读操作容易引起锁表导致无发写入数据,这时读写分离就更加重要了.   ...

  3. mysql plugin

    mysql plugin 概要 mysql可以通过启动参数,系统命令mysql_install,mysql命令install plugin来加载指定的插件 mysql的存储引擎被设计成插件式,可以根据 ...

  4. 如何快速搭建hadoop集群

    安装好虚拟机,重命名为master 配置网卡 命令:vi /etc/sysconfig/network-scripts/ifcfg-en(按tab键) 这里要配置ip,网关,域名解析 例如我的 IPA ...

  5. Flutter 布局类组件:流式布局(Wrap和Flow)

    前言 把超出屏幕显示范围会自动折行的布局称为流式布局.Flutter中通过Wrap和Flow来支持流式布局,将Row换成Wrap后溢出部分则会自动折行. Wrap 接口描述 Wrap({ Key ke ...

  6. requests +httprunne r

    1.get 请求和 post 请求的区别是什么?  2.requests 模拟 get 请求时,有哪两种方式让响应的结果不是乱码?(直接代码描述)  3.requests 库中的 post 方法,参数 ...

  7. 2019 Java开发利器Intellij IDEA安装、配置和使用

    进入Intellij IDEA的官网,选择电脑对应的合适版本进行下载,这儿我选择的是Intellij IDEA的社区版,安装旗舰版可去网上找相应的教程. Intellij IDEA的官网:https: ...

  8. 【EXP】WINDOWS下如何导出

    有些时候需要在windows下通过远程来导出数据 那么windows下怎么导出呢 例子: exp hr/hr@192.168.1.222:1521/zhang file=d:backup.dmp lo ...

  9. kubernets之job资源

    一  介绍job资源 1.1   前面介绍的RC,RS,DS等等,管控的pod都是需要长期持久的运行的应用,但是尝试考虑另外一种场景,在微服务的场景下,有些pod的作用就是需要 执行完一些命令之后正常 ...

  10. oracle分区表分区栏位NULL值测试

    实验在分区栏位为NULL时,分区表的反应 1.创建普通的分区表 CREATE TABLE MONKEY.TEST_PART_NULL_NORMAL ( ID NUMBER, ADD_DATE DATE ...