Jquery 复习练习（01）

最新推荐文章于 2025-09-08 17:59:21 发布

转载最新推荐文章于 2025-09-08 17:59:21 发布 · 82 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/laopo/p/5494402.html

文章标签：

#javascript #xhtml #ViewUI

本文通过多个实例对比展示了JQuery与原生JS在DOM操作、事件绑定等方面的使用区别及技巧，强调了两者对象的不同之处，并提供了JQuery的高级用法示例。

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>