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）

相关文章