11.20课堂笔记、作业以及学习心得
11.20课堂笔记
1、认识jQuery
jQuery 的理念是：write less,do more。
jQuery 极大的简化了 javascript 开发人员遍历HTML文档、操作 DOM 、处理事件、执行动画和开发 Ajax 的操作。
1.1 jQuery优势
- 轻量级。压缩后可以保持在30kb左右。
- 强大的选择器。可以使用CSS1-CSS3几乎所有选择器。
- 出色的DOM操作的封装。
- 可靠的事件处理机制。
- 完善的Ajax。
- 不污染顶级变量。jQuery只建立一个名为jQuery的对象，其所有的函数方法都在这个对象之下。
1.2 使用jQuery
使用时，在页面引入 jquery.js 库文件就可以使用了。
<script type="text/javascript" src="js/jquery.js"></script>（1）简单编写jQuery：
$(document).ready(function(){
alert('Hello jQuery');
});window.onload方法和$(document).ready(）方法的区别。
- window.onload必须等待网页中所有内容加在完毕才能执行。
- $(document).ready(）是网页中所有DOM结构绘制完成后就执行，可能DOM元素关联的东西并没有加载。
（2）链式风格
//等待dom元素加载完毕.
$(document).ready(function(){
$(".level1 > a").click(function(){
$(this).addClass("current") //给当前元素添加"current"样式
.next().show() //下一个元素显示 .parent().siblings().children("a").removeClass("current") //父元素的兄弟元素的子元素<a>移除"current"样式
.next().hide(); //它们的下一个元素隐藏
return false;//事件处理阻止了默认的事件行为并停止了事件通过dom向上冒泡
});
});2、jQuery对象和DOM对象
2.1 jQuery对象
jQuery对象是通过jQuery包装DOM对象后产生的对象。
jQuery对象是jQuery独有的。拥有jQuery里面的方法。
console.log($('#dd'));
console.log(document.getElementById('dd'));需要注意的是：jQuery对象中无法使用DOM对象的任何方法。
DOM对象也不能使用jQuery里面的方法。
2.2 jQuery对象和DOM对象的相互转换
（1）jQuery提供了两种方法将一个jQuery对象转换成DOM对象，即[index]和get(index)。
//第一种方法
console.log($('#dd'));
console.log($('#dd')[0]);
//第二种方法
console.log($('#dd'));
console.log($('#dd').get(0));（2）DOM对象转化成jQuery对象
只需要把DOM对象包装起来，既可以获得一个jQuery对象了。
var dd = document.getElementById('dd');
var $dd = $(dd);
console.log($dd);3、jQuery选择器
3.1 基本选择器
（1）#id
根据给定的ID匹配一个元素
（2）.class
根据给定的类名匹配元素
（3）element
根据给定元素名匹配元素
（4）*
匹配所有元素
（5）selector1,selector2,selector3
将每一个选择器匹配到的元素合并返回
3.2 层次选择器
（1）$(‘a d’)
选取a元素里所有的d后代元素
（2）$(‘p>c’)
选取p元素下的c子元素
（3）$(‘prev+next’)
选取紧邻在prev元素后的next元素
（4）$(‘prev~siblings’)
选取prev元素之后的所有siblings兄弟元素
3.3 过滤选择器
（1）:first
选取第一个元素
（2）:last
选取最后一个元素
（3）:not(selector)
去除所有与指定选择器匹配的元素
（4）:even
选取所有索引是偶数的元素
（5）:odd
选取所有索引是奇数的元素
（6）:containes(text)
选取所有文本内容为’text’的元素
（7）:empty
选取不包含子元素或者文本的空元素
（8）:has
选取含有选择器所匹配的子元素的父元素
（9）[attr]
选取拥有此属性的元素
（10）[attr = value]
选取属性值为value的元素
（11）[attr^=value]
选取属性值以value开头的元素
（12）[attr$=value]
选取属性值以value结束的元素
（13）[attr*=value]
选取属性值含有value的元素
（14）:nth-child(index)
选取父元素下第index个子元素或者奇偶元素
（15）:first-child
选取父元素的第一个子元素
（16）:last-child
选取每个父元素的最后一个子元素
（17）:eq(index)
选择索引值为index的元素
（18）:gt(index)
选择第index个的元素
11.20作业
制作CODING COFFEE模拟秒杀页面
（1）html部分
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title> 限时秒杀 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<link type="text/css" rel="stylesheet" href="../css/seckill.css"></link>
</head>
<body>
<h1 id="title">Coding Coffee限时秒杀活动！</h1>
<h1 id="price">惊喜价：只要9.98，9.98你买不了吃亏买不了上当！9.98一杯蓝山带回家！</h1>
<h1 id="secTime">秒杀倒计时：</h1>
<div id="parent1">
<div class="parent" >
<div class="left" id="left1">
<img src="../img/c2.jpg">
</div>
<div class="right" id="right1">
<h2 class="smallTitle" id="smallTitle1">蓝山咖啡</h2>
<p class="theme">当季新品</p>
<p class="bigTheme">给咖啡多一口热爱！</p>
<p class="smallTheme">
纯蓝山咖啡口感、香味较淡，但喝起来却非常香醇精致；
具有贵族的品味，乃咖啡中之极品。
</p>
<div class="number">
<table>
<tr>
<td>数量：</td>
<td><input id="subtractOne" type="button" value="－" onclick="subtract()"></td>
<td><input id="num" type="text" name="number" value="1"></td>
<td><input type="button" id="addOne" value="＋" onclick="add()"><span style="display:inline-block;margin-left:10px;"></span>杯</td>
<td><span class="empty">库存100杯</span></td>
</tr>
</table>
</div>
<div class="buy-add">
<div class="buy">
<a href="#" id="buy">立即购买</a>
</div>
<div class="addCar">
<a href="../html/shopCar.html" id="addCar">加入购物车</a>
</div>
<div style="clear:both"></div>
</div>
</div>
<div style="clear:both;"></div>
</div>
</div>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/seckill.js"></script>
</body>
</html>
（2）css部分
*{
margin:0;
padding:0;
}
body{
background-color:#fdffff;
}
hr{
width:70%
}
#title{
color:green;
font-size:60px;
text-align:center;
margin:20px;
}
#secTime{
color:red;
font-size:60px;
margin:20px;
}
#price{
color:red;
margin:20px;
text-align:center;
}
.smallTitle{
color:blue;
font-size:35px;
text-align:center;
margin-bottom:20px;
}
.theme{
color:#ff8040;
font-size:15px;
margin-bottom:20px;
}
.bigTheme{
color:#00aeae;
font-size:30px;
margin-bottom:20px;
}
.smallTheme{
font-size:20px;
font-family:"Times New Roman";
margin-bottom:20px;
}
.parent{
width:900px;
height:400px;
/*border:2px solid red;*/
margin:0 auto;
background-color:#fbfffd;
}
.left{
float:left;
width:400px;
height:400px;
}
.right{
float:right;
width:450px;
height:400px;
}
.buy-add{
width:350px;
height:50px;
margin-top:20px;
}
.empty{
display:inline-block;
/*width:80px;*/
margin-left:50px;
}
#num{
width:30px;
}
.buy-add div{
display:block;
}
.buy-add a{
display:inline-block;
line-height:45px;
width:150px;
height:45px;
text-decoration:none;
}
#buy{
background-color:#ffeded;
color:#FF0036
}
#addCar{
background-color:#ff0036;
color:#fff;
}
.buy{
float:left;
border:1px solid #FF0036;
text-align:center;
}
.addCar{
float:right;
border:1px solid #ff0036;
text-align:center;
}（3）js部分
//调用倒计时函数
//countTime();
//循环执行计时函数
//function countTime(){
var myVar=setInterval(seckill,500);
//}
//调用循环判断数量函数
rotationJudgeNum();
//计算倒计时
var tmp=1;
var sectime;
function seckill(){
var newTime=new Date();
var actTime=new Date(2017,10,20,9,41);
secTime=actTime.getTime()-newTime.getTime();
//console.log(secTime);
if(secTime>0){
var sec_day=parseInt(secTime/(24*60*60*1000));
var sec_hour=parseInt(secTime/(60*60*1000)%24);
var sec_min=parseInt(secTime/(60*1000)%60);
var sec_sec=parseInt(secTime/(1000)%60);
//console.log(sec_day);
//console.log(sec_hour);
//console.log(sec_min);
//console.log(sec_sec);
var countDown="秒杀倒计时："+sec_day+"天"+sec_hour+"时"+sec_min+"分"+sec_sec+"秒";
//console.log(countDown);
document.getElementById('secTime').innerHTML=countDown;
}else{
document.getElementById('secTime').innerHTML="秒杀开始";
document.getElementById('secTime').style.cssText="text-align:center;";
//调用循环改变颜色函数
colorRotation();
document.getElementById('buy').href="../html/buy.html";
clearInterval(myVar);
}
}
//给秒杀开始改变颜色
function rotation(){
if(tmp%2==0){
document.getElementById('secTime').style.cssText="color:#EEEE00;text-align:center;";
tmp=tmp+1;
}else{
document.getElementById('secTime').style.cssText="color:red;text-align:center;";
tmp=tmp+1;
}
}
function colorRotation(){
setInterval(rotation,500);
}
//判断输入数量是否符合规范
function judgeNum(){
var str=document.getElementById('num').value;
var num=parseInt(str);
//console.log(num);
//console.log(typeof num);
if(!num){
num=1;
document.getElementById('num').value=num;
}
document.getElementById('num').value=num;
}
//循环执行判断数量函数
function rotationJudgeNum(){
setInterval(judgeNum,200);
}
//购买数量减一
function subtract(){
var str=document.getElementById('num').value;
var num=parseInt(str);
if(num>1){
num=num-1;
}
document.getElementById('num').value=num;
console.log(num);
}
//购买数量加一
function add(){
var str=document.getElementById('num').value;
var num=parseInt(str);
num=num+1;
document.getElementById('num').value=num;
}
11.20学习心得
今天学习了jQuery的一些基础知识，重要的是jQuery的选择器。
扫一扫
3808
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
