JQuery教程
一、简介
概述
jQuery 是一套兼容多浏览器的 javascript 脚本库.。核心理念是写得更少，做得更多，使用 jQuery 将
极大的提高编写 javascript 代码的效率，帮助开发者节省了大量的工作，让写出来的代码更加优雅，更
加健壮，"如虎添翼"。同时网络上丰富的 jQuery 插件，也让我们的工作变成了"有了 jQuery，一切 so
easy。" -- 因为我们已经站在巨人的肩膀上了。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布，吸引了来自世界各地的众多JavaScript 高手加入，由 Dave Methvin 率领团队进行开发。如今，jQuery已经成为最流行的 javascript框架，在世界前 10000 个访问最多的网站中，有超过 55%在使用 jQuery。
优点
- 提供了强大的功能函数
- 解决浏览器兼容性问题
- 实现丰富的 UI 和插件
- 纠正错误的脚本知识
......
二、安装与使用
官网地址
版本区别
- 完整版（学习版本） : jquery-2.1.4.js
- 压缩版（开发版本） : jquery-2.1.4.min.js
页面引入
<script src="js/jquery-3.4.1.js" type="text/javascript" ></script>
三、JQuery核心
$ 符号在 jQuery 中代表对 jQuery 对象的引用， "jQuery"是核心对象。通过该对象可以获取jQuery
对象，调用jQuery提供的方法等。只有jQuery对象才能调用jQuery提供的方法。$<==>JQuery
四、Dom对象与JQuery包装集对象
Dom对象：通过js代码获取的对象
JQuery包装集对象：通过JQuery获取的对象
var div = document.getElementById("testDiv"); //Dom对象
var jQueryObject = $("#testDiv"); //JQuery包装集对象
Dom对象与JQuery包装集对象的转换
Dom 对象转为 jQuery 对象，只需要利用 $() 方法进行包装即可
var domDiv = document.getElementById('mydiv');// 获取Dom对象
mydiv = $(domDiv); //转换为JQuery包装集对象
jQuery 对象转 Dom 对象，只需要取数组中的元素即可
jqueryDiv = $('#mydiv'); //获取JQuery对象
var dom = jqueryDiv[0]; // 将以获取的jquery对象转为Dom对象
五、JQuery选择器
基础选择器
-
id选择器（#id）
-
元素名称选择器(element)
-
类选择器(.class)
-
选择所有元素(*)
-
组合选择元素(selector1,selector2,...)
$("#id") //id选择器 $("div") //元素名称选择器 $(".classname") //类选择器 $("*") //选择所有元素 $(".classname,.classname1,#id1") //组合选择器
层次选择器
| 选择器 | 实例 | 选取 |
|---|---|---|
| 后代选择器 | $("#parent div") | 选择id为parent的元素的所有div元素 |
| 子代选择器 | $("#parent>div") | 选择id为parent的直接div子元素 |
| 相邻选择器 | $(".blue + img") | 选择css类为blue的下一个img元素 |
| 同辈选择器 | $(".blue ~ img") | 选择css类为blue的之后的img元素 |
表单选择器
| 选择器 | 实例 | 选取 |
|---|---|---|
| 表单选择器 | $(":input") | 匹配所有 input, textarea, select 和 button 元素 |
| 文本框选择器 | $(":text") | 查找所有文本框 |
| 密码框选择器 | $(":password") | 查找所有密码框 |
| 单选框按钮选择器 | $(":radio") | 查找所有单选按钮 |
| 复选框选择器 | $(":checkbox") | 查找所有复选框 |
| 提交按钮选择器 | $(":submit") | 查找所有提交按钮 |
| 图像域选择器 | $(":image") | 查找所有图像域 |
| 重置按钮选择器 | $(":reset") | 查找所有重置按钮 |
| 按钮选择器 | $(":button") | 查找所有按钮 |
| 文本域选择器 | $(":file") | 查找所有文件域 |
六、JQuery Dom操作
jQuery 中非常重要的部分就是操作 DOM(Document Object Model)的能力。这是在原生js的基础之上进行了优化，使用起来更加方便。
注意：以下的操作方式只适用于jQuery对象。
操作元素的属性
attr(属性名称)：获取指定的属性值，操作 checkbox 时，选中返回 checked，没有选中返回 undefined。
attr(属性名称，属性值)：设置指定的属性值
prop(属性名称)： 获取具有true和false两个属性的属性值
prop(属性名称，属性值)：设置具有true和false的属性值
removeAttr(属性名)：移除指定的属性
<body>
<pre>
<h5>1.attr()</h5>
<h5>2.prop()</h5>
</pre>
<hr/>
<a href="http://www.baidu.com" id="a1">百度</a>
<a href="http://www.sina.com" id="a2">新浪</a>
<input type="checkbox" name="all" checked="checked"/>全选
</body>
<script type="text/javascript">
// 获取属性值：attr
console.log($('#a1').attr('href'));
console.log($(':checkbox').attr('name'));
// 若未选中显示undefined，选中显示 checked
console.log($(':checkbox').attr('checked'));
// 获取属性值：prop
console.log($(":checkbox").prop('checked'));
console.log($('#a2').prop('href'))
// 设置属性值
$('#a1').attr('href','https://jquery.com');
$(":checkbox").prop("checked",false);
// 移除属性
$('#a2').removeAttr('href');
</script>
Tips：
- 对于HTML元素本身就带有的固有属性，在处理时，使用prop方法
- 对于HTML元素我们自己自定义的DOM属性，在处理时，使用 attr 方法
- 具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()
操作元素的样式
attr("class")： 获取class属性的值，即样式名称
attr("class","样式名")：修改class属性的值，修改样式
addClass("样式名")： 添加样式名称
css()： 添加具体的样式
removeClass(class)： 移除样式名称
<style type="text/css">
div{padding: 8px; width: 180px; }
.blue{background: blue; }
.larger{ font-size: 30px; }
.green { background : green; }
</style>
<body>
<h3>css()方法设置元素样式</h3>
<div id="conBlue" class="blue larger">天蓝色</div>
<div id="conRed">大红色</div>
<div id="remove" class="blue larger">天蓝色</div>
</body>
<script type="text/javascript">
// 获取样式名称
console.log($("#remove").attr("class"));
// 修改样式，那么id为remove的元素样式class只有green
// $('#remove').attr("class","green")
// 添加样式名称，class名称 --叠加
// $('#conBlue').addClass("blue larger");
// 添加元素具体样式
$('#conRed').css({"background-color":"red","color":"#fff"});
$('#remove').css('color','red');
// 移除样式
$("#remove").removeClass("blue larger");
</script>
操作元素的内容
html(): 获取元素的html内容
html("html, 内容"): 设定元素的html内容
text(): 获取元素的文本内容，不包含html
text("text 内容"): 设置元素的文本内容，不包含html
val(): 获取元素value值
val("值"): 设定元素的value值
<body>
<h3><span>html()和text()方法设置元素内容</span></h3>
<div id="html"></div>
<div id="text"></div>
<input type="text" name="uname" value="oop" />
</body>
<script type="text/javascript">
// 获取HTML内容，包括HTML标签
console.log($('h3').html());
// 获取文本内容，不包括HTML标签
console.log($('h3').text());
// 获取value值
console.log($('[name=uname]').val());
// 设置
$('#html').html("<p>使用html设置,看不到标签</p>");
$('#text').text("<p>使用text设置,能看到标签</p>");
$('[name=uname]').val("哈哈哈");
</script>
Tips：
text()方法仅获取元素的内容，而html()方法连同标签一起获取
创建元素
$('元素内容')：直接创建元素
$('<p>this is a paragraph!!!</p>');
添加元素
prepend(content)： 在被选元素内部的开头插入元素或内容，被追加的 content 参数，可以是字符、 HTML 元素标记。
$(content).prependTo(selector)： 把 content 元素或内容加入 selector 元素开头
append(content)： 在被选元素内部的结尾插入元素或内容，被追加的 content 参数，可以是字符、 HTML 元素标记。
$(content).appendTo(selector)： 把 content元素或内容插入selector 元素内，默认是在尾部
before(): 在元素前插入指定的元素或内容:$(selector).before(content)
after(): 在元素后插入指定的元素或内容:$(selector).after(content)
<body>
<h3>prepend()方法前追加内容</h3>
<h3>prependTo()方法前追加内容</h3>
<h3>append()方法后追加内容</h3>
<h3>appendTo()方法后追加内容</h3>
<span class="red">男神</span>
<span class="blue">偶像</span>
<div class="green">
<span >小鲜肉</span>
</div>
</body>
<script type="text/javascript">
var str ="<span id='mydiv' style='padding: 8px;width: 180px;background- color:#ADFF2F;'>动态创建span</span>";
// 1、使用prepend前加内容
$("body").prepend(str);
// 2、使用prependTo前加内容
$("<b>开头</b>").prependTo('body');
// 3、使用append后加内容
$("body").append(str);
// 当把已存在的元素添加到另一处的时候相当于移动
$("div").append($('.red'));
// 4、使用appendTo后追加内容
$(str).appendTo('body');
</script>
Tips:
- append/prepend 是在选择元素内部嵌入。
- after/before 是在元素外面追加。
移除元素
remove() 删除所选元素或指定的子元素，包括整个标签和内容一起删
empty() 清空所选元素的内容
<body>
<h3>删除元素</h3>
<span class="green">jquery<a>删除</a></span>
<span class="blue">javase</span>
<span class="green">http协议</span>
<span class="blue">servlet</span>
</body>
<script type="text/javascript">
// 删除所选元素 或指定的子元素
$("span").remove();
// 删除样式为blue的span
$("span.blue").remove();
// 清空元素
$("span").empty();
$(".green").empty();
</script>
遍历元素
each()
$(selector).each(function(index,element)) :遍历元素
参数 function 为遍历时的回调函数
index 为遍历元素的序列号，从 0 开始
element是当前的元素，此时是dom元素
<body>
<h3>遍历元素 each()</h3>
<span class="green">jquery</span>
<span class="green">javase</span>
<span class="green">http协议</span>
<span class="green">servlet</span>
</body>
<script type="text/javascript">
$('span').each(function (idx , e) {
console.log(idx + " ---> " + $(e).text());
})
</script>
七、JQuery事件
事件类型：blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick
mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter
mouseleave,change, select, submit, keydown, keypress, keyup, error
常见事件举例：
//鼠标单击事件
$("p").click(function(){
$(this).hide();
});
//鼠标双击事件
$("p").dblclick(function(){
$(this).hide();
});
//聚焦事件
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
//离焦事件
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
八、JQuery Ajax
AJAX 是一种与服务器交换数据的技术，可以在不重新载入整个页面的情况下更新网页的一部分。
常用方法有：$.ajax()、$.get()、$.post()
$.ajax()
语法：$.ajax({name:value, name:value, ... })
参数：
type：请求方式 GET/POST
url：请求地址 url
async：是否异步，默认是 true 表示异步
data：发送到服务器的数据
dataType：预期服务器返回的数据类型
contentType：设置请求头
success：请求成功时调用此函数
error：请求失败时调用此函数
$.ajax({
type:"get",
url:"js/cuisine_area.json",
async:true,
success : function (msg) {
var str = msg; console.log(str);
$('div').append("<ul></ul>");
for(var i=0; i<msg.prices.length;i++){
$('ul').append("<li></li>");
$('li').eq(i).text(msg.prices[i]);
}
},
error : function (errMsg) {
console.log(errMsg);
$('div').html(errMsg.responseText);
}
});
$.get()
语法：$.get(URL,data,function(data,status,xhr),dataType)
参数：
URL: 必需。规定您需要请求的 URL。
data: 可选。规定连同请求发送到服务器的数据。
function(data,status,xhr): 可选。规定当请求成功时运行的函数。
data - 包含来自请求的结果数据
status - 包含请求的状态（"success"、"notmodified"、"error"、"timeout"、"parsererror"）
xhr - 包含 XMLHttpRequest 对象
dataType: 可选。规定预期的服务器响应的数据类型。
//请求 "test.php"，但是忽略返回结果：
$.get("test.php");
//请求 "test.php" 并连同请求发送一些额外的数据（忽略返回结果）：
$.get("test.php", { name:"Donald", town:"Ducktown" });
//请求 "test.php" 并传递数据数组到服务器（忽略返回结果）：
$.get("test.php", { 'colors[]' : ["Red","Green","Blue"] });
//请求 "test.php" 并提醒请求的结果：
$.get("test.php", function(data){
alert("Data: " + data);
});
$.post()
语法：$(selector).post(URL,data,function(data,status,xhr),dataType)
参数：
URL: 必需。规定您需要请求的 URL。
data: 可选。规定连同请求发送到服务器的数据。
function(data,status,xhr): 可选。规定当请求成功时运行的函数。
data - 包含来自请求的结果数据
status - 包含请求的状态（"success"、"notmodified"、"error"、"timeout"、"parsererror"）
xhr - 包含 XMLHttpRequest 对象
dataType: 可选。规定预期的服务器响应的数据类型。
$("button").click(function(){
$.post("demo_test.html",function(data,status){
alert("Data: " + data + "nStatus: " + status);
});
});