jQuery简介
1、什么是jQuery(了解)
jQuery是JS的框架
jQuery是一个轻量的、免费开源的JS函数库
轻量的: 对框架的依赖程度越低, 耦合性越低, 这个框架越轻, 反之, 对框架的依赖程度越高, 耦合性越高, 这个框架就越重。
能够极大的简化JS代码。
jQuery核心思想 “写得更少, 但是做的更多”
2、 jQuery的优势(了解)
- 能够极大的简化JS代码
- 能够像css选择器一样方便获取元素
//获取id为div1的元素
document.getElementById("div1");
$("#div1")
//获取class值为one的元素
$(".one")
- 能够通过修改css属性控制页面的效果
$("div").css("border", "2px solid red");
- 能够兼容常用的浏览器
谷歌, 火狐, 欧朋, 苹果
3、引入jQuery
由于jQuery的库文件就是一个普通的JS文件
所以引入jQuery就是引入一个JS文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" id="i1" value="" />
<input type="button" id="b1" value="按钮1" />
<!-- 引入jQuery文件 -->
<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript">
// js中的页面加载完成事件
//onload = function(){}
// jQuery中的页面加载完成事件
$(function(){
// 通过id选择器得到按钮,给按钮添加事件
$("#b1").click(function(){
//js中
//alert(i1.value);
//jQuery中获取文本框的内容
alert($("#i1").val());
});
});
</script>
</body>
</html>
jQuery中的页面加载完成事件：$(function(){});
jQuery中的动态绑定事件：$("#b1").click(function(){});
jQuery中获取文本框的内容：alert($("#i1").val());
4、JavaScript与jQuery的互相转换
把js对象转换为jq对象：
var jq = $(js);
把jq对象转换为js对象（jq对象的本质是一个js的数组）：
var js = jq[0];
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js与jq转换</title>
</head>
<body>
<input type="text" id="i1" />
<input type="button" id="b1" value="js转jq" />
<input type="button" id="b2" value="jq转js" />
<!-- 引入jQuery文件 -->
<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript">
//给按钮1添加事件
$("#b1").click(function() {
//得到js对象
var js = document.getElementById("i1");
//把js对象转换为jq对象
var jq = $(js);
alert(jq.val());
});
//给按钮2添加事件
$("#b2").click(function() {
//得到jq对象
var jq = $("#i1");
//把jq对象转换为js对象
/* jq对象的本质是一个js的数组 */
var js = jq[0];
alert(js.value);
});
</script>
</body>
</html>
5、jQuery的选择器
基本选择器
- 元素名(标签名)选择器
$(“div”) – 匹配所有的div元素
$(“p”) – 匹配所有的p元素 - 类选择器
$(".mini") – 匹配所有class值为mini的元素
$(“div.mini”) – 匹配所有class值为mini的div元素 - ID选择器
$("#one") – 匹配id为one的元素 - 分组选择器
$(“div,p,.mini,#one”)
匹配所有的div元素以及所有的p元素, 以及所有class值为mini的元素, 和id为one的元素 - 任意元素选择器
$("*") 匹配任意元素
层级选择器
- 后代选择器
$(“div span”) – 匹配div内部的所有span元素 - 子元素选择器
$(“div>span”) – 匹配div内部的所有span子元素 - 相邻兄弟选择器
$("#two+span") – 匹配id为two的元素后面紧邻的span兄弟元素 - $("#two~div")
匹配id为two的元素后面所有的div兄弟元素
层级相关方法
$("#two").siblings(“div”)
匹配id为two的元素前后所有的div兄弟元素
$("#two").prev(“div”)
匹配id为two的元素前面的一个div兄弟元素
$("#two").prevAll(“div”)
匹配id为two的元素前面所有的div兄弟元素
$("#two").next(“div”)
匹配id为two的元素后面的一个div兄弟元素
$("#two").nextAll(“div”)
匹配id为two的元素后面所有的div兄弟元素
$("#two").parent()
匹配id为two的元素的父元素
$("#two").children(“div”)
匹配id为two的元素的子元素
过滤选择器
-
:first
$(“div:first”) – 匹配所有div中的第一个div -
:last
$(“div:last”) – 匹配所有div中的最后一个div
-
:eq(n)
$(“div:eq(n)”) – 匹配所有div中第n+1个div，即下标等于n的元素
$(“div:eq(0)”) – 匹配所有div中的第一个div
$(“div:eq(-1)”) – 匹配所有div中的最后一个div
$(“div”).eq(0) – 匹配所有div中的第一个div -
:not()
$(“div:not(.abc)”) 匹配所有div中class值不等于abc的元素 -
:even
$(“div:even”) 匹配所有div中下标为偶数的元素 -
odd
$(“div:odd”) 匹配所有div中下标为奇数的元素 -
:lt(n)
$(“div:lt(n)”) 匹配所有div中下标小于n的元素 -
:gt(n)
$(“div:gt(n)”) 匹配所有div中下标大于n的元素
内容选择器
- $(“div:has§”) 匹配包含p子元素的div
- $(“div:empty”) 匹配空的div
- $(“div:parent”) 匹配非空的div
- $(“div:contains(‘xxx’)”) 匹配包含xxx文本的div
可见选择器
- $(“div:hidden”) 匹配所有不可见（隐藏）的div
- $(“div:visible”) 匹配所有可见div
隐藏显示相关方法
- $("#abc").show() 让元素显示
- $("#abc").hide() 让元素隐藏
- $("#abc").toggle 让元素显示隐藏状态反转，显示的隐藏，隐藏的显示
属性选择器
- $(“div[id]”) 匹配包含id属性的div，匹配包含某个属性的某个标签
- $(“div[id=‘xxx’]”) 匹配id属性为xxx的div
- $(“div[id!=‘xxx’]”) 匹配id属性不为xxx的div
子元素选择器
- $(“div:first-child”) 匹配是子元素的div，并且第一个
- $(“div:last-child”) 匹配是子元素的div，并且是最后一个
- $(“div:nth-child(n)”) 匹配是子元素的div，并且是第n个（注意n从1开始，不是下标）
表单选择器
- $(":input") 匹配表单中所有的控件
- $(":password") 匹配表单中所有的密码框
- $(":radio") 匹配表单中所有的单选
- $(":checkbox") 匹配表单中所有的多选
- $(":checked") 匹配表单中所有选中的单选、多选、下拉选
- $(“input:checked”) 匹配表单中所有选中的单选和多选
- $(":selected") 匹配表单中所有选中的下拉选
6、jQuery的循环遍历
通过4，我们知道：jq对象的本质是一个js的数组
所以jQuery提供了遍历jq对象内所以元素的方式：each
切记：变脸jq对象，遍历出来的是其本质数组中存放的js对象
其中，遍历时，用this代表遍历数组中的当前遍历到的js对象
//弹出所有 :checked 元素的value值" id="b4"
$("#b4").click(function() {
// var arr = $(":checked");
// for(let i=0;i<arr.length;i++){
// alert(arr[i].value);
// }
//jQuery提供了遍历jq数组的方法
//上述可以缩写为
$(":checked").each(function(){
//this代表遍历数组中的当前遍历到的js对象
alert(this.value)
});
});
7、通过jQuery增加元素对象
创建元素对象
js中： var d = document.createElement(“div”);
jq中： var d = $("<div id=‘xxx’>abc</div>");
添加到某个元素中
$(“父元素”).append(d); 添加到父元素的最后面
$(“父元素”).prepend(d); 添加到父元素的最前面
插入
$("#abc").before(d); 把d元素插入到id为abc的元素的前面
$("#abc").after(d); 把d元素插入到id为abc的元素的后面
8、通过jQuery删除标签
js中： document.body.removeChild(d); js中我们需要通过父元素删除该子元素
jq中： $("#abc").remove(); 删除id为abc的元素
9、通过jQuery修改标签
- 修改标签的text 等效innerText
标签对象.text(); //获取
标签对象.text(“xxx”); //修改 - 修改标签的html 等效innerHTML
标签对象.html(); //获取
标签对象.html(“xxx
”); //修改 - 修改标签的css样式
标签对象.css(“color”); //获取
标签对象.css(“color”,“red”) //修改
标签对象.css({“width”:“200px”,“height”:“100px”});批量赋值 - 修改标签的属性 attribute属性
标签对象.attr(“class”); //获取class的值
标签对象.attr(“class”,“c1”); //修改标签class值为c1
练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" />
<input type="button" value="添加最后面" />
<input type="button" value="添加最前面" />
<input type="button" value="插入上海前面" />
<input type="button" value="插入上海后面" />
<input type="button" value="删除上海" />
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
<!-- 引入jQuery文件 -->
<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$("input:eq(1)").click(function(){
//创建一个li对象
var li = $("<li></li>");
//取出文本框内容
var t = $("input:eq(0)").val();
//将取出的内容放入li中
li.text(t);
//将li添加到ul中
$("ul").append(li);
});
$("input[value='添加最前面']").click(function(){
var li = $("<li></li>");
li.text($("input:first").val());
$("ul").prepend(li);
});
$("input:nth-child(4)").click(function(){
var li = $("<li></li>");
li.text($("input:first").val());
$("li:contains('上海')").before(li);
});
$("input:eq(4)").click(function(){
var li = $("<li></li>");
li.text($("input:first").val());
$("li:contains('上海')").after(li);
});
$("input:eq(5)").click(function(){
var li = $("<li></li>");
li.text($("input:first").val());
$("li:contains('上海')").remove();
});
</script>
</body>
</html>
用jQuery完成QQ好友分组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jq仿QQ好友列表</title>
</head>
<body>
<ul>
<li>
亲戚
<ul>
<li>关三爷</li>
<li>李大爷</li>
<li>李二爷</li>
</ul>
</li>
<li>
同事
<ul>
<li>马云</li>
<li>马化腾</li>
<li>王健林</li>
</ul>
</li>
<li>
女朋友们
<ul>
<li>星星</li>
<li>白晶晶</li>
<li>亮晶晶</li>
</ul>
</li>
</ul>
<!-- 引入jQuery文件 -->
<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript">
//拿到2层ul,让它们全部隐藏
$("li>ul").hide();
//给第一层li绑定点击事件
$("body>ul>li").click(function(){
//this代表触发事件的元素,是js对象
$(this).children().toggle();
//把点击的这个之外的隐藏
//通过silblings()得到选中的兄弟元素
$(this).siblings().children().hide();
});
</script>
</body>
</html>
10、获取事件源
事件源：触发事件的标签
在动态绑定的事件方法中，this就是事件源
**注意：**只有动态绑定的事件方法中this代表的才是事件源（触发事件的标签）
获取事件源的方式：
var obj = event.target||event.srcElement;
11、事件模拟
格式： 元素对象.trigger(“事件名称”);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="点我试试" onclick="alert('试试就试试')" />
<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript">
//只执行一次的定时器
setTimeout(function(){
//事件模拟
$("input").trigger("click");
},3000);
</script>
</body>
</html>
12、hover方法
将鼠标移入移出合并到一个方法中
$(“div”).hover(function(){//当鼠标移入执行
$(this).css(“color”,“red”);
},function(){//当鼠标移出执行
$(this).css(“color”,“green”);
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>hover方法测试</div>
<div>hover方法测试</div>
<div>hover方法测试</div>
<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript">
//hover中定义传入两个方法,前面的是鼠标移入时执行,后面的是鼠标移出时执行
$("div").hover(function(){
//方法一:鼠标移入时
$(this).css("color","red");
},function(){
//方法二:鼠标移出时
$(this).css("color","green");
});
</script>
</body>
</html>
13、动画相关方法
隐藏 .hide(时间)
显示 .show(时间)
淡出 .fadeOut(时间)
淡入 .fadeIn()
上滑 .slideUp()
下滑 .slideDown()
自定义 .animate({“left”,“1000px”},时间);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img{
width: 600px;
height: 400px;
position: relative; /* 相对定位 */
}
</style>
</head>
<body>
<input type="button" value="隐藏" />
<input type="button" value="显示" />
<input type="button" value="淡入" />
<input type="button" value="淡出" />
<input type="button" value="上滑" />
<input type="button" value="下滑" />
<input type="button" value="自定义" />
<hr><!-- 水平分割线 -->
<img src="../imgs/2.gif" />
<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript">
//隐藏动画(第一个参数隐藏的过程时间，第二个参数隐藏完成时执行的方法)
$("input:eq(0)").click(function(){
$("img").hide(1000,function(){
$("img").show(3000);
});
});
//显示动画(第一个参数隐藏的过程时间，第二个参数隐藏完成时执行的方法)
$("input:eq(1)").click(function(){
$("img").show(1000);
});
//淡入
$("input:eq(2)").click(function(){
$("img").fadeIn(1000);
});
//淡出
$("input:eq(3)").click(function(){
$("img").fadeOut(1000);
});
//上滑
$("input:eq(4)").click(function(){
$("img").slideUp(1000);
});
//下滑
$("input:eq(5)").click(function(){
$("img").slideDown(1000);
});
//自定义
$("input:eq(6)").click(function(){
$("img").animate({"left":"200px"},500)
.animate({"top":"200px"},500)
.animate({"left":"0px"},500)
.animate({"top":"0px"},500)
.animate({"width":"800px","height":"500px"},1000)
.animate({"width":"600px","height":"400px"},1000);
});
</script>
</body>
</html>
8558
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
