jQuery操作HTML+CSS

港控/mmm° 2023-02-08 12:51 4阅读 0赞

jQuery可以动态操作html元素，css效果。给我们带来了不少的方便。

# 一：添加HTML #

添加html的方法有三个，分别是。  
$(selector).append(content)  
append() 函数向所匹配的 HTML 元素内部追加内容。  
$(selector).prepend(content)  
prepend() 函数向所匹配的 HTML 元素内部预置（Prepend）内容。  
$(selector).after(content)  
after() 函数在所有匹配的元素之后插入 HTML 内容。  
$(selector).before(content)

before() 函数在所有匹配的元素之前插入 HTML 内容。

# 二：删除HTML #

empty();

remove();

# 三：添加CSS #

jQuery 拥有三种用于 CSS 操作的重要函数：  
• $(selector).css(name,value)  
函数 css(name,value) 为所有匹配元素的给定 CSS 属性设置值：  
• $(selector).css(\{properties\})  
函数 css(\{properties\}) 同时为所有匹配元素的一系列 CSS 属性设置值：  
• $(selector).css(name)  
函数 css(name) 返回指定的 CSS 属性的值：  
jQuery 拥有两种用于尺寸操作的重要函数：  
• $(selector).height(value)  
设置元素高度  
• $(selector).width(value)

设置元素宽度

# 四：删除css #

同上，赋值为空即可

# 删除class #

removeClass();

下面是常用的css操作方法

<table style="margin-top:10px; border-collapse:collapse; border:1px solid rgb(136,136,136); width:605.4545288085938px; color:rgb(0,0,0); font-size:11.818181991577148px; background-color:rgb(249,249,249)"> 
 <tbody> 
  <tr> 
   <th style="vertical-align:baseline; padding:5px 15px 5px 5px; background-color:rgb(204,204,204); border:1px solid rgb(136,136,136)"> CSS 属性</th> 
   <th style="vertical-align:baseline; padding:5px 15px 5px 5px; background-color:rgb(204,204,204); border:1px solid rgb(136,136,136)"> 描述</th> 
  </tr> 
  <tr> 
   <td style="vertical-align:text-top; padding:5px 15px 5px 5px; background-color:rgb(239,239,239); border:1px solid rgb(170,170,170)"> $(selector).css(name,value)</td> 
   <td style="vertical-align:text-top; padding:5px 15px 5px 5px; background-color:rgb(239,239,239); border:1px solid rgb(170,170,170)"> 为匹配元素设置样式属性的值</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:text-top; padding:5px 15px 5px 5px; background-color:rgb(239,239,239); border:1px solid rgb(170,170,170)"> $(selector).css({properties})</td> 
   <td style="vertical-align:text-top; padding:5px 15px 5px 5px; background-color:rgb(239,239,239); border:1px solid rgb(170,170,170)"> 为匹配元素设置多个样式属性</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:text-top; padding:5px 15px 5px 5px; background-color:rgb(239,239,239); border:1px solid rgb(170,170,170)"> $(selector).css(name)</td> 
   <td style="vertical-align:text-top; padding:5px 15px 5px 5px; background-color:rgb(239,239,239); border:1px solid rgb(170,170,170)"> 获得第一个匹配元素的样式属性值</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:text-top; padding:5px 15px 5px 5px; background-color:rgb(239,239,239); border:1px solid rgb(170,170,170)"> $(selector).height(value)</td> 
   <td style="vertical-align:text-top; padding:5px 15px 5px 5px; background-color:rgb(239,239,239); border:1px solid rgb(170,170,170)"> 设置匹配元素的高度</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:text-top; padding:5px 15px 5px 5px; background-color:rgb(239,239,239); border:1px solid rgb(170,170,170)"> $(selector).width(value)</td> 
   <td style="vertical-align:text-top; padding:5px 15px 5px 5px; background-color:rgb(239,239,239); border:1px solid rgb(170,170,170)"> 设置匹配元素的宽度</td> 
  </tr> 
 </tbody> 
</table>