06jQuery-04-DOM操作

<!-- HTML结构 -->
<ul id="test-ul">
    <li class="js">JavaScript</li>
    <li name="book">Java &amp; JavaScript</li>
</ul>
//jQuery操作
$(‘#test-ul li[name=book]‘).text(); // ‘Java & JavaScript‘
$(‘#test-ul li[name=book]‘).html(); // ‘Java &amp; JavaScript‘

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

var div = $(‘#test-div‘);
div.css(‘color‘); // ‘#000033‘, 获取CSS属性

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

<!-- HTML结构 -->
<style>
.highlight {
    color: #dd1144;
    background-color: #ffd351;
}
</style>
<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>
//你可以这样使用jQuery配置css
var div = $(‘#test-highlight-css‘);
div.addClass(‘highlight‘);

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

//获取DOM的高宽等信息
// HTML文档大小:
$(document).width(); // 800
$(document).height(); // 3500

//操作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
//获取和设置对应value值
input.val(); // ‘test‘
input.val(‘abc@example.com‘); // 文本框的内容已变为abc@example.com

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

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

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

// 创建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>‘;
});