一.jQuery是JavaScript框架——API(jQuery2不支持IE)
二.jQuery选择器:
1.基本选择器
(1)元素选择器:依据标签名定位元素
$("标签名");
(2)类选择器:根据class属性定位元素
$(".class属性名");
(3)id选择器:根据id属性定位元素
$("#id");
(4)选择器组:定位一组选择器所对应的所有元素
$("#id,.importent");
2.层次选择器
(1)在select1元素下,选子孙select2
$("select1 select2")
(2)在select1元素下,选子元素select2
$("select1>select2")
(3)选中select1元素的,选select2的下一个弟弟
$("select1+select2")
(4)选中select1元素的,选select2的所有弟弟
$("select1~select2")
3.过滤选择器
(1)基本过滤选择器
:first——第一个元素,:last——最后一个元素,:not(selector)——除了selector之外
:even——挑选偶数行,:odd——挑选奇数行,:eq(index)——下标等于index的元素,
:gt(index)——下标大于index的元素,:lt(index)——下标小于index的元素,
(2)内容过滤选择器
:contains(text)匹配包含给定文本的元素
:empty匹配所有不包含子元素或文本的空元素
(3)可见性过滤选择器
:hidden——匹配所有不可见元素
:visible——匹配所有的可见元素
(4)属性过滤选择器
[attribute]——匹配具有attribute属性的元素
[attribute = value]——匹配属性等于value的元素
[attribute != value]——匹配属性不等于value的元素
(5)状态过滤选择器
:enabled——匹配可用的元素
:disabled——匹配不可用的元素
:checked——匹配选中的checkbox
:selected——匹配选中的option
4.表单选择器
:text——匹配文本框,:password——匹配密码框
:radio——匹配单选框,:checkbox——匹配多选框
:submit——匹配提交按钮,:reset——匹配重置按钮
:button——匹配普通按钮,:file——匹配文件框
:hidden——匹配隐藏框
三.jQuery操作DOM
1.读写节点
(1)读写节点内容:html(),text()
(2)读写节点的value属性值:val()
(3)读写节点的属性值:attr()
2.增删节点
var obj = $("节点内容");
parent.append(obj);——最后一个追加
parent.prepend(obj);——第一个追加
brother.after(obj);——兄弟之后追加
brother.before(obj);——兄弟之前追加
obj.remove()——删除节点,obj.remove(selector),obj.empty()——清空节点
3.样式操作
addClass("")——追加样式
removeClass("")——移除指定样式
removeClass()——移除所有样式
toggleClass("")——切换样式
hasClass("")——判断是否有某个样式
css("")——读取css的值
css("","")——设置多个样式
4.遍历节点
children()/children(selector)——直接子节点
next()/next(selector)——下一个兄弟节点
prev()/prev(selector)——上一个兄弟节点
siblings()/siblings(selector)——所有兄弟
find(selector)——查找满足选择器的所有后代
parent()——父节点
四.jQuery事件处理
bind('click',fn)
click(function(e){...})
e.target,e.pageX,e.pageY,e.stopPropagation()——可以取消事件冒泡
hover(mouseenter,mouseleave)——模拟光标悬停事件
toggle()——在多个事件响应中切换
trigger(事件类型),focus();
五.jQuery动画
show()/hide()显示、隐藏的动画效果slow,normal,fast或毫秒数
可以传第二个参数(回调函数)——动画完成之后要执行的函数
slideDown()/slideUp()上下滑动式的动画实现
fadeIn()/fadeOut()淡入淡出式动画效果
animate(偏移位置,执行时间,回调函数)
jQuery对象demo2:
选择器demo3:
读写节点demo4:
增删节点demo5:
样式操作demo6:
遍历节点demo7:
jQuery事件demo8:
合成事件demo9:
模拟事件demo10:
动画demo11:
二.jQuery选择器:
1.基本选择器
(1)元素选择器:依据标签名定位元素
$("标签名");
(2)类选择器:根据class属性定位元素
$(".class属性名");
(3)id选择器:根据id属性定位元素
$("#id");
(4)选择器组:定位一组选择器所对应的所有元素
$("#id,.importent");
2.层次选择器
(1)在select1元素下,选子孙select2
$("select1 select2")
(2)在select1元素下,选子元素select2
$("select1>select2")
(3)选中select1元素的,选select2的下一个弟弟
$("select1+select2")
(4)选中select1元素的,选select2的所有弟弟
$("select1~select2")
3.过滤选择器
(1)基本过滤选择器
:first——第一个元素,:last——最后一个元素,:not(selector)——除了selector之外
:even——挑选偶数行,:odd——挑选奇数行,:eq(index)——下标等于index的元素,
:gt(index)——下标大于index的元素,:lt(index)——下标小于index的元素,
(2)内容过滤选择器
:contains(text)匹配包含给定文本的元素
:empty匹配所有不包含子元素或文本的空元素
(3)可见性过滤选择器
:hidden——匹配所有不可见元素
:visible——匹配所有的可见元素
(4)属性过滤选择器
[attribute]——匹配具有attribute属性的元素
[attribute = value]——匹配属性等于value的元素
[attribute != value]——匹配属性不等于value的元素
(5)状态过滤选择器
:enabled——匹配可用的元素
:disabled——匹配不可用的元素
:checked——匹配选中的checkbox
:selected——匹配选中的option
4.表单选择器
:text——匹配文本框,:password——匹配密码框
:radio——匹配单选框,:checkbox——匹配多选框
:submit——匹配提交按钮,:reset——匹配重置按钮
:button——匹配普通按钮,:file——匹配文件框
:hidden——匹配隐藏框
三.jQuery操作DOM
1.读写节点
(1)读写节点内容:html(),text()
(2)读写节点的value属性值:val()
(3)读写节点的属性值:attr()
2.增删节点
var obj = $("节点内容");
parent.append(obj);——最后一个追加
parent.prepend(obj);——第一个追加
brother.after(obj);——兄弟之后追加
brother.before(obj);——兄弟之前追加
obj.remove()——删除节点,obj.remove(selector),obj.empty()——清空节点
3.样式操作
addClass("")——追加样式
removeClass("")——移除指定样式
removeClass()——移除所有样式
toggleClass("")——切换样式
hasClass("")——判断是否有某个样式
css("")——读取css的值
css("","")——设置多个样式
4.遍历节点
children()/children(selector)——直接子节点
next()/next(selector)——下一个兄弟节点
prev()/prev(selector)——上一个兄弟节点
siblings()/siblings(selector)——所有兄弟
find(selector)——查找满足选择器的所有后代
parent()——父节点
四.jQuery事件处理
bind('click',fn)
click(function(e){...})
e.target,e.pageX,e.pageY,e.stopPropagation()——可以取消事件冒泡
hover(mouseenter,mouseleave)——模拟光标悬停事件
toggle()——在多个事件响应中切换
trigger(事件类型),focus();
五.jQuery动画
show()/hide()显示、隐藏的动画效果slow,normal,fast或毫秒数
可以传第二个参数(回调函数)——动画完成之后要执行的函数
slideDown()/slideUp()上下滑动式的动画实现
fadeIn()/fadeOut()淡入淡出式动画效果
animate(偏移位置,执行时间,回调函数)
字体放大案例demo1:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字体放大案例</title>
<script src="../js/jquery.js"></script>
<script>
function bigger(){
//获取段落默认字号(16px)
var size = $("p").css("font-size");
//去掉单位,以便于运算
size = size.replace("px","");
//加1,然后设置给所有段落
$("p").css("font-size",++size+"px");
}
</script>
</head>
<body>
<input type="button" value="+" οnclick="bigger();">
<p>jQuery是一个优秀的js框架</p>
<p>它可以极大程度的简化js编程</p>
<p>它为我们提供了简洁而统一的API</p>
</body>
</html>
jQuery对象demo2:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery对象</title>
<script src="../js/jquery.js"></script>
<script>
function prt(){
var ps = $("p");
console.log(ps);
for(var i=0;i<ps.length;i++){
console.log(ps[i].innerHTML);
}
}
function chg(img){
console.log(img);
var w = $(img).width();
if(w==250){
$(img).width(218).height(218);
}else{
$(img).width(250).height(250);
}
}
</script>
</head>
<body>
<input type="button" value="打印" οnclick="prt();">
<p>jQuery对象本质上就是DOM数组</p>
<p>jQuery对象才能调用jQuery方法</p>
<p>DOM对象才能调用DOM方法</p>
<div>
<img src="../images/01.jpg" οnclick="chg(this);">
<img src="../images/02.jpg" οnclick="chg(this);">
<img src="../images/03.jpg" οnclick="chg(this);">
</div>
</body>
</html>
选择器demo3:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择器</title>
<script src="../js/jquery.js"></script>
<script>
//在页面加载后调用匿名函数,
//其作用等同于window.onload
$(function(){
//1.基本选择器
//2.层次选择器
console.log($("#gz+li"));
//3.过滤选择器
//1)基本过滤选择器
console.log($("li:first"));
console.log($("li:lt(2)"));
console.log($("li:odd"));
console.log($("li:not(#gz)"));
//2)内容过滤选择器
console.log($("li:contains('州')"));
//3)可见性过滤选择器
console.log($("li:hidden"));
//4)属性过滤选择器
console.log($("li[style]"));
//5)状态过滤选择器
console.log($("input:disabled"));
//4.表单选择器
console.log($(":radio"));
});
</script>
</head>
<body>
<ul>
<li>北京</li>
<li>上海</li>
<li id="gz">广州</li>
<li>深圳</li>
<li>杭州</li>
<li style="display:none;">东莞</li>
<li style="display:none;">澳门</li>
</ul>
<!--
readonly:只读,若框内有值依然可以提交到服务器。
disabled:禁用,若框内有值则无法提交到服务器。
-->
<p>
账号:<input type="text">
</p>
<p>
密码:<input type="password">
</p>
<p>
性别:
<input type="radio" name="sex">男
<input type="radio" name="sex">女
</p>
</body>
</html>
读写节点demo4:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>读写节点</title>
<script src="../js/jquery.js"></script>
<script>
$(function(){
//html() == innerHTML
console.log($("p:eq(0)").html());
$("p:eq(0)").html("jQuery支持<u>读写</u>节点");
//text() == innerText
console.log($("p:eq(1)").text());
$("p:eq(1)").text("jQuery支持<u>增删</u>节点");
//val()==value
console.log($(":button:first").val("BBB"));
//attr()==getAttribute(),setAttribute()
console.log($("img:first").attr("src"));
$("img:first").attr("src","../images/02.jpg");
});
</script>
</head>
<body>
<p>jQuery支持<b>读写</b>节点</p>
<p>jQuery支持<b>增删</b>节点</p>
<p>
<input type="button" value="AAA">
</p>
<p>
<img src="../images/01.jpg">
</p>
</body>
</html>
增删节点demo5:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>增删节点</title>
<script src="../js/jquery.js"></script>
<script>
function f1(){
var li = $("<li>天津</li>");
$("ul").append(li);
}
function f2(){
var li = $("<li>济南</li>");
$("#gz").before(li);
}
function f3(){
$("li:last").remove();
}
</script>
</head>
<body>
<p>
<input type="button" value="追加" οnclick="f1();">
<input type="button" value="插入" οnclick="f2();">
<input type="button" value="删除" οnclick="f3();">
</p>
<ul>
<li>北京</li>
<li>上海</li>
<li id="gz">广州</li>
<li>深圳</li>
<li>杭州</li>
</ul>
</body>
</html>
样式操作demo6:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>样式操作</title>
<style>
.big{
font-size: 30px;
}
.important{
color: red;
}
</style>
<script src="../js/jquery.js"></script>
<script>
$(function(){
$('p').addClass('big').addClass('important');
$('p').removeClass('big').removeClass('important');
console.log($('p').hasClass('big'));
setInterval(function(){
$("p").toggleClass("big");
},500);
});
</script>
</head>
<body>
<p>jQuery对样式操作提供了很好的支持</p>
</body>
</html>
遍历节点demo7:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>遍历节点</title>
<script src="../js/jquery.js"></script>
<script>
$(function(){
console.log($("#gz").parent());
console.log($("#city").children());
console.log($("#gz").next());
console.log($("#gz").siblings());
});
</script>
</head>
<body>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li id="gz">广州</li>
<li>深圳</li>
<li>杭州</li>
</ul>
</body>
</html>
jQuery事件demo8:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery事件</title>
<script src="../js/jquery.js"></script>
<script>
//页面加载后
$(function(){
//给按钮1绑定单击事件
$(":button:first").click(function(e){
console.log(1);
console.log(e);
});
});
</script>
</head>
<body>
<input type="button" value="按钮1">
</body>
</html>
合成事件demo9:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>合成事件</title>
<style>
.big{
width: 250px;
height: 250px;
}
</style>
<script src="../js/jquery.js"></script>
<script>
$(function(){
//给图片绑定悬停事件
$("img").hover(
function(){
//css("width","250px");
//attr("style","width:250px;")
//width(250)
$(this).toggleClass("big");
},//悬停时
function(){
$(this).toggleClass("big");
}//离开时
);
setInterval(function(){
$("img").toggle();
},500);
});
</script>
</head>
<body>
<img src="../images/01.jpg">
</body>
</html>
模拟事件demo10:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模拟事件</title>
<style>
#gg{
height: 500px;
background-color: orange;
}
#gg input{
float: right;
margin: 5px;
}
</style>
<script src="../js/jquery.js"></script>
<script>
$(function(){
//给按钮定义单击事件
$("#gg :button").click(function(){
$("#gg").slideUp(500);
});
//3秒后
setTimeout(function(){
$("#gg :button").trigger("click");
},3000);
});
</script>
</head>
<body>
<div id="gg">
<input type="button" value="x">
</div>
</body>
</html>
动画demo11:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动画</title>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
margin-top: 20px;
/*自定义动画基于相对/绝对/固定定位*/
position: relative;
}
</style>
<script src="../js/jquery.js"></script>
<script>
function f1(){
$("div").show(1000);
}
function f2(){
//参数2是在动画完成后被调用的。
//像参数2这样的,传递给某方法的函数,
//并且函数是在方法结束前调用的,
//则这样的函数叫回调函数。
$("div").hide(3000,function(){
console.log("完成");
});
//显示隐藏的动画实现原理:
//通过定时器,连续不断的修改元素的样式。
//而启动定时器相当于启动子线程,
//当前方法f2相当于主线程,二者并发执行。
console.log("over");
}
$(function(){
$("div").hover(
function(){
$(this).animate({"left":"30px"},500);
},
function(){
$(this).animate({"left":0},500);
},
);
});
</script>
</head>
<body>
<input type="button" value="显示" οnclick="f1();">
<input type="button" value="隐藏" οnclick="f2();">
<div></div>
</body>
</html>