百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 热门文章 > 正文

jQuery 基础(jQuery基础选择器主要包括哪几种分类)

bigegpt 2024-08-01 11:47 3 浏览

### 什么是jQuery:

jQuery是一个开源的函数库,高度封装了**DOM操作**、**事件**、**动画**、**AJAX**、**工具函数**等功能,而且每一个`API`的底层实现都实现了不同浏览器之间的兼容性,让你专心编写逻辑代码,而不要浪费时间在处理兼容性的问题上。总而言之,`jQuery`的目标就是让开发者**写得更少,做得更多**!

### jQuery核心功能——选择器:

1. `*`:选取所有元素。

2. `p`:选取所有的p标签。

3. `#test`:选取`id`为`test`的标签。

4. `.test`:选取所有`class`为`test`的标签。

5. `:button`:选取所有`type`为`button`的元素。

6. `div > p`:选取`div`下面的所有子p元素。注意,这个只包括直接子元素。

7. `div p`: 选取`div`下面的所有P元素.

7. `eq(index)`:对一个已经选取后的元素集选取索引值为index的元素。

8. `gt(index)`:对一个已经选取后的元素集选取索引值大于index的元素。

9. `lt(index)`:对一个已经选取后的元素集选取索引值小于index的元素。

10. 只要是CSS中能用的选择器,Jq中都能用.

`runoob:http://www.runoob.com/jquery/jquery-tutorial.html`

`jquery:http://api.jquery.com/`

### jQuery核心功能——事件:

jquery封装了js中的所有事件,并且针对不同的浏览器做了一些兼容性处理。使用方式是:

```javascript

$("p").click(function(){

// 动作触发后执行的代码!!

});

```

以下将对一些常用事件进行讲解:

1. `click`事件:点击事件。

2. `onload和document.ready`事件:前者是js的DOM中标准的方法,后者是jquery自己创建的一个方法,ready方法是所有文档元素一旦准备好了,就执行回调,而onload方法是页面中所有的元素都加载完毕了才会执行。

3. `mouseenter`事件:鼠标移动到某个元素上面的事件。

4. `mouseleave`事件:鼠标移出某个元素的事件。

5. `hover`事件:鼠标移动到某个元素和鼠标移出到某个元素的事件。相当于`mouseenter`和`mouseleave`两个事件的集合。

### jQuery核心功能——效果:

jquery封装了一套动画效果方法,这些方法在js中是不存在的,jquery是通过修改一系列属性和CSS样式并添加过渡事件来达到这种目的的。以下将对一些常用的效果进行讲解:

1. `hide(duration,callback)`方法:隐藏某个元素,只是把`display`属性修改为`none`,可以提供了一个过渡事件。`duration`默认的时间是400毫秒.

2. `show(duration,callback)`方法:显示某个元素,可以提供一个动画。

3. `toggle(duration,callback)`方法:如果一个元素已经显示了,那么将他隐藏,如果一个元素已经隐藏了,将他显示。

3. `fadeIn(speed,callback)`:有动画效果的显示一个元素,speed用于指示一个元素持续的时间,callback用于表示执行完这个动画后执行的方法。

4. `fadeOut(speed,callback)`:把一个元素隐藏,隐藏后从DOM中删除这个元素。

5. `fadeTo(speed,opacity,callback)`:把一个元素的透明度修改到opacity这个值指的数值。

6. `animate({params},speed,callback)`:所有动画的最基础的方法。params是一个字典,用于修改要动画的CSS样式,speed表示这个动画持续的时间,callback表示这个动画执行结束后的回调。

### jQuery核心功能——DOM操作

`DOM`的全称是`Document Object Model`(文档对象模型)。是`jquery`最核心的功能,包括对标签元素的增删改查等,以下将对这些方法进行讲解。

1. 获取和设置内容:`text()`用于获取和设置元素中的文本内容,`html()`用户获取和设置元素中的所有子元素及其文本内容,`val()`用于获取和设置元素的`value`值。`attr()`用户获取和设置标签元素的属性。

2. 添加元素:`append()`在某个元素后面添加子元素。`prepend()`在某个元素最前面添加子元素。`after`在某个元素后面添加一个兄弟元素。`before`在某个元素前面添加一个兄弟元素。

3. 删除元素:`remove()`方法将选中的元素进行删除,可以增加一个过滤条件进行过滤。`empty()`方法将选中的所有子元素都清空。

4. 操作CSS:`addClass()`方法可以向被选中的元素添加一个或多个类,`removeClass`方法可以向被选中的元素删除一个或多个类,`css()`方法可以设置或返回`css`属性。

5. 尺寸:

* width()/height():返回盒子的真实宽度和高度。

* innerWidth()/innerHeight():返回盒子的`真实宽度+padding的宽度`,高度同理。

* outerWidth()/outerHeight():返回盒子的`真实宽度+padding的宽度+边框的宽度`,高度同理。

* outerWidth(true)/outerHeight(true):返回盒子的`真实宽度+padding的宽度+边框的宽度+外边距的宽度`,高度同理。

### jQuery核心功能——DOM元素遍历

`DOM`元素遍历可以在`DOM`树中向上、向下、平行的遍历所有的`DOM`元素,这在开发中查找相关元素的时候特别有用,以下将对这些方法进行讲解:

1. `parent()`方法:获得被选中元素的直接父元素。

2. `children()`方法:获取被选中元素的所有直接子元素,也可以传入参数,进行再次的过滤。

3. `find()`方法:获取被选中元素的所有子孙元素,可以传入参数进行过滤。

4. `siblings()`方法:返回所有和选中元素同级的元素,可以传入参数进行过滤。

5. `next()`方法:返回被选中元素的下一个同胞元素,该方法只能返回一个元素。

6. `nextAll()`方法:返回被选中元素的之后的所有同胞元素。

7. `prev()`方法:返回被选中元素之前的上一个同胞元素。

8. `prevAll()`方法:返回被选中元素之前的所有同胞元素。

9. `first()`方法:返回被选中的元素中的第一个元素。

10. `last()`方法:返回被选中的元素中的最后一个元素。

11. `eq(index)`方法:返回被选中的元素位置为index的元素。

12. `filter(args)`方法:返回被选中的元素中再满足args条件元素。

13. `not(args)`方法:通`filter`函数类似,只不过满足了这个条件就会被过滤掉。

### jQuery核心功能——AJAX

`AJAX`的全称是`Asynchronous JavaScript And XML`.中文名是异步的Javascript和XML。简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。原生js写ajax特别麻烦,而且涉及到兼容性问题,但是用jqeury可以轻松实现,而不用关心底部具体的实现细节,以下将对`ajax`的几种方法进行讲解。

1. `$.get(url,[params])`方法:向`url`这个地址发送一个get请求,数据可以放在`params`这个参数中。

2. `$.post(url,[params])`方法:向`url`这个地址发送一个post请求,数据可以放在`params`这个参数中。

3. `$.ajax(url,[params])`方法:以上两个方法的底层实现。

### 其他

1. `each`方法:遍历`jquery`元素集。

2. `index()`:返回当前被选中元素在所有同级元素中的索引值。

3. `get()`:返回当前`jquery`元素的原生`DOM`元素。

相关推荐

得物可观测平台架构升级:基于GreptimeDB的全新监控体系实践

一、摘要在前端可观测分析场景中,需要实时观测并处理多地、多环境的运行情况,以保障Web应用和移动端的可用性与性能。传统方案往往依赖代理Agent→消息队列→流计算引擎→OLAP存储...

warm-flow新春版:网关直连和流程图重构

本期主要解决了网关直连和流程图重构,可以自此之后可支持各种复杂的网关混合、多网关直连使用。-新增Ruoyi-Vue-Plus优秀开源集成案例更新日志[feat]导入、导出和保存等新增json格式支持...

扣子空间体验报告

在数字化时代,智能工具的应用正不断拓展到我们工作和生活的各个角落。从任务规划到项目执行,再到任务管理,作者深入探讨了这款工具在不同场景下的表现和潜力。通过具体的应用实例,文章展示了扣子空间如何帮助用户...

spider-flow:开源的可视化方式定义爬虫方案

spider-flow简介spider-flow是一个爬虫平台,以可视化推拽方式定义爬取流程,无需代码即可实现一个爬虫服务。spider-flow特性支持css选择器、正则提取支持JSON/XML格式...

solon-flow 你好世界!

solon-flow是一个基础级的流处理引擎(可用于业务规则、决策处理、计算编排、流程审批等......)。提供有“开放式”驱动定制支持,像jdbc有mysql或pgsql等驱动,可...

新一代开源爬虫平台:SpiderFlow

SpiderFlow:新一代爬虫平台,以图形化方式定义爬虫流程,不写代码即可完成爬虫。-精选真开源,释放新价值。概览Spider-Flow是一个开源的、面向所有用户的Web端爬虫构建平台,它使用Ja...

通过 SQL 训练机器学习模型的引擎

关注薪资待遇的同学应该知道,机器学习相关的岗位工资普遍偏高啊。同时随着各种通用机器学习框架的出现,机器学习的门槛也在逐渐降低,训练一个简单的机器学习模型变得不那么难。但是不得不承认对于一些数据相关的工...

鼠须管输入法rime for Mac

鼠须管输入法forMac是一款十分新颖的跨平台输入法软件,全名是中州韵输入法引擎,鼠须管输入法mac版不仅仅是一个输入法,而是一个输入法算法框架。Rime的基础架构十分精良,一套算法支持了拼音、...

Go语言 1.20 版本正式发布:新版详细介绍

Go1.20简介最新的Go版本1.20在Go1.19发布六个月后发布。它的大部分更改都在工具链、运行时和库的实现中。一如既往,该版本保持了Go1的兼容性承诺。我们期望几乎所...

iOS 10平台SpriteKit新特性之Tile Maps(上)

简介苹果公司在WWDC2016大会上向人们展示了一大批新的好东西。其中之一就是SpriteKitTileEditor。这款工具易于上手,而且看起来速度特别快。在本教程中,你将了解关于TileE...

程序员简历例句—范例Java、Python、C++模板

个人简介通用简介:有良好的代码风格,通过添加注释提高代码可读性,注重代码质量,研读过XXX,XXX等多个开源项目源码从而学习增强代码的健壮性与扩展性。具备良好的代码编程习惯及文档编写能力,参与多个高...

Telerik UI for iOS Q3 2015正式发布

近日,TelerikUIforiOS正式发布了Q32015。新版本新增对XCode7、Swift2.0和iOS9的支持,同时还新增了对数轴、不连续的日期时间轴等;改进TKDataPoin...

ios使用ijkplayer+nginx进行视频直播

上两节,我们讲到使用nginx和ngixn的rtmp模块搭建直播的服务器,接着我们讲解了在Android使用ijkplayer来作为我们的视频直播播放器,整个过程中,需要注意的就是ijlplayer编...

IOS技术分享|iOS快速生成开发文档(一)

前言对于开发人员而言,文档的作用不言而喻。文档不仅可以提高软件开发效率,还能便于以后的软件开发、使用和维护。本文主要讲述Objective-C快速生成开发文档工具appledoc。简介apple...

macOS下配置VS Code C++开发环境

本文介绍在苹果macOS操作系统下,配置VisualStudioCode的C/C++开发环境的过程,本环境使用Clang/LLVM编译器和调试器。一、前置条件本文默认前置条件是,您的开发设备已...