2017年6月5号课堂笔记
2017年6月5号 星期一 多云 空气质量：中度污染
内容：jQuery第一节课（代课老师讲课，结合课下看老师博客）：window.onload 与 $(document).ready(）区别，
addClass,同时设置多个属性，设置属性的两种书写方式，紧邻的同辈元素，链式操作,mouseover和mouseout，
onmouseover和onmouseout,显示和隐藏hover（含子元素）,DOM对象和jQuery对象相互转换
代课老师：李老师
一、window.onload 与 $(document).ready(）区别
自己代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>window.onload与$(document).ready()区别</title>
</head>
<body>
<!--
window.onload 与 $(document).ready(）区别
01.简化方式 window.onload 无！ $(document).ready(）===$(function())
02.编写的个数 window.onload只有一个！$(function())可以有多个
03.执行时机：
window.onload，必须等待网页中所有的元素（图片，视频，音频。。）加载完毕后再执行！
$(function())，网页中html结构加载完成后（图片，视频，音频可能并没有加载完成）就会执行！
-->
<script src="js/jquery-1.8.3.js">
</script>
<script type="text/javascript">
window.onload=function(){
alert("hello");
}
onload=function(){
alert("hi");
}
</script>
<script>
$(document).ready(function (standard) {
alert("Hey,buddy!");
});
$(function(easy){
alert("Hey!");
});
</script>
</body>
</html>
二、addClass
自己代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>addClass</title>
</head>
<body>
<ul>
<li class="hello">hello</li>
<li >hello1</li>
<li>hello2</li>
</ul>
<script src="js/jquery-1.8.3.js">
</script>
<script>
$(function(){
$("li").click(function() {
$(".hello").addClass("hi");
})
});
</script>
<style type="text/css">
.hi{
background:blue;
color:white;
}
</style>
</body>
</html>
三、同时设置多个属性
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>同时设置多个属性</title>
</head>
<body>
<ul>
<li>hello</li>
<li id="current">helloworld</li>
</ul>
<script src="js/jquery-1.8.3.js">
</script>
<script type="text/javascript">
$(function(){
$("li").click(function(){
/*$("#current").css("background","red");
$("#current").css({"background":"red"});*/
/*同时设置多个属性 每个属性之间使用，隔开！ 属性与属性值使用:分割*/
$("#current").css({"background":"red","font-size":24});
})
})
</script>
</body>
</html>
四、设置属性的两种书写方式
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>设置属性的两种书写方式</title>
</head>
<body>
<h1>你是人间的四月天</h1>
<p style="display:none">
你说你是人间的四月天<br/>
笑响亮了四面风<br/>
轻灵在春的光艳中交舞着变<br/>
。。。。。。<br/>
<a href="#">点击查看全部</a>
<img src="images/for%20your%20natural%20beauty.jpg" alt=""/>
</p>
</body>
<script src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
$("h1").click(function(){
$("h1").css("color","pink");
$("p").css("font-size","12px");
$("p").css("line-height","35px");//第一种书写格式
$("p").css({"display":"block"});//第二种书写格式
});
});
</script>
</html>
五、紧邻的同辈元素
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>紧邻的同辈元素</title>
</head>
<body>
<h2>什么是受益人？</h2>
<p>
<strong>解答：</strong>
（Beneficiary）受益人是指人身保险合同中由被保险人或者投保人指定的享有保险金请求权的人，投保人、被保险人可以为受益人。
如果投保人或被保险人未指定受益人，则他的法定继承人即为受益人。
</p>
<script src="js/jquery-1.8.3.js">
</script>
<script type="text/javascript">
$(function(){
$("h2").click(function(){
$("h2").css("background","blue");
$("h2").next().css("display","none");//兄弟元素next()
})
})
</script>
</body>
</html>
六、链式操作
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>链式操作</title>
<style type="text/css">
div{
display: none; /*默认不显示*/
}
</style>
<script src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
/*$ 等同于 jQuery*/
$(function(){
$("h1").click(function () {
/*给h1增加背景色和字体大小 并且给其后面的兄弟节点增加样式*/
$(this).css({"background":"orange","font-size":16}).next()
.css({"background":"pink","font-size":30,"display":"block"})
})
})
</script>
</head>
<body>
<h1>什么是学习？</h1>
<div>
学，并且习以为常！
</div>
</body>
</html>
七、mouseover和mouseout
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>mouseover和mouseout</title>
</head>
<body>
<ul>
<li>luffy</li>
<li>zolo</li>
<li>sanji</li>
</ul>
<script src="js/jquery-1.8.3.js">
</script>
<script type="text/javascript">
/*
mouseover与mouseenter
不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。
只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。
mouseout与mouseleave
不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
*/
$(function(){
$("li").mouseover(function(){
$(this).css("background","pink")
})
$("li").mouseout(function(){
$(this).css("background","")
})
})
</script>
</body>
</html>
八、onmouseover和onmouseout
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>onmouseover和onmouseout</title>
</head>
<body>
<ul>
<li>luffy</li>
<li>zolo</li>
<li>sanji</li>
</ul>
<script src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
var lis=document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
lis[i].onmousemove=function(){
this.style.background="#c3f3c3";
}
lis[i].onmouseout=function(){
this.style.background="";
}
}
})
</script>
</body>
</html>
九、显示和隐藏hover（含子元素）
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>显示和隐藏hover（含子元素）</title>
<style type="text/css">
/*默认让li中的div隐藏*/
div{
display: none;
}
/*去掉li前面的默认标签*/
li{
list-style: none;
}
</style>
<script src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
/*当鼠标移动到li上时，div中的图片显示，li背景色改变
* 鼠标离开li时，图片隐藏*/
$("li").hover((function(){//鼠标悬停事件
$(this).css("background","orange").children("div").show();//children()子元素
}),
(function() {
$(this).css("background","white").children("div").hide();
}))
})
</script>
</head>
<body>
<ul>
<li>
<a href="#">帅气的香吉士</a>
<div><img src="images/sanji06.jpg"/></div>
</li>
<li>
<a href="#">帅气的香吉士2</a>
<div><img src="images/sanji06.jpg"/></div>
</li>
<li>
<a href="#">帅气的香吉士3</a>
<div><img src="images/sanji06.jpg"/></div>
</li>
</ul>
</body>
</html>
十、DOM对象和jQuery对象相互转换
老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>DOM对象和jQuery对象相互转换</title>
<script src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function() {
$("button").click(function(){
var $div= $("div"); //jquery对象
//转换成dom对象 01.【index】 $div[0].innerHTML="网页";
/*$div[0].innerHTML="网页";*/
//转换成dom对象 02.get(index) $div.get(1).innerHTML="网页";
/*$div.get(1).innerHTML="网页";*/
var first= document.getElementById("first");//dom对象
//转换成jquery对象
$(first).html("元素");
})
})
</script>
</head>
<body>
<button>点击按钮</button>
<div id="first">网页元素1</div>
<div>网页元素2</div>
</body>
</html>
代课老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>DOM对象和jQuery对象相互转换</title>
<script src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
//jquery和dom对象转换
//方式一
$(function(){
var inputs = document.getElementById("checkbox");
inputs.onclick=function(){ //dom 对象.onclick=function(){ }
if(inputs.checked){
alert('ok!!!!!');
}
};
});
//方式二
/*
$(document).ready(function(){
$("input").click(function(){ //jquery对象click(function(){ })
alert("hahahah");
})
})*/
window.onload = function(){
var Oinput = document.getElementById("checkbox");
Oinput.onclick = function(){
if(Oinput.checked){
alert('sucess!');
}
};
};
</script>
</head>
<body>
<input type="checkbox" id='checkbox' />接受服务条款
</body>
</html>
十一、作业
1、预习jQuery选择器
2、小组讨论：抽时间复习U1面向对象部分，为U2后半部分打基础。
十二、老师辛苦了！
