2017年6月14号 星期三 晴 空气质量：中度污染~良
内容：JavaScript：style
jQuery：hover,toggle,text和html,focus和blur,节点的操作
代课老师：李老师
备注：今天的课程讲的有点儿缺乏逻辑性，所以尽量记录下来吧~
一、JavaScript的style
老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>style样式</title>
<style type="text/css">
.title{
border:1px solid red;
200px;
height:200px;
background-color: yellowgreen
}
</style>
<script type="text/javascript">
window.onload=function(){
var dom= document.getElementById("text");
/*
alert(1);
//改变
dom.style.backgroundColor="pink";
dom.style.marginLeft="200px";
dom.style.display="none";*/
dom.className="title";
}
</script>
</head>
<body>
</body>
<div id="text" style="border: 1px solid red"></div>
</html>
二、hover
老师代码：
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function() {
//鼠标的移入移出 hover
$("input").hover(function(){
alert("mouseover");
},function(){
alert("mouseout");
})
});
</script>
</head>
<body>
<input type="button" value="hover">
</body>
</html>
三、toggle
老师代码：
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function() {
//事件循环执行 1.9之后 废除的属性
$("input").toggle(function(){
$("body").css("background","green");},
function(){
$("body").css("background","red");},
function(){
$("body").css("background","pink");
})
});
</script>
</head>
<body>
<input type="button" value="toggle">
</body>
</html>
四、text和html
老师代码：
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function() {
$("[type='button']").click(function(){
// $("div").html("<h1>小猫咪消失了...</h1>"); innerHtml
$("div").text("<h1>小猫咪消失了...</h1>"); //innerText
})
});
</script>
</head>
<body>
<button type="button">点击更换</button>
<div><img src="images/cat.jpg"></img></div>
</body>
</html>
五、focus和blur
老师代码：
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function() {
//获取焦点
$("input").focus(function(){
if($(this).val()=="请输入用户名"){
$(this).val("已经输入");
}
})
//失去焦点
$("input").blur(function(){
if($(this).val()=="已经输入"){
$(this).val("请输入用户名");
}
})
});
</script>
</head>
<body>
用户名：<input type="text" value="请输入用户名">
</body>
</html>
六、节点的操作
老师代码：
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function() {
//创建子节点
var $newNode=$("<li>节点6</li>");
//把节点后置到ul中
//$("ul").append($newNode); $newNode.appendTo($("ul"));
//把节点前置到ul中
//$("ul").prepend($newNode); $newNode.prependTo($("ul"));
//创建同辈元素节点
var $newUl=$("<ul style='list-style:none'><li>同辈的元素</li></ul>");
//后置同辈节点
//$("ul").after($newUl); $newUl.insertAfter($("ul"));
//前置同辈节点
// $("ul").before($newUl); $newUl.insertBefore($("ul"));
//替换指定的节点 节点4 替换了 节点2 $("li:eq(1)").replaceWith($("li:eq(3)"));
//替换所有的 节点2 替换了 节点4 $("li:eq(1)").replaceAll($("li:eq(3)"));
$("li:eq(3)").click(function(){ //复制 节点的同时 也绑定了 对应的事件
alert("haha");
})
$("li:eq(3)").clone(true).appendTo("ul");
});
</script>
</head>
<body>
<ul style="list-style:none">
<li>节点1</li>
<li>节点2</li>
<li>节点3</li>
<li>节点4</li>
<li>节点5</li>
</ul>
</body>
</html>
七、老师辛苦了！
