JQuery之操作DOM
2021-01-29 15:16
YPE html>
标签：名称 衣服 绑定 rem 组合 create tom read tps
一、样式操作和类操作
作用：设置或获取元素的样式属性值。
1、样式操作
**1、设置样式：**
```javascript
//设置单个样式： css(属性，值);
$("div").css("background-color","red");
//设置多个样式： css(json);
$("div").css({"width":100,"height":100,"background-color":"pink"});
```
**2、获取样式：**
```javascript
//获取样式：css(属性);
//获取的时候如果有很多个，那么获取jquery对象中的第一个
alert($("div").css("width"));
```
2、类操作（className）
**1、添加类样式：**
```javascript
$(selector).addClass("liItem"); //为指定元素添加类className
```
注意：此处类名不带点，所有类操作的方法类名都不带点。
**2、移除类样式：**
```javascript
$(selector).removeClass("liItem"); //为指定元素移除类 className
$(selector).removeClass(); //不指定参数，表示移除被选中元素的所有类
```
**3、判断有没有类样式：**
```javascript
$(selector).hasClass("liItem"); //判断指定元素是否包含类 className
```
此时，会返回true或false。jquery对象中，只要有一个带有指定类名的就是true，所有都不带才是false。
举例：
```html
```
**4、切换类样式：**
```javascript
$(selector).toggleClass(“liItem”); //为指定元素切换类 className，该元素有类则移除，没有指定类则添加。
```
解释：为指定元素切换类 className，该元素有类则移除，没有指定类则添加。
如果采用采用正常的思路实现上面这句话，代码是：
```javascript
if($("div").hasClass("current")){
//如果有类名，那么删除
$("div").removeClass("current")
}else{
//如果没有类名，那么添加
$("div").addClass("current")
}
```
现在有了toggleClass()方法，一行代码即可实现。
举例：
```html
```
3、样式操作和类操作的比较
- 操作的样式非常少，那么可以通过`.css()`实现。
- 操作的样式很多，建议通过使用类 class 的方式来操作。
- 如果考虑以后维护方便（把CSS从js中分离出来）的话，推荐使用类的方式来操作。
**举例**：addClass+removeClass
代码实现：
```html
- 国际大牌◆
- 国妆名牌◆
- 清洁用品◆
- 男士精品
```
上方代码中，我们注意，tab栏和下方图片栏的index值，一一对应，这里用得很巧妙。
效果：
二、jQuery 的节点操作
1、动态创建元素
原生 js 有三种动态创建元素的方式。
方式一：
```javascript
var $spanNode1 = $("我是一个span元素"); // 返回的是 jQuery对象
```
此方法类似于 原生 js 中的`document.createElement("标签名");`
方式二：（推荐）
```javascript
var node = $("#box").html("
```
此方法类似于 原生 js 中的`innerHTML`。
举例：
```javascript
//方式一： $("标签") :类比于js中的document.createElement("li");
console.log($("
//方式二： $("ul").html(""); :类比innerHTML属性。因为此属性，识别标签。
$("ul").html("
```
2、添加元素
jQuery 添加元素的方法非常多，最重要的方法是`append()`。格式如下：
```javascript
// 方式一：在$(selector)中追加$node
$(selector).append($node); //参数是 jQuery对象
// 方式二：在$(selector)中追加div元素，
$(selector).append(‘
```
作用：在被选元素内部的最后一个子元素（或内容）后面插入内容（存在或者创建出来的元素都可以）。
通俗的解释：**在盒子里的最末尾添加元素**。
- 如果是页面中存在的元素，那调用append()后，会把这个元素放到相应的目标元素里面去；但是，原来的这个元素，就不存在了。
- 如果是给多个目标追加元素，那么方法的内部会复制多份这个元素，然后追加到多个目标里面去。
举例：
```html
- 我是土著li
```
效果：
)
**其他的添加元素的方法：**
方法2：
```javascript
$(selector).appendTo(node);
```
作用：同append()，只不过是反着写的。
方法3：
```javascript
$(selector).prepend(node);
```
作用：在元素的第一个子元素前面追加内容或节点。
方法4：
```javascript
$(selector).after(node);
```
作用：在被选元素之后，作为**兄弟元素**插入内容或节点。
**方法5：**
```javascript
$(selector).before(node);
```
作用：在被选元素之前，作为**兄弟元素**插入内容或节点。
3、清空元素
方式一：没有参数
```javascript
$(selector).empty();
$(selector).html("");
```
解释：清空指定元素的所有子元素（光杆司令）。
方式二：
//
```javascript
$(selector).remove();
```
解释：“自杀” 。把自己以及所有的内部元素从文档中删除掉。
4、复制元素
格式：
```javascript
复制的新元素 = $(selector).clone();
```
解释：复制$(selector)这个元素。是深层复制。
5、总结
推荐使用 `html("")` 方法来创建元素或者 `html("")` 清空元素。
6、案例
选择水果
完整版代码：
```html