JavaScript-jQuery04# jQuery操作元素内容，样式

jQuery操作元素内容，样式

操做内容

• 获取
  • 对象名.html()//返回当前对象中的所有内容，包括HTML标签
  • 对象名.text()//返回当前对象中所有的文本内容
• 修改
  • 对象名.html(“新的内容”)//新的内容会将原有的标签覆盖，HTML标签会被解析执行
  • 对象名.text(“新的内容”)//新的内容会将原有的内容覆盖，html标签以文本格式显示

<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function testHtml(){
				var showDiv = $("#showDiv");
				alert(showDiv.html());
			}
			function testHtml1(){
				var showDiv = $("#showDiv");
				showDiv.html("<i>明天继续学习jQuery</i>");
			}
		</script>

操作元素样式

• 使用css
  • 对象名.css(“属性名”)//返回当前对象此属性的值
  • 对象名.css(“属性名”,“属性值”)//增加修改对象此属性的值
  • 对象名.css({“样式名”:“样式值”,“样式名”:“样式值”,…})//通过json传参提高代码效率
• 使用类选择器
  • 对象名.addClass(“类选择器名”)//为该对象追加一个类样式
  • 对象名.removeClass(“类选择器名”)//删除该对象的该类样式

<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function testCss(){
				var showDiv = $("#showDiv");
				//增加样式
				showDiv.css("background-color","orange");
				//获取样式
				alert(showDiv.css("height"));
			}
			function testCss1(){
				var div = $("#div2");
				div.css({"border":"red solid 2px","height":"200px","width":"200px"});
			}
			function testAddCLass(){
				var div3 = $("#div3");
				div3.addClass("common");
			}
			function testRemoveCLass(){
				var div3 = $("#div3");
				div3.removeClass("common");
			}
		</script>

学习过程中的积累，有任何问题欢迎指教!