JQuery简介

您所在的位置:网站首页 叽里呱啦是干什么的 JQuery简介

JQuery简介

2024-05-26 20:46| 来源: 网络整理| 查看: 265

概念

官方概念:

jQuery是一个快速,小型且功能丰富的JavaScript库。借助易于使用的API(可在多种浏览器中使用),使HTML文档的遍历和操作,事件处理,动画和Ajax等事情变得更加简单。

个人理解:

jQuery是JavaScript的一个工具库,工具库就是指封装好的JavaScript函数,可以直接在程序中进行调用,那jQuery就是一款非常流行的JavaScript库。jQuery设计的宗旨是“写更少的代码,做更多的事情”。jQuery库封装了JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery 优点

占用空间少:

缩小并压缩后的jQuery文件只有30KB。

符合CSS3规范:

支持CSS3选择器查找元素以及样式属性操作。

跨浏览器:

jQuery兼容各种主流浏览器,如IE、Chrome、Firefox、Safari、Opera等。

jQuery 特点

​ 快速获取文档元素

​ jQuery的选择机制构建于Css的选择器,它提供了快速查询DOM文档中元素的能力,而且大大强化了JavaScript中获取页面元素的方式。

​ 提供漂亮的页面动态效果

​ jQuery中内置了一系列的动画效果,可以开发出非常漂亮的网页,许多网站都使用jQuery的内置的效果,比如淡入淡出、元素移除等动态特效。

​ 创建AJAX无刷新网页

​ AJAX是异步的JavaScript和XML的简称,可以开发出非常灵敏无刷新的网页,特别是开发服务器端网页时,比如PHP网站,需要往返地与服务器通信,如果不使用AJAX,每次数据更新不得不重新刷新网页,而使用AJAX特效后,可以对页面进行局部刷新,提供动态的效果。

​ 提供对JavaScript语言的增强

​ jQuery提供了对基本JavaScript结构的增强,比如元素迭代和数组处理等操作。

​ 增强的事件处理

​ jQuery提供了各种页面事件,它可以避免程序员在HTML中添加太多事件处理代码,最重要的是,它的事件处理器消除了各种浏览器兼容性问题。

​ 更改网页内容

​ jQuery可以修改网页中的内容,比如更改网页的文本、插入或者翻转网页图像,jQuery简化了原本使用JavaScript代码需要处理的方式。

jQuery 语法

jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。

基础语法: $(selector).action()

美元符号定义 jQuery选择符(selector)“查询"和"查找” HTML 元素jQuery 的 action() 执行对元素的操作

示例:

$(this).hide() - 隐藏当前元素$("p").hide() - 隐藏所有

元素$("p.test").hide() - 隐藏所有 class="test" 的

元素$("#test").hide() - 隐藏所有 id="test" 的元素 jQuery 示例 选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的CSS 选择器,除此之外,它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头:$()。

元素选择器

jQuery 元素选择器基于元素名选取元素。

$("p")

在页面中选取所有

元素。

id选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的,所以您要在页面中选取唯一的元素需要通过 #id 选择器。 通过 id 选取元素语法如下:

$("#test")

class选择器

Query 类选择器可以通过指定的 class 查找元素。

语法如下:

$(".test") 事件处理

jQuery 事件方法语法

在 jQuery 中,大多数 DOM 事件都有一个等效的 jQuery 方法。

页面中指定一个点击事件:

$("p").click();

下一步是定义什么时间触发事件。您可以通过一个事件函数实现:

$("p").click(function(){ // 动作触发后执行的代码!! });

常用的 jQuery 事件方法

文档就绪事件

$(document).ready() 方法表示在文档完全加载完后执行函数。该事件方法在所有jQuery代码之前编写,在开发时,所有的jQuery代码实例都要放到ready()的回调函数中,示例如下:

$(document).ready(function(){ // 开始写 jQuery 代码... });

这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码,即在 DOM 加载完成后才可以对 DOM 进行操作。

如果在文档没有完全加载之前就运行函数,就会报错。例如获取一个不存在的元素等等。

该事件还有一种简化的写法:

$(function(){ // 开始写 jQuery 代码... });

上面代码示例中的简化方法和使用$(document).ready() 方法的效果相同。

鼠标事件

click()函数在用户使用鼠标左键点击 HTML 元素时执行。

在下面的实例中,当点击事件在某个

元素上触发时,隐藏当前的

元素:

$("p").click(function(){ $(this).hide(); });

鼠标事件还有很多方法,比如:

dblclick() - 鼠标双击事件mouseenter() - 鼠标进入某元素事件mouseleave() - 鼠标离开某元素事件mousedown() - 鼠标按下事件mouseup() - 鼠标松开事件hover() - 鼠标光标悬停事件

除了上述的事件外,还有键盘事件、表单事件、窗口事件等,我们会在后面的章节中给大家做详细介绍。

经验分享

jQuery是一款优秀的JavaScript库,jQuery设计者的宗旨是“write less,do more”,即少写代码,多做事。那在使用jQuery完成比较复杂的页面开发时,可以快速的获取DOM元素,并且快速的修改DOM元素的样式,这比使用原生的JS简单多了,而且jQuery还提供了一些实现动画及特效的函数,可以快速实现复杂的用户交互效果,用起来是很爽的!

不过,我们在学习jQuery之前,最好是有一定的JavaScript基础和使用JS原生开发的能力,因为只有对原始JavaScript比较了解之后,再学习jQuery,才能体会到jQuery的优势,并且让我们可以快速理解jQuery的设计原理。jQuery虽然在操作DOM元素和实现用户交互时很好用,但是在处理业务逻辑比较复杂的需求时,还是要使用原生JavaScript来实现,jQuery可以作为辅助工具来使用。

微信交流:zzxingyun



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3