jQuery基础
tztzyzyz 2020-05-31
jQuery是一个轻量级的"写的少，做的多"的JavaScript库。它包含以下功能：1、HTML元素选取；2、HTML元素操作；3、CSS操作；4、HTML事件函数；5、JavaScript特效和动画；6、HTML DOM遍历和修改；7、AJAX；8、Utilities； 除此之外，Jquery还提供了大量的插件。
一、下载安装
1、可以去官网下载下来然后放入项目中，在项目中引入即可。有两个版本的jQuery可供下载：
- Production version - 用于实际的网站中，已被精简和压缩。
- Development version - 用于测试和开发（未压缩，是可读的代码）
以上两个版本都可以从jquery.com中下载。jQuery库是一个JavaScript文件，您可以使用HTML的<script>标签引用它：
<head> <script src="jquery-1.10.2.min.js"></script> </head> <!--您是否很疑惑为什么我们没有在<script>标签中使用type="text/javascript"? 在HTML5中，不必那样做了。JavaScript是HTML5以及所有现代浏览器中的默认脚本语言！-->
2、使用CDN在项目中引入jQuery
<!--百度CDN:--> <head> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> </head> <!--又拍云CDN:--> <head> <script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.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>
二、jQuery语法
jQuery语法是通过选取HTML元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()$表示jQuery，selector表示选择器，有标签选择器，类选择器，id选择器。也就是分别对应html中的标签，class类选择器，id标识。
标签选择器示例：$("p").hide() 意思是隐藏所有的p标签。
类选择器示例：$(".test").hide() 意思是隐藏所有class="test"的元素。
id选择器示例：$("#test").hide() 意思是隐藏id="test"的元素。
jQuery是在html文档完全加载完成之后才执行的，如果在文档加载完成之前执行jQuery代码将会出现问题，因为有些元素还没有加载完成。因此需要执行文档就绪事件。
//意思是文档加载完成之后才进行操作
$(document).ready(function(){
// 开始写jQuery代码...
});
//简写方式 与上面效果一样
$(function(){
// 开始写jQuery代码...
});三、jQuery选择器
jQuery选择器允许您对HTML元素组或单个元素进行操作。jQuery选择器基于元素的id、类、类型、属性、属性值等"查找"（或选择）HTML元素。 它基于已经存在的CSS 选择器，除此之外，它还有一些自定义的选择器。jQuery中所有选择器都以美元符号开头：$()。
1、元素选择器
//选中所有的p标签，当点击按钮时p标签全部隐藏
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});2、#id选择器
//当用户点击按钮后，有id="test"属性的元素将被隐藏：
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});3、.class选择器
//用户点击按钮后所有带有class="test"属性的元素都隐藏：
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});4、其他更多实例
| 语法 | 描述 | 实例 |
|---|---|---|
| $("*") | 选取所有元素 | 在线实例 |
| $(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中发生某些事件时所调用的方法。在事件中经常使用术语"触发"（或"激发"）例如： "当您按下按键时触发keypress事件"。
常见DOM事件：
| 鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload | |
| hover |
在jQuery中，大多数DOM事件都有一个等效的jQuery方法。
例如点击事件：
$("p").click(function(){
// 动作触发后执行的代码!!
});jQuery更多事件 参见： https://www.runoob.com/jquery/jquery-events.html
五、jQuery hide()和show()显示和隐藏元素
通过 jQuery，您可以使用hide()和show()方法来隐藏和显示HTML元素。
例如：
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选的speed参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的callback参数是隐藏或显示完成后所执行的函数名称。
$("#hide").click(function(){
$("p").hide(1000,function(){
alert("隐藏之后执行的函数");
});
});toggle()方法
通过jQuery，您可以使用toggle()方法来切换hide()和show()方法。显示被隐藏的元素，并隐藏已显示的元素。
例如：也可以指定speed和callback函数。
$("button").click(function(){
$("p").toggle();
});六、jQuery - 链(Chaining)
通过jQuery，可以把动作/方法链接在一起。Chaining允许我们在一条语句中运行多个jQuery方法（在相同的元素上）。
七、jQuery - 获取html内容和属性
jQuery拥有可操作HTML元素和属性的强大方法。
1、获得内容 - text()、html()以及val()
三个简单实用的用于DOM操作的jQuery方法：
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
//获取所选元素的文本内容
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
//获取文本内容，包括html
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
//获取input中的值
$("#btn1").click(function(){
alert("值为: " + $("#test").val());
});
//设置值
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("RUNOOB");
});2、获取属性 - attr()
//获取a标签中的href属性的值
$("button").click(function(){
alert($("#runoob").attr("href"));
});
//给属性设置值
$("button").click(function(){
$("#runoob").attr("href","http://www.runoob.com/jquery");
});
//可以同时设置多个属性的值
$("button").click(function(){
$("#runoob").attr({
"href" : "http://www.runoob.com/jquery",
"title" : "jQuery 教程"
});
});八、jQuery - 添加元素
通过jQuery，可以很容易地添加新元素/内容。主要有四个方法，如下：
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
示例：
//在p标签末尾追加
$("p").append("追加文本");
//在p标签开头追加
$("p").prepend("在开头追加文本");
//还可以利用append或者prepend追加多个内容。
jQuery after()和before()方法
jQuery after()方法在被选元素之后插入内容。
jQuery before()方法在被选元素之前插入内容。
//在被选元素之前或者之后添加
$("img").after("在后面添加文本");
$("img").before("在前面添加文本");九、jQuery - 删除元素
通过jQuery，可以很容易地删除已有的HTML元素。主要有两个方法，如下：
- remove() - 删除被选元素（及其子元素）
- empty() - 从被选元素中删除子元素
//删除div1及其里面的所有元素
$("#div1").remove();
//清空div里面的所有元素，但是不清空这个div
$("#div1").empty();可以对将要删除的元素进行过滤，例如要删指定的某个元素。
例子：删除class="italic"的所有<p>元素：$("p").remove(".italic");
十、jQuery - AJAX
AJAX是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。
jQuery提供多个与AJAX有关的方法。通过jQuery AJAX方法，您能够使用HTTP Get和HTTP Post从远程服务器上请求文本、HTML、XML或JSON- 同时您能够把这些外部数据直接载入网页的被选元素中。
1、jQuery load()方法
jQuery load()方法是简单但强大的AJAX方法。load()方法从服务器加载数据，并把返回的数据放入被选元素中。
语法格式：$(selector).load(URL,data,callback)
必需的URL参数规定您希望加载的URL。即请求的url路径。
可选的data参数规定与请求一同发送的查询字符串键/值对集合。也就是要传递的参数。
可选的callback参数是load()方法完成后所执行的函数名称。请求成功后要执行的函数。
2、AJAX get()方法
两种在客户端和服务器端进行请求-响应的常用方法是：GET和POST。
- GET - 从指定的资源请求数据
- POST - 向指定的资源提交要处理的数据
GET基本上用于从服务器获得（取回）数据。注释：GET方法可能返回缓存数据。
POST也可用于从服务器获取数据。不过，POST方法不会缓存数据，并且常用于连同请求一起发送数据。$.get()方法通过HTTP GET请求从服务器上请求数据。
语法格式：$.get(URL,callback)
例如：
$("button").click(function(){
$.get("demo_test.php",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
});
$.get()的第一个参数是我们希望请求的URL（"demo_test.php"）。
第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。3、AJAX post()方法$.post()方法通过HTTP POST请求向服务器提交数据。
语法格式:$.post(URL,data,callback)
必需的URL参数规定您希望请求的URL。
可选的data参数规定连同请求发送的数据。
可选的callback参数是请求成功后所执行的函数名。
例如：
$("button").click(function(){
$.post("/try/ajax/demo_test_post.php",
{
name:"菜鸟教程",
url:"http://www.runoob.com"
},
function(data,status){
alert("数据: \n" + data + "\n状态: " + status);
});
});十一、GET和POST方法的区别
1、发送的数据数量
在GET中，只能发送有限数量的数据，因为数据是在URL中发送的。
在POST中，可以发送大量的数据，因为数据是在正文主体中发送的。
2、安全性
GET方法发送的数据不受保护，因为数据在URL栏中公开，这增加了漏洞和黑客攻击的风险。
POST方法发送的数据是安全的，因为数据未在URL栏中公开，还可以在其中使用多种编码技术这使其具有弹性。
3、加入书签中
GET查询的结果可以加入书签中，因为它以URL的形式存在；而POST查询的结果无法加入书签中。
4、编码
在表单中使用GET方法时，数据类型中只接受ASCII字符。
在表单提交时，POST方法不绑定表单数据类型，并允许二进制和ASCII字符。
5、可变大小
GET方法中的可变大小约为2000个字符。
POST方法最多允许8 Mb的可变大小。
6、缓存
GET方法的数据是可缓存的，而POST方法的数据是无法缓存的。
7、主要作用
GET方法主要用于获取信息。而POST方法主要用于更新数据。
