JQuery是一个JavaScript库，极大的简化JavaScript编程。
- jQuery 库包含以下特性：
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
JQuery的使用
jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。
１、下载
可以通过下载JQuery库，然后把它包含在希望使用的网页中。
<head>
<script src="jquery.js"></script>
</head>
下载地址
2、如果不想下载，可以通过CDN(内容发布到网络）引用它。
- 从谷歌引用JQuery
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
</head>
- 从微软引用jQuery
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.９.0.js">
</script>
</head>
实例
<!DOCTYPE html>
<html>
<head>
<!-- <script type="text/javascript" src="jquery-3.3.1.min.js"></script> -->
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>
jQuery 语法
jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。
基础语法是：$(selector).action()
美元符号定义jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作
JQuery语法实例
-
$(this).hide()隐藏当前的HTML元素。 -
$("#test").hide()隐藏id="test"的元素。 -
$("p").hide()隐藏所有<p>元素。 -
$(".test").hide()隐藏所有class="test"的元素。
文档就绪函数
所有 jQuery 函数都位于一个 document ready函数中：
$(document).ready(function(){
--- jQuery functions go here ----
});
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：
- 试图隐藏一个不存在的元素
- 获得未完全加载的图像的大小
jQuery 选择器
jQuery元素选择器和属性选择器允许可以通过标签名，属性名或内容对HTML元素进行选择。
jQuery元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
-
$('p')选取<p>元素。 -
$("p.into")选取所有class="intro"的<p>元素。 -
$("p#demo")选取所有id="demo"的<p>元素。
jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
-
$("[href]")选取所有带有href属性的元素。 -
$("[href='#']")选取所有带有href值等于"#"的元素。 -
$("[href!='#']")选取所有带有href值不等于“＃”的元素。 -
$("[href$='.jpg']")选取所有href值以“.jpg”结尾的元素。
jQuery CSS 选择器
jQuery CSS选择器可用于改变HTML元素的CSS属性。
例：将所有p元素的背景颜色改为红色。
$("p").css("background-color","red");
jQuery事件
jQuery事件是为事件处理特别设计的。
jQuery 事件函数
jQuery 事件处理方法是 jQuery 中的核心函数。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。
通常会把 jQuery 代码放到 <head>部分的事件处理方法中。
$("button").click(function() {..some code... } )
实例：
$("button").click(function(){ $("p").hide(); });
单独文件中的函数
如果网页中包含许多的页面，并且希望jQuery函数易于维护，就可以把jQuery函数放在独立的.js文件中，通过src属性来引用文件)
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>
jQuery 名称冲突
jQuery使用 符号。
jQuery 使用名为 noConflict() 的方法来解决该问题。
var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。
<script>
$.noConflict();
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery 仍在运行！");
});
});
</script>
jQuery中常用的事件方法
-
$(document).ready(function)将函数绑定到文档的就绪事件(当文档完成加载时). -
$(selector).click(function)触发或将函数绑定到被选元素的点击事件。
-$(selector).dblclick(function)触发或将函数绑定到被选元素的双击事件。 -
$(selector).focus(function)触发或将函数绑定到被选元素的获得焦点事件。 -
$(selector).mouseover(function)触发或将函数绑定到被选元素的鼠标悬停事件。
网友评论