Jquery 复习练习
window.onload = function() {} == $(function() {});
千万注意：js对象和jq对象的区别，这也是常常犯的错误
js对象举例：
window.onload=function()
{
var a = document.getElementById("shang");
a.style.backgroundColor = "#F00";
}
jq对象举例：
$(function()
{
var a=$("#shang");
a.css("background-color","#F00");
});
<script type="text/javascript">
//js写法
window.onload = function () {
var a = document.getElementsByTagName("input");
a[0].onclick = function() {
var s = document.getElementById('shang');
s.style.backgroundColor="red";
}
}
//jq写法
$(function () {
var a = $("input");
a.click(function () {
var s = $("shang");
s.css("background-color", "red");
}); }); </script>
<body>
<input type="button" value="dianji"/>
<div id="shang">dddds</div>
</body>
css 复杂选择
<script type="text/javascript">
$(function() {
$("input").click(function() {
$("#shang ul li span").css("background-color", "red");
});
}); </script>
</head>
<body>
<input type="button" value="dianji"/>
<div id="shang">dddds
<ul>
<li>fasl</li>
<li> sssss<span> span hong</span></li>
</ul>
</div>
</body>
<input id="zhang" type="button" value="zhang" /><br />
(function(w) { })(window);
(function(w) {
var getE= function(id) {
return document.getElementById(id);
}
w.getE = getE;
})(window);
var a = getE("zhang").value;
$("#zhang").bind("click", function(event) { alert(a);});
</script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-1.8.3.js"></script>
</head>
<body>
<div id="divMsg">Hello World!</div>
<input id="btnShow" type="button" value="显示"/>
<input id="btnHide" type="button" value="隐藏"/><br/>
<input id="btnChange" type="button" value="修改内容为 Hello World, too!"/>
<div id="testDiv">测试图层</div>
<input id="btnzhaoren" type="button" value="zhaoren"/><br/>
<input id="zhang" type="button" value="zhang" /><br />
<script type="text/javascript">
$("#btnShow").bind("click", function (event) { $("#divMsg").show(); });
$("#btnHide").bind("click", function (event) { $("#divMsg").hide(); });
$("#btnChange").bind("click", function (event) { $("#divMsg").html("我要杀了你！") });
$("#btnHide").bind("click", function (event) { $("#testDiv").each(function () { $("#testDiv").html("谁是小三") }); }); //$("#testDiv").each(function () { alert(this); }); (function(w) { })(window);
(function (w)
{
var tools={
getE: function (id) { return document.getElementById(id); },
iSIE: function(className) {}
} w.t = tools; })(window); var a = t.getE("zhang").value; $("#zhang").bind("click", function(event) { alert(a);});
</script>
</body> </html>
js高级用法
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<!--<script src="jquery-1.8.3.js"></script>-->
<script src="jquery-1.4.2.js"></script> <script type="text/javascript">
window.onload = function () {
d.tab("shang","xia");
}
</script>
<style type="text/css">
*{ margin: 0px;padding: 0px;}
#shang{ width: 800px;height: 30px;}
#shang ul li{ width: 100px;background-color: aquamarine;float: left;margin-left: 1px;}
#xia{ width: 800px;height: 400px;}
#xia ul li{ width: 800px;height: 400px;display:none;background-color: #960;}
</style>
</head>
<body>
<div id="shang">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div id="xia">
<ul>
<li style="display: block">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div> <script type="text/javascript">
(function (w) {
var tools =
{
getE: function (id) { return document.getElementById(id); },
getClass: function (classname) { return document.getElementsByClassName(classname); }
}
var dong =
{
tab: function (id1, id2) {
var s = tools.getE(id1);
var x = tools.getE(id2);
var sarr = s.getElementsByTagName("li");
var xarr = x.getElementsByTagName("li"); for (var i = 0; i < sarr.length; i++)
{
sarr[i].onclick = (function (num)
{ return function()
{ for (var b = 0; b < xarr.length; b++)
{ xarr[b].style.display = 'none';
} xarr[num].style.display = "block";
}
})(i);
}
},
leftRight: function () { }
}
w.t = tools;
w.d = dong; })(window); </script> </body>
</html>