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

jQuery 复习
jQuery 复习基础知识 1, window.onload $(function(){}); $(document).ready(function(){}); 只执行函数体重的最后一个方法,事 ...
②jquery复习
# jQuery 复习--by 传智前端与移动开发学院 ## 1. jQuery是什么?(了解)+ www.github.com+ jQuery 其实就是一堆的js函数,是普通的js,只不过应用广泛, ...
JQuery学习笔记--01
JQuery使用的话,必做的一下件事就是下载JQuery库,才可以使用下载地址:http://jquery.com/ 下面就是引用JQuery库了: <script type="tex ...
Jquery基础知识01
1:$(document).ready()function{}和window.onload()的区别. 1:$(document).ready()function{} 该方法等到Dom结构绘制完毕 ...
jQuery学习笔记01
1.jQuery介绍 1.1什么是jQuery ? jQuery,顾名思义,也就是JavaScript和查询(Query),它就是辅助JavaScript开发的js类库. 1.2 jQuery核心思想 ...
【三石jQuery视频教程】01.图片循环展示
视频地址:http://v.qq.com/page/e/5/t/e0149n5he5t.html 大家好,欢迎来到[三石jQuery视频教程],我是您的老朋友 - 三生石上. 今天,我们要通过基本的H ...
【三石jQuery视频教程】01.图片循环展示_再次重发
之前的文章,由于在博文的底部放有微信公众号的缘故,被管理员判定为: 您好,您的这篇博文内容本身没什么问题,但是,在博文底部存在推广信息内容.... 你们也没告知到底是哪条触犯了博客园的规矩,我就把底部 ...
jquery复习笔记
Jquery基础让一个按钮灰掉 $("button").("disabled","true"); ance desc选择器(ance代表祖 ...
JQuery 学习笔记(01)
JQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Oper ...

随机推荐

【转】统计模型-n元文法
在谈N-Gram模型之前,我们先来看一下Mrkove假设: 1.一个词的出现仅仅依赖于它前面出现的有限的一个或者几个词: 2.一个词出现的概率条件地依赖于前N-1个词的词类. 定义 N-Gram是大词 ...
Postgres-enum
-- 1. rename the enum type you want to change alter type some_enum_type rename to _some_enum_type; - ...
uglifyjs压缩批处理
uglifyjs. 据说是用来压缩JS文件的,据说还能优化JS,据说是基于node的,还据说比Google Closure Compiler更带感. uglifyjs压缩批处理我们不可能每次都打开cm ...
book
http://www.ed2000.com/ShowFile.asp?FileID=61391 e-itbook.com
play for scala 在模板中格式化Date
在play模板中格式化Date非常简单,只要编写一个静态函数,然后在模板中直接使用就可以了.如编写Html.scala package utils import java.text.SimpleDat ...
python 内存泄漏调试
Python应用程序内存泄漏的调试 Quake Lee quakelee@geekcn.org 新浪网技术(中国)有限公司 Sina Research & Development Python ...
C语言 ---- 函数结构体 iOS学习-----细碎知识点总结
函数的定义返回值类型函数名(形式参数列表) { 函数的实现 } 函数不允许嵌套定义如果函数的定义在主调函数之后,那么要进行提前声明才能使用. // 匿名结构体,结构 ...
iOS开发小技巧
1. 解析详情页(是webView)遇到的3个问题: 1.图片太大,超出屏幕范围 2.怎么在webView上面添加一行文字 3.文字太小 1.解决方法 webView.scalesPageToFit ...
显示HTML文本
+ (NSAttributedString*)getAttributedStringFromHtmlString:(NSString*)htmlString{ return [[NSAttribute ...
Map的简单语法
package jaxpsax; import java.util.Collection; import java.util.HashMap; import java.util.Iterator; i ...

Jquery 复习练习（01）

Jquery 复习练习（01）的更多相关文章

随机推荐

热门专题