从零开始学jQuery(3)--操作DOM节点

jQuery一个很重要的作用就是操作DOM节点
有了jQuery对象，不需要考虑浏览器差异了，全部统一操作.
text()和html()方法分别获取节点的文本和原始HTML文本
html结构

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-3.5.1.js"></script> 
</head>
<body>
 <ul id="test-ul">
<li class="game">DOTA2</li> 
<li name="steam">CSGO&amp;DOTA2</li> //&amp;是对应着&
</ul> 
</body>
</html>

分别获取文本和HTML

$('#test-ul li').text();//"DOTA2CSGO&DOTA2",笨笨的不会换号
$('#test-ul li[name=steam]').html();//"CSGO&amp;DOTA2"

刚开始没看出什么区别，都是获取页面的内容，但是html()的话不会转义，获取的是原文本，而text获取的是真正显示的内容

当然啦，不光是获取文本，还可以直接设置文本
jQuery无参数调用text()是获取文本，传入参数就变成设置文本,HTML也是类似操作

var first = $('#test-ul li.game');//获取了第一行内容
var second = $('#test-ul li[name=steam]');//获取了第二行内容
first.html('<li style="color: red"  class="game">DOTA2</li>');//html里面要是完整的html语句
second.text('DOTA2');//然后就只剩DOTA2啦,就只用传入修改的文本内容啦
second.text('DOTA2&');//而且不需要转义，输入啥呈现啥
second.text('DOTA2&amp;');//这个无法转义，就显示DOTA2&amp;

一个jQuery对象可以包含0个或任意个DOM对象，它的方法实际上会作用在对应的每个DOM节点上

var all= $('#test-ul li');
all.text('CSGO&DOTA2');//全都修改了

jQuery选择器是真的人性化，即使选择器没有返回任何 DOM节点（没有符合条件的对象)，调用jQuery对象的方法仍然不会报错

$('ul.lala li').text('CSGO');//很明显不存在class=lala的ul，不会报错，也不会有效果

修改CSS
jQuery对象有“批量操作”的特点，这用于修改CSS实在是太方便了
css()方法将作用于DOM节点的style属性，具有最高优先级

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-3.5.1.js"></script> 
</head>
<body>
 <ul id="test-css">
 <li class="pc moba"><span>DOTA2</span></li>
 <li class="pc"><span>CSGO</span></li>
 <li class="pc moba"><span>LOL</span></li>
 <li class="moba"><span>王者荣耀</span></li>
 <li class="pc moba"><span>300英雄</span></li>
 </ul> 
</body>
</html>

要高亮显示动态语言，调用jQuery对象的css(‘name’, ‘value’)方法name是要修改的css对象，value是设置的css值

$('#test-css li.moba span').css('background-color', 'blue').css('color', 'red');//只有可怜的csgo没有变化
$('#test-css li.moba>span').css('background-color', 'white').css('color', 'red');//也别忘了我们的>用法

jQuery对象的所有方法都返回一个jQuery对象（可能是新的也可能是自身这样我们可以进行链式调用，非常方便
jQuery对象的css()方法可以这么用

var ul=$('#test-css');//获取整个ul
ul.css('background-color');//查询ul的背景颜色属性
ul.css('background-color','black');//设置成黑色的背景...完了csgo看不见了
ul.css('background-color','');//清空css属性,表面上看只是变成了白色，但其实看源码的话ul后面的css属性没了

为了和JavaScript保持一致，CSS属性可以用’background-color’和’backgroundColor’两种格式

ul.css('backgroundColor');//查询ul的背景颜色属性ok正常执行
ul.css('backgroundColor','black');//黑了

如果要修改class属性，可以用jQuery提供的下列方法

var ul=$('#test-css');//获取整个ul
ul.hasClass('game');// false，判断ul是否包含这个class
ul.addClass('game'); // 添加game这个class ,会看到ul多出了个class叫game
ul.removeClass('game');//删除刚才添加的game class,但是不会彻底删除class,会显示class=""
ul.removeClass('gamasde');//虽然没有这个class，但也不会报错..所以真的很人性

这个地方的class内容就不需要.啦，一般情况下class是要有.哒

从零开始学jQuery(3)--操作DOM节点

猜你喜欢