jQuery中的基本操作

Posted 2021-08-23 暮白寒窗雪

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery中的基本操作相关的知识，希望对你有一定的参考价值。

jQuery中的基本操作

一、操作元素的属性

1、操作元素的属性：操作元素的自定义属性和固有属性，属性是每个页面元素的重要内容，html标签可以有一到若干个属性，我们可以使用javascript中的getAttribute和setAttribute来操作元素的"元素属性"，在jQuery中为用户提供了attr()包装集函数, 能够同时操作包装集中所有元素的属性
分类：①prop()方法

prop()方法：prop()方法用来设置或获取元素固有属性值
prop()方法获取属性值语法： $(selector).prop(“属性名”)
prop()方法设置属性值语法： $(selector).prop(“属性”, “属性值”)
②attr()方法
attr()方法：attr()用来设置或获取元素的自定义属性，自定义属性是指用户给元素添加的非固有属性
attr()方法获取属性值语法： $(selector).attr(“属性名”)
attr()方法设置属性值语法： $(selector).attr(“属性”, “属性值”)
③data()方法
data()方法：data()方法用来在指定的元素上存取数据，数据保存在内存中，并不会修改DOM元素结构
data()方法获取属性值语法： $(selector).data(“数据名”)
data()方法设置属性值语法： $(selector).data(“数据名”, “数据值”)
3、获取元素的属性值

$(selector).attr(属性名)

4、设置元素的属性值
A、以对象的方式设置属性值：

$(selector).attr({'属性名':'属性值'})

B、以key-value的方式设置属性值

$(selector).attr('属性名','属性值')

C、以回调函数的方式设置属性值

$(selector).attr('属性名',function(){
    return '值'
	})

5、删除元素的属性

$(selector).removeAttr('属性名')

6、操作“元素属性”总结如下

二、操作样式与样式类

1、操作样式
(1)获取样式属性的值

 $(selector).css('样式属性名')

(2)设置样式属性的值
A、以传入对象的方式设置样式：

 $(selector).css({'样式属性':'值'})

B、以给函数传值的方式设置样式

 $(selector).css('样式属性名','属性值')

2、操作样式类
①样式类是CSS中的一个概念，它用于设定页面上对应于“class”属性的元素的样式显示
②操作CSS
③修改CSS样式
④获取或设置元素的高度和宽度

三、操作元素的内容

1、操作HTML代码：作用类似于innerHTML
(1)获取html代码

$(selector).html()

(2)设置html代码

$(selector).html('html代码')

2、操作文本：作用类似于innerText
(1)获取标签的文本

$(selector).text()

(2)设置标签的文本

 $(selector).text('文本')

3、操作值
(1)获取元素的value属性值

 $(selector).val()

(2)设置元素的value属性值

 $(selector).val(值)

4、查找与筛选元素
（1）过滤Filtering
（2）查找 Finding
5、链式操作

“链式操作”是jQuery语法中最有特色的一个功能之一。简单地说，“链式操作”就是把之前需要分很多行书写的代码使用“.”连接成一行进行书写。这在很大程度上能够节省网站需要加载的代码量，同时也使对元素的各种操作更加集中。
其缺点就是由于链式操作所必需的连贯性，可能导致代码的可读性有所降低

四、jQuery元素操作

1、遍历操作的基本语法

$(selector).each(function(index, domEle) {});

该方法的参数是一个函数。这个函数将会在遍历时调用
在函数中，index参数是每个元素的索引号
domEle是每个DOM元素的对象（个元素调用一次不是jQuery对象）
如果要想使用jQuery方法，需要将这个DOM对象转换成为jQuery对象，即$(domEle)
案例演示

<div>1</div><div>2</div><div>3</div>
<script>
  var arr = ["red", "green", "blue"];
  $("div").each(function (index, domEle) {
    console.log(index); // 查看索引号
    console.log(domEle); // 查看DOM元素
    $(domEle).css("color", arr[index]); // 对每个元素进行操作                                                              
  });
</script>

注：$.each()方法的基本语法

 $.each(Object, function(index, element) {});

2、创建元素
通过jQuery可以很方便地动态创建一个元素，直接在“$()”函数中传入一个HTML字符串即可进行创建

$(function () {
  var li = $("<li>我是后来创建的li</li>");	// 创建元素
  console.log(li);// 将元素输出到控制台
});

3、添加元素
①内部添加：内部添加的方式可以实现在元素内部添加元素，并且可以放到内部的最后面或者最前面
②外部添加：外部添加就是把元素放入目标元素的后面或者前面，通过after()和before()方法来实现
4、添加元素
删除元素：删除元素分为删除匹配的元素本身、删除匹配的元素里面的子节点两种情况

五、jQuery尺寸和位置操作

1、尺寸方法
尺寸操作：在jQuery中，尺寸方法用来获取或设置元素的宽度和高度
2、位置方法
（1）offset()方法：使用offset()方法可以获取元素的位置，返回的是一个对象，包含left和top属性，表示相对于文档的偏移坐标，和父级元素没有关系
（2）position()方法：position()方法用于获取元素距离父元素的位置，如果父元素没有设置定位（即CSS中的position），则获取的结果是距离文档的位置
注：需要注意的是，position()方法只能获取元素位置，不能设置元素位置
（3）scroTop()和scrollLeft()方法：scrollTop()方法用于获取或设置元素被卷去的头部距离，scrollLeft()方法用于获取或设置元素被卷去的左侧距离