jQuery的属性和CSS，文档处理

古城微笑少年丶 2022-05-13 08:48 193阅读 0赞

**4.属性和CSS**

**4.1属性【掌握】**  
![这里写图片描述][70]  
attr(name) 获得指定属性名的值  
attr(key ,val ) 给一个指定属性名设置值  
attr(prop ) 给多个属性名设置值。参数：prop json数据  
\{k : v , k : v , …..\}  
removeAttr(name) 移除指定属性

**4.2CSS类**

![这里写图片描述][70 1]  
addClass(“my”) 追加一个类  
removeClass(“my”) 将指定类移除  
toggleClass(“my”) 如果有my将移除，如果没有将添加。

**4.3HTML代码/文本/值【掌握】**  
![这里写图片描述][70 2]

val() 获得value的值  
val(text) 设置value的值

html() 获得html代码，含有标签  
html(…) 设置html代码，如果有标签，将进行解析。

text() 获得文本值，将标签进行过滤 
text(…) 设置文本值，如果有标签，将被转义 –> `< < & & >` `<  `

**4.4CSS**  
  
![这里写图片描述][70 3]  
css(name) 获得指定名称的css值  
css(name ,value) 设置一对值  
css(prop) 设置一组值

**4.5位置**  
![这里写图片描述][70 4]  
offset() 获得坐标 ， 返回JSON对象，\{“top”:200, “left” : 100\}  
![这里写图片描述][70 5]  
offset(…) 设置坐标。例如：$(this).offset(\{“top”:0 , “left” : 0\})

scrollTop() 垂直滚动条 滚过的距离  
scrollLeft() 水平滚动条 滚过的距离

**4.6尺寸**  
![这里写图片描述][70 6]  
height(\[…\]) 获得 或 设置 高度  
width(\[…\])获得 或 设置 宽度

**5文档处理**

**5.1内部插入【掌握】**  
![这里写图片描述][70 7]

A.append(B) 将B插入到A的内部后面（之后的串联操作，操作A）

A.prepend(B) 将B插入到A的内部前面

A.appendTo(B) 将A插入到B的内部后面 （之后的串联操作，操作A）  
A.prependTo(B) 将A插入到B的内部前面

**5.2外部插入【掌握】**  
![这里写图片描述][70 8]

A.after(B) , 将B插入到A后面（同级）

<A></A>

A.before(B) ，将B插入到A前面

<A></A>

A.insertAfter(B) , 将A插入到B后面（同级）

<A></A>

A.insertBefore(B) 将A插入到B前面

<A></A>

**5.3删除\[掌握\]**  
![这里写图片描述][70 9]  
empty() 清空标签体  
remove() 删除当前对象。如果之后再使用，元素本身保留，绑定事件 或 绑定数据 都会被移除  
detach() 删除当前对象。如果之后再使用，元素本身保留，绑定事件 或 绑定数据 都保留

绑定数据  
data(name) 获得  
data(name,value) 设置  
![这里写图片描述][70 10]

**5.4复制**  
![这里写图片描述][70 11]  
clone() 克隆  
even ：指示事件处理函数是否会被复制。V1.5以上版本默认值是：false

**5.5替换**  
![这里写图片描述][70 12]

A.replaceWith(B) ，使用A将B替换掉  
A.replaceAll(B) ，使用B将A替换掉

**5.6包裹**  
![这里写图片描述][70 13]

A.wrap(B) ，使用B将每一个A进行包裹（多个B）

![这里写图片描述][70 14]  
A.wrapAll(B) ，使用B将所有A进行包裹（一个B）

![这里写图片描述][70 15]  
A.wrapInner(B) ,使用B将每一个A的标签体包裹。

![这里写图片描述][70 16]  
A.unwrap() ，将A的父元素删除，自己留着

[70]: /images/20220513/55eb67728bfc40f28be31ec3a4e3ebe7.png
[70 1]: /images/20220513/df45551fa6924c12a90f4e76c5a85f86.png
[70 2]: /images/20220513/60525531e76d47c59fcc23c3e8bbf8df.png
[70 3]: /images/20220513/07681a67fa4a42159ee333e3b56b45a9.png
[70 4]: /images/20220513/caeec5b8fc51477aa3f6c3ce85f7ff62.png
[70 5]: /images/20220513/0ae26b45a46a4602923eed628b3088a8.png
[70 6]: /images/20220513/e2c0ec65a6ee4a0bbbe540642ae064dd.png
[70 7]: /images/20220513/d0b7400d345e43b9a7420d5e2751833d.png
[70 8]: /images/20220513/aa729da112924184bb446aa6348d223b.png
[70 9]: /images/20220513/9b61514ab1a34c92b0cb6694d46b7c71.png
[70 10]: /images/20220513/b7b805b342a14c88a98b48869c8cad48.png
[70 11]: /images/20220513/cbe6a97d67fa4ea8b9cb9ee6542cc0b3.png
[70 12]: /images/20220513/42e0f780a46a4e5ba44cf00162ac8bde.png
[70 13]: /images/20220513/0f2e51294e4b48269b5037db9d0ff416.png
[70 14]: /images/20220513/852b2173644a4fd7a9a9642abe8687e9.png
[70 15]: /images/20220513/e3db330602a24d54862198326cde60e9.png
[70 16]: /images/20220513/0eb5fba611be4c1ba1008dbdb9c0bbaa.png