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解析获取JSON数据
Apr 08 jQuery
jQuery实现拖动效果的实例代码
Jun 25 jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
实现jquery放大镜的两种方法
Feb 22 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
jQuery 动画与停止动画效果实例详解
May 19 jQuery
jQuery实现视频展示效果
May 30 jQuery
jQuery 动态粒子效果示例代码
Jul 07 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/06/24 PHP
PHP下利用header()函数设置浏览器缓存的代码
2010/09/01 PHP
php读取mssql的ntext字段返回值为空的解决方法
2014/12/30 PHP
LNMP部署laravel以及xhprof安装使用教程
2017/09/14 PHP
php之header的不同用法总结(实例讲解)
2017/11/28 PHP
js function使用心得
2010/05/10 Javascript
js冒泡法和数组转换成字符串示例代码
2013/08/14 Javascript
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
jquery提交form表单简单示例分享
2014/03/03 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
2015/02/20 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
2016/01/14 Javascript
微信开发 微信授权详解
2016/10/21 Javascript
详解基于node的前端项目编译时内存溢出问题
2017/08/01 Javascript
vue项目中添加单元测试的方法
2018/07/21 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
2018/11/21 Javascript
灵活使用console让js调试更简单的方法步骤
2019/04/23 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
2019/09/27 Javascript
javascript 原型与原型链的理解及实例分析
2019/11/23 Javascript
详解vue高级特性
2020/06/09 Javascript
linux下安装easy_install的方法
2013/02/10 Python
分析Python中设计模式之Decorator装饰器模式的要点
2016/03/02 Python
Python操作Excel之xlsx文件
2017/03/24 Python
python实现批量修改文件名代码
2017/09/10 Python
Python 查看list中是否含有某元素的方法
2018/06/27 Python
对python 数据处理中的LabelEncoder 和 OneHotEncoder详解
2018/07/11 Python
Python3中关于cookie的创建与保存
2018/10/21 Python
python3实现带多张图片、附件的邮件发送
2019/08/10 Python
Python3实现配置文件差异对比脚本
2019/11/18 Python
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
2018/09/19 HTML / CSS
Myprotein意大利官网:欧洲第一运动营养品牌
2018/11/22 全球购物
UML设计模式笔试题
2014/06/07 面试题
保护环境的建议书
2014/03/12 职场文书
中国好声音广告词
2014/03/18 职场文书
人事聘任通知
2015/04/21 职场文书
家长会主持词开场白
2015/05/29 职场文书
导游词之宿迁乾隆行宫
2019/10/15 职场文书