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 ...
随机推荐
- NeuSoft(1)构建嵌入式交叉编译环境
操作系统版本:ubuntu 12.04 内核名称:Linux 内核发行版:3.2.0-generic 内核版本:#50-Ubuntu SMP Mon Sep 12 21:18:14 UTC 2011 ...
- 【iCore3 双核心板】例程二十：LAN_TCPC实验——以太网数据传输
实验指导书及代码包下载: http://pan.baidu.com/s/1pJY5uXH iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...
- Sharepoint 2013 网站集的删除与还原
一.可以通过三种方法删除网站集: 1.打开Sharepoint 2013 管理页面首页 ---> 单击‘应用程序管理(Application Management)’并进入该页面 ---> ...
- ThinkPHP 3.2.3 简单后台模块开发（一）常用配置
一.项目分组 下载解压 ThinkPHP 3.2.3,在默认的应用 Application(./Application) 中,包含一个默认的模块 Home(./Application/Home). 需 ...
- 程序中的@Override是什么意思
@Override是Java5的元数据,自动加上去的一个标志,告诉你说下面这个方法是从父类/接口 继承过来的,需要你重写一次,这样就可以方便你阅读,也不怕会忘记 @Override是伪代码,表示重写( ...
- Redis的Python客户端redis-py
1. 安装 1. redis-py a. 使用easy_install 1 sudo easy_install redis b. 源码安装 1 2 3 git clone https://githu ...
- linux下C++ 插件(plugin)实现技术
应用程序中使用插件技术,有利于日后的版本更新.维护(比如打补丁)和功能扩展,是一种很实用的技术.其最大的特点是更新插件时无需重新编译主程序,对于一个设计良好的应用系统而言,甚至可以做到业务功能的在线升 ...
- css样式管理
css命名 传统网站页面(企业级),大概就是about,product,register等,他们的名字较好区分,他们的样式整体也不会很大,用简单的驼峰法就够了,或者简单的模块. 非传统企业页面,命名驼 ...
- centos7安装出现license information(license not accepted)解决办法
若出现license information(license not accepted),即说明需要同意许可信息,输入1-回车-2-回车-c-回车-c回车,即可解决.
- EBS安装过程报错，oracle.apps.fnd.txk.config.ProcessStateException: FileSys OS COMMAND Failed : Exit=2 See log for details.
日志: Executing command: /test/software/12/startCD/Disk1/rapidwiz/jre/Linux_x64/1.6.0/bin/java -cp /te ...