从零开始学jQuery(4)--显示和隐藏DOM节点&&操作DOM节点

要隐藏一个DOM，我们可以设置CSS的display属性为none，利用css()方法就可以实现
不过，要显示这个DOM就需要恢复原有的display属性，这就得先记下来原有的display属性到底是block还是inline还是别的值
考虑到显示和隐藏DOM元素使用非常普遍，jQuery直接提供show()和hide()方法，我们不用关心它是如何修改display属性的，总之它能正常工作

<!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>

var moba=$('.moba');//拿到了moba游戏的标签
moba.hide();//发现这几个moba游戏都看不见了,只剩csgo了
moba.show();//又显示出来了

注意，隐藏DOM节点并未改变DOM树的结构，它只影响DOM节点的显示,这和删除DOM节点是不同的，看网页源码可以发现隐藏的dom节点变成了灰色

获取信息
利用jQuery对象的若干方法，我们直接可以获取DOM的高宽等信息，而无需针对不同浏览器编写特定代

$(window).width();//1000浏览器可视窗口的宽
$(window).height();//300浏览器可视窗口的高
$(document).width();//1000 HTML文档的宽，好像和可视窗口的宽一样
$(document).height();//300 HTML文档的高，我这里也是一致的
var ul=$('ul');//获取页面的ul
ul.width();//1224得到ul的宽度
ul.height();//103.333得到ul的高度

当然除了获取信息以外，也可以修改啦

ul.width(400);//Object { 0: ul#test-css, length: 1, prevObject: {…} }
ul.width();//果然修改好了400
ul.height('200px');Object { 0: ul#test-css, length: 1, prevObject: {…} }
ul.height();//200px就是前面的200

attr()和removeAttr()方法用于操作DOM节点的属性
下面就以这个页面为例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-3.5.1.js"></script> 
</head>
<body>
<div id="test-div" name="Test" start="1">
 <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> 
</div>
</body>
</html>

存在的dom节点会返回值，不存在的返回undefined

var div = $('#test-div'); //获取到了我们的整个div
div.attr('data');//undefined
div.attr('id');//"test-div"
div.attr('Test');//undefined
div.attr('name');//"Test"

当然查看完了也可以修改

div.attr('name', 'lalala');//Object { 0: div#test-div, length: 1 }div的name属性变为'lalala' 
div.removeAttr('name');//name属性被删除了
 div.attr('name'); // undefined再查看就没有了

prop()方法和attr()类似，但是HTML5规定有一种属性在DOM节点中可以没有值，只有出现与不出现两种
<input id="test-radio" type="radio" name="test" checked value="1"> 等价于： <input id="test-radio" type="radio" name="test" checked="checked" value="1">
attr()和prop()对于属性checked处理有所不同,咱们也来试试

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-3.5.1.js"></script> 
</head>
<body>
<input id="test-radio" type="radio" name="test" checked value="1">
</body>
</html>

 var radio = $('#test-radio'); //获得radio
 radio.attr('checked'); // 'checked' 
  radio.prop('checked'); // true 
  radio.is(':checked'); // true

prop()返回值更合理一些不过，用is()方法判断更好,类似的属性还有selected，处理时最好用is(’:selected’),用来判断是否被选中了

对于表单元素，jQuery对象统一提供val()方法获取和设置对应的value属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-3.5.1.js"></script> 
</head>
<body>
  <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> 
</body>
</html>

var input = $('#test-input')；//先选中填写email的地方
var select = $('#test-select');//选中选择的地方
var  textarea = $('#test-textarea');//选择文本框
input.val(); //""查看现在email填写的内容，由于没写，所以是空的
select.val();//"BJ"选中了bj,但注意是html内的 value
textarea.val();//现在只有"Hello"

然后开始修改值啦

input.val('[email protected]');//Object { 0: input#test-input, length: 1 }现在发现空白的框内也有了值
input.val();//[email protected],这时表单有值了
select.val('SH'); //把城市换成上海
select.val();//也修改了
"SH"
select.val('SHasd');//Object { 0: select#test-select, length: 1 }如果填写没有的值，会发现select变成空白
select.val();//null select值被成null了
textarea.val('我要睡觉');//Object { 0: textarea#test-textarea, length: 1 }修改文本框内容
textarea.val();//"我要睡觉"

从零开始学jQuery(4)--显示和隐藏DOM节点&&操作DOM节点

猜你喜欢