普通地操作DOM,有的浏览器只支持innerHTML
,有的支持innerText
,有了jQuery对象,不需要考虑浏览器差异了,全部统一操作。
1 修改DOM
1.1 text()
与 html()
jquery对象的text()
与 html()
方法对应的就是innerText
以及innerHTML
,分别获取节点的文本 和 原始HTML文本。
jQuery的API设计非常巧妙:无参数调用text()
是获取文本,传入参数就变成设置文本,HTML文本也是类似操作。
var $a = $("#abc").text();//获取节点文本
var $b = $("#abc").text("123");//修改节点文本
一个jQuery对象可以包含0个或多个DOM节点对象,与那些包含多个节点对象的节点对象不同,jQuery对象的方法实际上是会应用到全部DOM节点对象,而正常的包含多个节点对象的节点对象就会发生错误了。
另外,使用jQuery对象的方法即使即使选择器没有返回任何DOM节点,调用jQuery对象的方法仍然不会报错,这个页面流程会继续下去,这意味着可以省略更多的if
语句。
1.2 修改CSS
记住,与包含多个节点对象的节点对象不同,jQuery对象可以批量操作,修改CSS可以调用jQuery对象的css('name','value')
方法,如:
/* 对一个jQuery对象创建多个css属性 */
$(#abc).css("color","blue").css("backgroundColor","yellow");
注意,jQuery对象的所有方法都返回一个jQuery对象(可能是新的也可能是自身),这样我们可以像上面那样进行链式调用。为了与JavaScript保持一致,属性名可以使用驼峰命名或直接css命名
1.2.1 显示和隐藏DOM
要隐藏一个DOM,我们可以设置CSS的display
属性为none
,利用jQuery的css()
方法就可以实现。不过,要显示这个DOM就需要恢复原有的display
属性,这就得先记下来原有的display
属性到底是block
还是inline
还是别的值。
因此jQuery直接提供show()
和hide()
方法,我们不用关心它是如何修改display
属性的。
var $div = $("#abc");
$div.hide();
$div.show();
1.3 修改类属性
如果要修改class属性,可以用jQuery提供的下列方法:
var $div = $("#abc");
$div.hasClass("classname1");//返回布尔值
$div.addClass("classname2");//增加
$div.removeClass("classname1");//减少
另外jQuery还提供一个toggleClass()
方法控制类名,当类名存在就移除它,当类名不存在就添加它:
var $div = $("#abc");
$div.toggleClass("classname1");
1.4 获取DOM信息
1.4.1 操作DOM高宽
利用jQuery对象的方法,可以获取DOM的高宽等信息,而无需针对不同浏览器编写特定代码
/* 服务器的可视窗口大小 */
$(window).width();//宽
$(window).height();//高
var $div = $("#abc");
$div.width();//读取宽
$div.width('400px');//设置宽
1.4.2 操作节点属性
attr()
,prop()
和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
attr()
和 prop()
的区别在于查找没有值的属性,比如说表单上的checked
属性,不过此时最好是使用is()
方法判断更好
var radio = $('#test-radio');
radio.attr('checked'); // 'checked'
radio.prop('checked'); // true
/* is()方法 */
radio.is(":checked");//true,注意参数有冒号
注:类似的类似的属性还有selected,处理时最好用
is(':selected')
。
另外,还有一点要注意的情况还是当提取信息的jQuery对象包含多个dom对象时,使用prop()
得出的checked
值依据在这组节点对象的第一个checked
属性是否为true
,而使用is(":checked")
方法得到的则是只要这组有一个节点对象的checked
值为true
,就返回true
1.4.3 操作表单
jQuery对象统一提供val()
方法获取和设置对应的value属性,如
textarea.val(); // 'Hello'
textarea.val('Hi'); // 文本区域已更新为'Hi'
2 修改DOM结构
2.1 添加DOM
2.1.1 append()
与 prepend()
append()
把DOM添加到最后,prepend()
则把DOM添加到最前。
使用append()
方法,与appendChild()
方法类似,都是需要先找到父节点,这里是要找到父节点对应的jQuery对象。
与此同时,append()
方法还能接受多种参数,如字串符,原始的DOM对象,原始的DOM对象的数组,jQuery对象和函数对象
//添加DOM对象:
var ps = document.createElement('li');
ps.innerHTML = '<span>Pascal</span>';
ul.append(ps);
// 添加jQuery对象:
ul.append($('#scheme'));
// 添加函数对象:
ul.append(function (index, html) {
return '<li><span>Language - ' + index + '</span></li>';
});
注意,如果要添加的DOM节点已经存在于HTML文档中,它会首先从文档移除,然后再添加,也就是说,用append(),你可以移动一个DOM节点,这对于appendChild方法也是一样的,这样结合传入参数为DOM节点数组,再使用
sort()
方法,可以很直接地对DOM节点重新排序
2.1.2 after()
与 before()
等同于insertBefore()
,同级节点可以用after()或者before()方法:
var js = $('#test-div>ul>li:first-child');
js.after('<li><span>Lua</span></li>');
2.2 删除节点
2.2.1 remove()
要删除DOM节点,拿到jQuery对象后直接调用remove()
方法就可以了,同样的调用合适jQuery对象会起到批量删除的效果。
注意:
remove()
返回值为一个指向被删除的节点的引用,因此以后也可以再使用这些元素。
var li = $('#test-div>ul>li');
li.remove(); // 所有<li>全被删除
2.2.2 detach()
detach()
方法也能删除DOM节点,与remove()
不同的是,该方法不会使与之绑定的事件函数失效。
2.3 复制节点clone()
clone()
的作用是复制节点,如:
$(this).clone(true).append("body");
//注意clone当中的参数true,含义是同时复制元素的绑定事件,是一个可选参数。
2.4 包裹节点
如果要把某个节点使用其他节点元素包裹起来,可以使用wrap()
方法、wrapAll()
方法、wrapInner()
方法
2.4.1 wrap()
方法
wrap()
方法是将所有的元素进行单独包裹
/*DOM节点文档
<strong>我爱Python</strong>
<strong>我爱JavaScript</strong>
*/
$('strong').wrap("<b></b>");
/* 结果 */
//<b><strong>我爱Python</strong></b>
//<b><strong>我爱JavaScript</strong></b>
2.4.2 wrapAll()
方法
与wrap()
方法不同,wrapAll()
方法是将所有的元素一次性包裹
/*DOM节点文档
<strong>我爱Python</strong>
<strong>我爱JavaScript</strong>
*/
$('strong').wrap("<b></b>");
/* 结果
<b>
<strong>我爱Python</strong>
<strong>我爱JavaScript</strong>
</b>
*/
2.4.3 wrapInner()
wrapInner()
方法的作用是包裹节点元素的子节点内容(包括文本节点)
/*DOM节点文档
<strong>我爱Python</strong>
*/
$('strong').wrapInner("<b></b>");
/* 结果
<strong><b>我爱Python</b></strong>
*/
2.4 题目理解append()
除了列出的3种语言外,请再添加Pascal、Lua和Ruby,然后按字母顺序排序节点:
<!-- HTML结构 -->
<div id="test-div">
<ul>
<li><span>JavaScript</span></li>
<li><span>Python</span></li>
<li><span>Swift</span></li>
</ul>
</div>
<script>
var ul = $('#test-div ul');
['Pascal','Lua','Ruby'].forEach(function(element){
ul.append('<li><span>'+element+'</span></li>');
});//使用forEach,不使用map
var li = ul.find('li').sort(function(x,y){
return x.innerText>y.innerText?1:-1;
});//制作排好序的dom节点数组
ul.append(li);//添加到jQuery对象中
</script>