初学JQuery(记录自学)
什么是JQuery
为什么要学JQuery？
入门案例，
文档加载事件及简写
代码
<script type="text/javascript" src="../../js/jquery-1.11.0.js"></script>
<script>
/*文档加载完成的事件*/
jQuery(document).ready(function() {
alert("jQuery(document).ready(function()");
});
//JQuery可以简写成$
$(document).ready(function(){
alert("$(document).ready(function()");
});
//最简单的写法
$(function(){
alert("$(function(){");
});
</script>
</head>
运行结果
点击确定
再点击确定
JQ和JS对象之间的转换
代码
（注意里面有很多//注释掉的，自行脑补结果）
<script src="../../js/jquery-1.11.0.js"></script>
<script>
function changeJS(){
var div = document.getElementById("666");
// div.innerHTML = "内容被修改了！";
// 将JS对象转化成JQ对象来修改内容
$(div).html("转成JQ对象修改了内容");
}
$(function(){
//给按钮绑定事件
$("#2b").click(function(){
//找到666
// $("#666").html("jq成功修改了内容");
// 将JQ对象转化成JS对象来调用
var $666 = $("#666");
var js666 = $666.get(0);
// var js666 = $666.[0];
js666.innerHTML = "jq对象转成js对象成功";
});
});
</script>
</head>
<body>
<input type="button" value="js修改内容" onclick="changeJS()"/>
<input type="button" value="jq修改内容" id="2b"/>
<div id="666">
这里的内容一会儿会被替换掉
</div>
</body>
运行结果
点击JS修改内容
点击jq修改内容
如何使用JQ的步骤
1. 导入JQ相关的文件
2. 文档加载完成事件: $(function) : 页面初始化的操作: 绑定事件, 启动页面定时器
3. 确定相关操作的事件
4. 事件触发函数
5. 函数里面再去操作相关的元素
-
JQ中的动画效果
代码
（注意里面有很多//注释掉的，自行脑补结果）
<!-- 导包 -->
<script src="../../js/jquery-1.11.0.js"></script>
<script>
//文档加载事件
$(function(){
//按钮绑定事件,隐藏图片
$("#btn2").click(function(){
//获得img并隐藏图片
// $("#img1").hide(1000);
// $("#img1").slideUp(1000);
$("#img1").animate({width:"800px",opacity:"0.1"},3000);
});
//显示图片
$("#btn1").click(function(){
// $("#img1").show(5000);
// $("#img1").slideDown(5000);
$("#img1").animate({width:"300px",opacity:"1"},3000);
});
});
</script>
</head>
<body>
<input type="button" value="显示" id="btn1"/>
<input type="button" value="隐藏" id="btn2"/><br />
<img src="../../img/333.png" id="img1" width="500px"/>
</body>
运行结果
动画效果自行脑补
（注：opaticy是透明度的意思）
JQ定时弹出广告-代码实现
步骤分析
代码
<!--1 导入JQ的文件
2 编写JQ的文件加载事件
3 启动定时器 setTimeout（“”，3000）
4 编写显示广告的函数
5 在显示广告里面再启动一个定时器
6 编写隐藏广告的函数
-->
<!-- 导包 -->
<script src="../js/jquery-1.11.0.js"></script>
<script>
// 显示广告
function showAD(){
// $("#img1").show();
$("#img1").slideDown(2000);
setTimeout("hideAD()",3000);
}
// 隐藏广告
function hideAD(){
// $("#img1").hide();
$("#img1").slideUp(2000);
}
$(function(){
setTimeout("showAD()",3000);
});
</script>
</head>
<body>
<img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" id="img1" style="display: none;"/>
</body>
运行结果
3秒后
又3秒后，广告慢慢slideUp上去
选择器
代码演示
<link rel="stylesheet" href="../../css/style.css" />
<script src="../../js/jquery-1.11.0.js"></script>
<script>
// 文档加载事件,页面初始化
$(function(){
// 初始化操作,给按钮绑定事件
$("#btn1").click(function(){
// id选择器
$("#two").css("background-color","red");
});
// 初始化操作,给按钮绑定事件
$("#btn2").click(function(){
// 类选择器
$(".mini").css("background-color","red");
});
// 初始化操作,给按钮绑定事件
$("#btn3").click(function(){
// 元素选择器
$("div").css("background-color","red");
});
// 初始化操作,给按钮绑定事件
$("#btn4").click(function(){
// 通配符选择器
$("*").css("background-color","red");
});
// 初始化操作,给按钮绑定事件
$("#btn5").click(function(){
// 分组选择器
$(".mini,span").css("background-color","red");
});
});
</script>
</head>
<body>
<input type="button" value="找出ID为two的元素" id="btn1" />
<input type="button" value="找出类为mini的元素" id="btn2" />
<input type="button" value="找出所有div元素" id="btn3" />
<input type="button" value="通配符选择器" id="btn4" />
<input type="button" value="找出mini类和span元素" id="btn5" />
<br />
<div id="one">
<div class="mini">1-1</div>
</div>
<div id="two">
<div class="mini">2-1</div>
<div class="mini">2-2</div>
</div>
<div id="three">
<div class="mini">3-1</div>
<div class="mini">3-2</div>
<div class="mini">3-3</div>
</div>
<span id="four">4-1</span>
</body>
运行结果
点击第一个按钮
点击第二个按钮
点击第三个按钮
点击第四个按钮
点击第五个按钮
<link rel="stylesheet" href="../../css/style.css" />
<!--引入JQ的文件-->
<script src="../../js/jquery-1.11.0.js"></script>
<!--
-- 子元素选择器: 选择器1 > 选择器2
- 后代选择器: 选择器1 儿孙
- 相邻兄弟选择器 : 选择器1 + 选择器2 : 找出紧挨着的一个弟弟
- 找出所有弟弟: 选择器1~ 选择器2 : 找出所有的弟弟
-->
<script>
//文档加载事件,页面初始化的操作
$(function(){
//初始化操作: 给按钮绑定事件
//找出body下面的子div
$("#btn1").click(function(){
$("body > div").css("background-color","palegreen");
});
//找出body下面的所有div
$("#btn2").click(function(){
$("body div").css("background-color","palegreen");
});
// 找出ID为one的相邻兄弟div
$("#btn3").click(function(){
$("#one+div").css("background-color","palegreen");
});
// 找出id为two的所有弟弟div
$("#btn4").click(function(){
$("#two~div").css("background-color","palegreen");
});
});
</script>
</head>
<body>
<input type="button" value="找出body下面的子div" id="btn1" />
<input type="button" value="找出body下面的所有div" id="btn2" />
<input type="button" value="找出id为one的相邻兄弟div" id="btn3" />
<input type="button" value="找出id为two的所有弟弟div" id="btn4" />
<br />
<div id="one">
<div class="mini">1-1</div>
</div>
<div id="two">
<div class="mini">2-1</div>
<div class="mini">2-2</div>
</div>
<div id="three">
<div class="mini">3-1</div>
<div class="mini">3-2</div>
<div class="mini">3-3</div>
</div>
<span id="four">span</span>
</body>
运行结果
点击第一个按钮
点击第二个按钮
点击第三个按钮
点击第四个按钮
基本过滤器
<link rel="stylesheet" href="../../css/style.css" />
<!--引入JQ的文件-->
<script src="../../js/jquery-1.11.0.js"></script>
<!--
-->
<script>
//文档加载事件,页面初始化的操作
$(function(){
//初始化操作: 给按钮绑定事件
//过滤出所有DIV中的第一个元素
$("#btn1").click(function(){
$("div:first").css("background-color","palegreen");
});
// 过滤出所有DIV中的偶数位的div
$("#btn2").click(function(){
$("div:even").css("background-color","palegreen");
});
// 过滤出所有DIV中的奇数位的div
$("#btn3").click(function(){
$("div:odd").css("background-color","palegreen");
});
// 过滤出所有DIV中索引大于2的div
$("#btn4").click(function(){
$("div:gt(2)").css("background-color","palegreen");
});
});
</script>
</head>
<body>
<input type="button" value="过滤出所有DIV中的第一个元素" id="btn1" />
<input type="button" value="过滤出所有DIV中的偶数位的div" id="btn2" />
<input type="button" value="过滤出所有DIV中的奇数位的div" id="btn3" />
<input type="button" value="过滤出所有DIV中索引大于2的div" id="btn4" />
<br />
<div id="one">
<div class="mini">1-1</div>
</div>
<div id="two">
<div class="mini">2-1</div>
<div class="mini">2-2</div>
</div>
<div id="three">
<div class="mini">3-1</div>
<div class="mini">3-2</div>
<div class="mini">3-3</div>
</div>
<span id="four">span</span>
</body>
运行结果
点击第一个按钮
点击第二个按钮
点击第三个按钮
点击第四个按钮
属性选择器
（有注释掉的内容）
<script src="../../js/jquery-1.11.0.js"></script>
<script>
$(function(){
//属性选择器的操作使用
// $("a[href]").css("color","red"); //只有一个属性
// $("a[href][title]").css("color","red"); //多个属性
$("a[href][title='textTitle']").css("color","red");//多个属性并指定了值
});
</script>
</head>
<body>
<a href="#" >2333</a><br />
<a href="#" title="">5666</a><br />
<a href="#" title="textTitle">8999</a>
</body>
运行结果
表单选择器
<script src="../../js/jquery-1.11.0.js"></script>
<script>
$(function(){
// 注意! input不仅是input元素会变化,而是所有输入项都会变化,包括select textarea button等
$(":file").css("background-color","red");
$("btn1").click(function(){
$("option:selected").css("color","deeppink");
alert($("option:selected").size());
});
});
</script>
</head>
<body>
<form>
<input type="button" value="Input Button"/><br />
<input type="checkbox" /><br />
<input type="file" /><br />
<input type="hidden" /><br />
<input type="image" /><br />
<input type="password" /><br />
<input type="radio" />
<input type="reset" />
<input type="submit" />
<input type="text" /><br />
<select multiple="multiple">
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
</select>
<input type="button" value="点我" id="btn1" />
<textarea></textarea>
<button>Button</button>
</form>
</body>
运行结果
JQ的表格隔行换色
<script src="../js/jquery-1.11.0.js"></script>
<!--
1. 导入JQ的包
2. 文档加载完成函数: 页面初始化
3. 获得所有的行 : 元素选择器
4. 根据行号奇数/偶数去修改颜色
-->
<script>
$(function(){
//获得所有的行 :元素选择器
//改偶数行颜色
$("tr:even:gt(0)").css("background-color","red");
//改奇数行颜色
$("tr:odd:gt(0)").css("background-color","blue");
});
</script>
</head>
运行结果
JQ的表格全选和全不选的多种方式
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
<!--
1. 导入JQ的包
2. 文档加载完成函数: 页面初始化
3. 获得所有的行 : 元素选择器
4. 根据行号奇数/偶数去修改颜色
-->
<script>
$(function(){
//获得所有的行 : 元素选择器
$("tbody > tr:even").css("background-color","#CCCCCC");
//修改基数行
$("tbody > tr:odd").css("background-color","#FFF38F");
// $("tbody > tr").css("background-color","#FFF38F");
});
/*
表格全选和全不选
进一步确定事件: 点击事件
*/
$(function(){
//绑定点击事件
//this 代表的是当前函数的所有者
$("#checkAll").click(function(){
//获取当前选中状态
// alert(this.checked);
//获取所有分类项的checkbox
// 选择器[属性名称='属性值']
// $("input[type='checkbox']:gt(0)").prop("checked",this.checked);
//使用层级选择器来实现 tbody > tr > td > input
// $("tbody > tr > td > input").prop("checked",this.checked); //这个可行
// #tab > tbody > tr:nth-child(4) > td:nth-child(1) > input[type="checkbox"]
$("input").prop("checked",this.checked);
});
});
</script>
</head>
运行结果
能完成全选全不选的功能
JQ中DOM操作
<script src="../js/jquery-1.11.0.js"></script>
<script>
$(function(){
$("#btn1").click(function(){
$("#div1").append("来呀，互相伤害呀！");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="来,互相伤害!"/><br />
<div id="div1">
这里一会儿要添加内容
</div>
</body>
运行结果
JQ遍历
<script src="../js/jquery-1.11.0.js"></script>
<script>
var cities = ["深圳市", "东莞市", "惠州市", "广州市"];
//如何遍历
//JQ对象遍历
$(cities).each(function(i,n){
console.log(i+"==="+n);
});
// JQ函数遍历
$.each(cities,function(i,n){
console.log(i+"==="+n);
});
</script>
</head>
运行结果
省市联动
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
<script>
/*
准备工作 : 准备数据
*/
var provinces = [
["深圳市","东莞市","惠州市","广州市"],
["长沙市","岳阳市","株洲市","湘潭市"],
["厦门市","福州市","漳州市","泉州市"]
];
/*
1. 导入JQ的文件
2. 文档加载事件:页面初始化
3. 进一步确定事件: change事件
4. 函数: 得到当前选中省份
5. 得到城市, 遍历城市数据
6. 将遍历出来的城市添加到城市的select中
*/
$(function(){
$("#province").change(function(){
// alert(this.value);
//得到城市信息
var cities = provinces[this.value];
//清空城市select中的option
/*var $city = $("#city");
//将JQ对象转成JS对象
var citySelect = $city.get(0)
citySelect.options.length = 0;*/
$("#city").empty(); //采用JQ的方式清空
//遍历城市数据
$(cities).each(function(i,n){
$("#city").append("<option>"+n+"</option>");
});
});
});
</script>
</head>
<body>
<!--选择省份-->
<select id="province">
<option value="-1">--请选择--</option>
<option value="0">广东省</option>
<option value="1">湖南省</option>
<option value="2">福建省</option>
</select>
<!--选择城市-->
<select id="city">
</select>
</body>
运行结果
JQ商品的左右选择
<!--
步骤:
1. 导入JQ的文件
2. 文档加载函数 :页面初始化
3.确定事件 : 点击事件 onclick
4. 事件触发函数
1. 移动被选中的那一项到右边
-->
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
<script>
$(function(){
$("#a1").click(function(){
//找到被选中的那一项
//将被选中项添加到右边
$("#rightSelect").append($("#leftSelect option:selected"));
});
//将左边所有商品移动到右边
$("#a2").click(function(){
$("#rightSelect").append($("#leftSelect option"));
});
});
</script>
运行结果
稍微总结一下