第二章 JQuery事件和DOM操作 ① 笔记
本章目标
jQuery操作html节点
jQuery属性操作
DOM节点操作
第一节:jQuery事件操作
1.jQuery事件
2.jQuery事件对象event/e属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8“>
</head>
<body>
<div></div>
<script type="text/javascript">
$("div").click(function(e){
console.log(window.event);
}).width(200).height(200).css("border","1px solid red");
</script>
</body>
</html>
事件对象:e<===>window.event 表示事件对象,其中包含事件发生时周围的各种信息。
3. 事件绑定
$(document).on("click","div",function(){
//this:触发事件的当前元素
//alert($(this).html());
$("div").css("background-color","white");
$(this).css("background-color","red");
})
第二节:DOM操作
模板法。
增:创建,美化,添加
document.createElement(“标签名”);
删: 自已.remove() 父.removeChild(“子节点”);
改:父.replace(新节点,老节点);
1.jq创建节点
js: document.creatElement(“标签名”);
jq:$(“<标签名></标签名>”)
2.添加节点
js添加节点:对象.appendChild(要添加的标签);
jq:
3.删除节点
4.复制节点
includeEvents:可选。布尔值。规定是否复制元素的所有事件处理。默认地,副本中不包含事件处理器。
第三节:节点方法
案例1:省市级联
分析:
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
</head>
<body>
省份:
<select id="pro">
<!-- <option value="河南">河南</option>
<option value="河北">河北</option> -->
<option value="">请选择</option>
</select>
市:
<select id="city">
</select>
<!--引入jquery文件-->
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
//定义省份数组
var proAry = ["河南","河北"];
//页面加载事件
$(function(){
//遍历数组数据
$(proAry).each(function(){
//alert(this);
//将遍历的每项数据添加到省份下拉框中
$("#pro").append("<option value='"+this+"'>"+this+"</option>")
})
//省份切换选择市,绑定下拉框的切换事件
$("#pro").change(function(){
//先清空市的选项
$("#city").empty();
//获取当前下拉框选中项的值
var sf = $("#pro").val();
//alert(sf)
switch(sf){
case "河南":
//添加河南的市:郑州,焦作,开封,驻马店
$("#city").append("<option value='郑州'>郑州</option>");
$("#city").append("<option value='焦作'>焦作</option>");
break;
case "河北":
//添加河北的市选项
$("#city").append("<option value='石家庄'>石家庄</option>
$("#city").append("<option value='唐山'>唐山</option>");
break;
}
})
</script>
</body>
</html>
案例2:JQ完成购物车
//新增功能
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
</head>
<body>
<table border="1" width="500" align="center">
<thead>
<tr>
<th>编号</th>
<th>名字</th>
<th>价格</th>
<th>操作</th>
</tr>
</thead>
<tbody id="fbody">
</tbody>
</table>
<!--引入jquery文件-->
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
var fruitAry = [
{"id":1001,"name":"苹果","price":2.5},
{"id":1002,"name":"香蕉","price":5.5},
{"id":1003,"name":"橘子","price":10}
];
//页面加载事件
$(function(){
$(fruitAry).each(function(){
//this:遍历的每个json对象
//alert(this.id+" "+this.name+" "+this.price);
//$("<tr></tr>"):创建tr元素
$("#fbody").append(
$("<tr></tr>").append(
$("<td></td>").html(this.id),
$("<td></td>").html(this.name),
$("<td></td>").html(this.price),
$("<td></td>").html("<input type='button' value='添加'/>
)
)
})
})
</script>
</body>
</html>
总结:
jquery事件绑定
jquery的DOM操作
模板法
作业
1.练习所有课堂案例3遍,结果是要求独立完成:省市级联,购物车。
2.研究可编辑表格和轮播图的实现。
购物车:完成所有功能。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/118156.html