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）的更多相关文章

  1. jQuery 复习

    jQuery 复习 基础知识 1, window.onload $(function(){});   $(document).ready(function(){}); 只执行函数体重的最后一个方法,事 ...

  2. ②jquery复习

    # jQuery 复习--by 传智前端与移动开发学院 ## 1. jQuery是什么?(了解)+ www.github.com+ jQuery 其实就是一堆的js函数,是普通的js,只不过应用广泛, ...

  3. JQuery学习笔记--01

    JQuery使用的话,必做的一下件事就是下载JQuery库,才可以使用下载地址:http://jquery.com/ 下面就是引用JQuery库了: <script type="tex ...

  4. Jquery基础知识01

    1:$(document).ready()function{}和window.onload()的区别.   1:$(document).ready()function{} 该方法等到Dom结构绘制完毕 ...

  5. jQuery学习笔记01

    1.jQuery介绍 1.1什么是jQuery ? jQuery,顾名思义,也就是JavaScript和查询(Query),它就是辅助JavaScript开发的js类库. 1.2 jQuery核心思想 ...

  6. 【三石jQuery视频教程】01.图片循环展示

    视频地址:http://v.qq.com/page/e/5/t/e0149n5he5t.html 大家好,欢迎来到[三石jQuery视频教程],我是您的老朋友 - 三生石上. 今天,我们要通过基本的H ...

  7. 【三石jQuery视频教程】01.图片循环展示_再次重发

    之前的文章,由于在博文的底部放有微信公众号的缘故,被管理员判定为: 您好,您的这篇博文内容本身没什么问题,但是,在博文底部存在推广信息内容.... 你们也没告知到底是哪条触犯了博客园的规矩,我就把底部 ...

  8. jquery复习笔记

    Jquery基础 让一个按钮灰掉 $("button").("disabled","true"); ance desc选择器(ance代表祖 ...

  9. JQuery 学习笔记(01)

    JQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Oper ...

随机推荐

  1. websocket总结

    一.WebSocket简介 WebSocket  protocol是HTML5一种新的协议,WebSocket 是目前唯一真正实现全双工通信的服务器向客户端推送的互联网技术.WebSocket的出现使 ...

  2. 下载包含src，tgz，zip的文件

    下载哪一个文件? 含src的是源码文件,含tgz和zip的分别是linux和windows系统下jar包(java文件包) asc,md5,sha1是三种加密文件,可用于判断文件是否被修改. Ente ...

  3. Unity学习疑问记录之新GUI

    学习Unity 4.6新GUI系统 http://segmentfault.com/a/1190000000642686

  4. C#编码标准

    一.命名约定 1.PascalCasting PascalCasing 每一个单词第一个字母大写,其余字母均小写.例如:FileAccess,ArraySegment等. 除了参数.变量.常量外,所有 ...

  5. 【iCore3 双核心板_FPGA】例程四：Tcl脚本实验——配置引脚

    实验指导书及代码包下载: http://pan.baidu.com/s/1pJZDz0v iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...

  6. linux 中的斜杠 ‘/’ ‘\’ 的区别 - 服务器是LINUX的注意了， 和windows 的不一样哦！

    ubuntu@ubuntu:~$ vi \> ubuntu@ubuntu:~$ 稍微思考了一下就明白了,不是打不开,问题出在这个文件名" \ "上面. 反斜线符号" ...

  7. NumberPicker设置宽度，设置文字颜色

    修改宽度 wheel = (NumberPicker) findViewById(R.id.info_wheel_province); wheel.setLayoutParams(new Linear ...

  8. Hibernate n+1问题

    转自: http://www.blogjava.net/RoyPayne/archive/2012/01/30/369017.htmlhttp://msi110.iteye.com/blog/7101 ...

  9. 【Unity3D基础】让物体动起来①--UGUI鼠标点击移动

    背景 首先还是先声明自己是比较笨的一个人,总是找不到高效的学习方法,目前自己学习Unity3D的方式主要是两种,一种是直接看高质量的源码,另一种是光看不行还要自己动手,自己写一些有代表性的小程序,这也 ...

  10. linux--------wdcp中的各种坑。

    1.刚买的空间客服给安装了wdcplinux,结果上去一看PHP是5.2版本的,这不是搞笑嘛.然后就有了下面的升级: 复制这条命令回车然后敲Y就可以: wget http://soft.itbulu. ...