jQuery操作DOM的属性操作

  • 如果要使用一个js生成前台页面,那么最大的问题莫过于DOM的解析处理繁琐,二jQuery最大的好处,就在于可以尽一切的可能性减少此部分操作

属性操作

  • 在DOM解析的处理过程之中,如果要尽心熟悉操作可以使用如下的操作

    • 设置属性:元素对象.setAttribute(属性名称,内容)
    • 取得属性:元素对象getAttribute(属性名称)
    • 删除属性:元素对象,removeAttribute(属性名称)
  • 到那时在JQuery中对于属性操作时间上函数简化了

    • 设置属性:jQuery元素对象.attr(属性名称,属性内容)
    • 取得属性:jQuery元素对象.attr(属性名称),
    • 删除属性:jQuery元素对象.removeAttr(属性名称)
  • 观察属性操作

  • 为一个img元素添加一个图片的路径,并设置图片宽度

<html>
<head>
	<title>jquery 属性操作title>
	<meta charset="UTF-8"/>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<script type="text/javascript" src="js/jquery.min.js" charset="utf-8">script>
	<script type="text/javascript">
		$(function(){
			//设置img标签的src路径
			$("div>img").attr("src","images/gd.jpg");
			//设置图片的宽度
			$("div>img").attr("width","500px");
		})
	script>
head>
<body>
	<div><img>div>
body>
html>

jQuery操作DOM的属性操作_第1张图片

  • jQuery中的DOM操作简化

删除属性操作

	$(function(){
			//删除img元素的src属性
			$("div [src]").removeAttr("src")
			
		})
  • 除了进行属性的设置和删除之外也可以取得对应的属性内容

取得属性内容操作

<html>
<head>
	<title>jquery 属性操作title>
	<meta charset="UTF-8"/>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<script type="text/javascript" src="js/jquery.min.js" charset="utf-8">script>
	<script type="text/javascript">
		$(function(){
			//取得img元素中的src属性
			console.log($("img").attr("src"));
			
		})
	script>
head>
<body>
	<div><img src="images/gd.jpg" width="500px">div>
body>
html>

jQuery操作DOM的属性操作_第2张图片

  • 但是既然说到了属性需要一个简单的提示,如果是表单中的value属性可以通过val()函数完成

使用val()函数

<html>
<head>
	<title>jquery 属性操作title>
	<meta charset="UTF-8"/>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<script type="text/javascript" src="js/jquery.min.js" charset="utf-8">script>
	<script type="text/javascript">
		$(function(){
			console.log($("input[type='text']").val());
			
		})
	script>
head>
<body>
	<div><input type="text" value="www.maoshu.com"/>div>
body>
html>
  • 既然牵扯到元素问题,那么就必须解决另外一个问题,元素中的属性固然重要,但是样式对开发同样很重要,而对于样式的设置,有如下的几类操作
    • jQuery对象.attr(“class”,"样式名称)
    • jQuery对象,addClass(“样式名字”);
    • jQuery.对象.css(“样式名字”,“样式内容”);

观察样式的添加

<html>
<head>
	<title>jquery 属性操作title>
	<meta charset="UTF-8"/>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<script type="text/javascript" src="js/jquery.min.js" charset="utf-8">script>
	<script type="text/javascript">
		$(function(){
		//为元素添加样式
			$("div>span").addClass("init");
			$("div>span").addClass("info");
			
		})
	script>
head>
<body>
	<div><span>www.maoshu.comspan>div>
body>
html>
  • 执行结果

jQuery操作DOM的属性操作_第3张图片

  • 如果现在没有样式表文件,但是有具体的样式效果,则可以使用css()函数设置样式

设置样式

<html>
<head>
	<title>jquery 属性操作title>
	<meta charset="UTF-8"/>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<script type="text/javascript" src="js/jquery.min.js" charset="utf-8">script>
	<script type="text/javascript">
		$(function(){
		//设置元素样式
			$("div>span").css("background","red");
			$("div>span").css("color","white");
		
			
		})
	script>
head>
<body>
	<div><span>www.maoshu.comspan>div>
body>
html>

在这里插入图片描述

  • 除了样式的设置样式之外,使用"jQuery对象.removeClass(样式对象)"删除已有的样式

实现样式删除

<html>
<head>
	<title>jquery 属性操作title>
	<meta charset="UTF-8"/>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<script type="text/javascript" src="js/jquery.min.js" charset="utf-8">script>
	<script type="text/javascript">
		$(function(){
		//删除样式
			$("div>span").removeClass("init");		
		})
	script>
head>
<body>
	<div><span class="init">www.maoshu.comspan>div>
body>
html>
  • 属性的样式被删除之后,会保留class属性

你可能感兴趣的:(javaweb学习笔记)