jquery_操作dom

// jquery_操作dom

//代码1：
$(‘#test-ul li[name=book]‘).text();
$(‘#test-ul li[name=book]‘).html();
j1.html(‘<span style="color: red">JavaScript</span>‘);
j2.text(‘JavaScript & ECMAScript‘);
// 代码解说：
// 1. .html()方法和.text()方法用于操作dom

//代码2：
$(‘#test-css li.dy>span‘).css(‘background-color‘, ‘#ffd351‘).css(‘color‘, ‘red‘);
// 代码解说：
// 1.css()方法用于操作css，这里进行了链式调用

//代码3：
var a = $(‘a[target=_blank]‘);
a.hide(); // 隐藏
a.show(); // 显示
// 代码解说：
// 1.显示和隐藏dom

//代码4：
// 浏览器可视窗口大小:
$(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是否有效
// 代码解说：
// 1.获取dom信息

//代码5：
// <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
// 代码解说：
// 1.attr()和removeAttr()方法用于操作DOM节点的属性：

//代码6：
/*
    <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‘
// 代码解说：
// 1.val()方法用于各种输入框的取值和赋值