zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    IDEA启动报错 NoClassDefFound
    IDEA手动导入jar包到maven本地库
    springboot FilterRegistrationBean 拦截器的使用
    springboot多模块controller访问的问题
    @Slf4j -- lombok.extern.slf4j.Slf4j;
    @mapper注解
    lombok
    Lodop打印小票
    spring security登录认证流程解析
    使用selenium实现简单网络爬虫抓取MM图片
  • 原文地址:https://www.cnblogs.com/laopo/p/5494402.html
Copyright © 2011-2022 走看看