JQuery操作元素的样式

  • 使用css()
    • 对象名.css(“属性名”)—-返回当前属性的样式值
    • 对象名.css(“属性名”,”属性值”)—-增加、修改元素的样式
    • 对象名.css({“样式名”:”样式值”,”样式名”:”样式值”……})—-使用json传参，提升代码书写效率。
    • 相当于原生js中的对象名.style.属性名
  • 使用addClass()
    • 对象名.addClass(“类选则器名”)—-追加一个类样式
    • 对象名.removeClass(“类选择器 名”)—-删除一个指定的类样式
    • 相当于原生js中的对象名.className 
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      60
      61
      62
      63
      64
      65
      66
      67
      68
      69
      70
      71
      72
      73
      74
      75
      76
      77
      78
      79
      80
      81
      82
      <html>
      	<head>
      		<title>操作元素样式</title>
      		<meta charset="UTF-8"/>
      		<!--声明css-->
      		<style type="text/css">
      			#showdiv{
      				width: 300px;
      				height: 300px;
      				border: solid 1px;	
      			}
      			.common{
      				width: 300px;
      				height: 300px;
      				border: solid 1px;	
      				background-color: blueviolet;
      			}
      			.dd{
      				font-size: 30px;
      				font-weight: bold;
      			}
      		</style>
      		<!--引入jQuery文件-->
      		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
      		<!--声明js代码域-->
      		<script type="text/javascript">
      			//jQuery操作样式---css()
      				function testCss(){
      					//获取元素对象
      						var showdiv=$("#showdiv");
      					//操作样式--增加
      						showdiv.css("background-color","orange");
      					//操作样式--获取
      						alert(showdiv.css("width"));		
      				}
      			
      				function testCss2(){
      					//获取元素对象
      						var div=$("#div01");
      					//操作样式
      						div.css({"border":"solid 1px","width":"300px","height":"300px"});	
      				}
      			
      			//jquery操作样式--addClass()
      				function testAddClass(){
      					//获取元素对象
      						var div=$("#div01");
      					//操作元素样式
      						div.addClass("common");	
      				}
      				
      				function testAddClass2(){
      					//获取元素对象
      						var div=$("#div01");
      					//操作元素样式
      						div.addClass("dd");	
      				}
      			
      				function testRemoveClass(){
      					//获取元素对象
      						var div=$("#div01");
      					//删除元素样式
      						div.removeClass("dd");	
      				}	
      		</script>
      	</head>
      	<body>
      		<h3>操作元素样式</h3>
      		<input type="button" name="" id="" value="操作样式---css()" onclick="testCss()" />
      		<input type="button" name="" id="" value="操作样式---css()--json" onclick="testCss2()" />
      		<input type="button" name="" id="" value="操作样式---addClass()" onclick="testAddClass()" />
      		<input type="button" name="" id="" value="操作样式---addClass()--2" onclick="testAddClass2()" />
      		<input type="button" name="" id="" value="操作样式---removeClass" onclick="testRemoveClass()" />
      		<hr />
      		<div id="showdiv">
      	
      		</div>
      		<div id="div01" class="common dd"><!--类名可以是多个小类名-->
      			我是div01
      		</div>
      	</body>
      </html>

      JQuery操作文档结构

  • 首先获取元素对象
  • 内部插入
    • append(“内容”)—–将指定的内容追加到对象的内部
    • appendTo(元素对象或者选择器)—–将制定的元素对象追加到指定的对象内容
    • prepend()—–将指定的内容追加到对象的内部的前面
    • prependTo()—–将制定的元素对象追加到指定的对象内容前面
  • 外部插入
    • after—–将指定的内容追加到指定的元素后面
    • before—–将指定的内容追加到指定的元素前面
    • insertAfter—–把所有匹配的元素插入到另一个、指定的元素元素集合的后面
    • insertBefore—–把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
  • 包裹
  • 替换
  • 删除：empty()
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    <html>
    	<head>
    		<title>操作文档结构</title>
    		<meta charset="UTF-8"/>
    		<!--引入jQuery文件-->
    		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
    		<!--声明js代码域-->
    		<script type="text/javascript">
    			//内部插入
    				function testAppend(){
    					//获取元素对象
    						var div=$("#showdiv");
    					//使用内部插入
    						div.append("<i>，饭</i>");
    				}
    				
    				function testAppendTo(){
    					//获取元素对象
    						var div=$("#showdiv");
    					//使用appendTo()
    						$("#u1").appendTo(div);	
    				}
    				
    				function testPrepend(){
    					//获取元素对象
    					var div=$("#showdiv");
    					//使用prepend()
    					div.prepend("<i>你好，</i>");
    				}
    			//外部插入
    				function testAfter(){
    					//获取元素对象
    						var div=$("#showdiv");
    					//使用after外部插入
    						div.after("<b>今天天气不错，适合学习</b>");
    					
    				}
    				function testBefore(){
    					//获取元素对象
    						var div=$("#showdiv");
    					//使用before外部插入
    						div.before("<b>今天天气不错，适合学习</b>")
    					
    				}
    				function testEmpty(){
    					$("#showdiv").empty()
    				}
    		</script>
    		<style type="text/css">
    			#showdiv{
    				width: 300px;
    				height: 300px;
    				border: solid 3px orange;
    			}
    		</style>
    	</head>
    	<body>
    		<h3>操作文档结构</h3>
    		<input type="button" name="" id="" value="测试append" onclick="testAppend()" />
    		<input type="button" name="" id="" value="测试appenTo" onclick="testAppendTo()" />
    		<input type="button" name="" id="" value="测试prepend" onclick="testPrepend()" />
    		<hr />
    		<input type="button" name="" id="" value="测试after" onclick="testAfter()" />
    		<input type="button" name="" id="" value="测试before" onclick="testBefore()" />
    		<input type="button" name="" id="" value="测试删除--empty()" onclick="testEmpty()" />
    		<hr />
    		<u id="u1">每天下午都是充斥着面包浓浓的香味</u>
    		<div id="showdiv">
    			<b>今天中午吃什么</b>
    		</div>
    	</body>
    </html>