使用jQuery操作DOM

使用jQuery操作DOM

DOM操作分类

• DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById()
• HTML-DOM：用于处理HTML文档，如document.forms
• CSS-DOM：用于操作CSS，如element.style.color=“green”

样式操作

设置和获取样式值

jQuery中，使用css（）方法为指定的元素设置样式值

//语法
$(selector).css(name,value)//设置单个属性

$(selector).css({name:value,name:value,name:value...})//同时设置多个属性

//示例：
$(this).css("border","5px solid #f5f5f5");

//或
$(this).css({"border":"5px solid #f5f5f5","opacity":"0.5"});  【opacity：设置透明度】

css（）方法的参数

name	必需。规定CSS属性的名称。该参数可以是任何CSS属性。列如，font-size、background等
value	必需。规定CSS属性的值。该参数可以是任何CSS属性值。列如，#000000、24px等

//获取属性语法
$(selector).css(name)//获取属性

$(".textDown").css("background-color")//获取类样式为textDown的背景颜色值

追加样式和移除样式

1.追加样式

除了使用css（）方法可以为元素添加样式外，还能使用addClass（）方法为元素追加类样式

//语法
	$(selector).addClass(类样式名称)

class为类样式的名称，也可以增加多个样式，各个样式之间以空格隔开即可

$(selector).addClass(类样式名称 类样式名称 ... classN)

2.移除样式

jQuery中，与addClass（）方法相对应的方法是移除样式方法 removeClass（）

//语法
	$(selector).removeClass(类样式名称)							   //移除单个样式

	$(selector).removeClass(类样式名称 类样式名称 ... 类样式名称)		//移除多个样式

3.切换样式

toggleClass()：模拟了addClass()与removeClass()实现样式切换的过程

//语法
	$(selector).toggleclass(类样式名称)

4.判断是否含指定的样式

hasClass( )方法来判断是否包含指定的样式

//语法：
	$(selector). hasClass(类样式名称);

内容操作

1.HTML代码操作

html()可以对HTML代码进行操作，类似于JS中的innerHTML

//语法：

$("div.left").html();//   【获取元素中的html代码】

//或

$("div.left").html("<div class='content'>…</div>");//   【设置元素中的html代码】

2.标签内容操作

text()可以获取或设置元素的文本内容

//语法：

$("div.left").text(); // 【获取元素中的文本内容】

//或

$("div.left").text("<div class='content'>…</div>");//   【设置元素中的文本内容】

3.html( ) 和text( )方法的区别：

html( )	无参数	用于获取第一个匹配元素的HTML内容或文本内容
html(content)	content为元素的HTML内容	用于设置所有匹配元素的HTML内容或文本内容
text( )	无参数	用于获取所有匹配元素的文本内容
text (content)	content为元素的文本内容	用于设置所有匹配元素的文本内容

4.属性值操作

val()可以获取或设置元素的value属性值

//语法：

$(this).val();  // 【获取元素的value属性值】

//或

$(this).val(value);  // 【设置元素的value属性值】

$( this). val ("");

//【清空需要添加引号，如果val方法括号中不添加任何内容，是获取val值】

$(#search). focus ( );

//【获得焦点的事件】

$(#search). blur ( );

//【失去焦点的事件】

节点操作

1.查找节点

要想对节点进行操作，即增删改，首先必须找到要操作的元素，jQuery中，获取

• 元素，可以使用jQuery选择器

//设置h2样式
$(".contain:header").css({"background":"#2a65ba","color":"#ffffff"});
//li 最后一个没有边框
$(".gameList li:last").css("border","none");

2.创建节点元素

工厂函数$()用于获取或创建节点：

1. $(selector)：通过选择器获取节点
2. $(element)：把DOM节点转化成jQuery节点
3. $(html)：使用HTML字符串创建jQuery节点

3.参数列表

selector	选择器。使用jQuery选择器匹配元素
element	DOM元素。以DOM元素来创建jQuery对象
html	HTML代码。使用HTML字符串创建jQuery对象

var $newNode=$("<li></li>")				  				  //空<li>
var $newNode1=$("<li>内容</li>")			 				//含文本<li>
var $newNode2=$("<li title='last'>内容</li>")				//含属性<li>

4.元素内部插入子节点

append(content)