jQuery概述

Posted ★【金字塔】☆

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery概述相关的知识，希望对你有一定的参考价值。

一、jQuery的概述和作用

jQuery 是一个 javascript 库，jQuery 极大地简化了 JavaScript 编程。jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 库。
基本上，我们将学习到如何选取 html 元素，以及如何对它们执行类似隐藏、移动以及操作其内容等任务。

二、jQuery的引入

jQuery 库可以通过一行简单的标记被添加到网页中。
<script src="../js/jQuery1.10.2/jquery-1.10.2.min.js"></script>

三、jQuery 库的特性

jQuery 是一个 JavaScript 函数库。
jQuery 库包含以下特性：
  • HTML 元素选取
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函数
  • JavaScript 特效和动画
  • HTML DOM 遍历和修改
  • AJAX
  • Utilities

四、jQuery的两种文件

1： min.js文件：压缩文件，没有空格和换行，浏览器阅读速度快， 程序员阅读困难，且无法调试，适用于项目发布以后
2： .js：未压缩文件，文件显示正常的空格,换行和缩进，浏览器阅读速度慢， 但便于程序员阅读和调试，适用于项目开发

五、jQuery 语法

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。
基础语法是：$(selector).action()
  • 美元符号定义 jQuery
  • 选择符（selector）“查询”和“查找” HTML 元素
  • jQuery 的 action() 执行对元素的操作

示例

$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素

六、jQuery 的版本

目前jQuery有三个大版本：
1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。
因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
2.x：不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。
如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
3.x：不兼容ie678，只支持最新的浏览器。
除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。
目前该版本是官方主要更新维护的版本。

七、多个js库的冲突解决方案

<body>
<div id="div1">我是测试DIV</div>
</body>
<script src="../js/jQuery1.10.2/jquery-1.10.2.min.js"></script>
<script>
/*方案一：放弃对$的控制权,以后凡是原来使用$的位置全部用jQuery代替*/
jQuery.noConflict();
jQuery(function () {
alert("123")
});
/*方案二：放弃对$的控制权，但是可以定义一个特殊符号，来代替jQuery*/
var $j = jQuery.noConflict();
$j(function () {
alert("123");
});
/*方案三：放弃$的控制权，可以在局部使用*/
jQuery.noConflict();
/*$("#div1").hide();*//*在就绪函数外部不能使用*/
jQuery(document).ready(function ($) {
$("#div1").hide();
});
/*方案四：比较常用*/
jQuery.noConflict();
(function ($) {
$("#div1").hide();
}(jQuery));
</script>

八、js的文档就绪函数和jQuery文档就绪函数

方法1: js的文档就绪函数
window.onload = function () {
document.getElementById("div1").style.display = "none";
};
方法2: jquery文档就绪函数
$(document).ready(function () {
$("#div1").hide();
});
方法3: jquery文档就绪函数
$(function () {
$("#div1").hide();
});

总结：window.onload不能重复添加，如果添加多个，最后一次添加会覆盖之前的；jquey的文档就绪函数可以添加多个.

 

以上是关于jQuery概述的主要内容，如果未能解决你的问题，请参考以下文章

markdown 在WordPress中使用jQuery代码片段

使用 NodeJS 和 JSDOM/jQuery 从代码片段构建 PHP 页面

很实用的JQuery代码片段（转）

几个有用的JavaScript/jQuery代码片段（转）

几个非常实用的JQuery代码片段

高效Web开发的10个jQuery代码片段