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(); // 600div.height(); // 300div.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.comselect.val(); // ‘BJ‘select.val(‘SH‘); // 选择框已变为Shanghaitextarea.val(); // ‘Hello‘textarea.val(‘Hi‘); // 文本区域已更新为‘Hi‘// 代码解说：// 1.val()方法用于各种输入框的取值和赋值