jQuery操作DOM_动力节点Java学院整理


Posted in jQuery onJuly 04, 2017

jQuery的选择器很强大,用起来又简单又灵活,但是搞了这么久,我拿到了jQuery对象,到底要干什么?

答案当然是操作对应的DOM节点啦!

回顾一下修改DOM的CSS、文本、设置HTML有多么麻烦,而且有的浏览器只有innerHTML,有的浏览器支持innerText,有了jQuery对象,不需要考虑浏览器差异了,全部统一操作!

修改Text和HTML

jQuery对象的text()html()方法分别获取节点的文本和原始HTML文本,例如,如下的HTML结构:

<!-- HTML结构 -->
<ul id="test-ul">
  <li class="js">JavaScript</li>
  <li name="book">Java & JavaScript</li>
</ul>

分别获取文本和HTML:

$('#test-ul li[name=book]').text(); // 'Java & JavaScript'
$('#test-ul li[name=book]').html(); // 'Java & JavaScript'

如何设置文本或HTML?jQuery的API设计非常巧妙:无参数调用text()是获取文本,传入参数就变成设置文本,HTML也是类似操作,自己动手试试:

'use strict';
var j1 = $('#test-ul li.js');
var j2 = $('#test-ul li[name=book]');
j1.html('<span style="color: red">JavaScript</span>');
j2.text('JavaScript & ECMAScript');

一个jQuery对象可以包含0个或任意个DOM对象,它的方法实际上会作用在对应的每个DOM节点上。在上面的例子中试试:

$('#test-ul li').text('JS'); // 是不是两个节点都变成了JS?

所以jQuery对象的另一个好处是我们可以执行一个操作,作用在对应的一组DOM节点上。即使选择器没有返回任何DOM节点,调用jQuery对象的方法仍然不会报错:

// 如果不存在id为not-exist的节点:
$('#not-exist').text('Hello'); // 代码不报错,没有节点被设置为'Hello'

这意味着jQuery帮你免去了许多if语句。

修改CSS

jQuery对象有“批量操作”的特点,这用于修改CSS实在是太方便了。考虑下面的HTML结构:

<!-- HTML结构 -->
<ul id="test-css">
  <li class="lang dy"><span>JavaScript</span></li>
  <li class="lang"><span>Java</span></li>
  <li class="lang dy"><span>Python</span></li>
  <li class="lang"><span>Swift</span></li>
  <li class="lang dy"><span>Scheme</span></li>
</ul>

要高亮显示动态语言,调用jQuery对象的css('name', 'value')方法,我们用一行语句实现:

'use strict';
$('#test-css li.dy>span').css('background-color', '#ffd351').css('color', 'red');

注意,jQuery对象的所有方法都返回一个jQuery对象(可能是新的也可能是自身),这样我们可以进行链式调用,非常方便。
jQuery对象的css()方法可以这么用:

var div = $('#test-div');
div.css('color'); // '#000033', 获取CSS属性
div.css('color', '#336699'); // 设置CSS属性
div.css('color', ''); // 清除CSS属性

为了和JavaScript保持一致,CSS属性可以用'background-color''backgroundColor'两种格式。

css()方法将作用于DOM节点的style属性,具有最高优先级。如果要修改class属性,可以用jQuery提供的下列方法:

var div = $('#test-div');
div.hasClass('highlight'); // false, class是否包含highlight
div.addClass('highlight'); // 添加highlight这个class
div.removeClass('highlight'); // 删除highlight这个class

显示和隐藏DOM

要隐藏一个DOM,我们可以设置CSS的display属性为none,利用css()方法就可以实现。不过,要显示这个DOM就需要恢复原有的display属性,这就得先记下来原有的display属性到底是block还是inline还是别的值。

考虑到显示和隐藏DOM元素使用非常普遍,jQuery直接提供show()hide()方法,我们不用关心它是如何修改display属性的,总之它能正常工作:

var a = $('a[target=_blank]');
a.hide(); // 隐藏
a.show(); // 显示

注意,隐藏DOM节点并未改变DOM树的结构,它只影响DOM节点的显示。这和删除DOM节点是不同的。

获取DOM信息

利用jQuery对象的若干方法,我们直接可以获取DOM的高宽等信息,而无需针对不同浏览器编写特定代码:

// 浏览器可视窗口大小:
$(window).width(); // 800
$(window).height(); // 600

// HTML文档大小:
$(document).width(); // 800
$(document).height(); // 3500

// 某个div的大小:
var div = $('#test-div');
div.width(); // 600
div.height(); // 300
div.width(400); // 设置CSS属性 width: 400px,是否生效要看CSS是否有效
div.height('200px'); // 设置CSS属性 height: 200px,是否生效要看CSS是否有效

attr()removeAttr()方法用于操作DOM节点的属性:

// <div id="test-div" name="Test" start="1">...</div>
var div = $('#test-div');
div.attr('data'); // undefined, 属性不存在
div.attr('name'); // 'Test'
div.attr('name', 'Hello'); // div的name属性变为'Hello'
div.removeAttr('name'); // 删除name属性
div.attr('name'); // undefined

prop()方法和attr()类似,但是HTML5规定有一种属性在DOM节点中可以没有值,只有出现与不出现两种,例如:

<input id="test-radio" type="radio" name="test" checked value="1">

等价于:

<input id="test-radio" type="radio" name="test" checked="checked" value="1">

attr()prop()对于属性checked处理有所不同:

var radio = $('#test-radio');
radio.attr('checked'); // 'checked'
radio.prop('checked'); // true

prop()返回值更合理一些。不过,用is()方法判断更好:

var radio = $('#test-radio');
radio.is(':checked'); // true

类似的属性还有selected,处理时最好用is(':selected')

操作表单

对于表单元素,jQuery对象统一提供val()方法获取和设置对应的value属性:

/*
  <input id="test-input" name="email" value="">
  <select id="test-select" name="city">
    <option value="BJ" selected>Beijing</option>
    <option value="SH">Shanghai</option>
    <option value="SZ">Shenzhen</option>
  </select>
  <textarea id="test-textarea">Hello</textarea>
*/
var
  input = $('#test-input'),
  select = $('#test-select'),
  textarea = $('#test-textarea');

input.val(); // 'test'
input.val('abc@example.com'); // 文本框的内容已变为abc@example.com

select.val(); // 'BJ'
select.val('SH'); // 选择框已变为Shanghai

textarea.val(); // 'Hello'
textarea.val('Hi'); // 文本区域已更新为'Hi'

可见,一个val()就统一了各种输入框的取值和赋值的问题。

jQuery 相关文章推荐
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
jQuery无冲突模式详解
Jan 17 jQuery
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 #jQuery
jQuery简介_动力节点Java学院整理
Jul 04 #jQuery
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 #jQuery
jQuery动画_动力节点节点Java学院整理
Jul 04 #jQuery
jQuery实现点击关注和取消功能
Jul 03 #jQuery
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 #jQuery
jquery实现一个全局计时器(商城可用)
Jun 30 #jQuery
You might like
PHP 判断变量类型实现代码
2009/10/23 PHP
php数据库配置文件一般做法分享
2012/07/07 PHP
多个Laravel项目如何共用migrations详解
2018/09/25 PHP
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
2010/05/06 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
2013/04/16 Javascript
jQuery操作表单常用控件方法小结
2015/03/23 Javascript
JavaScript中几种排序算法的简单实现
2015/07/29 Javascript
用JavaScript获取页面文档内容的实现代码
2016/06/10 Javascript
AngularJS 避繁就简的路由
2016/07/01 Javascript
图片懒加载插件实例分享(含解析)
2017/01/09 Javascript
Node.js Express 框架 POST方法详解
2017/01/23 Javascript
JavaScript函数柯里化原理与用法分析
2017/03/31 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
2017/08/31 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
2019/04/15 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
2019/12/29 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
2020/05/22 jQuery
js实现右键弹出自定义菜单
2020/09/08 Javascript
python selenium 对浏览器标签页进行关闭和切换的方法
2018/05/21 Python
python绘制简单彩虹图
2018/11/19 Python
django模板加载静态文件的方法步骤
2019/03/01 Python
Python使用MyQR制作专属动态彩色二维码功能
2019/06/04 Python
react+django清除浏览器缓存的几种方法小结
2019/07/17 Python
详解Python3定时器任务代码
2019/09/23 Python
用Python开发app后端有优势吗
2020/06/29 Python
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
2013/07/19 HTML / CSS
大学四年的个人自我评价
2014/01/14 职场文书
网络管理员岗位职责
2014/03/17 职场文书
办公室主任个人对照检查材料思想汇报
2014/10/11 职场文书
2014个人年度工作总结
2014/12/15 职场文书
春晚观后感
2015/06/11 职场文书
2016年中秋节慰问信
2015/12/01 职场文书
2016秋季幼儿园开学寄语
2015/12/03 职场文书
python爬虫--selenium模块
2021/03/31 Python
MySQL索引知识的一些小妙招总结
2021/05/10 MySQL
python获取对象信息的实例详解
2021/07/07 Python
Elasticsearch 基本查询和组合查询
2022/04/19 Python