首页 前端知识 初始jQuery

初始jQuery

2024-04-29 12:04:17 前端知识 前端哥 493 902 我要收藏

目录

前言:

1.jQuery介绍

2.引入jQuery

3.工厂函数$()

3.1使用CSS选择器获取元素:

3.2将原生JavaScript对象转换为jQuery对象:

3.3从jQuery对象转换到原生JavaScript对象:

4. jQuery获取元素

4.1基础选择器

4.1.1标签选择器:

4.1.2ID选择器:

4.1.3类选择器:

4.1.4群组选择器:

4.2层级选择器

4.2.1后代选择器:

4.2.2子代选择器:

4.2.3相邻兄弟选择器:

4.2.4通用兄弟选择器:

4.3过滤选择器

5. 操作元素内容:

5.1html():

5.2text():

5.3val():

6. 操作标签属性

6.1attr("attrName", "value"):

6.2prop("attrName", "value"):

6.3removeAttr("attrName"):

7. 操作标签样式

7.1为元素添加id/class属性:

7.2操作class属性值的方法:

7.2.1addClass("className"):

7.2.2removeClass("className"):

7.2.3toggleClass("className"):

8. 元素的创建、添加、删除

8.1创建元素:

8.2添加元素:

8.3删除元素:

9. 动画效果jQuery提供了一系列简单易用的动画效果方法。

9.1显示和隐藏:

9.2下拉和上推效果:

9.3淡入淡出效果:

10. 数据与对象遍历

10.1. $(selector).each()

10.2. $.each()


前言:

在前面我们已经学习了很多关于,前端方面的知识了,现在我们开始学习jQuery方面的知识,jQuery其实就是是JavaScript的工具库,对原生JavaScript中的DOM操作、事件处理、数据处理等进行封装,提供更便捷的方法。

1.jQuery介绍

jQuery是一个快速、小巧且功能丰富的JavaScript库。它使HTML文档遍历和操作、事件处理、动画制作以及Ajax开发变得简单易行。jQuery极大地简化了JavaScript编程,使得开发者能够用更少的代码完成更多的功能。

2.引入jQuery

在使用jQuery之前,你需要在HTML文档中引入jQuery库。这可以通过在<head>标签内添加<script>标签,并设置其src属性为jQuery库的URL来实现。你提供的两个网址是常用的jQuery库CDN链接,开发者可以从这些链接中获取最新或特定版本的jQuery库。

3.工厂函数$()

$()函数是jQuery的核心功能之一,它允许开发者以多种方式选择和操作DOM元素。这个函数非常灵活,可以接受多种类型的参数,如CSS选择器、HTML元素、jQuery对象或DOM元素等。

3.1使用CSS选择器获取元素

$("选择器")可以用来获取匹配选择器的所有DOM元素,并返回一个包含这些元素的jQuery对象。例如,$("p")会选择页面上的所有<p>元素。

3.2将原生JavaScript对象转换为jQuery对象

如果你已经有一个原生JavaScript DOM元素,你可以通过将其传递给$()函数来将其转换为jQuery对象。例如,如果elem是一个原生DOM元素,那么$(elem)会返回一个包含该元素的jQuery对象。

3.3从jQuery对象转换到原生JavaScript对象

有两种主要方法可以从jQuery对象中获取原生DOM元素。第一种是使用数组索引,如$("div")[0]会返回第一个<div>元素作为原生DOM对象。第二种方法是使用.get(index)方法,如$("div").get(0)也会返回第一个<div>元素作为原生DOM对象。

4. jQuery获取元素

4.1基础选择器

4.1.1标签选择器

通过HTML标签名选择元素,例如$("div")会选择所有的<div>元素。

4.1.2ID选择器

通过元素的ID选择元素,例如$("#d1")会选择ID为d1的元素。

4.1.3类选择器

通过元素的类名选择元素,例如$(".c1")会选择所有类名为c1的元素。

4.1.4群组选择器

通过逗号分隔的多个选择器选择元素,例如$("body,p,h1")会选择<body><p><h1>元素。

4.2层级选择器

4.2.1后代选择器

选择特定元素的后代元素,例如$("div .c1")会选择所有<div>元素内部类名为c1的元素。

4.2.2子代选择器

选择特定元素的直接子元素,例如$("div>span")会选择所有<div>元素的直接<span>子元素。

4.2.3相邻兄弟选择器

选择紧接在另一元素后的元素,且满足第二个选择器的条件,例如$("h1+p")会选择每个<h1>元素后面的第一个<p>元素。

4.2.4通用兄弟选择器

选择特定元素后面所有满足选择器的兄弟元素,例如$("h1~h2")会选择每个<h1>元素后面的所有<h2>兄弟元素。

4.3过滤选择器

这些选择器用于进一步过滤已选择的元素集,例如:

  • $("p:first")选择第一个<p>元素。
  • $("p:last")选择最后一个<p>元素。
  • $("tr:odd")$("tr:even")分别选择奇数行和偶数行的<tr>元素。
  • $("li:eq(2)")选择第三个<li>元素(下标从0开始)。
  • $("li:lt(3)")选择下标小于3的<li>元素。
  • $("li:gt(1)")选择下标大于1的<li>元素。
  • $("div:not(.c1)")选择所有不包含类名c1<div>元素。

5. 操作元素内容:

5.1html()

这个方法用于获取或设置选定元素的内容。当用于获取内容时,它返回第一个匹配元素的HTML内容;当用于设置内容时,它为所有选定元素设置HTML内容。它等价于原生的innerHTML属性。

5.2text()

这个方法用于获取或设置选定元素的文本内容。与html()方法类似,但text()方法不能识别HTML标签,只会将其视为普通文本。它等价于原生的innerText属性(尽管行为上可能有所不同,因为jQuery会确保跨浏览器的兼容性)。

5.3val()

这个方法用于获取或设置表单元素(如输入框)的值。它等价于原生的value属性。例如,$("input").val()会返回第一个输入元素的当前值,而$("input").val("new value")会为所有选定的输入元素设置新值。

6. 操作标签属性

在jQuery中,你可以使用attr()prop()removeAttr()方法来操作元素的属性。

6.1attr("attrName", "value")

这个方法用于获取或设置元素的属性值。当你传递两个参数时,它设置指定属性的值;当你只传递一个参数时,它获取该属性的当前值。

6.2prop("attrName", "value")

这个方法与attr()类似,用于获取或设置元素的属性值。不过,在处理布尔属性(如checkedselecteddisabled等)时,prop()方法更加可靠,因为它会根据元素的当前状态来设置或获取属性值,而不仅仅是查看HTML标签上的属性。

6.3removeAttr("attrName")

这个方法用于从元素中移除指定的属性。

 

7. 操作标签样式

在jQuery中,你可以通过多种方式来操作元素的样式。

7.1为元素添加id/class属性

你可以通过attr()prop()方法为元素添加或修改idclass属性,从而改变元素的样式。这通常与CSS选择器结合使用,以便为具有特定idclass的元素应用样式。

7.2操作class属性值的方法

7.2.1addClass("className")

为元素添加一个或多个类名。如果添加的类名已经存在,则该方法不会有任何效果。

7.2.2removeClass("className")

从元素中移除一个或多个类名。如果不传递参数,则会移除元素上的所有类名。

7.2.3toggleClass("className")

切换元素的类名。如果元素已经包含指定的类名,则将其移除;如果元素不包含指定的类名,则将其添加。

7.3操作行内样式

7.3.1css("属性名", "属性值")

设置元素的行内样式。你可以传递两个参数来设置特定的CSS属性,或者传递一个对象来设置多个CSS属性。例如,$("#element").css("color", "red")会将元素的文本颜色设置为红色。

8. 元素的创建、添加、删除

在jQuery中,你可以动态地创建、添加和删除HTML元素。

8.1创建元素

你可以使用$("<标签语法>")来创建一个新的HTML元素。这个方法会返回一个jQuery对象,代表新创建的元素。之后,你可以链式调用其他jQuery方法来设置元素的内容、属性和样式。

8.2添加元素

  • 作为子元素添加:使用.append().prepend()方法可以将新元素添加到现有元素内部。.append()将新元素添加到父元素的末尾,而.prepend()则将新元素添加到父元素的开头。
  • 作为兄弟元素添加:使用.after().before()方法可以在现有元素之后或之前添加新元素。

8.3删除元素

  • 使用.remove()方法可以移除选定的HTML元素。

9. 动画效果
jQuery提供了一系列简单易用的动画效果方法。

9.1显示和隐藏

  • .show(speed, callback)方法可以使元素逐渐显示出来。你可以指定显示的速度(如"slow"、"fast"或毫秒数)和一个可选的回调函数,该函数在动画完成后执行。
  • .hide(speed, callback)方法则用于逐渐隐藏元素。

9.2下拉和上推效果

  • .slideDown(speed, callback)方法通过向下滑动的方式逐渐显示被隐藏的元素。这个方法特别适用于块级元素,如<div>
  • .slideUp(speed, callback)方法则通过向上滑动的方式逐渐隐藏元素。

9.3淡入淡出效果

  • .fadeOut(speed, callback)方法通过逐渐降低元素的透明度来隐藏元素,直到元素完全透明。
  • .fadeIn(speed, callback)方法则通过逐渐增加元素的透明度来显示元素,直到元素完全不透明。

10. 数据与对象遍历

在jQuery中,遍历数据和对象主要有两种方式:$(selector).each() 和 $.each()

10.1. $(selector).each()

这个方法主要用于遍历匹配的DOM元素,并对每个元素执行一个函数。这个函数接收两个参数:元素的索引(index)和元素本身(element)。

示例:

$("div").each(function(index, element) {  
    // 在这里,'this' 关键字也指向当前元素  
    $(this).css("backgroundColor", "yellow"); // 将每个div的背景色设置为黄色  
    console.log(index, element); // 输出当前元素的索引和DOM对象  
});

10.2. $.each()

这个方法是一个更通用的遍历工具,可以用于遍历数组或对象的属性。它也接收一个函数作为参数,这个函数同样接收两个参数:键(key)或索引(index)和对应的值(value)。

遍历数组示例:

var array = [ "Apple", "Banana", "Cherry" ];  
$.each(array, function(index, value) {  
    console.log(index + ": " + value); // 输出数组的索引和对应的值  
});

遍历对象示例:

var object = { name: "John", age: 30, city: "New York" };  
$.each(object, function(key, value) {  
    console.log(key + ": " + value); // 输出对象的键和对应的值  
});

结语:

今天我们就先学习到这里,这些都是我个人的一些学习的成果,欢迎大家的指正.

转载请注明出处或者链接地址:https://www.qianduange.cn//article/6362.html
标签
评论
发布的文章

HTML5本地存储

2024-05-06 09:05:10

HTML5和CSS3新特性

2024-04-16 17:04:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!