1. jQuery介绍
什么是jQuery?
jQuery 就是JavaScript和查询(Query),他就是辅助JavaScript开发的js类库。
jQuery的核心思想
他的核心思想是write less,do more (写得少做的多),所以他实现了很多浏览器的兼容问题。
jQuery流行程度
jQuery 现在已经成为最流行的JavaScript库,在世界前 10000 个访问最多的网站中,有超过 55%在使用 jQuery。
jQuery好处
jQuery 是免费、开源的,jQuery 的语法设计可以使开发更加便 捷,例如操作文档对象、选择 DOM 元素、 制作动画效果、事件处理、使用 Ajax 以及其他功能。
2. Hello jQuery
需求:使用jQuery给按钮绑定单击事件
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
// window.onload = function () {
// var btnObj = document.getElementById("btnId");
// // alert(btnObj);//[object HTMLButtonElement] ====>Dom对象
// btnObj.onclick = function () {
// alert("js 原生的点击事件")
// }
// }
// alert($ );//检查是否加载jQuery
$(function () {
//表示页面加载完成之后,相当于window.onload = function (){}
var $btnObj = $("#btnId"); //表示按id查找标签对象
$btnObj.click(function () {
//绑定单击事件
alert("jQuery 单击事件");
}
);
});
</script>
</head>
<body>
<button id="btnId">SayHello</button>
</body>
</html>
常见问题
1.使用jQuery一定要引入jQuery库。
2.jQuery中的$是一个函数。
3.怎么给按钮添加点击响应函数
第一 使用jQuery查询到标签对象
第二 使用标签对象.click(function(){});
3. jQuery核心函数
$ 是 jQuery 的核心函数,能完成 jQuery 的很多功能。 $ () 就是调用$这个函数
1.传入参数是[函数]时:
表示页面加载完成之后。相当于 window.onload = function(){}
2.传入参数为[html 字符串]时:
会对我们创建这个html对象
3.传入参数为[选择器字符串]时:
$(“id属性值”); id选择器,根据id查询标签对象
$(“标签名”); 标签名选择器,根据指定的标签名查询标签对象
$(".class属性值"); 类选择器,可以根据class属性查询标签对象
4.传入参数[DOM对象]时:
会把这个dom对象转化成jQuery对象
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
// alert("页面加载完成后,自动调用");
//
// $(" <div>" +
// " <span>div_span1</span>" +
// " <span>div_span2</span>" +
// " </div>").appendTo("body");
// alert($("button").length);
var btnObj = document.getElementById("btn01");
alert(btnObj);//[object HTMLButtonElement]
alert($("#btn01"));//[object Object]
});
//核心函数的4个作用
//1.传入参数为[函数]时:在文档加载完成后执行这个函数
//2.传入参数为[HTML字符串]时:根据这个字符串创建元素节点对象
//3.传入参数为[选择器字符串]时:根据这个字符串查找元素节点对象
//4.传入参数为[DOM对象]时:将DOM对象包装为jQuery对象返回
</script>
</head>
<body>
<button id="btn01">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
</body>
</html>
4.jQuery对象和dom对象的区分
4.1 什么是jQuery对象,什么是dom对象
DOM对象
1.通过 getElementById()查询出来的标签对象是 Dom 对象
2.通过 getElementsByName()查询出来的标签对象是 Dom 对象
3.通过 getElementsByTagName()查询出来的标签对象是 Dom 对象
4.通过 createElement() 方法创建的对象,是 Dom 对象
DOM 对象 Alert 出来的效果是:[object HTML 标签名 Element]
jQuery对象
1.通过 JQuery 提供的 API 创建的对象,是 JQuery 对象
2.通过 JQuery 包装的 Dom 对象,也是 JQuery 对象
3.通过 JQuery 提供的 API 查询到的对象,是 JQuery 对象
jQuery 对象 Alert 出来的效果是:[object Object]
4.2 jQuery对象的本质
jQuery对象是dom数组+jQuery提供的一系列功能函数
4.3 jQuery对象和Dom对象使用区别
jQuery对象不能使用Dom对象的属性和方法
Dom对象不能使用jQuery对象的属性和方法
4.4 jQuery对象和Dom对象互转
1.dom对象转换成jQuery对象
第一: 现有DOM对象
第二:$(DOM对象)就可以转换成jQuery对象
2.jQuery对象转换成DOM对象
第一:先有jQuery对象
第二:jQuery对象[下标] 取出相应的DOM对象
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//testDiv.css("color","red")
//testDiv.style.color = "blue";
var arr = [12,"a",true];
var $btns = $("button");
// for (var i = 0; i < $btns.length; i++){
// alert($btns[i]);//[object HTMLButtonElement]
// }
//jQuery与Dom使用上的区别
// document.getElementById("testDiv").innerHTML = "这是dom对象的属性innerHTML";
// $("#testDiv").innerHTML = "这是使用jQuery来调用dom对象的属性innerHTML";//不可用
// $("#testDiv").click(function () {
// alert("click() 是jQuery对象的方法");
// });
// document.getElementById("testDiv").click(function () {//不可用
// alert("DOM可以使用click()吗?不能");
// });
//jQuery与dom的转换
// alert(document.getElementById("testDiv"));//[object HTMLDivElement] dom对象
// alert($(document.getElementById("testDiv")));//[object Object] jQuery对象
alert($(document.getElementById("testDiv"))[0]);//[object HTMLDivElement] dom对象
});
</script>
</head>
<body>
<div id="testDiv">Atguigu is Very Good!</div>
<button id="dom2dom">使用DOM对象调用DOM方法</button>
<button id="dom2jQuery">使用DOM对象调用jQuery方法</button>
<button id="jQuery2jQuery">使用jQuery对象调用jQuery方法</button>
<button id="jQuery2dom">使用jQuery对象调用DOM方法</button>
</body>
</html>
5. jQuery选择器(重点)
5.1 基本选择器
#ID 选择器: 根据 id 查找标签对象
.class 选择器: 根据 class 查找标签对象
element 选择器: 根据标签名查找标签对象
* 选择器: 表示任意的,所有的元素 selector1,selector2
组合选择器: 合并选择器 1,选择器 2 的结果并返回(顺序与html的顺序一致)
p.myClass 表示标签名必须是p标签,而且class类型还要是myClass
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
//1.选择 id 为 one 的元素 "background-color","#bbffaa"
//记得先加载完页面
$("#btn1").click(function () {
// alert("单击事件");
//css() 方法可以设置和获取样式
$("#one").css("background-color","#bbffaa");
});
//2.选择 class 为 mini 的所有元素
$("#btn2").click(function () {
$(".mini").css("background-color","#bbffaa");
});
//3.选择 元素名是 div 的所有元素
$("#btn3").click(function () {
$("div").css("background-color","#bbffaa");
});
4.选择所有的元素
$("#btn4").click(function () {
$("*").css("background-color","#bbffaa");
});
//5.选择所有的 span 元素和id为two的元素
$("#btn5").click(function () {
$("span,#two").css("background-color","#bbffaa");
});
});
</script>
</head>
<body>
<!-- <div>
<h1>基本选择器</h1>
</div> -->
<input type="button" value="选择 id 为 one 的元素" id="btn1" />
<input type="button" value="选择 class 为 mini 的所有元素" id="btn2" />
<input type="button" value="选择 元素名是 div 的所有元素" id="btn3" />
<input type="button" value="选择 所有的元素" id="btn4" />
<input type="button" value="选择 所有的 span 元素和id为two的元素" id="btn5" />
<br>
<div class="one" id="one">
id 为 one,class 为 one 的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8">
</div>
<span class="one" id="span">^^span元素^^</span>
</body>
</html>
5.2 层级选择器(重点)
ancestor descendant 后代选择器 : 在给定的祖先元素下匹配所有的后代元素
parent > child 子元素选择器: 在给定的父元素下匹配所有的子元素
prev + next 相邻元素选择器: 匹配所有紧接在 prev 元素后的 next 元素
prev ~ sibings 之后的兄弟元素选择器: 匹配 prev 元素之后的所有 siblings 元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//$(function () {});全写
//1.选择 body 内的所有 div 元素