04 . 前端之JQuery

发布时间：2020-12-15 02:15:26 所属栏目：C语言来源：网络整理

导读：JQuery简介 # 1. jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 # 2. jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互， # 能够极大地简化JavaScript编程。它的宗旨就是：“Write less,do more.“ 什么是JQuer

JQuery简介

# 1. jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
# 2. jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，
# 能够极大地简化JavaScript编程。它的宗旨就是：“Write less,do more.“

什么是JQuery?

# JQuery是一个JavaScript函数库
# JQuery是一个轻量级的"写的少，做的多"的JavaScript库.可以通过一行简单的标记被添加到网页中．
?
# JQuery库包含以下功能:
?
# 1. HTML元素选取
# 2. HTML元素操作
# 3. CSS操作
# 4. HTML事件函数
# 5. JavaScript特效和动画
# 6. HTML DOM遍历和修改
# 7. AJAX(不刷新页面同时修改页面内容)
# 8. Utilities
?
# 除此之外，JQuery还提供了大量的插件

为什么使用JQuery?

# 目前网络上有大量开源的JS框架，但是JQuery是目前最流行的JS框架，而且提供了大量的扩展.
# 很多大公司都在使用JQuery，例如:
# Google,Microsoft,IBM,Netflix
?
# JQuery是否适用于所有浏览器
# jQuery 团体知道JS在不同浏览器中存在着大量的兼容性问题,目前jQuery兼容于所有主流浏览器,包括Internet Explorer 6!

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，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。

?

维护IE678是一件让人头疼的事情，一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少，PC端用户已经逐步被移动端用户所取代，如果没有特殊要求的话，一般都会选择放弃对678的支持*

JQuery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。

?

$(“#i1”).html()的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。相当于： document.getElementById(“i1”).innerHTML;

?

虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。

?

一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$：

var $variable = jQuery对像
var variable = DOM对象
$variable[0]//jQuery对象转成DOM对象

拿上面那个例子举例，jQuery对象和DOM对象的使用：

$("#i1").html();//jQuery对象可以使用jQuery的方法
$("#i1")[0].innerHTML;// DOM对象使用DOM的方法

Example DOM和JQuery对象的转换

<!DOCTYPE html>
<html lang="en">
<head>
 ? ?<meta charset="UTF-8">
 ? ?<title>Title</title>
</head>
 ? ?<link rel="stylesheet" href="csswenjian"/>
 ? ?<style>
?
 ? ?</style>
<body>
 ? ?<div id="i1">123</div>
?
 ? ?<script src="jquery-1.12.4.js"></script>
 ? ?<script>
 ? ? ? ?$("#i1")
 ? ?</script>
</body>
</html>

# 打开浏览器访问这个html的console
document.getElementById('i1')
<div id=?"i1">?123?</div>?
?
$('#i1') ? ? ? ? ? 
jQuery.fn.init [div#i1,context: document,selector: "#i1"]
?
$('#i1')[0]
<div id=?"i1">?123?</div>?
?
# JQuery对象[0]  => DOM对象
# Dom对象 ? =>  $(Dom对象)

JQuery安装

可以通过多种方法在网页中添加 jQuery。您可以使用以下方法：

?

从 jquery.com 下载 jQuery 库

?

从 CDN 中载入 jQuery,如从 Google 中加载 jQuery

HTML标签引用JQuery

有两个版本的 jQuery 可供下载：
?
* Production version - 用于实际的网站中，已被精简和压缩。
* Development version - 用于测试和开发（未压缩，是可读的代码）
?
以上两个版本都可以从 [jquery.com](http://jquery.com/download/) 中下载。
?
jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 <script> 标签引用它：

<!DOCTYPE html>
<html lang="en">
<head>
 ? ?<meta charset="UTF-8">
 ? ?<title>Title</title>
</head>
 ? ?<link rel="stylesheet" href="csswenjian"/>
 ? ?<style>
?
 ? ?</style>
<body>
 ? ?<div id="i1">123</div>
?
 ? ?<script src="jquery-1.12.4.js"></script>
 ? ?<script>
 ? ? ? ?$("#i1")
 ? ?</script>
</body>
</html>
?
# 将下载的文件放在网页的同一目录下，就可以使用JQuery

CDN引用JQuery

如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络）引用它。

?

Staticfile CDN、百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。

?

如果你的站点用户是国内的，建议使用百度、又拍云、新浪等国内CDN地址，如果你站点用户是国外的可以使用谷歌和微软。如需从Staticfile CDN、又拍云、新浪、谷歌或微软引用 jQuery，请使用以下代码之一：

Staticfile CDN:

<head> ?
<script ?src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> ?</script> ?
</head>

百度CDN

<head> ?
<script ?src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> ?</script> ?
</head>

新浪CDN

<head> ?
<script ?src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"> ?</script> 
</head>

Google CDN

<head> ?
<script ?src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> ?</script> ?
</head>
# Google产品在中国很不稳定

Microsoft CDN

<head> ?
<script ?src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script> ?
</head>

# 使用CDN的JQuery，有一个很大的优势:
# 许多用户访问其他站点时，已经从上面各种CDN加载过JQuery，所以结果是，他们访问你站点时，
# 会从缓存中加载JQuery，这样可以减少加载时间，同时，大多数CDN都可以确保当用户向其请求文件时，
# 会从离最近的服务器上返回响应，这样也可以提高加载速度.
?
# 在浏览器Console输入 $.fn.jquery可以查看使用的什么版本.

JQuery基础语法

# 通过JQuery，可以选取(查询,query)HTML元素，并对他们执行"操作"(actions).

Example

<!DOCTYPE html>
<html lang="en">
<head>
 ? ?<meta charset="UTF-8">
 ? ?<title>Title</title>
 ? ?<script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<script>
 ? ?$(document).ready(function () {
 ? ? ? ?// alert("文档加载完毕");
 ? ? ? ?//  当前函数执行完执行alert弹出框
 ? ? ? ?$("p").click(function () {
 ? ? ? ? ? ?$(this).hide();
 ? ? ? ?// 隐藏p元素 ? 
 ? ? ?  })
 ?  });
</script>
</body>
</html>

查找标签

1. 基本选择器 id选择器：

$("#id")

标签选择器

$("tagName")

Class选择器

$(".className")

配合使用

$("div.c1")
// 找到c1  class类的div标签

所有元素选择器

$("*")

组合选择器

$("#id,.className,tagName")

层级选择器 x和y可以为任何选择器

$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y

Example1

<!DOCTYPE html>
<html lang="en">
<head>
 ? ?<meta charset="UTF-8">
 ? ?<title>Title</title>
 ? ?<script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
 ? ?<p class="pclass">p1</p>
 ? ?<p id="pid">p2</p>
 ? ?<button>
 ? ? ? ?click
 ? ?</button>
 ? ?<script>
 ? ? ? ?$(document).ready(function () {
 ? ? ? ? ? ?$("button").click(function () {
 ? ? ? ? ? ? ? ?$("p").text("p元素被修改了");
 ? ? ? ? ? ? ? ?$(".pclass").text("p元素通过class被修改了");
 ? ? ? ? ? ? ? ?$("#pid").text("p元素通过pid被修改了");
 ? ? ? ? ?  });
 ? ? ?  });
 ? ?</script>
</body>
</html>

基本筛选器

:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
?
// 示例,多用于input标签
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签

事件

<!DOCTYPE html>
<html lang="en">
<head>
 ? ?<meta charset="UTF-8">
 ? ?<title>Title</title>
 ? ?<script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
<button>Click</button>
<script>
 ? ?$(document).ready(function () {
 ? ? ? ?// $("button").click(function () {
 ? ? ? ?// ? ? $(this).hide();
 ? ? ? ? ? ?// 单击事件
 ? ? ? ?// });
?
 ? ? ? ?// $("button").dblclick(function () {
 ? ? ? ? ? ?// $(this).hide();
 ? ? ? ? ? ?// 双击事件
 ? ? ? ?// });
?
 ? ? ? ?$("button").mouseenter(function () {
 ? ? ? ? ? ?$(this).hide();
 ? ? ? ? ? ?// 当鼠标放到按钮上触发此事件，
 ? ? ? ? ? ?// mouseleave是鼠标移开按钮触发的事件
 ? ? ?  });
 ?  })
</script>
</body>
</html>

事件之绑定，解除绑定

<!DOCTYPE html>
<html lang="en">
<head>
 ? ?<meta charset="UTF-8">
 ? ?<title>Title</title>
 ? ?<script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
<button id="clickBind">ClickBind</button>
<script>
 ? ?$(document).ready(function () {
 ? ? ? ?// $("#clickBind").click(function () {
 ? ? ? ? ? ?// alert("hello")
 ? ? ? ? ? ?// 当我们的事件很多时，这样写非常消耗内存
 ? ? ? ?// });
?
 ? ? ? ?$("#clickBind").bind("click",clickHandler1);
 ? ? ? ?$("#clickBind").bind("click",clickHandler2);
 ? ? ? ?// $("#clickBind").unbind("click"); //这种解除绑定会解除所有
 ? ? ? ?$("#clickBind").unbind("click",clickHandler1()); //解除单一绑定
?
?
 ? ? ? ?$("#clickBind").on("click",clickHandler1); ?// bind底层都是使用on,off实现
 ? ? ? ?$("#clickBind").off("click",clickHandler2);
 ?  });
?
 ? ?function clickHandler1(e) {
 ? ? ? ?console.log("clickHandler1")
 ?  }
 ? ?function clickHandler2(e) {
 ? ? ? ?console.log("clickHandler2")
 ?  }
</script>
</body>
</html>

自定义事件

<!DOCTYPE html>
<html lang="en">
<head>
 ? ?<meta charset="UTF-8">
 ? ?<title>Title</title>
 ? ?<script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
 ? ?<button id="ClickMeBtn">Click</button>
 ? ?<script>
 ? ? ? ?var ClickMeBtn
 ? ? ? ?$(document).ready(function () {
 ? ? ? ? ? ?ClickMeBtn = $("#ClickMeBtn");
 ? ? ? ? ? ?ClickMeBtn.click(function () {
 ? ? ? ? ? ? ? ?var e = jQuery.Event("MyEvent");
 ? ? ? ? ? ? ? ?ClickMeBtn.trigger(e);
 ? ? ? ? ?  });
?
 ? ? ? ? ? ?ClickMeBtn.bind("MyEvent",function(event) {
 ? ? ? ? ? ? ? ?console.log(event);
 ? ? ? ? ?  })
 ? ? ?  })
 ? ?</script>
</body>
</html>

Example2

$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

Example3 多选，全选，反选

<!DOCTYPE html>
<html lang="en">
<head>
 ? ?<meta charset="UTF-8">
 ? ?<title>Title</title>
</head>
<body>
?
 ? ?<input type="button" value="全选" onclick="ChackAll()" />
 ? ?<input type="button" value="反选" onclick="ReverseAll()" />
 ? ?<input type="button" value="取消" onclick="CancleAll()" />
?
?
 ? ?<table border="1">
 ? ? ? ?<thead>
 ? ? ? ? ? ?<tr>
 ? ? ? ? ? ? ? ?<th>选项</th>
 ? ? ? ? ? ? ? ?<th>IP</th>
 ? ? ? ? ? ? ? ?<th>Port</th>
 ? ? ? ? ? ?</tr>
 ? ? ? ?</thead>
?
 ? ? ? ?<tbody >
 ? ? ? ? ? ?<tr>
 ? ? ? ? ? ? ? ?<td><input type="checkbox"></td>
 ? ? ? ? ? ? ? ?<td>1.1.1.1</td>
 ? ? ? ? ? ? ? ?<td>80</td>
 ? ? ? ? ? ?</tr>
?
 ? ? ? ? ? ?<tr>
 ? ? ? ? ? ? ? ?<td><input type="checkbox"></td>
 ? ? ? ? ? ? ? ?<td>1.1.1.2</td>
 ? ? ? ? ? ? ? ?<td>3306</td>
 ? ? ? ? ? ?</tr>
 ? ? ? ?</tbody>
 ? ?</table>
?
 ? ?<script src="jquery-1.12.4.js"></script>
 ? ?<script>
 ? ? ? ?function ChackAll() {
 ? ? ? ? ? ?$(':checkbox').prop('checked',true);
 ? ? ?  }
?
 ? ? ? ?function CancleAll() {
 ? ? ? ? ? ?$(':checkbox').prop('checked',false);
 ? ? ?  }
?
 ? ? ? ?function ReverseAll() {
 ? ? ? ? ? ?$(':checkbox').each(function (k) {
 ? ? ? ? ? ? ? ?//  this代表当前循环的每一个元素
 ? ? ? ? ? ? ? ?//  反选，循环出来每个元素,
 ? ? ? ? ? ? ? ?// ? ? console.log(k,this)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!