jQuery操作文本，样式，属性

标签：add   特定   nbsp   ack   option   ul li   jquery   不同的   jin   

操作DOM1
　　为什么用jQuery
　　　　操作DOM节点啦！
　　　　不需要考虑浏览器兼容性问题，全部统一操作！

修改Text和HTML
　　jQuery对象的text()：返回节点的文本
　　html()：原始HTML文本

　　　　$(‘#test-ul li[name=book]‘).text(); //
　　　　$(‘#test-ul li[name=book]‘).html(); //

　　　　text()不传参数：获取文本
　　　　text()传参数：设置文本
　　html()类似
　　　　$(‘#test-ul li[name=book]‘).text(‘<span style="color: red">JavaScript</span>‘); // ‘Java & JavaScript‘
　　　　$(‘#test-ul li[name=book]‘).html(‘JavaScript & ECMAScript‘);
jQuery对象有“批量操作”的特点
　　一个jQuery对象就是一个DOM对象数组，Query对象调用方法，会作用在数组中的每个DOM节点上
　　$(‘#test-ul li‘).text(‘JS‘); // 两个节点都变成了JS

修改CSS 　　

　　css()方法将作用于DOM节点的style属性，具有最高优先级。
　　css(‘name‘, ‘value‘)
　　$(‘#test-css li.dy>span‘).css(‘background-color‘, ‘#ffd351‘).css(‘color‘, ‘red‘);
　　　　注意，链式调用的原因：jQuery对象的所有方法都返回一个jQuery对象（可能是新的也可能是自身）
　　jQuery对象的css()方法可以这么用：
　　　　var div = $(‘#test-div‘);
　　　　div.css(‘color‘); // ‘#000033‘, 获取CSS属性
　　　　div.css(‘color‘, ‘#336699‘); // 设置CSS属性
　　　　div.css(‘color‘, ‘‘); // 清除CSS属性

jQuery操作class
　　var div = $(‘#test-div‘);
　　div.hasClass(‘highlight‘); // false， class是否包含highlight
　　div.addClass(‘highlight‘); // 添加highlight这个class
　　div.removeClass(‘highlight‘); // 删除highlight这个class

显示和隐藏DOM
　　var a = $(‘a[target=_blank]‘);
　　a.hide(); // 隐藏
　　a.show(); // 显示
　　注意，隐藏DOM节点并未改变DOM树的结构，它只影响DOM节点的显示。这和删除DOM节点是不同的

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

// 浏览器可视窗口大小:
　　$(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是否有效

attr()：
　　不传参数：获取属性
　　传参数：设置参数
　　removeAttr()：删除参数

　　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、

　　　　但是HTML5规定：有一种属性在DOM节点中可以没有值（单选框的“checked”），只有出现与不出现两种
　　attr()和prop()对于属性checked处理有所不同：
　　　　var radio = $(‘#test-radio‘);
　　　　radio.attr(‘checked‘); // ‘checked‘
　　　　radio.prop(‘checked‘); // true
　　　　　　prop()返回值更合理一些。不过，用is()方法判断更好：

　　　　radio.is(‘:checked‘); // true
　　　　　　类似的属性还有selected，处理时最好用is(‘:selected‘)。

操作表单
　　对于表单元素，val()
　　不传参数：获取value值
　　传参数：设置value值
/*
<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

jQuery操作文本，样式，属性

标签：add   特定   nbsp   ack   option   ul li   jquery   不同的   jin   

原文地址：https://www.cnblogs.com/xuanjian-91/p/10322587.html