attr

attr(name|properties|key,value|key,fn)：设置或返回被选元素的属性值
1，name：返回 name属性的属性值，看下例

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>name</title><script type="text/javascript" src="js/jquery-1.8.3.js" ></script></head><body><a href="http://www.baidu.com" target="_self">百度一下</a><script>var href = $("a").attr("href");//获取href属性属性值console.log(href);</script></body>
</html>

2，properties：使用JavaScript对象设置属性的属性值，看下例

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>properties</title><script type="text/javascript" src="js/jquery-1.8.3.js" ></script></head><body><a href="http://www.baidu.com" target="_self">百度一下</a><script>$("a").attr({href:"https://www.qq.com",target:"_blank"});</script></body>
</html>

3，key,value：设置属性值，看下例

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>key,value</title><script type="text/javascript" src="js/jquery-1.8.3.js" ></script></head><body><a href="http://www.baidu.com" target="_self">百度一下</a><script>$("a").attr("target","_blank");</script></body>
</html>

4，key,fn：利用函数设置属性值，看下例

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>key,fn</title><script type="text/javascript" src="js/jquery-1.8.3.js" ></script></head><body><a href="http://www.baidu.com" target="_self">百度一下</a><script>$("a").attr("target",function (){return "_blank";});</script></body>
</html>

removeAttr

removeAttr(name)：删除name属性

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>removeAttr(name)</title><script type="text/javascript" src="js/jquery-1.8.3.js" ></script></head><body><a href="http://www.baidu.com" target="_blank">百度一下</a><script>$("a").removeAttr("target");</script></body>
</html>

addClass

addClass(class|fn)：为匹配元素设置class属性的属性值，多个属性值使用空格间隔

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>addClass(class|fn)</title><script type="text/javascript" src="js/jquery-1.8.3.js" ></script></head><body><a href="http://www.baidu.com">百度一下</a><style>.background{background-color: red;}.font{font-size: 24px;}</style><script>$("a").addClass("background font");     //设置了多个属性，用空格间隔。</script></body>
</html>

removeClass

removeClass([class|fn])：删除匹配元素class属性的属性值，多个属性值使用空格间隔
设置属性：

执行完如下：

下边删除属性：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>addClass(class|fn)</title><script type="text/javascript" src="js/jquery-1.8.3.js" ></script></head><body><a href="http://www.baidu.com" class="background font">百度一下</a><style>.background{background-color: red;}.font{font-size: 24px;}</style><script>$("a").removeClass("background font");</script></body>
</html>

删除属性执行代码后效果如下：

html

html([val|fn])：获取或设定匹配元素的html内容，fn函数返回一个HTML字符串，该函数有两个参数：第一个参数为元素在集合中的索引位置，第二个参数为旧HTML标签
1，设置匹配元素的html内容

代码执行后效果如下：

2，获取匹配元素的html内容

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>html([val|fn])</title><script type="text/javascript" src="js/jquery-1.8.3.js" ></script></head><body><ul><li><a href="http://www.baidu.com">百度</a></li><li><a href="http://www.qq.com">QQ</a></li><li><a href="http://www.sina.com.cn">新浪</a></li></ul><script>$("li").html(function(index,html) {console.log(index+"："+html);});</script></body>
</html>

text

text([val|fn]) ：获取或设置匹配元素的内容，结果是匹配元素包含的文本内容组合起来的文本
1，设置匹配元素的内容（注意此处不是html内容）

执行效果如下：

2，获取匹配元素的内容，结果是匹配元素包含的文本内容组合起来的文本

执行效果如下：

总结jQuery中的DOM节点属性相关推荐

jQuery库的简单使用:jQuery中的 DOM 操作,增删改查,复制,替换,包裹,属性和样式操作
jQuery中的 DOM 操作查查找属性节点: 通过 jQuery 选择器完成. 操作属性节点: 查找到所需要的元素之后, 可以调用 jQuery 对象的 attr() 方法来获取它的各种属性值 ...
jQuery 学习笔记一(认识jQuery jQuery选择器 jQuery中的DOM操作)
第一章认识jQuery jQuery代码风格 $(document).ready(function(){ //... }); 简化 $(function(){ //... }); jQuery对象转 ...
jQuery 基础教程（四）之jQuery中的DOM操作
一.jQuery 中的 DOM 操作 (1)DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的接口, 使用该接口可以轻松地访问页面中所有的标准组 ...
三、jQuery 中的 DOM 操作（超详细）
文章目录前言一. DOM 介绍二. 查找节点 2.1查找元素节点 2.2查找属性节点三. 创建节点 3.1.创建元素节点 3.2.创建文本节点 3.3.创建属性节点四.插入节点 4.1 DO ...
XML解析（JAVA解析xml文件）java+Dom4j+Xpath xml文件解析根据子节点得到父节点查找校验xml文件中相同的节点属性值 java遍历文件夹解析XML
XML解析 (JAVA解析xml文件)java+Dom4j+Xpath xml文件解析根据子节点得到父节点以及查找xml文件中相同的节点属性值项目背景:这是本人实习中所碰到的项目,当时感觉很棘手, ...
第三章（jQuery中的DOM操作）
3.1 DOM 操作分类 ①DOM Core 包括(getElementById() , getElementsByTagName() , getAttribute() , setAttribute( ...
jQuery中的DOM操作
1. 什么是DOM DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的接口, 使用该接口可以轻松地访问页面中所有的标准组件 2. DOM 操作的 ...
java dom 获得子元素_在JavaScript中删除DOM节点的所有子元素
我将如何删除JavaScript中DOM节点的所有子元素? 说我有以下(丑陋的)HTML: hello world 我抓住了我想要的节点,如下所示: var myNode = document.get ...
JS中的DOM操作属性、DOM创建、DOM增加、DOM修改、DOM删除以及DOM获取非行间样式
当网页被加载时,浏览器会创建页面的文档对象模型DOM(Document Object Model),在DOM中,每个东西都是节点. DOM四大操作:查找.更新.添加.删除通过DOM,JavaScri ...

总结jQuery中的DOM节点属性

DOM节点属性