jQuery：總體掌握

本文轉載自查看原文 2015-04-05 14:07 1013 jquery/ javascript

鏈式編程。...方法多，屬性無法得到對象進行鏈式。vs10自動完成、書籍鋒利的jQuery

vsdoc有智能提示開發時候用，開發完之后，換成min壓縮版的。

經驗：打開網站文件夾。可以把vs網站上的解決方案另存到和網站文件夾同一個文件夾中，直接打開.sln就能打開同一文件夾中的網站。

Document 對象是 Window 對象的一部分，可通過 window.document 屬性對其進行訪問。文檔流。body可能很小哦可以就包含一個層..，不能把document當成body。

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {//$(document).ready(function(){ ... })
            alert('000');
        })//最先執行，DOM元素創建完成之后就會執行，不管js css 圖片加載的事情。
        window.onload = function () { alert("111"); } //不會執行！！！！onload只能注冊一次。 在前面js介紹中講述了追加方法；
        window.onload = function () { alert("222"); } //js css 圖片加載完成才執行
        
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    ddd
    </div>
    </form>
</body>
</html>

$(function(){}),onload執行區別

常用方法

1,修改（行內）樣式 style="'background':'red;....'"2，類樣式 .m{}

2016/08/16補充

children()函數只在當前jQuery對象匹配元素的所有子元素中查找，不會查找"孫子"以及更后代的元素。

find()函數只在當前jQuery對象匹配元素的所有后代元素中查找，包含查找"孫子"以及更后代的元素。

所以find()查找的就包含children()查找的，除非特殊只在孩子元素找，不在孫子等找。

//所有子元素中查找，只從孩子元素中查找，不在孫子及以后查找
// 這里的selector、selector1均表示任意的選擇器
$("selector").children("selector1");
// 等價於
$("selector > selector1");


$("selector").children( );
// 等價於
$("selector > *");

//所有后代元素,包括孩子、孫子、重孫子、、等
// 這里的是selector、selector1均表示任意的選擇器
$("selector").find("selector1");
// 等價於
$("selector selector1");

//當前對象，不是包含的子元素的第一項！
first()函數用於獲取當前jQuery對象所匹配的元素中的第一個元素，並返回封裝該元素的jQuery對象。
$( "selector" ).first( );
//等價於
$( "selector:first" );
//等價於
$( "selector:eq(0)" );
//等價於
$( "selector" ).eq( 0 );

children()只從孩子元素，find()孩子，孫子所有后代，first( )當前對象，不是孩子，孫子

  //兄弟元素
            $("#d1").siblings().css("background-color", "red"); //獲取兄弟節點sibling()之后也是jquery對象.鏈式
            $("#d1").siblings("input").css("background-color", "green"); // input選擇器,也可以是id

            //后面兄弟元素
            $("#d1").next().css("background-color", "green"); //獲取第一個兄弟節點。緊挨着的兄弟節點
            $("#d1").nextAll("input").css("background-color", "green"); //獲取之后的符合input選擇器的所有兄弟節點
            $("#d1").nextAll("#i2").css("background-color", "gray");

            //前面兄弟節點
            $("#d2").prev("div").css("background-color", "gray"); //第一個
            $("#d2").prevAll().css("background-color", "gray"); //所有
            $("#d2").prevAll("div").css("background-color", "gray"); //所有符合div selector

            //子元素
            $("#d1").children("#z1,#z2").attr("value", "內容");
            //父元素
            $("#z1").parent().css("background", "gray");

兄弟前后一多元素$,父子元素對應jquery方法

    <script type="text/javascript">
        $(function () {
            $("#d1").css("background", "red"); //red也有雙引號 修改樣式
            alert($("#d1").css("background")); //獲取樣式
            $("d2").css("background", $("#d1").css("background"));
            $("#i1").val("2222"); //寫val()
            var v = $("#i1").val(); //讀val()
            alert(v);

            $("#d2").text("p標簽的內容text而不是val"); //向div p但不能向input寫文本 text()屏蔽了ie firefox的不同
            var t = $("#d2").text(); //讀文本
            alert(t);

            //$("#i1").text("p標簽的內容text而不是val")//不能給input用text()寫。
            $("#d3").html("p標簽的內容text而不是val"); //寫文本


            $("#d4").html("<input type='text'/>"); //html()可以向div寫內容，也可以寫節點

            $("#d4")[0].innerText = "包裝集【0】轉化成dom對象"; //jquery中，js對象點不出js對用的屬性等成員.
            $("#d4")[0].innerHTML = "包裝集【0】轉化成dom對象";
        });
        window.onload = function () {
            var d = document.getElementById("d4");
            d.innerText = "0000"; //innerText屬性在Firefox不能用，點不出來
            d.innerHTML = "11111";

            var i = document.getElementById("i1");
            i.value = "111111111"; //給input文本框寫值

            var $div = $("d"); //將一個dom對象轉換成一個jquery對象$(dom)
            $div.text("111"); ////js中，jquery對象能點出js對用的屬性等成員.
            $div.html("1111");
            
        };
        
    </script>

Jquery[css() val() text() html()] js[innerText innerHTML value] 及jquery和dom對象轉化。div p和input的讀寫值

    <style type="text/css">
        .m
        {
            background-color: Red;
        }
        .n
        {
            width: 400px;
        }
        .l
        {
            filter: gray;
        }
    </style>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //            //css()和attr()
            //            $("#d2").attr("style", "background:green;width:100px;height:200px");
            //            $("#d2").attr({ "style": "background:green;width:100px;height:200px" });



            //            //css() attr()為style多個值賦值，用到json
            //            $('#d2').css({ 'background-color': 'red', width: 100, height: 200 }); //賦值
            //            //獲取那個屬性，帶上對應key
            //            alert($("#d2").css('background-color'));
            //            $("#d2").attr({ "style": "background:green;width:100px;height:200px" });


            //            //css()不能自定義個屬性，生成style=”“，不能加進去的
            //            //$("#d2").css('abcc', 'asdfd'); //錯誤
            //            //attr()是能加進去的
            //            $("#d2").attr('abcc', 'asdfd');


            //            //css()方法中backgroundColor一般第2個首字母大寫，和style屬性background-color不一樣
            //            //但是驗證background-color是行的，backgroundcolor不行。看jquery源碼有正則處理

            //            $('#d2').css('backgroundColor', 'red');
            //            $('#d2').css('background-color', 'red');

            //            //div沒有bgcolor屬性，body中有
            //            // $('#d2').css('bgcolor', 'red'); //這種是錯誤的 style="bgcolor:red;...."
            //            $('#d2').css('bgcolor', 'red');


            //改變類樣式，  沒有點.....只寫類樣式的名字
            $("#d2").attr("class", "m"); //
            //追加類樣式
            $("#d2").addClass("n"); // class="m n"
            //刪除類樣式
            $("#d2").removeClass("n");
            //切換（存在樣式，去掉，沒有樣式添加） 點擊再點的時候
            $("#btnMis").click(function () {
                $("body").toggleClass("m"); //ie反應慢  在google檢驗
                if ($("body").hasClass("m")) {
                    $("#btnMis").val("關燈")
                }
                else {
                    $("#btnMis").val("開燈")
                }
            })


        })
        
    </script>

css() attr()區別 json數據。add/remove/has/toggle/Class()

<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="Scripts/jquery-1.7.1.js"></script>
    <script type="text/javascript">
        $(function () {
            var ele = $(" <div id='insertDiv' style='width:200px;height:200px;background-color:green'></div>")
            //$('#divdemo').append(ele);   //添加（1）
            ele.appendTo($('#divdemo'));//向一個div添加（2）。創建一個動態創建的元素（1）
            ele.text("aaa");//向$jquery對象寫一句文字
            ele.html("<div id='inserted2' style='width:100px;height:100px;background-color:blue'></div>")//動態添加一個元素，直接插入html（2）
        })
       // $(document).ready(function () { }) = $(function () { })//這里面的function可以寫一個方法名（不帶括號）
        //$(document).ready(fun)  =$(fun)
    </script>
</head>
<body>
    <div id="divdemo" style="width: 400px; height: 400px; background-color: red">
       
    </div>
</body>
</html>

創建元素2種方式；附加元素2中方式； $(fun)=$(document).ready(fun)等同的推理（注意fun里面只寫方法名，不帶括號）

選擇器

//$("p.intro") 選取所有 class="intro" 的 <p> 元素

//$("p#demo") 選取 id="demo" 的第一個 <p> 元素。

//相對定位,在$對象中查找 $()選擇之后都編程jquery對象

//選擇器的組合都在“”內完成。而相對定位$("選擇器組合"，$對象)

 1     <script type="text/javascript">
 2         $(function () {
 3             //相對定位,在$對象中查找  $()選擇之后都編程jquery對象
 4 
 5             //基本
 6             //類，id 元素標簽(節點名 p div input)
 7             $(".i5").val("111");
 8             $("#i1").css("background-color", "red");
 9             $("input").attr("value", "11111111111111"); //注意不是表單選擇器,：input雖然功能結果一樣
10             $(":input").attr("value", "11111111111111");
11 
12 
13             //層次 后代（空格 >）和兄弟（+ ~） 
14 
15             //子 子后代..."選擇器 空格 選擇器"
16             $("form p").css("background", "red"); //空格  所有符和第2個選擇器的元素    后代 子 子后代...
17             $("#f p").css("background", "red");
18 
19             //>直接后代> "選擇器 ＞ 選擇器" >兩邊有木有空格都行
20             //只在后代中找符合第二個選擇器的元素,不能在子子后代..中找
21             $("#f>p").text("tttttt"); //p中不能包含p html
22 
23             //兄弟
24             //+之后的緊挨的第一個元素，如果緊挨的第一個元素 不符合選擇器，就不會找到
25             $("#i1 + #i3").val("mmm"); //這樣就會找不到 緊挨着的符合選擇器
26             $("#i1 + #i2").val("mmm"); //這樣行
27 
28             //兄弟
29             //~之后的所有符合選擇器的元素   從后面兄弟節點中找，后面兄弟節點子節點的元素即使符合，也選不中 
30             $("#i1 ~ p").css("background", "red");
31 
32 
33             //，復合選擇器   CSS中也有復合選擇器
34             $("#i1,.i5,div").css("background", "blue")
35 
36 
37             // $(":input:not(:first)").attr("value", "222");
38         })
39     </script>
40 </head>
41 <body>
42     <input type="text" name="name" value=" " />
43     <form action="/" method="post" id="f">
44     <input type="text" name="name" value=" " id="i1" />
45     <input type="text" name="name" value=" " id="i2" />
46     <input type="text" name="name" value=" " id="i3" />
47     <input type="button" name="name" value=" " id="i4" />
48     <input type="button" name="name" value=" " class="i5" />
49     <p id="p1" class="p">
50         ppp1p1ppp1p1pppp1p1p1p1pp塊元素占用一行
51     </p>
52     <div>
53         <p>
54             子子后代</p>
55     </div>
56     <p id="p2" class="p">
57         p2pp2ppp2ppp2pppp2pp2pppp塊元素占用一行
58     </p>
59     <input type="text" name="name" value=" " />
60     </form>
61 </body>

Basic基本 Heirarchy 層次

            //            //屬性過濾器，多屬性【】【】   開始^= 結尾$= 不等!=  含有*=
            //            //代替后面的表單選擇器
                        $("input[type='text']").val("阿斯達");
                        $("input[type='text'][name='n2']").val("11111");
                        $("input[id='i1']").css("background", "green");
                        $("input[name^='n']").val("22222");
                        $("input[name$='2']").val("22222");
                        $("input[id!='i2']").val("22222");
                        $("input[name*='b']").val("22222"); //含有這個字母的都

Attribute屬性過濾器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <style type="text/css">
        
    </style>
    <script type="text/javascript">
        $(function () {

            //表單選擇器
            //:input 包括 <input> <checkbox><textarea> <select> <option><button>所有的表單元素  $("input")只獲取<input>標簽
            $(":input").css("background", "red");


            //$(":text") 和屬性選擇器$("input[type=text]")等價
            //：password  ：radio  ：checkbox   ：submit  ：image ：reset ：file ：hidden ：button
            // :diabled  :checked :selected   表單可以和限制條件一塊使用。

            // 禁用的
            $("input[type='text']:disabled").css("background", "red");
            //選中 單選radio多選checkbox  為checked="checked"   下拉列表 的選象option selected="selected"
            $("input[type=checkbox]:checked").css("background", "red"); //瀏覽器不好觀察
            $("input[type=checkbox]:checked").removeAttr("checked");
            $(":text:disabled[name!=i2]").css("background", "red");
            $("select option").css("background", "red");

            //單選 多選框包裝集 需要each（function(){ this是這個包裝集中每個DOM對象 }）  $對象.each  this表示DOM
            var i = "";
            $(":checkbox:checked").each(function () {
                i += $(this).val();
            })
            alert(i);



            alert($("input[type=checkbox]:checked:eq(1)").val());
            alert($(":checkbox:eq(1)").attr("checked")); //alert的true不是checked
            alert($(":checkbox:eq(1)").val());

            //給radio和check賦值val中val(["",""])
            //選中  2中方法
            $(":radio:eq(1)").attr("checked", "true");
            $(":radio:eq(1)").attr("checked", "checked"); //checked true都可以，一般用true，比如沒選中 就fasle了對應的
            $(":radio:eq(1)").val(["mm"]); //可以給radio和checkbox的value用val([""])的方法賦值原來就存在的值，表示選中
            $(":checkbox[value='m']").val(['m']);



        })
    </script>
</head>
<body>
    <input type="text" name="name" value=" " />
    <form action="/" method="post" id="f">
    <input type="text" name="n1" value=" " id="i1" />
    <input type="text" name="n2" value=" " id="i2" />
    <input type="text" name="n3" value=" " id="i3" />
    <input type="text" name="3nbbb" value=" " id="Text1" />
    <input type="button" name="n4" value=" " id="i4" />
    <input type="button" name="n5" value=" " class="i5" />
    <p id="p1" class="p">
        ppp1p1ppp1p1pppp1p1p1p1pp塊元素占用一行
    </p>
    <div>
        <p>
            子子后代</p>
    </div>
    <p id="p2" class="p">
        p2pp2ppp2ppp2pppp2pp2pppp塊元素占用一行
    </p>
    <input type="text" name="i1" value=" " disabled="disabled" />
    <input type="text" name="i2" value=" " disabled="disabled" />
    <input type="radio" name="r1" value="dd" />radio1單選
    <input type="radio" name="r1" value="mm" />radio2單選
    <input type="checkbox" name="c1" value="1 " checked="checked" />checkbox1多選
    <input type="checkbox" name="c1" value="2" checked="checked" />checkbox2多選
    <input type="checkbox" name="c1" value="3 " checked="checked" />checkbox3多選
    <input type="checkbox" name="c1" value="4 " />checkbox4多選
    <input type="checkbox" name="c1" value="m" />checkbox4多選
    <select>
        <option value="1">下拉1</option>
        <option value="2">下拉2</option>
    </select>
    </form>
</body>
</html>

Form：type ：disable checked一塊表單過濾器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <title></title>
    <script type="text/javascript">
        //$("tr:first")               選擇所有tr元素的第一個 
        //$("tr:last")                選擇所有tr元素的最后一個                  
        //$("tr:even")               選擇所有的tr元素的第0，2，4... ...個元素（注意：因為所選擇的多個元素時為數組，所以序號是從0開始） 
        //$("tr:odd")                選擇所有的tr元素的第1，3，5... ...個元素 
        //$("td:eq(2)")             選擇所有的td元素中序號為2的那個td元素 
        //$("td:gt(4)")             選擇td元素中序號大於4的所有td元素 
        //$("td:ll(4)")              選擇td元素中序號小於4的所有的td元素 
        //$(":header")
        //$("div:animated")
        $(function () {
            $(":text:first").css("background", "red");
            $(":text:last").css("background", "green");
            $(":text:not(:first)").val("11");
            $(":text:odd").css("width", "50px")
            $(":text:lt(1)").css("height","30px");
            $(":text:gt(7)").css("height", "30px");
            $(":text:eq(1)").css("height", "60px");

        })
        
    </script>
</head>
<body>
    <input type="text" name="name" value="" />
    <input type="text" name="name" value="" />
    <input type="text" name="name" value="" />
    <input type="text" name="name" value="" />
    <input type="text" name="name" value="" />
    <input type="text" name="name" value="" />
    <input type="text" name="name" value="" />
    <input type="text" name="name" value="" />
    <input type="text" name="name" value="" />
    <input type="text" name="name" value="" />
    <input type="text" name="name" value="" />
</body>
</html>

Basic Filter基本過濾器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <!--   $("div:contains('John')") 選擇所有div中含有John文本的元素  
        $("div:has(p)")        選擇所有含有p標簽的div元素 
        $("td:empty")           選擇所有的為空（也不包括文本節點）的td元素的數組
        $("td:parent")          選擇所有的以td為父節點的元素數組 -->
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //            $("div:contains('李可')").css("background", "red");
            //            $("div:has('p')").css("background", "green");
            //               $(":text:empty").val('dasda');
            $("div:parent").css("background", "red");
        })
    </script>
</head>
<body>
    <div>
        李可是大牛
    </div>
    <div>
        李是可大牛
    </div>
    <div>
        大牛的可李
    </div>
    <div>
        <p>
            ppppp</p>
    </div>
    <div>
        <input type="text" name="name" value=" " />
    </div>
    <div>
    </div>
    <div>
        <br />
    </div>
    <div>
        2222
    </div>
    <input type="text" name="name" value=" " />
</body>
</html>

ContentFilter內從過濾器 has 標簽 contains文本以標簽為福標簽的節點所有空標簽

可視過濾器：hidden ：visible當成基本過濾器就好了

//后代過濾器不常用

append ..remove appendto 權限 bind() 注意一下。

$.each(json,function(){this表示json的一個鍵值對的值！！！ })

事件冒泡

從外到里

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         $(function () {
 8             //           mouseout 和mouseover都會有事件冒泡從外到里的事件冒泡
 9             var i = 0;
10             //              $("#d1").mouseover(function () {
11             //              i++;
12             //              //$("#d1").text(i);// 大div 會把包含的小div去掉
13             //              $("#d2").text(i);
14             //              })
15             //            $("#d1").mouseout(function () {
16             //                i++;
17             //                //$("#d1").text(i);// 大div 會把包含的小div去掉
18             //                $("#d2").text(i);
19             //            })
20 
21 
22             //            mouseenter和mouseleave沒有
23             $("#d1").mouseenter(function () {
24                 i++;
25                 //$("#d1").text(i);// 大div 會把包含的小div去掉
26                 $("#d2").text(i);
27             })
28             $("#d1").mouseleave(function () {
29                 i++;
30                 //$("#d1").text(i);// 大div 會把包含的小div去掉
31                 $("#d2").text(i);
32             })
33         })
34     </script>
35 </head>
36 <body>
37     <div id="d1" style="width: 300px; height: 300px; border: 1px solid">
38         <div id="d2" style="width: 100px; height: 100px; border: 1px solid">
39         </div>
40     </div>
41 </body>
42 </html>

Jquery中特別事件mouseover mouseout的外到里的事件冒泡

從里到外

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         window.event
 8         $(function () {
 9             $("#d1").click(function () {
10                 alert("11");
11             })
12             $("#d2").click(function () {
13                 alert("22");
14             })
15             //            $("#d3").click(function () {
16             //                alert("33"); //當內元素和外元素具有同樣的事件，點擊內元素，外元素也會執行 這就是從里到外的事件冒泡
17             //            })
18 
19 
20             //阻止外元素的事件執行
21             $("#d3").click(function (e) {
22                 alert("33");
23                 //window.event.cancelBubble = true;//第一種方法。用js中的方法
24                 //return false;//第二種方法
25                 e.stopPropagation(); //第三種方法
26             })
27             //e事件的對象==鼠標 鍵盤的相關信息 比如鼠標的position 
28 
29         })
30     </script>
31 </head>
32 <body>
33     <div id="d1" style="width: 300px; height: 300px; border: 1px solid">
34         <div id="d2" style="width: 200px; height: 200px; border: 1px solid">
35             <div id="d3" style="width: 100px; height: 100px; border: 1px solid">
36             </div>
37         </div>
38     </div>
39 </body>
40 </html>

具有相同事件。里元素會觸發外元素的同一事件。以及取消從里到外冒泡事件的3中方法

阻斷默認行為

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //            $("a").click(function () {
            //                alert("11");

            //            });
            $("a").click(function (e) {
                alert("11");
                //                return false; //中斷，不再往下執行a標簽的連接地址
                e.preventDefault();
            });

            $(":submit").click(function (e) {
                alert("不要action");
                //                return false;
                e.preventDefault();
            });
        })
    </script>
</head>
<body>
    <a href="http://www.cnblogs.com/leee/">a標簽當按鈕</a>
    <form action="http://www.cnblogs.com/leee/" method="post">
    <input type="submit" name="name" value="提交" />
    </form>
</body>
</html>

阻斷a標簽 submit的默認行為2種方法e.preventDefault return false

獲取當前對象

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //            $("#d1,#d2,#d3").click(function () {

            //                //this是dom對象。用$轉化成jquery對象。重點是執行誰的事件 this就是誰。監聽事件的對象
            //                alert($(this).html());

            //            })
            //            $("#d1,#d2,#d3").click(function (e) {
            //                //e.target是觸發事件的對象，由於引起冒泡的這個事件是由#d3觸發的。所以只會彈出#d3的html
            //                alert($(e.target).html());
            //            })
            //e.target和this只在事件冒泡中有這點區分。其他的都一樣


            //獲取當前觸發事件的對象
            //1 js：window.event.srcElement   但這個在Firefox中不支持，jquery用e.target解決了兼容
            //2，e.target 3，this
            $(":button").click(function () {
                //                alert(this.value);
                //                alert($(this).val());
                //                alert($(this).attr("value"));

                //                alert(event.srcElement.value);

            });
            $(":button").click(function (e) {
                alert(e.target.value);
            });
        })
    </script>
</head>
<body>
    <div id="d1" style="width: 300px; height: 300px; border: 1px solid">
        <div id="d2" style="width: 200px; height: 200px; border: 1px solid">
            <div id="d3" style="width: 100px; height: 100px; border: 1px solid">
            </div>
        </div>
    </div>
    <input type="button" name="name" value="點擊" />
</body>
</html>

window.event.srcElement和e.target和this的獲取。以及this和e.target在冒泡中的細小區分

事件：鼠標事件click dbclick mousedown mouseup mouseover mouseout mouseenter mouseleaver hover 鍵盤事件表單事件事件處理關聯事件文檔加載事件瀏覽器事件這里只說一下常用方法

e事件參數：一個層隨鼠標位置移動

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        div
        {
            position: absolute;
        }
    </style>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript">        </script>
    <script type="text/javascript">
        //        $(function () {//$(document).ready(function(){ ... })
        //            //            alert($(document).text());
        //            //            alert($(document).text());
        //            alert($('window').html());
        //        })

        //             $(function () {//可以不用當document ready加載完成時候
        $(document).mousemove(function (e) {  //相當這個頁面，在沒加載好的document上，鼠標移動e事件就出現
            //document一開始（想想成html一開始出現就開始加載）

            $("div").css("top", e.pageY + "px").css("left", e.pageX + "px"); //pageX小寫開始
            //            $("div").attr({"style":"top:"+e.pageY + "px"+";left:"+e.pageX + "px"})//也可以這種寫法


            //            var v;
            //            alert(v.s)//調試瀏覽器f12的console報錯
            //            $("div").attr("top", e.pageY + "px").attr("left", e.pageX + "px");//錯誤，把top left 錯當成元素的一個屬性值

        })
        //             })
        
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        ddd
    </div>
    </form>
</body>
</html>

不用$(function(){}),直接寫$(document).mousemove() 復習“”attr() css() json""的用法

----

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.12.3.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style> 
    .div1{
      width:100px;
      height:100px;
      background:green;
      border:1px solid red;
      position:absolute;/*絕對定位*/
  }
  </style>
  <script>
    $(function(){
   var startPositionX=0,startPositionY=0;
      $(".div1").mousedown(function(ev){ 
        //ev,$對象不需要做兼容
        //$中pageX（在document）和js中cleintX(可視區域)
        //js中cleintX+scrollleft+scrollright的兩邊=$中pageX
        startPositionX=ev.pageX-$(this).offset().left;//
        startPositionY=ev.pageY-$(this).offset().top;
        //document注冊，不管如何移動，不會脫離鼠標。.div1會冒泡到。一直在觸發，里面的函數一直在走。
         $(document).mousemove(function(ev){
            $(".div1").css('left',ev.pageX-startPositionX).css('top',ev.pageY-startPositionY);
         })
         $(document).mouseup(function(ev){
           $(document).off();
         })
         return false；//最好阻止.div1的mousedown冒泡和默認。
      })
    })
  </script>
</head>
<body>
  <div class="div1"></div>
</body>
</html>

記錄開始位置，更准確

還需要對移動的范圍做控制，要不會出現滾動條。

移動到小圖片，顯示大圖

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <style type="text/css">
 5       /*  .imgimport
 6         {
 7             width: 400px !important;
 8             height: 400px !important;
 9         }*/
10         #tc
11         {
12             position: absolute;
13             width: 450px;
14             height: 450px;
15             border: 1px,solid,red;
16         }
17     </style>
18     <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
19     <script type="text/javascript">
20         $(function () {
21             //            $("img").each(function () {
22 
23             $("img").hover(function (e) {//事件用錯，用成mousemove
24                 //動態創建div
25                 var divT = $("<div id='tc' ></div>"); //樣式麻煩，動態生成的div也可以加樣式表
26                 $("body").append(divT);//將這個div一定先添加到body中。因為position：absolute的元素也是從body分離出的。
27 
28                 $bigpic = $("<img id='pp' src=" + $(this).attr('src') + "></img>");
29                 divT.append($bigpic);//先創造，后添加，一個等次一個等次的append。添加完 最后上樣式。也可以添加完直接上樣式
30 
31                 $bigpic.css("width", "400px").css("height", "400px");
32                 //設置大圖位置
33                 divT.css("top", e.pageY + "px").css("left", e.pageX + "px");
34 
35 
36             }, function () {//鼠標離開，刪除div
37                 var tc = $("#tc")
38                // var p = $("#pp");
39                 tc.remove();
40                // p.remove();
41                 //                $bigpic.remove();
42 
43             })
44             //            })
45 
46         })
47         
48     </script>
49     <title></title>
50 </head>
51 <body>
52     <div>
53         <img src="pic/圖片1.jpg" width="100px" height="100px" />
54         <img src="pic/圖片2.jpg" width="100px" height="100px" />
55     </div>
56 </body>
57 </html>

圖片自己找

效果

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <style type="text/css">
 6         #d1
 7         {
 8             background-color: red;
 9             width: 200px;
10             height: 200px;
11         }
12     </style>
13     <!--<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
14     <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>-->
15     <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
16     <script type="text/javascript">
17         $(function () {
18             $(":button[value=show]").click(function () {//忘掉function()
19                 //                $("#d1").show();
20                 //                $("#d1").show("slow"); //fast200 normal 400  slow 600ms
21                 $("#d1").show(5000, function () {
22 
23                     var args = arguments; //overflow:hidden scroll visible防止div內的東西（文本）溢出div時做的事。下面有舉例
24 
25                     alert("The paragraph is now hidden " + arguments); //f12瀏覽器有opacity0-1透明到完全不透明的漸變
26                 }); //vsdoc庫並沒有opacity透明度的改變，min和正常庫有漸變的效果
27             })// width: 156.06px; height: 156.63px; overflow: hidden; display: block; opacity: 0.777916
28             $(":button[value=hide]").click(function () {
29                 // $("#d1").hide(); //設置style=“display：none”
30                 $("#d1").hide(1000);
31             })
32             $(":button[value=toggle]").click(function () {
33 
34                 $("#d1").toggle(5000); //點擊執行show()和hide()
35             })
36             $(":button[value=slideUp]").click(function () {
37 
38                 $("#d1").slideUp(5000); //向上邊框隱藏
39             })
40             $(":button[value=slideDown]").click(function () {
41 
42                 $("#d1").slideDown(5000); ////向下邊框顯示
43             })
44             $(":button[value=slideToggle]").click(function () {
45 
46                 $("#d1").slideToggle(5000);
47             })
48             $(":button[value=fadeOut]").click(function () {
49 
50                 //  <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript">//帶中文提示在jquery庫漸變效果不能顯示。
51                 $("#d1").fadeOut("slow"); //min 和正常庫具有漸變效果
52             })
53             $(":button[value=fadeIn]").click(function () {
54 
55                 $("#d1").fadeIn(1000); //漸變顯示
56             })
57             $(":button[value=stop]").click(function () {
58 
59                 $("#d1").stop(); //漸變顯示
60             })
61         })
62     </script>
63 </head>
64 <body>
65     <!--顯示隱藏  帶有動畫效果-->
66     <div id="d1">
67     </div>
68     <input type="button" name="name" value="show" />
69     <input type="button" name="name" value="hide" />
70     <input type="button" name="name" value="toggle" /><br />
71     <input type="button" name="name" value="slideUp" />
72     <input type="button" name="name" value="slideDown" />
73     <input type="button" name="name" value="slideToggle" /><br />
74     <input type="button" name="name" value="fadeOut" />
75     <input type="button" name="name" value="fadeIn" />
76     <input type="button" name="name" value="stop" />
77 </body>
78 </html>

toggle(show hide ) slideToggle(slideUp slideDown) fadeIn漸顯示fadeOut。 opacity 0-1 overflow：hidden scroll visible

<html>
<head>
<style type="text/css">
div 
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: scroll
}
</style>
</head>

<body>
<p>如果元素中的內容超出了給定的寬度和高度屬性，overflow 屬性可以確定是否顯示滾動條等行為。</p>

<div>
這個屬性定義溢出元素內容區的內容會如何處理。如果值為 scroll，不論是否需要，用戶代理都會提供一種滾動機制。因此，有可能即使元素框中可以放下所有內容也會出現滾動條。默認值是 visible。
</div>
</body>

</html>

overflow常用div的內容溢出

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        div
        {
            border: 1px solid red;
            width: 300px;
            height: 300px;
            background: red;
        }
    </style>
    <script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
    <script type="text/javascript">
        $(function () {
            $("div").click(function () {
                //div中的div沒有style屬性行內樣式，不能更改
                //$("div").animate({ "style": "width:100px;height:100px" }, "slow", function () {
                $("div").animate({ "width": "100px", "height": "100px" }, "slow", function () {
                    alert("動畫執行完成");
                })

            })
        })
    </script>
</head>
<body>
    <div>
    </div>
</body>
</html>

animate(),常用。就加載做什么..鼠標.做什么。。自習想一想步驟都能寫出

全反選

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script type="text/javascript">
        //根據選項check判斷全選是否被選中
        function checkSingle() {
            var isCk = true;
            $(":checkbox[name='name']").each(function () {
                if (!$(this).attr("checked")) {//有一個選項沒有選中
                    isCk = false;
                    return false; //break.循環跳出   //return true 相當continue 跳出本次循環 繼續下次循環
                }
            });
            $(":checkbox[value='c4']").attr("checked", isCk);

        }

        // $("input[type=checkbox][value=c4]").click(function () {
        //alert("1");
        $(function () {
            //另外的思路，當選中的個數小於選項的個數，全選 false    =true
            $(":checkbox[value='c4']").click(function () {//this點擊的誰的結果集的DOM對象
                $(":checkbox[name='name']").attr("checked", $(this).attr("checked")); //jquery中的checked 是true來表示checked="checked"
            })


            //有一個選項沒有選中，全選要取消
            //選項 全部選中，全選要選中
            //給選項checkedbox注冊事件
            //為全部選中，全選要選中。循環結束做准備
            $(":checkbox[name='name']").click(checkSingle); //此寫方法名，不帶().只是注冊，不是調用


            //反選
            $(":button[value='反選']").click(function () {
                $(":checkbox[name='name']").each(function () {//this each的誰的結果集的DOM對象
                    //對選項的狀態取反
                    $(this).attr("checked", !$(this).attr("checked"));
                    checkSingle();

                });
            })
        })
    
    </script>
</head>
<body>
    <input type="checkbox" name="name" value="c1" />玩耍
    <input type="checkbox" name="name" value="c2" />睡覺
    <input type="checkbox" name="name" value="c3" />讀書
   
    <input type="checkbox" name="ck"" value="c4" />全選
    <input type="button" name="fx" value="反選" />
</body>
</html>

全反選，根據選項checked true判斷全選checked

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 掌握jQuery插件開發【干貨篇】步步為營，帶你輕松掌握jQuery！【前端性能】必須要掌握的原生JS實現JQuery 總體和樣本 Spring cloud：總體架構總體最小二乘（TLS） FreeSWITCH 總體架構用樣本估計總體 eShopOnContainers 知多少[1]：總體概覽 dmp總體概述