jQuery的基本使用

简介: jQuery的基本使用

1.jQuerhy是什么?

jQuery是一个快速.简洁的 javaScript库 .其设计的宗旨是“write Less DO More”,“倡导写更少的代码,做更多的事情”

javaScript库

举例

仓库:可以吧很多东西放在这个仓库里面,找东西的时候可以直接去仓库里面去查找就可以了。

javaScript库:即 library ,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库,在这个库中,封装了很多先定义好的函数,比如动漫 animate, hide ,show ,比如获取元素等等。

  • 简单理解: 就是一个JS 文件,里面对我们原生js代码进行了封装,存放到里面。这样我们可以快速高效的使用这些封装好的功能了。
  • 比如 jQuery,就是为了快速方便的操作DOM,里面基本都是函数(方法)

常见的javaScript库

  • Prototype:是最早成型的JS库之一,对于JS的内置对象做了大量的扩展。
  • Do jo:提供了很多奇特JS库没有提供的功能。例如:离线存储的API,生成图标的组件等等。
  • YUI:是由Yahoo公司开发的一套完备的,扩展性良好的富交互网页程序工作集。
  • Ext JS:原本是对YUI的一个扩展,主要用于创建前端用户界面。
  • Moo Tools:是一套轻量、简洁、模拟化和面向对象的JS框架。
  • jQuery:同样是一个轻量级的库,拥有强大的选择器等更多优点,吸引了更多开发者去学习使用它。
  • 移动端的zepto

这些库都是对原生 JavaScript 的封装,内部都是用 JavaScript 实现的,我们主要学习的是 jQuery。

  • j就是javaScript;Query 查询;意思就是查询js,把js中的DOM操作做了封装,优化了DOM操作,事件处理,动漫设计和Ajax 交互。

2.jQuery的基本使用

jQuery下载

官网:jQuery

  • production (压缩过的版本,体积小,上线用)——生产版(压缩版)
  • develepment(未压缩版本,开发时使用,适合查找)——开发版(测试版)

使用 jQuery

在页面中引入jQuery库

<!-- 服务器本地库 -->

<script src="./jquery-3.6.0.js"></script>

<!--

CDN远程库

   项目上线时,一般使用比较靠谱的CDN资源库,减轻服务器负担

   [https://www.bootcdn.cn/](https://www.bootcdn.cn/):搜索`jQuery`,复制`<script>`标签到项目中即可使用

-->

  • 在 script 标签中使用 jquery 语法即可,如:

<div>Content</div>

<script src="./jquery-3.6.0.js"></script>

<script>

   $('div').hide();

</script>

三、选择器

jQuery 选择器是 jQuery 为我们提供的一组方法,让我们更加方便的获取到页面中的元素

3.1 基本选择器

名称 用法 描述
ID选择器 $('#id'); 获取指定ID的元素
类选择器 $('.class'); 获取同一类class的元素
标签选择器 $('div'); 获取同一类标签的所有元素
并集选择器 $('div,p,li'); 使用逗号分隔,只要符合条件之一就可。
交集选择器 $('div.redClass'); 获取class为redClass的div元素
属性选择器 $('input[name=username]') 获取 input 标签中 name 属性为 username 的元素

注意:jQuery选择器返回的是jQuery对象。


<script type="text/javascript"> //常用选择器 //根据id获取元素 获取到的结果:类数组对象 console.log( $('#div0') ); console.log( $('#div0')[0] ); //根据class获取元素 console.log( $('.div_1') ); //根据标签名称来获取元素 console.log( $('div') ); //根据属性获取元素 console.log( $('input[name=username]') ); //根据表单元素属性获取元素 console.log( $(':checked') ); </script>

选择器

名称 用法 描述
子代选择器 $('ul > li'); 使用 > 号,获取儿子层级的元素,注意,并不会获取孙子层级的元素
后代选择器 $('ul li'); 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等

过滤选择器

这类选择器都带冒号:

名称 用法 描述
:eq(index) $('li:eq(2)').css('color', 'red'); 获取到的li元素中,选择索引号为2的元素,索引号index从0开始。
:odd $('li:odd').css('color', 'red'); 获取到的li元素中,选择索引号为奇数的元素
:even $('li:even').css('color', 'red'); 获取到的li元素中,选择索引号为偶数的元素

jQuery 筛选方法

  • 筛选选择器的功能与过滤选择器有点类似,但是用法不一样,筛选选择器主要是方法。
名称 用法 描述
children(selector) $('ul').children('li') 相当于$('ul>li'),子类选择器
find(selector) $('ul').find('li'); 相当于$('ul li'),后代选择器
siblings(selector) $('#first').siblings('li'); 查找兄弟节点,不包括自己本身。
parent() $('#first').parent(); 查找父亲
parents() $('li').parents(); 查找祖先元素
eq(index) $('li').eq(2); 相当于$('li:eq(2)'),index从0开始
next() $('li').next() 找下一个兄弟
prev() $('li').prev() 找上一次兄弟
closest $('li').closest('ul') 找最近一个祖先元素

this 和 当前索引

在对象的事件中,$(this) 表示当前操作的 jQuery 对象,$(this).index() 表示当前元素的索引号

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

   console.log($(this).index());

}

 

目录
相关文章
|
5月前
|
JavaScript 前端开发
jQuery介绍及基本使用
jQuery介绍及基本使用
309 0
|
XML 存储 移动开发
前端培训-中级阶段(5)- jQuery 的概念与基本使用(2019-7-11期)
前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。 前面我们已经基本掌握常规的语法语义,以及基本的使用方法。接下来我们讲深入进去了解其中内在的原理。 也了解 DOM、BOM,但是因为规范是一在变的,有没有什么类库可以方便操作这些呢?进入我们今天的主题jQuery
108 0
前端培训-中级阶段(5)- jQuery 的概念与基本使用(2019-7-11期)
|
JavaScript 前端开发
jquery的基本使用
方法连缀: $('p').removeClass('classFoo').addClass('classBar'); 方法迭代: 可以使用each方便对元素列表进行循环操作 $('li').
1012 0
|
5月前
|
JavaScript
Jquery插件知识之Jquery.cookie实现页面传值
Jquery插件知识之Jquery.cookie实现页面传值
32 0
|
6月前
|
JavaScript
jQuery 插件自用列表
jQuery 插件自用列表
26 0
|
2月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
2月前
|
JavaScript 前端开发
开发jQuery插件这些就够了
开发jQuery插件这些就够了
19 0
|
7月前
|
JavaScript
jQuery编写插件的两种方法
jQuery编写插件的两种方法
52 0
|
3月前
|
JavaScript 前端开发 安全
jQuery 第十一章(表单验证插件推荐)
jQuery 第十一章(表单验证插件推荐)
42 1
|
4月前
|
JavaScript
jQuery年月日(年龄)选择插件
jQuery年月日(年龄)选择插件
26 0

相关产品

  • 云迁移中心
  • 相关实验场景

    更多