目录
WebBasic 网页编程基础
(学习如何开发页面,安装HBuilder)
JQuery框架:
（简化原生JavaScript）
作用:给页面添加动态效果(和js一样),目的是为了提高原生JavaScript代码的开发效率
- jQuery就是一个通过js语言所以写的框架
- 由于jQuery框架就是js语言所写,引入框架和引入普通的js文件一样
- js对象的方法和jq对象的方法不能混着调用,各自调用各自独有的方法和属性
JavaScript对象和JQuery对象互相转换
- JavaScript转JQuery: var jq = $(js);
-JQuery转JavaScript: var js = jq[0]; jq本质上就是一个数组里面装的是js对象
JQuery中的选择器
1. 基础选择器 写法和css一样
- 标签名选择器 $("div")
- id选择器 $("#id")
- class选择器 $(".class")
- 分组选择器 $("div,#id,.class")
- 任意元素选择器 $("*")
2. 层级选择器
- $("div span") 匹配div里面所有的span(子孙后代选择器)
- $("div>span") 匹配div里面的span子元素(子元素选择器)
- $("div+span") 匹配div的弟弟span
- $("div~span") 匹配div的弟弟们span
- 层级相关的方法:
1. $("#abc").prev("span") 匹配id为abc元素的哥哥元素
2. $("#abc").prevAll("div") 匹配id为abc元素的哥哥们元素
3. $("#abc").next("div") 匹配id为abc元素的弟弟元素
4. $("#abc").nextAll("div") 匹配id为abc元素的弟弟们元素
5. $("#abc").siblings("div") 匹配id为abc元素的兄弟元素
6. $("#abc").parent() 匹配id为abc元素的父元素
7. $("#abc").children("div") 匹配id为abc元素的子元素们
3. 过滤选择器
- $("div:first") 匹配第一个div
- $("div:last") 匹配最后一个div
- $("div:eq(n)") 匹配下标为n的div n从0开始
- $("div:lt(n)") 匹配下标小于n的div
- $("div:gt(n)") 匹配下标大于n的div
- $("div:even") 匹配下标为偶数的div
- $("div:odd") 匹配下标为奇数的div
- $("div:not(.abc)") 匹配class值不等于abc的div
省市联动练习:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<select >
<option>请选择</option>
<option value="0">北京</option>
<option value="1">河北</option>
<option value="2">山东</option>
</select>
<select >
<option>请选择</option>
</select>
<script src="../js/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//通过二维数组保存城市信息
var arr = [["朝阳","海淀","大兴"],
["秦皇岛","唐山","石家庄"],["青岛","烟台","淄博"]];
//给第一个下拉选添加值改变事件
$("select:first").change(function(){
//把之前选择的内容覆盖掉 起到清空的作用
$("select:last").html("<option>请选择</option>");
//this代表触发事件的元素对象
//也就是第一个下拉选
var cities = arr[this.value];
//alert(cities);
//遍历数组
for (var i = 0; i < cities.length; i++) {
//得到遍历的每一个城市名
var name = cities[i];
//创建option
var o = $("<option></option>");
o.text(name);
//把创建的option添加到第二个下拉选里面
$("select:last").append(o);
}
})
</script>
</body>
</html>
4. 内容选择器
- $("div:has(span)") 匹配包含span子元素的div
<div>
<span></span>
</div>
- $("div:empty") 匹配空的div
- $("div:parent") 匹配非空的div
- $("div:contains('xxx')") 匹配包含xxx文本的div
员工列表练习:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" placeholder="姓名" />
<input type="text" placeholder="工资" />
<input type="text" placeholder="工作" />
<input type="button" value="添加"/>
<hr >
<table border="1" cellspacing="0" cellpadding="0">
<caption>员工列表</caption>
<tr>
<th>姓名</th><th>工资</th>
<th>工作</th><th>操作</th>
</tr>
</table>
<script src="../js/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//给按钮加点击事件
$("input:last").click(function(){
//创建tr
var tr = $("<tr></tr>");
//创建4个td
var nametd = $("<td></td>");
var saltd = $("<td></td>");
var jobtd = $("<td></td>");
var deltd =
$("<td><input type='button' value='删除'></td>");
//给删除按钮添加点击事件
deltd.children().click(function(){
//删除tr
tr.remove();
})
//把文本框里面的内容放进td
nametd.text($("input:eq(0)").val());
saltd.text($("input:eq(1)").val());
jobtd.text($("input:eq(2)").val());
//把td放到tr里面
tr.append(nametd);
tr.append(saltd);
tr.append(jobtd);
tr.append(deltd);
//把tr放到table里面
$("table").append(tr);
})
</script>
</body>
</html>
<div>xxx</div>
5. 可见选择器
- $("div:visible") 匹配所有显示的div
- $("div:hidden") 匹配所有隐藏的div
- 隐藏显示相关方法:
1. $("#abc").show(); 让隐藏的元素显示
2. $("#abc").hide(); 让显示的元素隐藏
3. $("#abc").toggle(); 让元素显示隐藏切换
6. 属性选择器
- $("div[id]") 匹配包含id属性的div
- $("div[属性名='xxx']") 匹配指定属性名=xxx的div
- $("div[属性名!='xxx']") 匹配指定属性名!=xxx的div
7. 子元素选择器
- $("div:first-child") 匹配是div 并且是第一个 子元素
- $("div:last-child") 匹配是div 并且是最后一个 子元素
- $("div:nth-child(n)") 匹配是div 并且是第n个 子元素 n是从1开始
8. 表单选择器
- $(":input") 匹配表单中所有的控件
- $(":password") 匹配密码框
- $(":radio") 匹配单选
- $(":checkbox") 匹配多选
- $(":checked") 匹配选中的单选 多选和下拉选
- $("input:checked") 匹配选中的单选和多选
- $(":selected") 匹配选中的下拉选
购物车练习:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h3>购物车</h3>
<input type="checkbox" value="5000" />华为手机5000元<br>
<input type="checkbox" value="2000" />小米电视2000元<br>
<input type="checkbox" value="3000" />苹果手机3000元<br>
<input type="checkbox" value="20" />双飞燕鼠标20元<br>
<input type="checkbox" id="all" />全选<br>
<p>总价:0</p>
<script src="../js/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//给所有多选框添加点击事件
$("input").click(function(){
//判断出点击的是全选
//this代表触发事件的元素对象 this是js对象
if(this.id=="all"){
//alert("是全选");
//让其它几个多选框和全选状态一致
var status = $("#all").attr("checked");
$("input:not(#all)").attr("checked",status);
}
//计算总价
var total=0;
//需要得到所有商品多选框遍历
$("input:not(#all)").each(function(){
//判断当前商品是否被选中
//this代表遍历的多选框 this为js对象
if($(this).attr("checked")){
//因为this.value得到的类型是字符串
//需要转换类型
total+=parseInt(this.value);
}
});
//把总价显示到p标签里面
$("p").text("总价:"+total);
});
</script>
</body>
</html>
修改页面元素相关
1. 创建及添加元素
- 创建: var d = $("<div id='xxx'>abc</div>");
- 添加到某个元素里面的最后面: 元素对象.append(新元素);
- 添加到某个元素里面的最前面: 元素对象.prepend(新元素);
- 插入到某个元素的前面: 元素对象.before(新元素);
- 插入到某个元素的后面: 元素对象.after(新元素);
2. 删除元素
- 元素对象.remove();
3. 获取和修改元素的文本内容
- 元素对象.text("xxx") 修改 等效 innerText="xxx";
- 元素对象.text() 获取 等效 innerText
4. 获取和修改元素的html内容
- 元素对象.html("<h1>xxx</h1>") 等效 innerHTML="<h1>xxx</h1>";
- 元素对象.html() 获取 等效 innerHTML
5. 获取或修改元素的css样式
- 元素对象.css("样式名","值") 修改
- 元素对象.css("样式名") 获取
- 样式批量赋值: 元素对象.css({"color":"red","background-color":"blue"})
6. 获取或修改元素的属性 attribute属性
- 元素对象.attr("class","xxx"); 修改
- 元素对象.attr("class") 获取
页面失去焦点事件
- 当页面从浏览状态进入到其它页面的时候属于失去焦点事件
- onblur = function(){}
页面获取焦点事件
- 每次从浏览其它页面回到此页面的时候会触发获取焦点事件
- onfocus = function(){}
僵尸练习:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
background-image: url(bg1.jpg);
overflow: hidden;
}
img{
width: 50px;
height: 50px;
position: absolute;
}
#h3_s{
float: left;
}
#h3_f{
float: right;
}
</style>
</head>
<body>
<h3 id="h3_s">干掉数量:0</h3>
<h3 id="h3_f">跑掉数量:0</h3>
<script src="../js/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//声明记录成功和失败的变量
var sCount = 0;
var fCount = 0;
//获取窗口的宽高
var w = $(window).width();
var h = $(window).height();
//把得到的宽高给到body 200px 100px
$("body").css("background-size",w+"px "+h+"px");
//窗口尺寸改变事件
onresize = function(){
//获取窗口的宽高
w = $(window).width();
h = $(window).height();
//把得到的宽高给到body 200px 100px
$("body").css("background-size",w+"px "+h+"px");
}
//开启添加僵尸的定时器
var timer = setInterval(function(){
// 0 1 2 3
//sCount 0-19 0 20-39 1 40-59 2 60.... 3
//每干掉20个僵尸就换一种僵尸
var type = parseInt(sCount/20);
//如果大于3则等于3 因为图片只有0-3
if(type>3){
type=3;
}
var img = $("<img src='zomb"+type+".png'>");
//给僵尸图片添加血量属性
img.attr("hp",type+1);
$("body").append(img);
//控制僵尸的位置
var left = w;
//得到僵尸图片距离屏幕顶部的随机数 取值范围=窗口高-僵尸高
var top = parseInt(Math.random()*(h-50));
//把位置信息赋值给僵尸图片
img.css({"left":left+"px","top":top+"px"});
//给僵尸添加鼠标移入事件
img.mouseover(function(){
//取出僵尸血量
var hp = img.attr("hp");
hp--;
//把新的血量给回僵尸图片
img.attr("hp",hp);
//判断僵尸是否是没有血了
if(hp<=0){
img.remove();
//成功数量+1
sCount++;
$("#h3_s").text("干掉数量:"+sCount);
}
});
},500);
//开启移动僵尸的定时器,实现代码和移动轮播图图片一样
setInterval(function(){
//得到所有僵尸图片并遍历
$("img").each(function(){
//得到僵尸图片当前的left值
var left = parseInt($(this).css("left"));
left-=2;
//把得到的新的left给到僵尸
$(this).css("left",left+"px");
//判断僵尸是否到了屏幕左侧
if(left<=50){
//删除僵尸图片
$(this).remove();
//失败数量+1 并且显示
fCount++;
$("#h3_f").text("跑掉数量:"+fCount);
//添加结束条件
if(fCount>=10){
//alert("游戏结束!");
if(confirm("游戏结束!重新开始吗?")){
//刷新页面
location.reload();
}
//删除所有僵尸图片
$("img").remove();
//停止添加僵尸的定时器
clearInterval(timer);
}
}
})
},10);
</script>
</body>
</html>
hover事件
- 是将鼠标移入和移出事件合并到了一起
事件模拟
- 可以通过代码模拟事件触发
- 元素对象.trigger("事件名称")
动画相关
- 元素对象.hide(时间,方法) 隐藏
- 元素对象.show(时间,方法) 显示
- 元素对象.fadeOut(时间,方法) 淡出
- 元素对象.fadeIn(时间,方法) 淡入
- 元素对象.slideUp(时间,方法) 上滑
- 元素对象.slideDown(时间,方法) 下滑
- 元素对象.animate(样式代码,时间) 自定义
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
