1.JQuery库特性
HTML元素选取与操作
css操作
HTML事件函数
JavaSvript特效和动画
HTML DOM遍历和修改
AJAX
2.引用JQuery
从jQuery.com下载JQuery库
从CDN中下载JQuery
3版本介绍
V1.x:支持IE6+
V2.x:支持IE9+
4.官网www.jquery.com
5.jquery语法
$(selector).action()
美元符号定义JQuery
选择符（selector）“查询”和“查找”HTML元素
jQuery的action()执行选择元素的操作
6.文档就绪函数
为防止文档在完全加载（就绪）之前运行，如：
试图隐藏一个不存在的元素
获得未完全加载的图像的大小
$(document).ready(function(){});
7.元素选择器
$("*") 所有元素
$("#lastname") id="lastname"的元素
$(".intro") 所有class="intro"的元素
$("p") 所有<p>元素
$(".intro.demo")所有class="intro"且class="demo"的元素
$("p:first") 第一个<p>元素
$("p:last")最后一个<p>元素
$("tr:even")所有偶数<tr>元素
$("tr:odd")所有奇数<tr>元素
$("ul li:eq(3)") 列表中的第四个元素（index从0开始）
$("ul li:gt(3)") 列出index大于3的元素
$("ul li:lt(3)") 列出index小于3的元素
$("input:not(:empty)") 所有不为空的input元素
$(":header") 所有标题元素<h1>-<h6>
$:(":animated") 所有动画元素
6.JQuery事件
$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-3.2.1.min.js"> </script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<button id="btn">提交</button>
</body>
</html>7.绑定和解除事件
bind&unbind
on&off(jQuery 1.7+)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-3.2.1.min.js"> </script>
<script>
$(document).ready(function(){
$("button").bind("click",clickfunc);
$("button").bind("click",clickfunc2);
$("button").off("click",clickfunc2);
});
function clickfunc(e)
{
console.log("click func1");
}
function clickfunc2(e)
{
console.log("click func2");
}
</script>
</head>
<body>
<button id="btn">提交</button>
</body>
</html>
8.事件冒泡
stopPropagation 阻止父层元素
stopImmediatePropagation 立即阻止(包括和它同一层的元素)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-3.2.1.min.js"> </script>
<script>
$(document).ready(function(){
$("button").bind("click",clickfunc);
$("button").bind("click",clickfunc2);
$("div").on("click",clickDiv);
});
function clickfunc(e)
{
console.log("click func1");
//console.log(e);
e.stopPropagation();
}
function clickfunc2(e)
{
console.log("click func2");
//console.log(e);
}
function clickDiv(e)
{
console.log("click Div");
//console.log(e);
}
</script>
</head>
<body>
<div id="div1">
<button id="btn">提交</button>
</div>
</body>
</html>
9606
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
