jQuery框架
jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。
jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择；并且支持链式编程；
jQuery文档
http://jquery.cuishifeng.cn/
jQuery选择器
jQuery的引用方式
<!-- 官方下载jQuery文件 在body最下方引用-->
<script src="jquery-3.2.1.js"></script>
<script>
// 使用$("#id值") 找到id为d1的标签
$("#d1")
</script>
jQuery和DOM对象的转换
- jQuery对象[0] ===> Dom对象
- Dom对象 ===> $(Dom对象)
1.HTML内容
<body>
<div id="d1">jQuery和DOM对象的转换</div>
<!--引用jQuery文件-->
<script src="jquery-3.2.1.js"></script>
<script>
</script>
</body>
2.将jQuery对象转换为DOM对象直接取[0]个值
obj=$("#d1")
[div#d1]
obj[0]
<div id="d1">jQuery和DOM对象的转换</div>
3.将DOM对象转换为jQuery对象直接加$()
dom=document.getElementById("d1")
<div id="d1">jQuery和DOM对象的转换</div>
$(dom)
[div#d1]
jQuery直接选择器
1.id选择器$("#id")
$("#i1")
[div#i1]
2.class选择器$(".c1")
$(".c1")
[div.c1, prevObject: jQuery.fn.init(1)]
$(".c1")[0]
<div class="c1">123</div>
3.标签选择器$("div")
$("div")
(2) [div#d1, div.c1, prevObject: jQuery.fn.init(1)]
$("div")[1]
<div class="c1">div标签二</div>
$("div")[0]
<div id="d1">div标签一</div>
4.组合同时找到多个标签,所有class为c1的，id等于d1的，以及所有的a标签
$(".c1,#d1,a")
(5) [div#d1, div.c1, a, a, a, prevObject: jQuery.fn.init(1)]
jQuery层级选择器
1.找到div标签下的，子子孙孙的a标签 $("#i10 a")
<div id="i10">
<div>
<a href="">div内的a标签</a>
<a href="">div内的a标签</a>
</div>
<a href="">a标签</a>
<a href="">a标签</a>
<a href="">a标签</a>
</div>
<!--分割线-->
// id i10下面子子孙孙所有的a标签
$("#i10 a")
(5) [a, a, a, a, a, prevObject: jQuery.fn.init(1)]
2.找到div标签下的儿子级别 a标签 $("#i10>a")
$("#i10>a")
(3) [a, a, a, prevObject: jQuery.fn.init(1)]
jQuery基础选择器first、last、eq(下标)
1.获取匹配的第一个元素$('标签:first')或最后一个元素$('标签:last')
<!--HTML 代码:-->
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<!--分割线-->
//第一个元素
$('li:first');
[ <li>list item 1</li> ]
//最后一个元素
$('li:last')
[ <li>list item 5</li> ]
2.根据索引查找，从 0 开始计数
// html内容
<table>
<tr><td>Value 0</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
<!--分割线-->
// 根据索引，查出下标为1的内容，并转换为DOM格式
$("tr:eq(1)")
[tr, prevObject: jQuery.fn.init(1)]
$("tr:eq(1)")[0]
<tr><td>Value 1</td></tr>
jQuery属性选择器
1.找到属性等于name的标签;name属性等于lisi的标签
// html内容
<div name="zhangsan">zhangsan</div>
<div name="lisi">lisi</div>
<!--分割线-->
// 具有name属性的所有标签
$('[name]')
(2) [div, div]
$('[name]')[0]
<div name="zhangsan">zhangsan</div>
// name 属性为 "lisi" 的标签
$('[name="lisi"]')
[div]
$('[name="lisi"]')[0]
<div name="lisi">lisi</div>
2.找到input标签中，type等于text属性的标签
// html内容
<input type="text">
<input type="text">
<input type="file">
<input type="password">
<!--分割线-->
$("input[type='text']")
(2) [input, input]
$("input[type='text']")[0]
<input type="text">
$("input[type='text']")[1]
<input type="text">
或
$(":text")
(2) [input, input]
3.找到所有不能编辑的input标签
<!--HTML-->
<input type="text"><br>
<input type="text" disabled value="这个是默认值"><br>
<!--分割线-->
$(":disabled")
[input]
$(":disabled")[0]
<input type="text" disabled value="这个是默认值">
4.jQuery中checkbox获取标签值prop
<!--HTML-->
<input type="checkbox" value="true">
<!--分割线-->
// 获取值
$(":checkbox").prop("checked")
true
// 修改值
$(":checkbox").prop("checked",false)
jQuery的筛选器
就是jQuery对象点(.)方法；前面是 选择器.方法，即时筛选器；
基本常用的筛选器
$(this).next() // 当前选择器的 下一个标签
$(this).nextAll() // 找到当前标签 下面所有的标签（同一标签登记内）
$(this).nextUntil("#i1") // 找到当前标签 下面所有的标签,到id等于i1的为止
$(this).prev() // 当前选择器的 上一个标签
$(this).prevAll() // 找到当前标签 上面所有的标签（同一标签登记内）
$(this).prevUntil("#i1") // 找到当前标签 上面所有的标签,到id等于i1的为止
$(this).parent() // 当前选择器的 父级标签
$(this).children() // 当前选择器的 所有儿子标签
$(this).text() // 当前标签的内容
$(this).html() // 当前标签的html内容
$(this).siblings() // 获取当前标签的所有 兄弟标签（不包括自己）
$(this).find(".c1") // 在当前标签的 下级标签的子子孙孙中find查找 class 为c1的标签
$("#i1").addClass("hide") // 给id为i1的标签，添加 hide 属性
$("#i1").removeClass("hide") // 给id为i1的标签，移除 hide 属性
$("#i1").hasClass("hide") // 检查id为i1的标签是否具有 hide 属性，有返回true 否则返回 false
$("#i1").toggleClass("hide") // 检查id为i1的标签是否具有 hide 属性，有则去除，没有则添加上
jQuery文本操作
div或a或span标签内容操作
HTML内容
<div id="i1">divdiv
<a href="">aaaaaa</a>
</div>
文本操作
// 获取文本内容text不带标签；
$("#i1").text()
"divdiv
aaaaaa
"
// 获取文本内容html带标签；
$("#i1").html()
"divdiv
<a href="">aaaaaa</a>
"
// 设置文本内容html可以设置标签；
$("#i1").html("<p>pppp</p>")
[div#i1]
// 设置文本内容text不可以设置标签；
$("#i1").text("<p>pppp</p>")
[div#i1]
input或select或textarea标签内容操作
HTML内容
<input id="i2" type="text" value="111">
input标签的文本操作val
//获取input标签内的内容；
$("#i2").val()
"111"
//设置input标签内的内容；
$("#i2").val("222")
[input#i2]
$("#i2").val()
"222"
文本操作的CSS类样式操作
方法：
$("#i1").addClass("hide") // 给id为i1的标签，添加 hide 属性
$("#i1").removeClass("hide") // 给id为i1的标签，移除 hide 属性
$("#i1").toggleClass("hide") // 检查id为i1的标签是否具有 hide 属性，有则去除，没有则添加上
// 对单个css 属性值进行操作
$("#i1").css("color","red") // 给id为i1的标签，颜色设置为 red;
HTML内容
<style>
.hide{
display: none;
}
</style>
<input id="i1" type="button" value="开关">
<div class="c1 hide">存在</div>
<script src="jquery-3.2.1.js"></script>
<script>
$("#i1").click(function () {
// 方法一：使用if 判断hasClass方法检查有没有 hide属性
// if($(".c1").hasClass("hide")){
// $(".c1").removeClass("hide");
// }else {
// $(".c1").addClass("hide");
// }
// 方法二：检查class 为c1的标签是否具有 hide 属性，有则去除，没有则添加上
$(".c1").toggleClass("hide");
})
</script>
位置处理offset指定标签在HTML中的坐标
汉朝天数当桓灵，炎炎红日将西倾。奸臣董卓废少帝，刘协懦弱魂梦惊。曹操传檄告天下，诸侯奋怒皆兴兵。议立袁绍作盟主，誓扶王室定太平。温侯吕布世无比，雄才四海夸英伟。护躯银铠砌龙鳞，束发金冠簪雉尾。参差宝带兽平吞，错落锦袍飞凤起。龙驹跳踏起天风，画戟荧煌射秋水。出关搦战谁敢当？诸侯胆裂心惶惶。踊出燕人张冀德，手持蛇矛丈八枪。虎须倒竖翻金线，环眼圆睁起电光。酣战未能分胜败，阵前恼起关云长。青龙宝刀灿霜雪，鹦鹉战袍飞蛱蝶。马蹄到处鬼神嚎，目前一怒应流血。枭雄玄德掣双锋，抖擞天威施勇烈。三人围绕战多时，遮拦架隔无休歇。喊声震动天地翻，杀气迷漫牛斗寒。吕布力穷寻走路，遥望家山拍马还。倒拖画杆方天戟，乱散销金五彩幡。顿断绒绦走赤兔，翻身飞上虎牢关。
代码实现：
<body>
<div id="i1" style="height: 100px;overflow: auto; 100px">
<p>汉朝天数当桓灵，炎炎红日将西倾。奸臣董卓废少帝，刘协懦弱魂梦惊。曹操传檄告天下，诸侯奋怒皆兴兵。议立袁绍作盟主，誓扶王室定太平。温侯吕布世无比，雄才四海夸英伟。护躯银铠砌龙鳞，束发金冠簪雉尾。参差宝带兽平吞，错落锦袍飞凤起。龙驹跳踏起天风，画戟荧煌射秋水。出关搦战谁敢当？诸侯胆裂心惶惶。踊出燕人张冀德，手持蛇矛丈八枪。虎须倒竖翻金线，环眼圆睁起电光。酣战未能分胜败，阵前恼起关云长。青龙宝刀灿霜雪，鹦鹉战袍飞蛱蝶。马蹄到处鬼神嚎，目前一怒应流血。枭雄玄德掣双锋，抖擞天威施勇烈。三人围绕战多时，遮拦架隔无休歇。喊声震动天地翻，杀气迷漫牛斗寒。吕布力穷寻走路，遥望家山拍马还。倒拖画杆方天戟，乱散销金五彩幡。顿断绒绦走赤兔，翻身飞上虎牢关。</p>
</div>
<script src="jquery-3.2.1.js"></script>
</body>
获取当前div在overflow滚轮所在的位置：
$("div").scrollTop()
792
// 获取#i1标签的位置
$("#i1").offset()
{top: 8, left: 8}
// 获取#i1标签的左位置
$("#i1").offset().left
8
// 获取#i1标签的头位置
$("#i1").offset().top
8
获取当前页面滚轮所在的位置，window浏览窗口：
$(window).scrollTop()
900
// 设置滚轮所在位置
$(window).scrollTop(0)
0
文档操作
方法：
// temp 为拼接的 li标签
var temp = "<li>" + v + "</li>";
$("#u1").append(temp); append 将值追加到 指定标签儿子的最下方
$("#u1").prepend(temp); prepend 将值追加到 指定标签儿子的最上方
$("#u1").after(temp); after 将值添加到 指定标签的兄弟标签下方
$("#u1").before(temp); before 将值添加到 指定标签的兄弟标签上方
$("#u1 li").eq(index).empty(); empty 只清空内容
$("#u1 li").eq(index).remove(); remove 清空整个指定的标签
$("#u1 li").eq(index).clone(); clone 根据指定的索引将 标签 clone一份
HTML内容
<input id="t1" type="text">
<input id="a1" type="button" value="添加">
<ul id="u1">
<li>1</li>
<li>2</li>
</ul>
jQuery的内容
<script src="jquery-3.2.1.js"></script>
<script>
$("#a1").click(function () {
var v=$("#t1").val();
var temp = "<li>" + v + "</li>";
// append 将值追加到 指定标签儿子的最下方
// $("#u1").append(temp);
// prepend 将值追加到 指定标签儿子的最上方
// $("#u1").prepend(temp);
// after 将值添加到 指定标签的兄弟标签下方
// $("#u1").after(temp)
// before 将值添加到 指定标签的兄弟标签上方
$("#u1").before(temp)
})
$("#d1").click(function () {
var index=$("#t1").val();
// remove 清空整个指定的标签
// $("#u1 li").eq(index).remove();
// empty 只清空内容
$("#u1 li").eq(index).empty();
});
$("#f1").click(function () {
var index=$("#t1").val();
// 根据索引克隆指定的标签
var v = $("#u1 li").eq(index).clone();
$("#u1").append(v);
})
</script>
属性操作,自定义属性
语法：
$("#i1").attr("id") // 获取 id 为 i1的标签，获取其id值
$("#i1").attr("name","value") // 获取 id 为 i1的标签，设置属性为name 值为 value
$("#i1").removeAttr("value") // 获取 id 为 i1的标签，删除其 Value值
$("#i1").prop // 专门用于chekbox,radio做操作
给标签加上指定属性：
$("#i1")
[input#i1]
$("#i1")[0]
<input id="i1" type="button" value="开关">
// 获取id属性值
$("#i1").attr("id")
"i1"
$("#i1").attr("type")
"button"
// 设置 name 属性 值为 baolin
$("#i1").attr("name","baolin")
[input#i1]
$("#i1")[0]
<input id="i1" type="button" value="开关" name="baolin">
// 修改当前属性值
$("#i1").attr("value","offon")
[input#i1]
// 删除当前属性值
$("#i1").removeAttr("value")
[input#i1]
// prop 用于chekbox,radio 的选择和取消操作 值为 true 和 false
$("#ii1")[0]
<input type="checkbox" id="ii1" checked="checked">
$("#ii1").prop("checked",true)
[input#ii1]
$("#ii1").prop("checked",false)
[input#ii1]
jQuery的绑定事件
点击事件click
1.选中某个标签，点击事件
$("#i1").click(function() {
// this 代指当前标签
this.
})
委托事件delegate
delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）
对新添加的内容，添加事件1
<body>
<input id="t1" type="text">
<input id="a1" type="button" value="添加">
<ul id="u1">
<li>1</li>
<li>2</li>
</ul>
<script src="jquery-3.2.1.js"></script>
<script>
$("#a1").click(function () {
var v = $("#t1").val();
var temp = "<li>" + v + "</li>";
$("#u1").append(temp);
});
$("ul").delegate("li","click",function () {
var v = $(this).text()
alert(v);
})
</script>
</body>
对新添加的内容，添加事件2
<body>
<div style="background-color:yellow">
<p>这是一个段落。</p>
<p>请点击任意一个 p 元素，它会消失。包括本段落。</p>
<button>在本按钮后面插入一个新的 p 元素</button>
</div>
<p><b>注释：</b>通过使用 delegate() 方法，而不是 live()，只有 div 元素中的 p 元素会受到影响。</p>
<script src="jquery-3.2.1.js"></script>
<script>
$(document).ready(function(){
$("div").delegate("p","click",function(){
$(this).slideToggle();
});
$("button").click(function(){
$("<p>这是一个新段落。</p>").insertAfter("button");
});
});
</script>
</body>
默认事件的终止操作
<body>
<a href="http://www.baidu.com" onclick="return ClickOn()">过来啊1</a>
<a id="i1" href="http://www.baidu.com" >过来啊2</a>
<script src="jquery-3.2.1.js"></script>
<script>
// DOM方式的终止默认 事件，需要在源 onclick 里面加“return” onclick="return ClickOn()"
function ClickOn() {
alert(123);
// 结尾处return false
return false;
}
// jQuery方式终止默认 事件，直接 return false 即可
$("#i1").click(function () {
alert(456);
return false;
});
</script>
</body>
表单验证
语法：检查表单是否为空，如果为空提示用户输入信息
<body>
<form action="https://www.sogou.com/web?query" method="post">
<input type="text">
<input type="submit" value="提交">
</form>
<script src="jquery-3.2.1.js"></script>
<script>
// 获取所有的submit标签，给其绑定一个方法
$(":submit").click(function () {
// 获取submit标签的上一个标签里面值
var v=$(this).prev().val();
// 判断值是否大于0
if(v.length>0){
return true;
}else {
// 如果不大于0 给出提示信息，并返回false不允许提交
alert("请输入内容");
return false
}
})
</script>
</body>
当框架加载完成后自动执行操作
语法：
$(function(){
// 将代码写在这里，当框架加载完成后自动执行代码内的操作
})
例：将代码包含在一个匿名函数中
$(function(){
$(":submit").click(function () {
// 默认 flag 为 true
var flag = true;
$(".error").remove();
$("#f1").find("input[type='text'],input[type='password']").each(function () {
var v = $(this).val();
if (v.length<=0){
// 单表单中值为0 时，将flag 设置为 false
flag = false;
// 创建span标签
var tag = document.createElement("span");
// 创建一个 class 属性
tag.className = "error";
tag.innerHTML="* 必填项";
// 将创建的 span标签 添加到 input标签后面
$(this).after(tag);
// 这里return false;遇到错误时将后方的循环全部终止，退出当前循环
// return false;
}
});
// return flag 如果 flag 为ture 提交表单，如果为 false 时，终止提交
return flag
})
})
jQuery的三元运算
语法：(如果条件为真，真值赋给v;如果条件为假，假值赋给v)
var v = 条件？真值：假值
判断如果标签为选中时，将选中取消；
<!--HTML-->
<input type="checkbox" value="true">
<!--分割线-->
$(":checkbox").each(function() {
var v = this.checked?false:true;
this.checked=v
})
jQuery的循环
each循环
each() 方法规定为每个匹配元素规定运行的函数。
提示：返回 false 可用于及早停止循环。
语法：
$(selector).each(function(index,element))
参数 描述
function(index,element)
必需。为每个匹配元素规定运行的函数。
index - 选择器的 index 位置
element - 当前的元素（也可使用 "this" 选择器）
当标签为选中时，取消；取消时选中
<body>
<input type="checkbox" checked="checked" />
<script>
$(":checkbox").each(function() {
// this,代指当前循环的那一个元素
// this.checked 表示当前标签是否选中（DOM方法）
if (this.checked) {
this.checked = false;
} else {
this.checked = true;
}
})
</script>
</body>