jQuery入门DOM操作

jQuery入门DOM操作

---

---

安装-导入

首先下载jQuery的文件,放到本地项目中,然后在需要的html头部导入使用即可.

<script type="text/javascript" src="jq/js/jquery-1.12.4.js" ></script>

一.获取元素内容

语法:
text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法：
1.text() - 设置或返回所选元素的文本内容。 相当于js中的innerTEXT()

<script>
	function f1(){
		//this：当前对象
		$(this).text();//获取标签内容
		$(this).text("标签");//设置标签内容
	}
</script>

2.html() - 设置或返回所选元素的内容（包括 HTML标记）。相当于js中的innerHTML

<script>
	function f1(){
		$(this).html();//获取
		$(this).html("标签");//设置标签
	}
</script>

3.val() - 设置或返回表单字段的值 。相当于js中的value

<script>
	function f1(){
		$(this).val();//获取value值
		$(this).val("111");//设置value值
	}
</script>

---

二.获取属性 - attr()

jQuery attr() 方法用于获取属性值。

		$('选择器').attr('属性名','属性值')

		有两个参数，如果只传入第一个参数代表的是获取属性值，传入第二个参数，代表的是设置属性的值		

	设置行内样式：

		$(this).attr("style","font-size: 20px;color: darkgoldenrod;");//设置多个样式

	设置图片路径

		$(this).attr("src","img/Chrysanthemum.jpg");//设置路径

		$(this).attr("src");//获取路径

	设置href超链

		$(this).attr("href","http://www.taobao.com")//设置地址

jQuery 1.6新增方法 prop()，与attr()相似，可以设置或返回被选元素的属性和值。
区别：一般来说，具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()方法，其他的使用 attr()方法。

<script>
	function f1(){
		var tr=$(this).prop("checked");//获取
		$(this).prop("checked","checked");//设置标签
	}
</script>

---

三.设置样式

上边增加样式为行内样式还可以：

		$("a").css("color","red"); //行内样式

		$("a").css("font-size","28px");//行内样式	

	增加内部样式：

		$(this).css("color","red");//设置行内样式

		addClass() - 向被选元素添加一个或多个类 

		$(this).addClass("aa dd");//设置内部样式,可设置多个

		removeClass() - 从被选元素删除一个或多个类 

		$(this).removeClass("aa");//删除内部样式

		toggleClass() - 对被选元素进行添加/删除类的切换操作

		$(this).toggleClass("aa");//添加/删除内部样式

四.小结

本章概述了jQuery中的部分DOM操作，设置以及获取元素的使用，本章是jQuery的重点，不理解的一定要多练。

有哪里不足或者有更好的建议，欢迎留言吐槽，有哪里不懂得小伙伴，可以私信我，我会一一答复，感谢支持，感谢认可！