天天看點
傳回

Web前端-JavaScript--jQuery

jQ入口函數

JQ的入口函數

$(function(){

    })

/*$(function(){
//        頁面加載完畢後執行
        alert("頁面加載完畢了1輸出")

    })
    $(function () {
        alert("頁面加載完畢了2輸出")
    })*/

jq對象js對象互相轉換

js對象轉換成JQ對象

$(js對象)

JQ對象轉換成js對象

* JQ對象.get(index)

* JQ對象[index]

jQ支援的選擇器

JQ找到頁面元素的方式就是通過選擇器的方式

$("選擇器")

如果選擇器關聯的是單個元素 那麼操作單個元素

如果是很多元素 那麼就是很多元素一起操作

//    $(".pox").html("我是新改的文字").css("color","#e4393c");

JQ中除了支援選擇器找到頁面元素之外

還支援一定的 過濾器配合使用找到頁面元素

過濾器是寫在 $("選擇器:過濾器") 裡面的

:eq(index) 表示從JQ已經選擇到的衆多元素中 找到其中指定索引的那個元素

:even 從JQ已經選擇的衆多元素中 選中偶數部分的元素
:odd   .......                  奇數部分
:first  ........            選中第一個
:last  ........            選中最後一個
:not('選擇器')  從已經選擇的元素中 排除指定選擇器所選中的那個元素
:gt(index) 從已經選中的一堆元素中 找到比gt裡面索引值比index大的那些元素
:lt(index)  跟上面相反
           
//    $("li:eq(7)").css("font-size","60px");

//    js原生實作隔行變色
    /*var liArr=document.querySelectorAll("ul.pox>li");
    for(var i=0;i<liArr.length;i++){
        if(i%2==0){
            liArr[i].style.backgroundColor="orange";

        }else{
            liArr[i].style.backgroundColor="hotpink";
        }
    }*/

//    JQ的過濾器實作
        /*$("ul.pox>li:even").css("backgroundColor","orange")
        $("ul.pox>li:odd").css("backgroundColor","hotpink")*/


   /* $("ul.pox>li:first").css("fontSize","60px");
    $("ul.pox>li:last").css("fontSize","10px");*/

//   $("ul.pox>li:not('.demo')").css("backgroundColor","orange");

    $("ul.pox>li:gt(2)").css("color","orange");
    $("ul.pox>li:lt(2)").css("color","hotpink");

篩選器就是各種方法,對應的就是原生JS的節點通路關系: 找到父元素 子元素 所有子元素 第一個子元素 兄弟元素 等等....

 

篩選器就是各種方法,對應的就是原生JS的節點通路關系:
        找到父元素  子元素  所有子元素 第一個子元素 兄弟元素 等等....

    find("選擇器")  選擇器的參數是必填的  表示找到後代指定選擇器的那些元素

    children("選擇器") 參數可選  如果沒有參數表示 傳回所有的子元素
                        如果傳入選擇器 則表示傳回子元素中 複合選擇器的那些子元素

     siblings("選擇器") 參數可選  如果沒有參數表示傳回所有兄弟元素
                        有參數 表示傳回所有兄弟中符合選擇器的指定兄弟元素

        parent() 找到父元素  父元素因為是唯一  所有不用傳選擇器


   $("選擇器:eq(index)") 過濾器

    .eq(index) 跟上面的那個過濾器的用法一模一樣 作用也一樣

        next() 下一個兄弟

        prev()  上一個兄弟


     prevAll() 之前所有兄弟

     nextAll() 之後所有兄弟
           
$("#box").find("div")  //找到#box後代所有的div

//    console.log($("#box").find("div"));
//    console.log($("#box").children());//所有子元素
//    console.log($("#box").children("div")); //找到兩個div
//    console.log($("#box>ul").siblings());

//    console.log($("#box>ul").parent());

//    console.log($("li").eq(3));
/*        console.log($("li.demo").next().css("font-size","30px"));
        console.log($("li.demo").prev().css("font-size","30px"));*/
Web前端-JavaScript--jQuery

JQ的 css方法 既可以設定樣式又可以擷取樣式

擷取樣式:

    JQ對象.css("屬性名")  表示擷取目前屬性名這個樣式的值(内嵌  行内 外鍊樣式都能擷取)

設定樣式:

    JQ對象.css("屬性名","屬性值"); 設定單個樣式

    JQ對象.css({

    })

$("button").eq(1).click(function () {
        /*console.log($("#box").css("width"));
        console.log($("#box").css("backgroundColor"));*/
//        $("#box").css("font-size","50px");
        $("#box").css({
            color:"white",
            fontSize:"50px",
            marginLeft:"30px",
            marginTop:"30px"
        })

    });

JQ的操作class的方法:

addClass()

$("button").eq(0).click(function () {
//        增加類
        $("#box").addClass("bg co")

    })

removeClass()

$("button").eq(1).click(function () {
//        移除類
//        $("#box").removeClass("co bg")
        $("#box").removeClass();//移除所有類

    })

hasClass()

$("button").eq(2).click(function () {
//        console.log($("#box").hasClass("bg"));
        if($("#box").hasClass("di")){
            $("#box").removeClass("di")

        }else{
            $("#box").addClass("di");
        }

    })

toggleClass()

$("button").eq(3).click(function () {
//        切換class
        $("#box").toggleClass("di")

    })

JQ動畫分類:

顯示隐藏動畫

show顯示動畫的操作:

show()

1.不傳參數 就是閃現動畫 直接顯示 控制的是元素的display屬性

2.傳一個字元串速度的值 slow normal fast

                                          600 400 200

控制的屬性是: width height opacity display overFlow

3.傳一個整數毫秒值 控制的屬性有: width height opacity display overFlow

4.傳兩個參數:

參數1: 時長(字元串時間 毫秒值事件都行)

參數2: 回調函數 動畫執行完的回調

hide動畫的操作:

hide() 跟上面的show是一毛一樣的 也是四種參數方式 隻不過 hide控制隐藏

$("button").eq(0).click(function () {
//            $("#box").show();
//            $("#box").show("fast");
//            $("#box").show(20000);
            /*$("#box").show(3000,function () {
                alert("動畫終于走完了")
            })*/
            /*$("#box").show(3000);
            alert("動畫執行完了")*/
        })
    $("button").eq(1).click(function () {
//        $("#box").hide();
//        $("#box").hide("slow");
//        $("#box").hide(3000);
        $("#box").hide(3000,function () {
            alert("終于隐藏了")
        });
    })

滑入滑出動畫

slideDown(滑入動畫) 表示 元素滑進來

參數跟show的參數格式一毛一樣 但是 不傳任何參數也是有一個預設時長的

控制的是元素的height overFlow

swlideUp(滑出動畫) 跟上面一樣

slideToggle() 滑入滑出切換

如果元素預設隐藏 則執行滑入

如果元素預設是顯示 則執行滑出

$("button").eq(2).click(function () {
//        $("#box").slideDown(); //預設有一個時長(應該是200毫秒)
//        $("#box").slideDown("fast");
//        $("#box").slideDown(10000);
        $("#box").slideDown(2000,function () {
            alert("終于滑進來了")
        });
    })
    $("button").eq(3).click(function () {
//        $("#box").slideUp();
//        $("#box").slideUp("slow");
//        $("#box").slideUp(2000);
        $("#box").slideUp(2000,function () {
            alert("終于滑出去了")
        });

    })
  $("button").eq(4).click(function () {
//        滑入滑出切換
//        $("#box").slideToggle();
        $("#box").slideToggle(2000);

    })

淡入淡出動畫

淡入淡出動畫:

控制的是元素的 opacity 參數跟上面都一樣

fadeIn(淡入動畫)

$("button").eq(5).click(function () {
//            淡入動畫
            $("#box").fadeIn(2000);

        })
        $("button").eq(6).click(function () {
//            淡出動畫
            $("#box").fadeOut(2000);

        })
        $("button").eq(7).click(function () {
//            淡入淡出切換
            $("#box").fadeToggle(1000);

        })
        $("button").eq(8).click(function () {
//                淡出到指定透明度  參數:1.時長  2.透明度值
            $("#box").fadeTo(2000,0.3)
        })

自定義動畫

JQ的自定義動畫:

animate()

         參數1: 動畫的json對象

         參數2:動畫的執行時長

         參數3: 動畫執行完的回調函數

$("button").eq(0).click(function () {
       /* $("#box").animate({
            width:400,
            height:400,
            left:100,
            top:100

        },2000)*/

       /* $("#box").animate({
            marginTop:150,
            paddingLeft:200


        },2000)*/

       /* $("#box").animate({
            fontSize:120,
            borderWidth:50


        },2000)*/


         $("#box").animate({
                    width:400,
                    height:400,
                    left:100,
                    top:100

                },2000,function () {
             alert("動畫執行完了")
         })

    })

動畫停止:

            $("選擇器").stop(布爾值,布爾值)  不寫預設是false

            // 第一個參數表示後續動畫是否要執行

            （true:後續動畫不執行  ;false:後續動畫會執行）

            // 第二個參數表示目前動畫是否執行完

            （true:立即執行完成目前動畫  ;false:立即停止目前動畫）

        $("選擇器").stop() 不寫預設都是false

                表示立即停止目前動畫  後續動畫繼續執行

        $("選擇器").stop(false,false) 跟上面一樣

         $("#box").stop(true,false)

                表示立即停止目前動畫  後面動畫也不執行  類似于暫停效果

         $("#box").stop(true,true)

                 立即完成目前動畫  後面動畫也不執行

          $("#box").stop(false,true)

                立即完成目前動畫  後面動畫會執行

        在JQ中動畫的使用要始終遵循一點:

                要調用animate() 就先 stop()

$("button").eq(1).click(function () {
//        $("#box").stop()
//        $("#box").stop(true,false)
//        $("#box").stop(true,true)
        $("#box").stop(false,true)
        
    })
web前端 jquery
上一篇: Web前端 | jQueryjQuery簡介
下一篇: Luogu P2412 查單詞

繼續閱讀