JQuery 操作 DOM


text([参数]) – 无参数,获取文本;有参数,替换文本
html([参数]) – 无参数,获取 html 代码;有参数,替换 html 代码
css(['color'][, '#fff']) – 无参数,获取 color 的属性值;有参数,替换 color 的属性值
hasClass('daostyles') – class 的属性值是否包含 daostyles
addClass('daostyles') – 添加 class 的属性值 daostyles
removeClass('daostyles') – 删除 class 的属性值 daostyles
show() – 显示 DOM
hide() – 隐藏 DOM
width() – 获取 DOM 宽度
height() – 获取 DOM 高度
$(window).width() – 获取浏览器可视窗口宽度
$(document).height() – 获取 HTML 文档的高度
attr(['name'][, 参数]) – 无参数,获取 name 的属性值;有参数,设置 name 的属性值
prop(['name'][, 参数]) – 无参数,获取 name 的属性值;有参数,设置 name 的属性值(对于checked/selected与attr有区别)
removeAttr('name') – 删除 name 属性
is(':checked') – 返回值为 true 或 false。判断是否被选中。selected、checked都适用
val(['参数']) – 无参数,表单元素获取值;有参数,表单元素设置值
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>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

练习:分别用 css() 方法和 addClass() 方法高亮显示 JavaScript:

<!-- HTML结构 -->

.highlight {
    color: #dd1144;
    background-color: #ffd351;
}

<div id="test-highlight-css">
    <ul>
        <li class="py"><span>Python</span></li>
        <li class="js"><span>JavaScript</span></li>
        <li class="sw"><span>Swift</span></li>
        <li class="hk"><span>Haskell</span></li>
    </ul>
</div>

'use strict';
var div = $('#test-highlight-css');
// TODO:
//div.find('.js').css('background-color', '#ffd351').css('color', '#dd1144');
div.find('.js').addClass('highlight');

显示和隐藏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(); // 显示

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

获取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()与prop()的区别

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

// <div id="test-div">...</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 节点中可以没有值,只有出现与不出现两种,例如:


// 等价于

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

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

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

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

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

表单元素

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

/*
    
    
        Beijing
        Shanghai
        Shenzhen
    
    <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 对象与 DOM 对象互转 JQuery 修改 DOM 结构 >>


没有账号? 忘记密码?

社交账号快速登录