jQuery(一)jQuery概述、使用方式、原理、查找元素

网友投稿 740 2022-05-30

jQuery 是一个快速、简洁的 JavaScript 框架,jQuery 设计的宗旨是 “write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装 JavaScript 常用的功能代码,提供一种简便的 JavaScript 设计模式,优化 HTML 文档操作、事件处理、动画设计和 Ajax 交互。

目录

一、认识jQuery

jQuery(一)jQuery概述、使用方式、原理、查找元素

二、jQuery的使用

三、jQuery原理

四、 jQuery API三大特点

五、查找元素

1. 子元素过滤选择器(css选择器)

2. 基本过滤选择器(jQuery专属)

3. 内容过滤器(jQuery专属)

4. 可见性过滤(jQuery专属)

5. 表单元素过滤选择器(jQuery专属)

一、认识jQuery

jQuery 的核心特性是具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的 css 选择器,并且可对 css 选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件,且 jQuery 兼容各种主流浏览器。

jQuery 依旧执行 DOM 的增、删、改、查、事件绑定操作,可以说 jQuery 是 DOM 的延续;jQuery 对 DOM 操作的每一步都进行了简化,是用函数来解决一切问题(jQuery就是函数库)。

但是 jQuery只有PC端,没有移动端,而且只对 DOM 操作的每一步进行了简化,没有减少步骤,所以用的会越来越少。

二、jQuery的使用

到官网jQuery进行下载即可,下载版本后引入网页。

1. 将 jQuery 引入网页的方法

(1)将 jquery.js 文件下载到项目本地文件夹,用相对路径引入

五、查找元素

jQuery 主要通过选择器的方式查找元素,除了原始 CSS 选择器之外,还添加了额外 jQuery 专属的选择器。

1. 子元素过滤选择器(css选择器)

:first-child

举例:使用子元素过滤选择器选择指定元素;

子元素过滤选择器.

  • child1-basic0
  • child2-basic1
  • child3-basic2

  • child1-basic3
  • child2-basic4
  • child3-basic5

  • child1-basic6

2. 基本过滤选择器(jQuery专属)

先将所有符合要求的元素集中保存到一个大的集合中从0开始统一编号,按元素在集合中的统一编号来选择指定的元素。

:first

:last

:eq(i)

:lt(i)

:gt(i)

:even

:odd

举例:使用基本过滤选择器选择指定元素;

基本过滤选择器.

  • child1-basic0
  • child2-basic1
  • child3-basic2

  • child1-basic3
  • child2-basic4
  • child3-basic5

  • child1-basic6

3. 内容过滤器(jQuery专属)

根据元素的内容不同来选择元素。

:contains(文本)

选择内容中包含指定文本关键字的元素

举例:使用内容过滤选择器选择指定元素;

内容过滤选择器


×

4. 可见性过滤(jQuery专属)

根据元素是否可见来选择元素;

:visible

举例:使用 :hidden 选择不可见的元素;

可见性选择器

lorem

JavaScript jQuery

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:[云市场] 北京数倍软件科技有限公司入驻华为云市场,助力云服务,异构数据的交换,整合,迁移
下一篇:Javascript 中你最应该知道的 33 个概念
相关文章