在公司培训上课笔记,有点乱
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jquery-1.11.3.js"></script>
<script type="text/javascript">
function changeColor() {
debugger;
var input = document.getElementById("testInput").value;
//document.getElementById("testInput")返回的是原生的dom对象
//$("#testdiv")取得的是一个数组,数组内每个元素都是一个dom对象
var div = document.getElementById("testdiv");
//$(".reddiv").html("<span>1234654</span>");
//$(".reddiv").html()html里面没有参数即为取值.获得第0号节点的值
div.innerHTML = input;
//$("#testdiv").html(input);
//$(".reddiv");
//$("button");
//$("table tr #testtd");td下面可以不是testtd,无论包多少层,只要包含testtd即可
//$("table tr>#testtd");子属子节点td下面必须是testtd
//$(".reddiv").addClass("reddiv2")
//$(".reddiv").removeClass("reddiv2")
//$(".reddiv").hasClass("reddiv2")判断是否含有reddiv2样式,返回boolean
if (div.style.color == "blue") {
div.style.color = "red";
} else {
div.style.color = "blue";
}
}
$(function(){//当页面加载完加载该函数
$("#btn").click(function(){
alert("当页面加载完加载该函数");
});
})
</script>
<style>
<!-- css标签选择器:id选择器,标签选择器,样式选择器,各种选择器的组合 写在style属性里的样式优先级最高-->
.reddiv {
color: red;
text-decoration: underline;
}
#testdiv {
}
button {
}
button[type="text"] {
}
table tr #testtd {
}
</style>
</head>
<body>
<button οnclick="changeColor()">changeColor</button>
<button id="btn">jquery</button>
<input type="text" id="testInput" />
<div class="reddiv" id="testdiv">OK</div>
<a href="http://www.baidu.com" target="blank">打开百度</a>
<!-- encttype="multipart/form-data"传文件的时候form必须定义这个属性 -->
<form action="1.html" id="form" method="post">
姓名<input name="name" /> <br /> 昵称<input name="nick" />
</form>
<button οnclick="document.getElementById('form').submit()">提交</button>
<hr />
<iframe src="http://www.baidu.com" width="100%" height="300px"></iframe>
<ol>
<li>大连</li>
<li>沈阳</li>
<li>北京</li>
</ol>
<p>段落标记</p>
<span style="display: inline-block">span标签</span>
<span style="display: inline-block">横向显示</span>
<table>
<thead>
<tr align="center">
<th>标签</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr align="left">
<td width="100" valign="bottom"><a>< acronym></a></td>
<td valign="bottom">定义只取首字母的缩写。</td>
</tr>
</tbody>
</table>
<!-- #ff00000三原色(红绿蓝),0代表没有,f表示最大 -->
<div id ="animdiv" style="height: 100px; position:fixed; top:10px; left:10px; background-color: #ff0000; font: 20px hold; color: blue; text-align: center; text-decoration: line-through; line-height: 100px;">时代在变化</div>
<!-- background属性可以换种写法,减少代码量,中间加空格 background: url(image/shamo.png) no-repeat center-->
<div
style="height: 100px; background-image: url(image/shamo.png); background-repeat: no-repeat; background-position: center;"></div>
<!-- 隐藏的两种方式display:none;(位置空间消失) visibility:hidden;(所占据的位置空间依旧存在) -->
<!-- position:fixed div块不会随着滚动条而滚动 -->
<div id="floatDiv">
<div
style="width: 100px; height: 50px; border: 1px solid blue; float: left;">1</div>
<div
style="width: 100px; height: 50px; border: 1px solid blue; float: left;">2</div>
<div
style="width: 100px; height: 50px; border: 1px solid blue; float: left;">3</div>
<div
style="width: 100px; height: 50px; border: 1px solid blue; float: left;">4</div>
<div
style="width: 100px; height: 50px; border: 1px solid blue; float: left;">5</div>
</div>
<script type="text/javascript">
//confirm("确定删除么");
var f = {
k1 : "a",
k2 : "b"
};
var aa = f.k2;//f["k2"]
//alert(aa);
function fun() {
var d = new Date();
alert("" + d.getFullYear() + (d.getMonth() + 1) + d.getDate());
};
//fun();
//alert(!!0);//输出false
function testTrue(a) {
if (a === true) {//=== 为强等,不仅数值相等,类型也要相等
alert("true");
}
};
//F封闭自定义函数,没有方法名,别人都不可以进行调用
//既定义一个函数又调用一个函数.1 为调用函数时的参数.
//可以调用别的函数,但是别人不能调用它
(function(a) {
//alert(a);
})(1);
var aaa = 0;
function xxx(){
var aaa = 1;
alert(window["aaa"]);//取全局的aaa变量值
aaa = 3;//如果这里声明变量没有用var,那么aaa则为全局变量
};
function addDiv(){
//var form = document.getElementById("form");
//var action = form.action;
//form.action = "2.html";
//form.className = "testdiv";//修改样式特殊,是className
var div = document.getElementById("floatDiv");
var inner = document.createElement("div");
inner.innerHTML = "6";
inner.style.width = "100px";
inner.style.height = "50px";
inner.style.border = "1px solid blue";
//inner.style.borderTop = "1px solid blue";//效果等同设置border-top
inner.style.styleFloat = "left";
//inner.style.cssFloat = "left";
div.appendChild(inner);
for(var i=0;i<div.childNodes.length;i++){
//alert(div.childNodes[i].innerHTML);
}
<!-- jquery实现 -->
//var div = $("#floatDiv");
//var inner = $("<div>6</div>");
//inner.css({
//width:"200px",
//height:"50px",
//"float":"left",
//border:"1px solid blue"
//});
//div.append(inner);
<!-- jquery实现 -->
<!-- jquery赋值获得的是jquery对象,但是取值获得的就不是jquery对象 -->
//var div = $("#floatDiv");
//$("<div>6</div>").css({
//width:"200px",
//height:"50px",
//"float":"left",
//border:"1px solid blue"
//}).appendTo( $("#floatDiv"));
$("#floatDiv div").each(function(i,n){//i为循环个数,n为dom对象
//n转换成jquery对象 $(n)
alert(n.innerHTML);
//alert($(n).html());
});
}
addDiv();
function anim(){
var div = document.getElementById("animdiv");
var curleft = parseInt(div.style.left);
curleft = curleft + 100;
div.style.left = curleft + "px";
<!-- jquery实现 -->
//var div = $("#animdiv");
//var curleft = parseInt(div.css.("left"));
//div.css("left",curleft + 2 + "px")
}
var inter = setInterval(anim,100)//每隔10毫秒执行该方法,执行多次
setTimeout(function(){
clearInterval(inter);//停止上述方法的执行
},1200)//1200毫秒之后执行该方法,只执行一次
</script>
</body>
</html>