Jquery 复习练习（01）
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>
Jquery 复习练习（01）的更多相关文章
- jQuery 复习
jQuery 复习 基础知识 1, window.onload $(function(){}); $(document).ready(function(){}); 只执行函数体重的最后一个方法,事 ...
- ②jquery复习
# jQuery 复习--by 传智前端与移动开发学院 ## 1. jQuery是什么?(了解)+ www.github.com+ jQuery 其实就是一堆的js函数,是普通的js,只不过应用广泛, ...
- JQuery学习笔记--01
JQuery使用的话,必做的一下件事就是下载JQuery库,才可以使用下载地址:http://jquery.com/ 下面就是引用JQuery库了: <script type="tex ...
- Jquery基础知识01
1:$(document).ready()function{}和window.onload()的区别. 1:$(document).ready()function{} 该方法等到Dom结构绘制完毕 ...
- jQuery学习笔记01
1.jQuery介绍 1.1什么是jQuery ? jQuery,顾名思义,也就是JavaScript和查询(Query),它就是辅助JavaScript开发的js类库. 1.2 jQuery核心思想 ...
- 【三石jQuery视频教程】01.图片循环展示
视频地址:http://v.qq.com/page/e/5/t/e0149n5he5t.html 大家好,欢迎来到[三石jQuery视频教程],我是您的老朋友 - 三生石上. 今天,我们要通过基本的H ...
- 【三石jQuery视频教程】01.图片循环展示_再次重发
之前的文章,由于在博文的底部放有微信公众号的缘故,被管理员判定为: 您好,您的这篇博文内容本身没什么问题,但是,在博文底部存在推广信息内容.... 你们也没告知到底是哪条触犯了博客园的规矩,我就把底部 ...
- jquery复习笔记
Jquery基础 让一个按钮灰掉 $("button").("disabled","true"); ance desc选择器(ance代表祖 ...
- JQuery 学习笔记(01)
JQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Oper ...
随机推荐
- zju(8)串口通信实验
1.实验目的 1.学习和掌握linux下串口的操作方法以及应用程序的编写: 二.实验内容 1．编写EduKit-IV实验箱Linux操作系统下串口的应用程序,运行时只需要将串口线的一端连接到开发板的c ...
- window.self ->window.top->window.parent
在应用有frameset或者iframe的页面时,parent是父窗口,top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe),self是当前窗口, opener是用open方法 ...
- grep中正则匹配的使用
如要匹配Computer或computer两个单词,可做如下操作: [Cc]mputer “.”允许匹配ASCII集中任意字符,或为字母,或为数字. 使用\{\}匹配模式结果出现的次数 匹配字母A出现 ...
- 学习quartz定时
学习资料: http://www.cnblogs.com/Rozdy/p/4274356.html http://www.cnblogs.com/Rozdy/p/4284339.html https: ...
- Oracle 参数之_small_table_threshold
SQL> select * from v$version; BANNER ------------------------------------------------------------ ...
- 系统隐式 Intent
1. 找出系统中所有视频 private void choiceFile() { Intent intent = new Intent(Intent.ACTION_PICK, android.prov ...
- jQuery源代码学习之七—队列模块queue
一.jQuery种的队列模块 jQuery的队列模块主要是为动画模块EFFECTS提供支持,(不过到现在为了支持动画队列的inprogress的出入队还是搞不太清楚),单独抽取出一个命名空间是为了使程 ...
- HTML form enctype 属性试验
HTML form enctype http://www.w3.org/TR/html401/interact/forms.html#h-17.13.1%E2%80%8D enctype= conte ...
- 字节流和字符流（PrintStream类和PrintWiter类）
要想输入和输出各种数据类型,通常要打印输入流PrintStream和PrintWriter.其中,PrintStream操作的是字节,PrintWriter操作的是字符. 1:PrintStream类 ...
- DuiLib学习笔记2——写一个简单的程序
我们要独立出来自己创建一个项目,在我们自己的项目上加皮肤这才是初衷.我的新建项目名为:duilibTest 在duilib根目录下面有个 Duilib入门文档.doc 我们就按这个教程开始入门 首先新 ...