JQuery对Dom的支持

JQuery操作CSS样式

添加class属性

• addClass( )方法为元素添加 class 属性值

$("#div").addClass("div")

• $("#div") - 选择id为div的标签，为这个标签添加class属性，class的属性值为div

删除css属性

• removeClass()，为不同的元素删除指定的 class 属性值：

$("#div").removeClass("div");
$("#div") -  选择id为div的标签，删除这个标签中的class属性

css方法

• css() 方法设置或返回被选元素的一个或多个样式属性。
• 和className 作用。1:
• Ele.className;- 获取标签的class的值
• ClassName = “hello” - 设置标签的class的值

返回 CSS 方法

• 如需返回指定的 CSS 属性的值，请使用如下语法：
• css("属性名");
  • 如：$("p").css("background-color"); //获取p标签background-color属性的值

设置css方法

• 可以通过css() 设置指定标签的 CSS 属性和值

设置一个属性

• css("propertyname","value"); //propertyname 属性名，value属性值
  • 如：$("p").css("background-color","yellow");
• 选择所有的p标签，设置他们的background-color为"yellow。
• 注意：设置一个属性的时候，属性和值之间使用逗号 ， 分割

设置多个属性

• 可以同时为一个标签设置多个css属性值
• 语法：css({"propertyname":"value","propertyname":"value",...});
• 注意：设置多个的时候，需要使用{} 包裹 ， 属性和属性值之间使用分号分隔，多个属性之间使用逗号分隔
  • 如：$("p").css({"background-color":"yellow","font-size":"200%"});
• 选择所有的p标签，设置他们的背景色为yellow，字体大小为200%

样式的切换

• toggleClass() 方法可以添加和移除被选元素的类，addClass()和removeClass()的组合
• 该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是切换的效果。

语法：$(selector).toggleClass(classname)

内容及value值的操作

HTML代码操作

• html()可以对HTML代码进行操作，类似于JS中的innerHTML，主要用它来设置元素中的代码；
• Html()还可以获取非用户输入的标签内的文本信息

语法：
	$("p").html("AAA");  所有p标签的内容变为：AAA
	$("p").html(String);   所有p标签的内容变为：String中的内容

标签内容操作

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

语法：text (content)

属性值操作

• val()可以获取或设置元素的value属性值
• Val() -- 获取用户输入框输入的内容

语法：
	$(this).val(); 获取元素的value属性值

节点操作

创建节点

• 工厂函数$()用于获取或创建节点-生产东西 - 创建标签的

插入节点

 

• 元素内部插入子节点 - 父子关系
• 

 

• 元素外部插入同辈节点 - 兄弟关系
• 

 

删除节点

• 如需删除元素和内容，一般可使用以下两个 jQuery 方法：
• $(ele).remove() - 删除被选元素（及其子元素） - 删除自己并且删除子标签
• empty() - 删除被选元素的子元素 - 清空被选元素的内容