JQuery简介 - 什么是jQuery_jquery是干什么的-程序员宅基地

技术标签: JQuery实用教程  前端  jquery  

概念

官方概念:

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>元素
  • $("p.test").hide() - 隐藏所有 class="test"<p>元素
  • $("#test").hide() - 隐藏所有 id="test" 的元素

jQuery 示例

选择器

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

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

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

元素选择器

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

$("p")

在页面中选取所有<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>元素上触发时,隐藏当前的<p>元素:

$("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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/p445098355/article/details/103988348

智能推荐

wiki帮助 生成索引目录_3个桌面Wiki,可帮助组织信息-程序员宅基地

文章浏览阅读2.3k次。wiki帮助 生成索引目录 当您想到“ Wiki”一词时,可能会想到MediaWiki或DokuWiki之类的例子。 它们是开源的,有用的,功能强大且灵活的。 它们可以成为协作,独立工作或组织生活中大量信息的绝佳工具。 另一方面,这些维基也很大。 他们需要大量其他数字管道才能运行。 对于我们中的许多人来说,这太过分了,特别是如果我们只想在桌面上使用Wiki时。 如果您希望在桌面上获得Wi..._wiki 生成目录

Linux嵌入式所有知识点-思维导图-【一口君吐血奉献】_嵌入式开发思维导图-程序员宅基地

文章浏览阅读7.6k次,点赞74次,收藏294次。嵌入式学习知识点汇总_嵌入式开发思维导图

Win10下pip安装出现由于目标计算机积极拒绝,无法连接_wen10关闭代理后仍然不能pip-程序员宅基地

文章浏览阅读2.6k次,点赞4次,收藏6次。Win10下pip安装出现由于目标计算机积极拒绝,无法连接在进行numpy安装时间出现这种错误,真的很恶心,搜了很多博客,也换了很多镜像源(但是不可能所有的镜像源同时宕掉啊),最终发现是本地网络使用了代理,所以不能实现pip安装。错误反馈如下图所示:具体操作如下:第一步:鼠标右键单击此处并鼠标左键单击下图所示区域第二步:在下面的界面鼠标左键单击代理然后把下图的使用代理服务器..._wen10关闭代理后仍然不能pip

Numpy-程序员宅基地

文章浏览阅读114次。正文共: 5937 字 5 图预计阅读时间: 15 分钟每日分享You cannot protect yourself from sadness without protecting yo..._numpy 大于0.5改为 否则改为0

eclipse的安装以及JAVA的基本学习第一部分_elipse安装java.util-程序员宅基地

文章浏览阅读1k次。今天开始进行Java语言的学习配置环境:点击这个链接来下载这个eclipse包:eclipse提取码:zzvy首先我们打开压缩包点击下面的应用程序选择公共JRE,下面的安装目录不要修改安装好JRE之后,会提示安装JAVA,这个可以修改目录,建议安装到非C盘全部安装完成后,我们开始配置环境变量在系统变量中新建,名值按图所示(值为JRE的安..._elipse安装java.util

个人记录-程序员宅基地

文章浏览阅读102次。1 在使用lombok插件的时候,当使用@Data注解时,则有了@EqualsAndHashCode注解,那么就会在此类中存在equals(Object other) 和 hashCode()方法,且不会使用父类的属性,这就导致了可能的问题。比如,有多个类有相同的部分属性,把它们定义到父类中,恰好id(数据库主键)也在父类中,那么就会存在部分对象在比较时,它们并不相等,却因为lombok自动生成..._个人记录

随便推点

Vue3 emits-程序员宅基地

文章浏览阅读3.7k次。Vue3提供了代码段的写法,即在template里面不需要写跟元素,可以直接写代码段。但是在代码段里面触发自定义事件。会报下面的警告。我们在一个组件里面,如果有好多地方都需要触发自定义事件。想要知道当前触发了哪一个自定义事件。需要把当前组件的代码浏览完毕。如果不把当前组件的代码浏览完毕,就不知道触发了几个自定义事件。vue3提供了一个配置项。emits。可以把当前组件所有的自定义事件全部声明在emits里面,这样当别人阅读你的代码的时候只需要查看emits就可以知道当前组件触发了多少自定义事件。_vue3 emits

美妆护肤品化妆品怎么做私域社群团购?,快团团市场是巨大的_化妆品对接快团团-程序员宅基地

文章浏览阅读375次,点赞8次,收藏8次。美妆护肤品化妆品做私域社群团购,快团团市场是巨大的就拿美妆护肤类产品来说吧。它首先是生活的必需品,尤其是对女人来说,每天都要用,当然了,现在很多男人都开始护肤和化妆了。其次,它是消耗品。每天都在使用,每天都在消耗,需要不断的重复购买。然后就是它的产品种类繁多。从化妆的角度上讲,有粉底液、BB霜、CC霜、妆前乳、遮瑕膏、散粉、眉笔、睫毛膏、眼线笔、眼影、腮红、高光、阴影、口红等等。从护肤保养的角度上讲,有护肤水、乳液、面霜、精华液、面膜、护唇膏、眼霜、防晒霜等等。同样的一张脸,要抹那么多_化妆品对接快团团

注册用户时,使用MD5对密码进行加密_注册密码md5加墨-程序员宅基地

文章浏览阅读1.3k次。当进行用户注册时,可以使用MD5算法对密码进行加密,保证数据的安全性MD5Code.javapackage com.xhz.utils;public class MD5Code {/** * MD5编码工具类 * */ static final int S11 = 7; static final int S12 = 12; static final int S13 = 17; static final int S14 = 22; stat_注册密码md5加墨

c语言编写温度传感,单片机中使用DS18B20温度传感器C语言程序(参考3)-程序员宅基地

文章浏览阅读627次。#include"reg51.h"sbit DQ =P3^7; //定义通信端口本文引用地址:http://www.eepw.com.cn/article/201611/315669.htm//延时函数void delay(unsigned int i){while(i--);}//初始化函数Init_DS18B20(void){unsigned char x=0;DQ = 1; //DQ复位de..._温度传感器c语言编程

2021-04-01_cisco eui-64-程序员宅基地

文章浏览阅读241次。EUI-64:根据接口mac地址产生一个ipv6地址,这一方法可防止ipv6地址冲突,因为mac地址是全球唯一的,所以根据接口mac地址产生的ipv6地址也是唯一的。Mac地址由48bit组成,也就是由12个16进制数组成,在第八和第九中间插入16个bit,这十六个bit换算成十六进制就是FFFE,将第七bit u/l位置位为1,0变为1,1保持不变,有书籍写到第七位反转,但是华为和思科设备都是将第七位置位为1由于eui-64是生成64bit的接口id的方法,所以会出现以下两种情况:1.如果前缀不足_cisco eui-64

语音对话机器人搭建_语音对话模型模型搭建-程序员宅基地

文章浏览阅读1k次。基于百度AI和图灵机器人搭建的语音对话机器人源码:from aip import AipSpeechimport requestsimport jsonimport speech_recognition as srimport win32com.client# 初始化语音speaker = win32com.client.Dispatch("SAPI.SpVoice")# 1、语音生成音频文件,录音并以当前时间戳保存到voices文件中# Use SpeechRecognitio_语音对话模型模型搭建

推荐文章

热门文章

相关标签