jQuery
一、什么是jQuery
- jQuery是一个JS框架，极大的简化了JS编程，封装了JS、CSS、DOM，提供了一致的，简洁的API
- 使用户更方便地处理HTML、Events、实现动画效果，并且方便地为网站提供AJAX交互
- 使用户的HTML页面保持代码和HTML内容分离
二、jQuery使用
- 1.使用前需要引入jquery.js文件
- 如：jquery-1.11.1.js
- 2.使用jQuery的选择器选中节点
- 3.调用它的API操作节点
简单实例（点击按钮增加字体字号）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-1.11.1.js"></script>
<script>
function bigger(){
//获取段落的原始字号
var size = $("p").css("font-size");
console.log(size);
//去掉单位，便于增加字号
size = size.replace("px","");
//将字号加1，在设置给字号
$("p").css("font-size",++size+"px");
}
</script>
</head>
<body>
<input type="button" value="+" onclick="bigger();"/>
<p>1.引入jquery.js</p>
<p>2.使用选择器选中节点</p>
<p>3.调用它的API操作节点</p>
</body>
</html>
示例2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-1.11.1.js"></script>
<script>
function print1(){
//使用选择器获取的是jquery对象
var $ps = $("p");
console.log($ps);
for(var i=0;i<$ps.length;i++){
//从jquery对象中获取的值是dom
var p = $ps[i];
console.log(p.innerHTML);
}
}
//调用时传入了this，它指代点击的那个图片，这是一个dom对象
function chg(img){
console.log($(img).width());
console.log($(img).height());
if($(img).width() == 218){
$(img).width(250).height(250);
}else{
$(img).width(218).height(218);
}
}
</script>
</head>
<body>
<input type="button" value="打印" onclick="print1();"/>
<p>1.jquery对象才能调用jquery方法</p>
<p>2.dom对象才能调用dom方法</p>
<p>3.jquery对象本质上是dom数组</p>
<div>
<img src="../images/01.jpg" onclick="chg(this);"/>
</div>
</body>
</html>
选择器示例（过滤选择器*）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-1.11.1.js"></script>
<script>
//等价于
//window.onload=function(){}
$(function(){
//1.基本选择器
//和css选择器一样
//2.层次选择器
//1)选择子孙/儿子
//和派生选择器一样
//2)选择弟弟
console.log($("#gz+li"));//广州的弟弟，弟弟都一样的话，li可省略，~是所有弟弟
//3.过滤选择器(*)
//1)基本过滤(*)
console.log($("li:first"));//第一个，最后一个last
console.log($("li:even"));//下标偶数
console.log($("li:lt(2)"));//下标小于2的
console.log($("li:not(#gz)"));//排除
//2)内容过滤
console.log($("li:contains('州')"));
//3)可见性过滤
console.log($("li:hidden"));
//4)属性过滤
console.log($("li[id]"));
//5)状态过滤
console.log($("input:enabled"));
console.log($("input:checked"));
//4.表单选择器
console.log($(":radio"));
});
</script>
</head>
<body>
<ul>
<li>北京</li>
<li>上海</li>
<li id="gz">广州</li>
<li id="sz">深圳</li>
<li>杭州</li>
<li>天津</li>
<li style="display:none;">重庆</li>
</ul>
<!--
readonly:只读,数据依然可以提交给服务器.
disabled:禁用,数据无法提交给服务器.
-->
<p>
账号:<input type="text" disabled/>
</p>
<p>
密码:<input type="password"/>
</p>
<p>
性别:
<input type="radio" name="sex" checked/>男
<input type="radio" name="sex"/>女
</p>
</body>
</html>
读写节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-1.11.1.js"></script>
<script>
$(function(){
//1.读写节点的内容(双标签有内容)
//1) html() == innerHTML
console.log($("p:first").html());
$("p:first").html("1.jQuery支持<u>读写</u>节点");
//2) text() == innerText
//用法同上
//2.读写节点的值(表单控件有值)
//val() == value
console.log($(":button:first").val());
$(":button:first").val("BBB");
//3.读写节点的属性
//attr() == setAttribute()+getAttribute()
console.log($("img:first").attr("src"));
$("img:first").attr("src","../images/02.jpg");
//根据层次查询节点
//遍历节点：查找某节点的亲戚。
//有些时候我们调用别人的方法得到一个节点，对其进行
//一些操作，然后又要对此节点的亲戚进行操作，此时
//无法写选择器，只能调用这样的方法
var $gz = $("#gz");//假设得到了gz
console.log($gz.parent());//父节点
console.log($gz.prev());//上一个哥哥,弟弟next()
console.log($gz.siblings());//所有兄弟，加参数表示第几个兄弟
var $ul = $("ul");
console.log($ul.find("li[id]"));//查找满足选择器的所有后代
});
function f1() {
var $li = $("<li>天津</li>");
console.log($li);
$("ul").append($li);
}
function f2() {
var $li = $("<li>澳门</li>");
$("#gz").after($li);
}
function f3() {
$("#gz").remove();
}
</script>
</head>
<body>
<p>1.jQuery支持<b>读写</b>节点</p>
<p>2.jQuery支持<b>增删</b>节点</p>
<p>3.jQuery支持<b>查询</b>节点</p>
<p>
<input type="button" value="AAA"/>
</p>
<p>
<img src="../images/01.jpg"/>
</p>
<ul>
<li>北京</li>
<li>上海</li>
<li id="gz">广州</li>
<li>深圳</li>
<li>杭州</li>
</ul>
<p>
<input type="button" value="追加"
onclick="f1();"/>
<input type="button" value="插入"
onclick="f2();"/>
<input type="button" value="删除"
onclick="f3();"/>
</p>
</body>
</html>
样式操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.big {
font-size: 30px;
}
.important {
color: red;
}
</style>
<script src="../js/jquery-1.11.1.js"></script>
<script>
$(function(){
$("p").addClass("big").addClass("important");//追加样式
$("p").removeClass("big").removeClass("important");//移除样式
console.log($("p").hasClass("big"));//判断是否包含某样式
});
function f1() {
$("p").toggleClass("big");//切换样式
}
</script>
</head>
<body>
<p>jQuery专门对象样式操作提供了支持</p>
<input type="button" value="切换"
onclick="f1();"/>
</body>
</html>
绑定事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.big {
width: 250px;
height: 250px;
}
</style>
<script src="../js/jquery-1.11.1.js"></script>
<script>
//window.onload只能写一次,
//若写了多次则后者覆盖前者.
//$(function(){})可以写多次,
//若写了多次则它们的逻辑会叠加.
$(function(){
//给按钮1绑定单击事件
$(":button:first").click(function(e){
console.log(1);
//此事件对象被jquery做了封装，因为事件对象是浏览器创建的。
//不同浏览器创建的事件对象有区别，开发时要兼顾这个区别，很麻烦
//jquery解释想解决这个麻烦，将他们的区别统一起来，统一的方法：
//取消冒泡：e.stopPropagation()
//获取事件源: e.target
console.log(e);
});
//给图片绑定悬停事件
$("img").hover(
function(){
$(this).addClass("big");
//width()
//css()
//addClass("big")
//toggleClass("big")
},//悬停时
function(){
$(this).removeClass("big");
} //离开时
);
//给按钮2绑定单击事件
$(":button:eq(1)").click(function(){
//让图片在显示与隐藏之间切换
$("img").toggle();
});
});
</script>
</head>
<body>
<input type="button" value="按钮1"/>
<p>
<img src="../images/01.jpg" />
</p>
<input type="button" value="按钮2"/>
</body>
</html>
绑定事件案例（模拟网页广告向上自动收起）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#gg {
border: 1px solid red;
height: 600px;
}
#gg input {
float: right;
margin: 5px;
}
</style>
<script src="../js/jquery-1.11.1.js"></script>
<script>
$(function(){
//给按钮绑定单击事件
$("#gg input").click(function(){
//让广告区域向上收起
$("#gg").slideUp(600);
});
//3秒之后
setTimeout(function(){
//自动点击一下按钮x
$("#gg input").trigger("click");
},3000);
});
</script>
</head>
<body>
<div id="gg">
<input type="button" value="x"/>
</div>
</body>
</html>
示例（模拟打分器）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-1.11.1.js"></script>
<script>
$(function(){
//给按钮后绑定单击事件
$(":button").click(function(){
//启动定时器
var n = 0;
var id = setInterval(function(){
//获取下一个要处理的框
var $text = $(":text").eq(n);
//模拟光标切入事件
$text.trigger("focus");
//生成随机的分数，写入框内
var s = parseInt(Math.random()*100);
$text.val(s);
//都处理完就停止定时器
if(n == $(":text").length-1){
clearInterval(id);
}
n++;
},2000);
});
});
</script>
</head>
<body>
<p>
<input type="button" value="打分"/>
</p>
<p>
张三:<input type="text"/>
</p>
<p>
李四:<input type="text"/>
</p>
<p>
王五:<input type="text"/>
</p>
<p>
赵六:<input type="text"/>
</p>
</body>
</html>
动画
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
/*设置相对/绝对/固定定位，才能做出动画效果，
动画就是连续改变元素的偏移量*/
img {
position: relative;
}
div {
background-color: red;
width:200px;
height: 100px;
border: 2px solid red;
position: fixed;
top: 50px;
right: -180px;
}
</style>
<script src="../js/jquery-1.11.1.js"></script>
<script>
//显示隐藏动画的实现原理：
//通过定时器连续改变元素的样式（大小和透明度）
function f1() {
//$("img").show();
//$("img").show(3000);
$("img").slideDown(3000);
//$("img").fadeIn(3000);//淡入
}
function f2() {
//$("img").hide(3000);
//参数2是一个函数，jquery会在执行玩动画后自动调用
//这样的函数称之为回调函数
$("img").slideUp(3000,function(){
console.log("完成");
});
//$("img").fadeOut(3000);//淡出
//f2相当于主线程，动画相当于支线程，二者并发执行
//不互相等待，所以这句话会立刻执行
console.log("over");
}
function f3(){
$("#msg").fadeIn(500).fadeOut(2500);
}
function f4(){
$("img").animate({"left":"300px"},3000)
.animate({"top":"300px"},3000)
.animate({"left":"0"},3000)
.animate({"top":"0"},3000);
}
$(function(){
$("#gg").hover(
function(){
$(this).animate({"right":"0"},500);
},
function(){
$(this).animate({"right":"-180px"},500);
}
);
});
</script>
</head>
<body>
<p>
<input type="button" value="显示" onclick="f1();"/>
<input type="button" value="隐藏" onclick="f2();"/>
<input type="button" value="删除" onclick="f3();"/>
<input type="button" value="走你" onclick="f4();"/>
</p>
<p>
<img src="../images/01.jpg"/>
</p>
<p id="msg" style="display:none;">操作成功</p>
<div id="gg"></div>
</body>
</html>
案例（模拟购物车）
<!DOCTYPE html>
<html>
<head>
<title>购物车</title>
<meta charset="utf-8" />
<style type="text/css">
h1 {
text-align:center;
}
table {
margin:0 auto;
width:60%;
border:2px solid #aaa;
border-collapse:collapse;
}
table th, table td {
border:2px solid #aaa;
padding:5px;
}
th {
background-color:#eee;
}
</style>
<script src="../js/jquery-1.11.1.js"></script>
<script>
function add_shoppingcart(btn) {
//获取商品名
//$objs.eq(i) == $($(objs[i]))
var name =
$(btn).parent().siblings().eq(0).html();
//获取单价
var price =
$(btn).parent().siblings().eq(1).html();
//创建一个新的行
var $tr = $(
'<tr>'+
'<td>'+name+'</td>'+
'<td>'+price+'</td>'+
'<td align="center">'+
'<input type="button" value="-" onclick="decrease(this);"/> '+
'<input type="text" size="3" readonly value="1"/> '+
'<input type="button" value="+" onclick="increase(this);"/>'+
'</td>'+
'<td id="p">'+price+'</td>'+
'<td align="center"><input type="button" value="x" onclick="cancel(this);"/></td>'+
'</tr>');
//追加到tbody下
$("#goods").append($tr);
}
//加法
function increase(btn) {
//获取数量
var amount = $(btn).prev().val();
//数量+1再写入文本框
$(btn).prev().val(++amount);
//获取单价
var price =
$(btn).parent().prev().html();
//计算并写入金额
$(btn).parent().next().html(amount*price);
}
//减法
function decrease(btn) {
//获取数量
var amount = $(btn).next().val();
if(amount > 0){
//数量-1再写入文本框
$(btn).next().val(--amount);
//获取单价
var price =
$(btn).parent().prev().html();
//计算并写入金额
$(btn).parent().next().html(amount*price);
}
}
//删除
function cancel(btn){
$(btn).parent().parent().remove();
}
</script>
</head>
<body>
<h1>真划算</h1>
<table>
<tr>
<th>商品</th>
<th>单价(元)</th>
<th>颜色</th>
<th>库存</th>
<th>好评率</th>
<th>操作</th>
</tr>
<tr>
<td>罗技M185鼠标</td>
<td>80</td>
<td>黑色</td>
<td>893</td>
<td>98%</td>
<td align="center">
<input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>微软X470键盘</td>
<td>150</td>
<td>黑色</td>
<td>9028</td>
<td>96%</td>
<td align="center">
<input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>洛克iphone6手机壳</td>
<td>60</td>
<td>透明</td>
<td>672</td>
<td>99%</td>
<td align="center">
<input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>蓝牙耳机</td>
<td>100</td>
<td>蓝色</td>
<td>8937</td>
<td>95%</td>
<td align="center">
<input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>金士顿U盘</td>
<td>70</td>
<td>红色</td>
<td>482</td>
<td>100%</td>
<td align="center">
<input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
</td>
</tr>
</table>
<h1>购物车</h1>
<table>
<thead>
<tr>
<th>商品</th>
<th>单价(元)</th>
<th>数量</th>
<th>金额(元)</th>
<th>删除</th>
</tr>
</thead>
<tbody id="goods">
</tbody>
<tfoot>
<tr>
<td colspan="3" align="right">总计</td>
<td id="total"></td>
<td></td>
</tr>
</tfoot>
</table>
</body>
</html>
2498
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
