一、JQuery选择器
<!DOCTYPE html>
<html>
<head>
<!-- 写在最前
JQuery 2.x开始不再支持IE 6、7、8
-->
<!-- 使用JQuery的步骤
1. 引入JQuery的js文件
2. 使用选择器定位要操作的节点
3. 调用JQuery的方法进行操作
-->
<!-- JQuery详解
1. 调用JQuery对象
1）JQuery对象才能调用JQuery方法
2）dom对象才能调用dom方法
3）JQuery对象本质上是dom数组
2. JQuery对象与DOM对象的关系
JQuery对象本质上是一个DOM对象数组，他在该数组上扩展了一些操作数组中元素的方法
可以直接操作这个数组
1）obj.length：获取数组长度
2）obj.get(index)：获取数组中的某一个DOM对象
3）ibj[index]：等价于obj.get(index)
4) DOM对象转化为JQuery对象
jqueryObj = $(domObj);
3. JQuery选择器
1）基本选择器
a）元素选择器：根据标签名定位元素
$("标签名");
b）类选择器：根据class属性定位元素
$(".class的属性名");
c）id选择器：根据id定位元素
$("#id");
d）选择器组：定位一组选择器所对应的所有元素
$("#id, .importent");
2）层次选择器
a）在select1元素下，选中所有满足select2的子孙元素
$("select1 select2");
b）在select1元素下，选中所有满足select2的子孙元素
$("select1>select2");
c）在select1元素下，满足select2的下一个弟弟
$("select1+select2");
d）在select1元素下，满足select2的所有弟弟
$("select1~select2");
3）过滤选择器
a）基本过滤选择器
:first 第一个元素
:last 最后一个元素
:not(selector) 把selector排除在外
:even 选偶数行
:odd 选奇数行
:ep(index) 下标等于index的元素
:gt(index) 下标大于index的元素
:lt(index) 下标小于index的元素
b)内容过滤选择器
:contains(text) 匹配包含给定文本内容的元素
:empty 匹配不包含子元素或文本的空元素
c）可见性过滤选择器
:hidden 匹配所有不可见元素，或type为hidden的元素
:visible 匹配所有课件元素
d）属性过滤选择器
[attribute] 匹配具有attribute属性的元素
[attribute=value] 匹配属性等于value的元素
[attribute!=value] 匹配属性不等于value的元素
e）状态过滤选择器
:enabled 匹配可用的元素
:disabled 匹配不可用的元素
:checked 匹配选中的checkbox
:selected 匹配选中的option
4）表单选择器（可以匹配所有type为某一个值的元素）
:text 匹配文本框
:password 匹配密码框
:radio 匹配单选框
:checkbox 匹配多选框
:submit 匹配提交按钮
:reset 匹配重置按钮
:button 匹配普通按钮
:file 匹配文件框
:hidden 匹配隐藏框
-->
<meta charset="UTF-8">
<title>JQuery初识</title>
</head>
<body>
<input type="button" value="+"
onclick="bigger();"/>
<p>1.引入jquery.js</p>
<p>2.使用选择器定位要操作的节点</p>
<p>3.调用JQuery的方法进行操作</p>
<!-- JQuery对象调用演示 -->
<input type="button" value="打印"
onclick="myPrint();"/>
<p>1）JQuery对象才能调用JQuery方法</p>
<p>2）dom对象才能调用dom方法</p>
<p>3）JQuery对象本质上是dom数组</p>
<!-- JQuery和dom对象之间的相互转换 -->
<div>
<img src="../images/01.jpg"
onclick="chg(this);"
/>
</div>
<!-- JQuery选择器演示 -->
<ul>
<li>北京市</li>
<li id="sz">深圳市</li>
<li>河北省</li>
<li>广东省</li>
<li>广西省</li>
<li style="display:none;">地狱</li>
</ul>
<p>
<!-- 加上disabled之后就不可用了 -->
<!--
readonly：只读，但数据有效依然可以提交给服务器
disabled：不可用，数据无效不能提交给服务器
-->
<input type="text" disabled/>
<input type="password" />
</p>
<p>
<input type="radio" name="sex" checked/>男
<input type="radio" name="sex" />女
</p>
<script src="../jquery-1.12.4.js"></script>
<script>
function bigger(){
// 获取段落的原始字号
var size = $("p").css("font-size");
// 去掉单位，便于增加字号
size = size.replace("px", "");
// 将字号+1再设置给段落
$("p").css("font-size", ++size+"px");
}
/* 一次在控制台输出每一个段落的内容 */
function myPrint(){
// $ps是JQuery对象，使用选择器获取的是JQuery对象，为了加以区分，
// JQury对象前加$符号
var $ps = $("p");
for(var i=0;i<$ps.length;i++){
// 从JQuery对象中获取的值的dom对象
var p = $ps[i];
console.log(p.innerHTML);
}
}
/* JQuery和dom对象之间的相互转换 */
function chg(img){
// dom对象转换为JQuery对象
var $img = $(img);
var width = $img.width();
var height = $img.width();
console.log(width);
console.log(height);
// JQuery对象的方法一般情况下返回的还是这个JQuery对象，可以实现链式编程
$img.width(width/2).height(height/2);
}
/* JQuery选择器演示 */
window.onload = function(){
// 1. 基本选择器
// 同css选择器
// 2. 层次选择器
// 选择子孙/儿子（同css派生选择器）
// 选择弟弟(如果他的弟弟的类型和他一样，可以省略)
console.log($("#sz+"));
console.log($("#sz~li"));
// 3. 过滤选择器（*重点）
// 3.1 基本过滤选择器
console.log("基本过滤选择器：");
console.log($("li:first"));
console.log($("li:even"));
console.log($("li:eq(1)"));
console.log($("li:not(#sz)"));
// 3.2 内容过滤选择器
console.log("内容过滤选择器：");
console.log($("li:contains('省')"));
// 3.3 可见性过滤选择器
console.log("可见性过滤选择器：");
console.log($("li:hidden"));
// 3.4 属性过滤选择器
console.log("属性过滤选择器：");
console.log($("li[id]"));
// 3.5 状态过滤选择器
console.log("状态过滤选择器：");
console.log($("input:enabled"));
console.log($("input:disabled"));
console.log($("input:checked"));
// 4. 表单选择器
console.log("表单选择器：");
console.log($("input:radio"));
// 等价于
console.log($(":radio"));
}
</script>
</body>
</html>
二、JQuery操作DOM
<!DOCTYPE html>
<html>
<head>
<!-- JQuery操作DOM -->
<!-- 要点总结：JQuery对象和DOM对象的来源
1. 通过$()获取到的对象都是JQuery对象
2. 通过$()转换而来的是JQuery对象
3. JQuery赋值的方法一般返回的还是JQuery对象
4. JQuery取值的方法若返回节点则是JQuery对象
5. JQuery取值的放回若返回文字则是String（内置对象）
注：通过控制台打印可以观察哪一个是JQuery对象哪一个是DOM对象
-->
<!--
1. 读写节点
1.1 读写内容（双标签中间的文字）
html()
text()
1.2 读写值（表单控件有值）
val()
1.3 读写属性
读：attr("属性名")
写：attr("属性名", "属性值")
2. 创建节点
$("节点内容")
3. 插入DOM节点
parent.append(obj) 将obj作为最后一个子节点添加进来
parent.prepend(obj) 将obj作为第一个子节点添加进来
parent.after(obj) 将obj作为下一个兄弟节点添加进来
parent.before(obj) 将obj作为上一个兄弟节点添加进来
4. 删除节点
obj.remove() 删除节点
obj.remove(selector) 只删除满足selector的节点
obj.empty() 清空节点（相当于obj.html("");）
5. 遍历节点(查找某节点的亲戚)
有时候我们调用别人的方法得到一个节点，对其进行一些操作，然后又要对此节点的亲戚进行操作，
此时无法写选择器，只能调用这样的方法
children()/children(selector) 查找子节点/满足条件的子节点
next()/next(selector) 下一个兄弟节点/满足条件的下一个兄弟节点
prev()/prev(selector) 上一个兄弟节点/满足条件的上一个兄弟节点
siblings()/siblings(seletor) 所有兄弟/满足条件的所有兄弟
find(selector) 查找满足选择器的所有后代
parent() 父节点
6. 样式操作
addClass("") 追加样式
removeClass("") 移除指定样式
removeClass() 移除所有样式
toggleClass("") 切换样式
hasClass("") 判断是否有某个样式
css("") 读取css的值
css("", "") 设置多个样式
-->
<meta charset="UTF-8">
<title>JQuery操作DOM</title>
<style>
.big{
font-size:30px;
}
.important{
color:red;
}
</style>
</head>
<body>
<P>JQuery对<b>DOM操作</b>提供了支持</P>
<p>
<input type="button" value="AAA" />
</p>
<p>
<img src="../images/01.jpg" />
</p>
<ul>
<li>北京市</li>
<li id="sz">深圳市</li>
<li>河北省</li>
<li>广东省</li>
<li>广西省</li>
<li style="display:none;">地狱</li>
</ul>
<p>
<input type="button" value="却换字号"
onclick="switchFontSize();"/>
</p>
<script src="../jquery-1.12.4.js"></script>
<script>
/*
下面这句话使用JQuery的方式在页面加载之后调用这个函数，其作用等价于
window.onload=function(){
...
};
*/
$(function(){
//1. 读写节点
// 1.1 读写内容（双标签中间的文字）
// html() ==> innerHTML
// text() ==> innerText
// 读内容
console.log($("p:eq(0)").html());
console.log($("p:eq(0)").text());
// 写内容
console.log($("p:eq(0)").html("JQuery对<u>DOM操作</u>提供了支持"));
// 1.2 读写值（表单控件有值）
// val() ==> value
console.log($("input[type='button']:first").val());
$(":button:first").val("BBB");
// 1.3 读写属性
// attr() == get/setAttribute()
console.log($("img:first").attr("src"));
$("img:first").attr("src", "../images/02.jpg");
//2. 创建节点
var $li1 = $("<li>杭州</li>");
var $li2 = $("<li>苏州</li>");
//3. 插入节点
$("ul").append($li1);
$("#sz").after($li2);
//4. 删除节点
// 删除最后一个城市
$("li:last").remove();
//5. 遍历节点
var $sz = $("#sz");
// 要获取深圳的亲戚做进一步处理
console.log($sz.parent());
console.log($sz.prev());
console.log($sz.siblings());
// 假设我调用的别人的方法得到了ul
var $ul = $("ul");
// 要获取列表的孩子做进一步处理
console.log($ul.find("li:gt(2)"));
//6. 样式操作
$("p:first").addClass("big").addClass("important");
$("p:first").removeClass("big").removeClass("important");
// 删除所有样式
$("p:first").removeClass();
// 判断元素中是否包含某样式
console.log($("p:first").hasClass("big"));
// 切换样式样式
// 见switchFontSize()函数
});
// 切换样式函数
function switchFontSize(){
// 通过按钮实现了点一下字体变大，再点一下，字体变小
$("p:first").toggleClass("big");
}
</script>
</body>
</html>
三、JQuery事件绑定
<!DOCTYPE html>
<html>
<head>
<!-- JQuery事件绑定语法
1. 基本语法
$obj.bind(事件类型, 事件处理函数)
2. 案例
$obj.bind("click", fn); // click代表的是onclick事件，对于JQuery的事件，都是JS的事件绑定少写了on
上述写法可以简化成如下形式：
$obj.click(fn);
fn是事件绑定的函数
3. JQuery获取事件对象
在JQuery中，为事件对象任意传递一个参数就可以获取事件对象
如：
$obj.click(function(e){...});
//JQuery就是想解决不同浏览器兼容的麻烦（如获取事件源等），将区别统一，提供统一的方法
JQuery统一取消冒泡：
e.stopPropagation();
JQuery获取事件源：
e.target
4. JQuery的合成事件种类
hover(mouseenter, mouseleave) 模拟光标悬停事件
toggle() 在多个事件响应中切换
5. JQuery模拟操作
基本语法：
$obj.trigger(事件类型)
案例：
obj,triger("focus");
简写形式：$obj.focus();
-->
<meta charset="UTF-8">
<title>JQuery实现事件绑定</title>
</head>
<body>
<p>
<input type="button" value="按钮1" />
<input type="button" value="按钮2" />
</p>
<div>
<img src="../images/01.jpg" />
</div>
<script src="../jquery-1.12.4.js"></script>
<script>
/*
$(function(){});类似与window.onload=function(){};
但是
window.onload=function(){};若写多次，那么只有最后一个会生效
$(function(){});若写多次，都有效，所以可以写多次
$(function(){});写多次的的妙用：
一个网页上可能会引用多个外部的js文件（a.js、b.js），由于软件的原因，有时候需要
写多个window.onload，这样就会带来矛盾，所以用$(function(){});的方式可以避免这种
冲突。
*/
$(function(){
// 给按钮1后绑定单击事件
$(":button:eq(0)").click(function(e){
console.log("我用JQuery绑定了事件");
// 此对象别JQuery做了封装，因为事件对象是浏览器创建的，不同浏览器创建的事件对象有区别，开发时要兼顾这个区别很麻烦
//JQuery就是想解决不同浏览器兼容的麻烦（如获取事件源等），将区别统一，提供统一的方法
/*
JQuery统一取消冒泡：
e.stopPropagation();
JQuery获取事件源：
e.target
*/
console.log(e);
});
});
$(function(){
// 后绑定hover事件，该事件是JQuery特有的事件，必须使用JQuery后绑定才行
$("img").hover(
function(){
console.log("这家伙来了，快跑");
//$(this).width(250).height(250);
$(this).css("width","250px").css("height","250px");
},//鼠标选同时调用
function(){
console.log("这家伙走了，快回来 ");
$(this).width(500).height(500);
}//鼠标离开时调用
);
});
$(function(){
$(":button:eq(1)").click(function(){
// 让图片在显示与隐藏之前切换
$("img").toggle();
});
});
</script>
</body>
</html>
四、JQuery动画
<!DOCTYPE html>
<html>
<head>
<!-- JQuery动画
实现动画的原理：
通过定时器连续改变元素的样式，包括大小和透明度，所以执行动画时，
仍然会执行下面的语句，如果要实现在动画执行完之后执行一句话，这样的
就需要定义回调函数
一、显示和隐藏效果
1. 显示、隐藏的动画效果
show()/hide()
作用：
同时改变元素的宽度和高度来实现显示或隐藏
用法：
$obj.show(执行时间, 回调函数);
执行时间：
slow、nomal、fast或毫秒数
回调函数：
动画执行完毕之后要执行的函数
2. 上下滑动式的动画实现
slidDown()/slideUp()
作用：
通过改变元素高度来实现显示或隐藏的效果(动作和show()/hide()相同，但是没有颜色没有变浅)
3. 淡入淡出式动画效果
fadeIn()/fadeOut()
作用：通过改变不透明读opacity来实现显示或隐藏
二、自定义动画效果
自定义动画基于定位，通过定时器连续改变元素的偏移量就能实现动画效果
animate(偏移位置, 执行时间, 回调函数);
偏移位置：描述动画执行之后元素的样式
执行时间：毫秒数
回调函数：动画执行结束后要执行的函数
-->
<meta charset="UTF-8">
<title>JQuery动画</title>
<style>
/* 设置相对/绝对/固定定位，才能做出动画效果，动画就是连续改变元素的偏移量 */
img{
position:relative;
}
#adv{
width:200px;
height:100px;
border:1px solid red;
position:fixed;
top:50px;
right:-180px;
}
</style>
</head>
<body>
<p>
<input type="button" value="显示"
onclick="f1();"/>
<input type="button" value="隐藏"
onclick="f2();"/>
<input type="button" value="删除"
onclick="f3();"/>
<input type="button" value="动吧动吧"
onclick="f4();"/>
</p>
<p>
<img src="../images/01.jpg" />
</p>
<p id="msg" style="display:none;">操作成功</p>
<div id="adv">
</div>
<script src="../jquery-1.12.4.js"></script>
<script>
function f1(){
//$("img").show(3000);
//$("img").slideDown(3000);
// 动画执行完毕之后调用函数
$("img").fadeIn(3000,function(){console.log("完成");});
}
function f2(){
// $("img").hide(3000);
// $("img").slideUp(3000);
$("img").fadeOut(3000);
}
function f3(){
$("#msg").fadeIn(500).fadeOut(2500);
}
function f4(){
$("img").animate({"left":"300px"}, 3000)
.animate({"top":"300px"}, 3000)
.animate({"left":"0"}, 3000)
.animate({"top":"0"}, 3000);
}
$(function(){
$("#adv").hover(
function(){
$(this).animate({"right":"0"}, 500);
},
function(){
$(this).animate({"right":"-180px"}, 500);
}
);
});
</script>
</body>
</html>
