• val()
• .css()
• addClass('hightlight') removeClass
• attr() removeAttr
• a.hide() a.show()
• text() html()

操作DOM

修改text与html

使用text()和html(), 当无参数时获取节点内容,有参数时修改节点内容;
JQuery获取的对象可以包含任意个节点, 调用.text()会修改对象内所有节点;(利用这点修改css)

修改css

使用.css('name', 'value')修改css属性如: background-color, color等, 是否有参数和text()的区别类似;

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

显示隐藏DOM

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

获取DOM信息

• 获取浏览器长宽属性

// 浏览器可视窗口大小:
$(window).width(); // 800
// HTML文档大小:
$(document).width(); // 800
// 某个div的大小:
var div = $('#test-div');
div.width(); // 600
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()方法:

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

等价于：

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

所以:

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

prop()返回值更合理一些,用is()方法判断更好：
还有selected，处理时最好用is(':selected');

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

操作表单

jQuery对象统一提供val()方法获取和设置对应的value属性：

/*   <input id="test-input" name="email" value="test">
    <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'

修改DOM结构

添加与删除DOM

添加: 粗暴使用html()或使用append()添加至最后,prepend()将节点添加至最前;

// 创建DOM对象:
var ps = document.createElement('li');
ps.innerHTML = '<span>Pascal</span>';
// 添加DOM对象:
ul.append(ps);
// 添加jQuery对象:
ul.append($('#scheme'));
// 添加函数对象:
ul.append(function (index, html) {
    return '<li><span>Language - ' + index + '</span></li>';
});

如果要添加的DOM节点已经存在于HTML文档中，它会首先从文档移除，然后再添加，用append()，可以移动一个DOM节点 ;
同级节点可以用after()或者before()确定插入位置:

//先定位然后利用after()或before()插入节点;
var js = $('#test-div>ul>li:first-child');
js.after('<li><span>Lua</span></li>');

删除:
var li = $('#test-div>ul>li');
li.remove(); // 所有<li>全被删除

练习对HTML元素排序

• 和0130的排序对照, 有部分相似
  HTML结构:

<div id="test-div">
    <ul>
        <li><span>JavaScript</span></li>
        <li><span>Python</span></li>
        <li><span>Swift</span></li>
    </ul>
</div>

用了两种方法,一是获取数组后排序再添加, 二是排序jQuery对象后直接添加;

let arr = ['Pascal','Lua','Ruby'];
let div = $('#test-div ul');
for(let x of arr){
    div.append('<li><span>'+x+'</span></li>');
}
let div2 = $('#test-div ul>li');
let sort = Array.from(div2).map(x => x.innerText).sort();
//$('#test-div li').remove();
for(let x of sort){
    div.append('<li><span>'+x+'</span></li>');
}
console.log(sort);

等效于===>>：

let arr = ['Pascal','Lua','Ruby'];
let div = $('#test-div ul');
for(let x of arr){
    div.append('<li><span>'+x+'</span></li>');
}
let div2 = $('#test-div ul>li');
let sort = div2.sort( (a,b) => a.innerText>b.innerText? 1:-1 );
//$('#test-div li').remove();  append()会先从文档删除节点之后再添加；
div.append(sort);

---

下一篇： 0201-Promise-JQuery选择→