文章目录
其实在没有接触一件东西之前，总是感觉它很神秘，会感觉学习起来很困难，的确是如此。不只是感觉，是真的很困难。
虽然每一门编程语言都有相似的地方，c，java，scala，php，JavaScript，python，但是想要学好真的好难。
简介
jQuery 并不是一门新语言，它是一个 JavaScript 库。极大地简化了 JavaScript 编程。
它的语法也有自己的风格
通过jQuery，可以选取（查询，query）HTML元素，并对它们进行操作（actions）
jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。
在使用jquery之前，必须要对html和css，js有一定了解。
基础语法
$(selector).action()
- 选择符（selector）“查询"和"查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
例如：
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏 id="test" 的元素
文档就绪事件：
$(document).ready(function(){
// 开始写 jQuery 代码...
});
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。
如果在文档没有完全加载之前就运行函数，操作可能失败
上面的写法的简写为：
$(function(){
// 开始写 jQuery 代码...
});
jQuery选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。
元素选择器
根据元素名选择元素
如选择页面中所有
元素：
$("p")
看一个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
$("button").hide();
$("h2").hide();
});
});
</script>
</head>
<body>
<h2>标题</h2>
<p>段落1。</p>
<p>段落2。</p>
<button>点此隐藏</button>
</body>
</html>
#id 选择器
通过HTML元素的id属性选取指定的元素
和css一样，注意id 前面要加 # ，而且页面中元素的id 是唯一的。
$("#id")
.clsss选择器
通过HTML元素的 class属性 选取指定的元素
$(".class")
更多实例
| 语法 | 描述 |
|---|---|
| $("*") | 选取所有元素 |
| $(this) | 选取当前 HTML 元素 |
| $(“p.intro”) | 选取 class 为 intro 的 <p> 元素 |
| $(“p:first”) | 选取第一个 <p> 元素 |
| $(“ul li:first”) | 选取第一个 <ul> 元素的第一个 <li> 元素 |
| $(“ul li:first-child”) | 选取每个 <ul> 元素的第一个 <li> 元素 |
| $("[href]") | 选取带有 href 属性的元素 |
| $(“a[target=’_blank’]”) | 选取所有 target 属性值等于 “_blank” 的 <a> 元素 |
| $(“a[target!=’_blank’]”) | 选取所有 target 属性值不等于 “_blank” 的 <a> 元素 |
| $(":button") | 选取所有 type=“button” 的 <input> 元素 和 <button> 元素 |
| $(“tr:even”) | 选取偶数位置的 <tr> 元素 |
| $(“tr:odd”) | 选取奇数位置的 <tr> 元素 |
jQuery事件
jQuery 是为事件处理特别设计的。
什么是事件？
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
如
- 在元素上移动鼠标。
- 选取单选按钮
- -点击元素
常见DOM事件
| 鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload | |
| hover |
jQuery 事件方法语法
在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。
如页面中指定一个点击事件：
$("p").click();
下一步是定义什么时间触发事件。您可以通过一个事件函数实现：
$("p").click(function(){
// 动作触发后执行的代码!!
});
常用jQuery事件方法
$(document).ready()
$(document).ready() 方法允许我们在文档完全加载完后执行函数。该事件方法在 jQuery 语法 章节中已经提到过
click()
click() 方法是当按钮点击事件被触发时会调用一个函数。
该函数在用户点击 HTML 元素时执行。
$("p").click(function(){
$(this).hide();
});
dblclick()
当双击元素时，会发生 dblclick 事件。
dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数，用法和click()类似
$("p").dblclick(function(){
$(this).hide();
});
mouseenter()
当鼠标指针穿过元素时，会发生 mouseenter 事件。
mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数：
和css 中的house不同，house是暂时的，而mouseenter是永久的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mouseenter(function(){
alert('您的鼠标移到了 id="p1" 的元素上!');
});
});
</script>
</head>
<body>
<p id="p1">鼠标指针进入此处，会看到弹窗。</p>
</body>
</html>
mouseleave()
当鼠标指针离开元素时，会发生 mouseleave 事件。
mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数：
$("#p1").mouseleave(function(){
alert("再见，您的鼠标离开了该段落。");
});
只有鼠标离开元素时才会触发该事件，如果鼠标根本没有触碰到元素，也就没有离开元素的事件。
mousedown()
当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
和click() 事件类似
mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数：
$("#p1").mousedown(function(){
alert("鼠标在该段落上按下！");
});
mouseup()
当在元素上松开鼠标按钮时，会发生 mouseup 事件。
mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数：
$("#p1").mouseup(function(){
alert("鼠标在段落上松开。");
});
hover()
hover()方法用于模拟光标悬停事件。
mouseenter，mouseleave 的结合
当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。
$("#p1").hover(
function(){
alert("你进入了 p1!");
},
function(){
alert("拜拜! 现在你离开了 p1!");
}
);
focus()
当元素获得焦点时，发生 focus 事件。
当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数：
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
blur()
当元素失去焦点时，发生 blur 事件。
blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数：
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
jQuery 效果
| 方法 | 效果 |
|---|---|
| hide() | 隐藏元素 |
| show() | 显示元素 |
| toggle() | 切换hide() 和show() 方法 |
| fadeIn() | 元素淡入 |
| fadeOut() | 元素淡出 |
| fadeToggle() | 切换fadeIn()和fadeOut() 方法 |
| fadeTo() | 渐变 |
| slideDown() | 向下滑动元素 |
| slideUp() | 向上滑动元素 |
| slideToggle() | 切换slideDown() 和slideUp() 方法 |
| animate() | 创建自定义动画 |
| stop() | 停止动画 |
| callback | 在当前动画完成后执行 |
jQuery 中可以使用 . 来链接多个效果
jQuery HTML
前面说过:jQuery 并不是一门新语言，它是一个 JavaScript 库。极大地简化了 JavaScript 编程。
所以jQuery 拥有可操作 HTML 元素和属性的强大方法。
DOM
DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。
HTML DOM 定义了访问和操作 HTML 文档的标准方法。
DOM 以树结构表达 HTML 文档。
获得内容 -text(), html(), val()
三个简单实用的用于 DOM 操作的 jQuery 方法：
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
使用text,html获取元素内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
document.getElementById("showtext").innerHTML = "Text: " + $("#test").text();
}());
$("#btn2").click(function(){
document.getElementById("showhtml").innerHTML = "HTML: " + $("#test").html();
}());
});
</script>
</head>
<body>
<p id="test">这是段落中的 <b>粗体</b> 文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
<p id="showtext"> </p>
<p id="showhtml"> </p>
</body>
</html>
使用val 获取输入字段的值。
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
document.getElementById("show").innerHTML = $("#test").val();
});
});
</script>
</head>
<body>
<p>名称: <input type="text" id="test" value="菜鸟教程"></p>
<button>显示值</button>
<p id="show"></p>
</body>
</html>
结果：
使用attr获取属性值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
document.getElementById("show").innerHTML = $("#baidu").attr("href");
});
});
</script>
</head>
<body>
<p><a href="https://www.baidu.com" id="baidu">百度</a></p>
<button>显示 href 属性的值</button>
<p id="show"></p>
</body>
</html>
attr 和 prop 的区别介绍：
- 对于 HTML 元素本身就带有的固有属性，在处理时，使用 prop 方法。
- 对于 HTML 元素我们自己自定义的 DOM 属性，在处理时，使用 attr 方法。
设置内容
可以通过 text() , html(), val() 设置内容
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text("旭哥好帅!");
});
$("#btn2").click(function(){
$("#test2").html("<b>旭哥好帅!</b>");
});
$("#btn3").click(function(){
$("#test3").val("旭哥好帅");
});
});
</script>
</head>
<body>
<p id="test1">Hello</p>
<p id="test2">Hello</p>
<p>输入框: <input type="text" id="test3" value="Hello"></p>
<button id="btn1">text设置</button>
<button id="btn2">html设置</button>
<button id="btn3">val设置</button>
</body>
</html>
也可以通过attr设置属性
$("button").click(function(){
$("#runoob").attr("href","http://www.runoob.com/jquery");
});
增删元素
添加元素
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
上面的方法都可以同时添加多个元素
append/prepend 实在选择元素内部嵌入，
<p> prepend嵌入的内容 原本的文档 append嵌入的内容</p>
after/before是在元素外面追加
before 追加的内容 <p> 原本的文档 </p> after追加的内容
删除元素
删除元素和内容，可以使用以下两个方法
- remove() 删除被选元素（及其子元素）
- empty() 删除被选元素的子元素，但是不删除被选元素，即使被选元素为空
$("#div1").remove(); //删除id为dive1的元素
$("p").remove(".italic");//删除所有class为itable的元素
$("#div2").empty();//删除id为div2的元素的子元素
jQuery CSS
CSS类
jQuery 可以使用下面方法操作CSS
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
addClass()
向被选元素添加一个或多个类
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
.......
<script>
$("button").click(function(){
$("h1,h2").addClass("blue");
$("div").addClass("important");
$("p").addClass("important blue");
});
</script>
......
removeClass()
删除指定的 class 属性：
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
toggleClass()
该方法对被选元素进行添加/删除类的切换操作：
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
css() 方法
css() 方法设置或返回被选元素的一个或多个样式属性。
返回CSS属性的值
将返回首个匹配元素（p）的 background-color 值：
$("p").css("background-color");
设置CSS属性
为所有匹配元素设置 background-color 值：
$("p").css("background-color","yellow");
设置多个 CSS 属性
设置多个 CSS 属性，使用如下语法：
css({"propertyname":"value","propertyname":"value",...});
下面的例子将为所有匹配元素设置 background-color 和 font-size：
$("p").css({"background-color":"yellow","font-size":"200%"});
jQuery 尺寸
- width() 设置或返回元素的宽度（不包括内边距、边框或外边距）。
- height() 设置或返回元素的高度（不包括内边距、边框或外边距）。
- innerWidth() 返回元素的宽度（包括内边距）。
- innerHeight() 返回元素的高度（包括内边距）。
- outerWidth() 返回元素的宽度（包括内边距和边框）。
- outerHeight() 返回元素的高度（包括内边距和边框）。
jQuery 遍历元素
Query 遍历，意为"移动"，用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。
<div>元素是<ul>的父元素，同时是其中所有内容的祖先。<ul>元素是<li>元素的父元素，同时是<div>的子元素- 左边的
<li>元素是<span>的父元素，<ul>的子元素，同时是<div>的后代。 <span>元素是<li>的子元素，同时是<ul>和<div>的后代。- 两个
<li>元素是同胞（拥有相同的父元素）。 - 右边的
<li>元素是<b>的父元素，<ul>的子元素，同时是<div>的后代。 <b>元素是右边的<li>的子元素，同时是<ul>和<div>的后代。
注意，遍历的结果返回的是元素
向上遍历 DOM 树(遍历祖先)
下面这些 jQuery 方法用于向上遍历 DOM 树：
- parent()
- parents()
- parentsUntil()
jQuery parent() 方法
parent() 方法返回被选元素的直接父元素。
该方法只会向上一级对 DOM 树进行遍历。
下面的例子返回每个 <span> 元素的直接父元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.ancestors *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("span").parent().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>
<div class="ancestors">
<div style="width:500px;">div (曾祖父元素)
<ul>ul (祖父元素)
<li>li (父元素)
<span>span</span>
</li>
</ul>
</div>
<div style="width:500px;">div (祖父元素)
<p>p (父元素)
<span>span</span>
</p>
</div>
</div>
</body>
</html>
jQuery parents() 方法
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。
下面的例子返回所有 <span> 元素的所有祖先：
$(document).ready(function(){
$("span").parents();
});
您也可以使用可选参数来过滤对祖先元素的搜索。
下面的例子返回所有 元素的所有祖先，并且它是 <ul> 元素：
$(document).ready(function(){
$("span").parents("ul");
});
jQuery parentsUntil() 方法
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
下面的例子返回介于 与
$(document).ready(function(){
$("span").parentsUntil("div");
});
向下遍历 DOM 树(遍历后代)
- children()
- find()
jQuery children() 方法
children() 方法返回被选元素的所有直接子元素。
该方法只会向下一级对 DOM 树进行遍历。
$(document).ready(function(){
$("div").children();
});
可以使用可选参数来过滤对子元素的搜索。
下面的例子返回类名为 “1” 的所有 <p> 元素，并且它们是 <div> 的直接子元素：
$(document).ready(function(){
$("div").children("p.1");
});
在 DOM 树中水平遍历(遍历同胞)
siblings()
siblings() 方法返回被选元素的所有同胞元素。
$(document).ready(function(){
$("h2").siblings();
//$("h2").siblings("p"); 返回h2同胞元素中所有的<p> 元素
});
next()
next() 方法返回被选元素的下一个同胞元素。
该方法只返回一个元素。
$(document).ready(function(){
$("h2").next();
});
nextAll()
nextAll() 方法返回被选元素的所有跟随的同胞元素。
下面的例子返回 <h2> 的所有跟随的同胞元素：
$(document).ready(function(){
$("h2").nextAll();
});
nextUntil()
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
下面的例子返回介于 <h2> 与 <h6> 元素之间的所有同胞元素：
$(document).ready(function(){
$("h2").nextUntil("h6");
});
prev()， prevAll()， prevUntil()
prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞之前元素遍历，而不是之后元素遍历）。
jQuery - AJAX
jQuery - AJAX load()
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
$(selector).load(URL,data,callback);
- url: 必须 待加载的URL，可以将选择器添加到URL参数。
如：$("#div1").load("test.txt #p1");将文件中id=“p1” 的元素的内容，加载到id=“div1” 的元素中。 - data : 可选，与请求一同发送的查询字符串键值对集合
- callback : 可选是 load() 方法完成后所执行的函数名称。
看下面这个例子，当点击按钮时，会加载文件中的内容，并将其设置到id=div1的元素中。
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("test.txt");
});
});
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
- responseTxt - 包含调用成功时的结果内容
- statusTXT - 包含调用的状态
- xhr - 包含 XMLHttpRequest 对象
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
});
jQuery - AJAX get() 和 post() 方法
jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。
HTTP 请求：GET vs. POST
两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。
- GET - 从指定的资源请求数据
- POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得（取回）数据。GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。
jQuery $.get() 方法
$.get() 方法通过 HTTP GET 请求从服务器上请求数据
$.get(URL,callback);
- URL 请求的URL
- callback 请求成功后执行的函数名
有这样一个php文件：
test.php
<?php
echo '这是个从PHP文件中读取的数据。';
?>
可以使用get方法从中读取数据：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.get("/try/test.php",function(data,status){
document.getElementById("show").innerHTML = "数据: " + data + "\n状态: " + status;
});
});
});
</script>
</head>
<body>
<button>发送一个 HTTP GET 请求并获取返回结果</button>
<P id="show"></P>
</body>
</html>
jQuery $.post() 方法
$.post() 方法通过 HTTP POST 请求向服务器提交数据。
$.post(URL,data,callback);
- URL 希望请求的 URL。
- data 连同请求发送的数据。
- callback 请求成功后所执行的函数名。
下面的例子使用 $.post() 连同请求一起发送数据：
回调函数中。第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("test_post.php",{
name:"旭哥",
password:"旭哥好帅"
},//这是传递的数据
function(data,status){
alert("数据: \n" + data + "\n状态: " + status);
});//请求成功后执行的函数，data 是被请求页面的内容，status是请求的状态
});
});
</script>
</head>
<body>
<button>发送一个 HTTP POST 请求页面并获取返回内容</button>
</body>
</html>
test_post.php文件：
php文件接受传过来的数据，并进行处理
<?php
$name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '';
$password = isset($_POST['password']) ? htmlspecialchars($_POST['password']) : '';
echo '输入的用户名: ' . $name;
echo "\n";
echo '输入的密码: ' .$password;
?>