一.jQuery对象和DOM对象
1.通过$所获得的对象是jQuery对象
2.调用修改方法返回的是jQuery对象
- obj.width(218)
- obj.html(“abc”)
3.调用读取方法
1)若方法返回元素,则是jQuery对象
2)若方法返回文本,则是DOM对象
- obj.html()
- obj.attr(“src”)
二.jQuery事件
1.事件概述
1)什么是事件
2)事件的分类
2.事件定义
1)直接定义
2)动态绑定(*)
- 页面加载: $(function(){})
- $(“”).click(function(){})
3)取消事件
- return false
js和jQuery中都采用这样的方式取消事件
3.事件对象
1)什么是事件对象
2)如何获取事件对象
直接定义事件时
动态绑定事件时
- 和js一样
获得的event是被jQuery封装后的event
4.事件机制
1)冒泡机制
2)如何取消冒泡(*)
3)作用
4)如何获取事件源(*)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-1.11.1.js"></script>
<script>$(function(){
console.log($("p:first").html());$("p:first").html("1.jQuery支持<u>读写</u>节点");console.log($(":button:first").val());$(":button:first").val("BBB");console.log($("img:first").attr("src"));$("img:first").attr("src","../images/02.jpg");var gz = $("#gz");console.log(gz.parent());console.log(gz.prev());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>$(function(){
$(":button:first").click(function(e){
console.log(1);console.log(e);});$("img").hover(function(){
$(this).addClass("big");},function(){
$(this).removeClass("big");} );$(":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);});setTimeout(function(){
$("#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>
<style>div {width: 200px;height: 200px;background-color: red;} </style>
<script src="../js/jquery-1.11.1.js"></script>
<script>function f1() {
$("div").show(3000);}function f2() {
$("div").hide(3000);} </script>
</head>
<body><p><input type="button" value="显示"onclick="f1();"/><input type="button" value="隐藏"onclick="f2();"/></p><div></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) {
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="-"/>'+'<input type="text" size="3" readonly value="1"/>'+'<input type="button" value="+" onclick="increase(this);"/>'+'</td>'+'<td>'+price+'</td>'+'<td align="center"><input type="button" value="x"/></td>'+'</tr>');$("#goods").append(tr);}function increase(btn) {
var amount = $(btn).prev().val();$(btn).prev().val(++amount);var price = $(btn).parent().prev().html();$(btn).parent().next().html(amount*price);}</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>