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. matlab练习程序（SUSAN检测）

    matlab练习程序(SUSAN检测) SUSAN算子既可以检测角点也可以检测边缘,不过角点似乎比不过harris,边缘似乎比不过Canny.不过思想还是有点意思的. 主要思想就是:首先做一个和原图像 ...

  2. LaTex 基础

    一.文档 \documentclass{article} %book, report, letter 二.宏包 \usepackage{amsmath} 三.正文 \begin{document} \ ...

  3. Leetcode | Linked List Cycle I && II

    一.判断链表是否存在环,办法为: 设置两个指针(fast, slow),初始值都指向头,slow每次前进一步,fast每次前进二步,如果链表存在环,则fast必定先进入环,而slow后进入环,两个指针 ...

  4. shader三种变量类型（uniform，attribute和varying）

    uniform变量在vertex和fragment两者之间声明方式完全一样,则它可以在vertex和fragment共享使用.(相当于一个被vertex和fragment shader共享的全局变量) ...

  5. Memcached 笔记与总结（8）Memcached 的普通哈希分布算法和一致性哈希分布算法命中率对比

    准备工作: ① 配置文件 config.php ② 封装 Memcached 类 hash.class.php,包含普通哈希算法(取模)和一致性哈希算法 ③ 初始化 Memcached 节点信息 in ...

  6. Yii源码阅读笔记（二十九）

    动态模型DynamicModel类,用于实现模型内数据验证: namespace yii\base; use yii\validators\Validator; /** * DynamicModel ...

  7. CSS成长之路----知识点篇

    一,ul--li列表水平排列,切居中对齐 主要是利用Li标签中的display属性.设置为display:inline,使li纵向排布,且能够使用text-align:center;使其居中显示 HT ...

  8. (IOS)BaiduFM 程序分析

    本文主要分享下楼主在学习Swift编程过程中,对GitHub上的一个开源app BaiduFM的研究心得. 项目地址:https://github.com/belm/BaiduFM-Swift 一.项 ...

  9. mac svn 更新到新版本1.8

    1.执行:brew install scons 如果没装brew,先装它.安装命令如下:curl -LsSf http://github.com/mxcl/homebrew/tarball/maste ...

  10. jQuery DOM 与 原生DOM 互相转换的方法

    jQuery 转 js $('#element').get(0); // 等于 document.getElementById('element'); // 输出 <p id="ele ...