jQuery知识点（二）

💻博主现有专栏：

                C51单片机（STC89C516），c语言，c++，离散数学，算法设计与分析，数据结构，Python，Java基础，MySQL，linux，基于HTML5的网页设计及应用，Rust（官方文档重点总结），jQuery，前端vue.js，Javaweb开发，设计模式、Python机器学习等
🥏主页链接：

                Y小夜-CSDN博客

目录

🎯jQuery操作样式

🎃css()方法

🎃类样式方法

🎯jQueary操作内容

🎯jQuery操作尺寸

🎯jQuery操作属性

🎯jQuery操作节点

---

🎯jQuery操作样式

🎃css()方法

专门用来读取或设置css样式的，使用形式：

$(“div”).css(“color”)      //读取div元素的color属性值
$(“div”).css(“color”, “red”);    //设置div元素的color属性值
$(“div”).css(“color”, “red”).css(“width”, “300”).css(“height”, “200”).css(“background-color”, “pink”);   //链式写法
$(“div”).css({color: “red”, width: 300, height: 200, “background-color”: “pink”});    //效果和上面链式写法一样

键值对形式建议分行写，结构更清晰

$(“div”).css({
color: “red”, 
width: 300, 
height: 200,
“background-color”: “pink”
}); 

🎃类样式方法

专门用来操作元素的class属性

addClass(): 追加样式
removeClass(): 移除样式
hasClass(): 判断样式
toggleClass(): 切换样式   

🎯jQueary操作内容

• addClass(): 追加样式
• removeClass(): 移除样式
• hasClass(): 判断样式
• toggleClass(): 切换样式   

text()和html()方法用于是双标记的网页元素；

val()方法用于具有value属性的表单元素；

上面三个方法不给参数是用来获取值的，给参数是设置值

🎯jQuery操作尺寸

• width()、height():  获取的是 content 区域大小
• innerWidth()、innerHeight():获取的是 content + padding 区域大小
• outerWidth()、outerHeight():获取的是 content + padding + border 区域大小
• outerWidth(true)、outerHeight(true):获取的是 content + padding + border + margin 区域大小

注意：操作尺寸的这几个方法一般用在读取值时

🎯jQuery操作属性

• attr():设置或获取元素标签上的属性
• prop():设置或获取元素标签上的属性
• removeAttr():删除元素的一个或多个属性，如需移除若干个属性，使用空格分隔属性名称。

        提醒：一般在添加属性名称时该属性就会生效或属性只有true和false两个属性值时尽量使用prop()方法进行设置与获取，其他属性则使用attr()方法。

🎯jQuery操作节点

1.获取节点：

        通过各种选择器或选择器的组合来获取想要的网页元素。

2.创建节点：

        元素节点通过工厂函数$()直接创建，文本节点和属性节点可以随着元素节点创建时一起创建，也可以通过先创建元素节点，再使用操作内容和属性的方法产生。

3.插入节点：

        append()、prepend(): 是父元素的方法

         appendTo()、prependTo(): 是要插入的节点的方法

        before()、after(): 是要插入的节点的同辈节点的方法

        insertBefore()、insertAfter(): 是要插入的节点的方法

注意：

        插入节点的方法如果是对网页中已经存在的元素，实现的是移动效果；

         如果是对新创建的元素，实现的是插入元素的操作。

4.删除节点：

        remove():节点及所有的后代、节点上绑定的事件都被删除

        detach():绑定的事件会被保留下来

        empty():清空节点，清除所有后代

5.复制节点：

        clone():参数为true，复制元素的同时也复制元素绑定的事件

6.替换节点：

        replaceWith():

        replaceAll():

7.包裹节点：

        wrap():

        wrapAll():

        wrapInner():

7.遍历节点：

        children():

        find():

        next():

        prev():

        siblings():

        closet():获取最近匹配的祖先元素

        parent():

        parents():获取所有祖先元素