
- 发布时间
- 2006年1月
- 最新版本
- jQuery 3.4.1
- 发布人
- John Resig
- 发布地点
- 美国纽约
- 核心理念
- write less,do more
- 内部引入库
- Sizzle.js
- 中文名
- 极快瑞
- 第一个版本
- jQuery 1.0(2006年1月)
- 外文名
- jQuery
-
2020-07-28 16:19:53
jQuery
jQuery是一个JavaScript函数库,是一个轻量级的"写的少,做的多"的JavaScript库。
jQuery库包含以下功能:- HTML 元素
- 选取 HTML 元素
- 操作 CSS
- 操作 HTML 事件函数
- JavaScript 特效
- 动画 HTML DOM 遍历和修改
- AJAX
除此之外,JQuery还提供了大量的插件。目前兼容于所有主流浏览器。
jQuery 语法
通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions)。jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。
基础语法: $(selector).action()
美元符号定义 jQuery,选择符(selector)“查询"和"查找” HTML 元素,jQuery 的 action() 执行对元素的操作。
实例:$(this).hide() - 隐藏当前元素
$(“p”).hide() - 隐藏所有
元素
$(“p.test”).hide() - 隐藏所有 class=“test” 的
元素
$(“#test”).hide() - 隐藏 id=“test” 的元素
标准写法:
所有 jQuery 函数位于一个 document ready 函数中:$(document).ready(function(){ // 开始写 jQuery 代码... });
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码,即在 DOM 加载完成后才可以对 DOM 进行操作。如果在文档没有完全加载之前就运行函数,操作可能失败。
********--------------------------------------------------------------------------------------------------------------------------------------
jQuery 入口函数与 JavaScript 入口函数的区别:
jQuery 的入口函数是在 html 所有标签(DOM)都加载之后,就会去执行。
JavaScript 的 window.onload 事件是等到所有内容,包括外部图片之类的文件加载完后,才会执行。
********--------------------------------------------------------------------------------------------------------------------------------------
简洁写法(与以上写法效果相同):$(function(){ // 开始写 jQuery 代码... });
以上两种方式选择一种方式实现文档就绪后执行 jQuery 方法。
jQuery 选择器
jQuery 选择器允许对 HTML 元素组或单个元素进行操作,基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头:$()。常用的有:- 元素选择器
jQuery 元素选择器基于元素名选取元素。
在页面中选取所有元素:$(“p”)
如:用户点击按钮后,所有元素都隐藏:
$(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); });
- id 选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素,页面中元素的 id 应该是唯一的,所以您要在页面中选取唯一的元素需要通过 #id 选择器。
通过 id 选取元素语法如下:$(“#test”)
如:当用户点击按钮后,有 id=“test” 属性的元素将被隐藏:
$(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); });
- .class 选择器
jQuery 类选择器可以通过指定的 class 查找元素。
语法如下:$(“.test”)
如:用户点击按钮后所有带有 class=“test” 属性的元素都隐藏:
$(document).ready(function(){ $("button").click(function(){ $(".test").hide(); }); });
jQuery 事件
页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
常见 DOM 事件:事件 方法 鼠标事件 click dblclick mouseenter mouseleave blur hover 键盘事件 keypress keydown keyup blur 表单事件 submit change focus unload 文档/窗口事件 load reasize scroll jQuery 事件方法语法:
在 jQuery 中,大多数 DOM 事件都有一个等效的 jQuery 方法。页面中指定一个点击事件:$(“p”).click();
下一步是定义什么时间触发事件。您可以通过一个事件函数实现:$("p").click(function(){ // 动作触发后执行的代码!! });
jQuery方法
1. jQuery load()
jQuery load() 方法是简单但强大的 AJAX 方法。load() 方法从服务器加载数据,并把返回的数据放入被选元素中。
语法: $(selector).load(URL,data,callback);
必需的 URL 参数规定希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
如:为了避免多页面情形下的代码重复,可以利用 load() 方法,将重复的部分(例如导航栏)放入单独的文件,使用下列方法进行导入://1.当前文件中要插入的地方使用此结构:
<div class="include" file="***.html"></div>
//2.***.html中放入内容,用html格式仅仅因为会有编辑器的书写辅助。
//3.代码:$(".include").each(function() { if (!!$(this).attr("file")) { var $includeObj = $(this); $(this).load($(this).attr("file"), function(html) { $includeObj.after(html).remove(); //加载的文件内容写入到当前标签后面并移除当前标签 }) } });
或者在index文件里只写重复部分,剩下的一股脑放各自单独文件 load() 进来~
2. get() 和 post()
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
语法:
$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。$.post() 方法通过 HTTP POST 请求向服务器提交数据。
语法:
$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
开发中一般利用jQurey的ajax方法与服务器交互数据(数据格式为JSON字符串)。
Ajax
具体可参考 jQurey教程
END
更多相关内容 -
jquery-1.8.3.js 、jquery-1.8.3.min.js 【官方jquery包 js】
2017-11-01 09:37:21jquery-1.8.3.js 、jquery-1.8.3.min.js 【官方jquery包 js】 -
jQuery、jQuery UI及jQuery Mobile技巧与示例
2015-08-31 15:33:57《jQuery、jQuery UI及jQuery Mobile技巧与示例》包括jQuery、jQuery UI、jQuery Mobile以及jQuery插件四部分内容。第一部分介绍jQuery核心库,从如何使用jQuery开始,演示一些基础API的使用、如何优化选取集以及... -
jquery-treetable插件demo 下载
2017-03-19 20:42:35treetable这个jquery插件 的演示demo,带完整的jquery,treetable和css依赖 -
jquery 分页——jqueryPage.js
2015-11-23 15:15:44jquery 分页——jqueryPage.js -
jquery-1.12.4.js
2016-06-03 14:54:12jquery-1.12.4.js ,好用的javascript库,欢迎下载! -
jquery.fileupload.js插件使用demo下载
2016-12-20 10:51:18jquery.fileupload.js 9.7.2 插件使用demo,我的第一到七篇博客里使用的所有代码都在这里 -
jQuery API 官方文档 最新版下载
2016-03-04 19:31:16jQuery API 官方文档 免费下载 -
基于jquery.print.js插件的js打印demo
2017-04-21 13:37:53基于jquery.print.js插件的js打印demo,简单易用,使用详细教程请查看我的个人主页的博客《一款很好用的Jquery 打印插件——jQuery.print.js》 -
基于jQuery的TreeGrid组件
2016-02-22 10:54:31基于jQuery的TreeGrid组件,附讲解地址: http://blog.csdn.net/s445320/article/details/50715430 -
jquery base64 and CryptoJS
2015-09-12 15:00:29jquery base64 ,CryptoJS 解决文本传输,加密解密 问题。 -
jquery-1.12.3.min.js
2016-04-14 17:56:01jquery 1.12.3.min.js -
jquery-3.1.1.min.js
2016-09-28 14:57:04jquery-3.1.1.min.js -
超实用的jQuery代码段
2016-10-28 09:23:52《超实用的jQuery代码段》精选近350个jQuery代码段,涵盖页面开发中绝大多数要点、技巧与方法,堪称史上最实用的jQuery代码参考书,可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台... -
jquery-2.1.4.js
2015-09-22 11:52:13Jquery-2.1.4,bootstrap-3.3.5 -
jQuery技术内幕 深入解析jQuery架构设计与实现原理
2014-11-11 10:45:09《jquery技术内幕:深入解析jquery架构设计与实现原理》由阿里巴巴资深前端开发工程师撰写,从源代码角度全面而系统地解读了jquery的17个模块的架构设计理念和内部实现原理,旨在帮助读者参透jquery中的实现技巧和... -
jQuery EasyUI 1.4 离线简体中文API文档 含完整开发工具包+皮肤+扩展+演示
2014-08-07 00:37:56(题外话:从本次开始 我新增了jQuery EasyUI的专题页面 大家可以关注我的专题页来及时获取最新的EasyUI资源 专题页地址如下http:http://download.csdn.net/album/detail/343 同时也希望转载的那些朋友能保留我资源... -
jquery-2.1.3.js
2015-04-29 12:48:03jquery-2.1.3.js -
jquery-3.1.1全包
2016-10-15 22:45:48包含jquery-3.1.1.js,jquery-3.1.1.min.js jquery-3.1.1.slim.js,jquery-3.1.1.slim.min.js jquery-migrate-3.0.0.js,jquery-migrate-3.0.0.min.js slim版jquery为精简版jquery不包含ajax功能 jquery-migrate过渡... -
jquery-form.js 源码
2014-04-16 17:37:50异步提交表单和上传文件jquery-form.js -
jquery所有版本
2014-06-06 00:39:14收集jquery所有版本 版本如下: jquery-1.2.3.js jquery-1.2.3.min.js jquery-1.2.6.js jquery-1.2.6.min.js jquery-1.3.0.js jquery-1.3.0.min.js jquery-1.3.1.js jquery-1.3.1.min.js jquery-1.3.2.js jquery-... -
jQueryUI datepicker
2015-03-20 15:27:41jQuery UI Datepicker 插件和timepicker 共同组成时分秒的日历控件,包含汉化,中文显示日历样式 -
jquery-upload.min.js和jquery-1.11.0.min.js
2014-06-09 14:03:02jquery ajax上传组件JS. jquery-upload.min.js和jquery-1.11.0.min.js。 上传小文件图片,文件等非常合适。 详情可参考:http://blog.csdn.net/programmer_sir/article/details/29570935 -
Jquery遮罩ShowLoading组件
2014-07-18 22:00:09在开发中有时请求AJAX请求,加载服务器返回来的数据,此时不想页面被用户乱点击,导致逻辑错乱,就需要进行遮罩,加载完数据,在消除遮罩 -
jquery导出excel(解决中文导出)
2015-06-08 01:28:13网上下载的tableexport可以实现table的客户段导出功能,但由于所提供的base64无法实现中文导出,所以修改了base64编码,并修改了tableexport中使用base64部分,实现了对中文表格的导出功能 -
jquery iviewer jquery图片查看工具(放大、缩小、旋转、可二次开发)
2014-09-25 11:59:19一款非常好的jquery图片查看工具,支持放大、缩小、拖拽等功能,并且可以非常容易的进行二次开发,压缩包中包含样例 -
jquery.min.map
2014-09-23 10:53:42jquery.min.map is a good -
jquery-2.1.4.min.js
2015-06-20 22:47:12jquery-2.1.4.min.js -
jquery-2.1.3.min.js
2015-01-07 13:49:19jquery-2.1.3.min.js是利用HTML5和jQuery技术开发web app 的关键文档 -
jquery.form.min.js
2014-12-31 11:18:06jqueryForm ajaxForm 无刷新提交form