21 WEB:JQuery框架

今日內(nèi)容

1. JQuery 基礎(chǔ):
    1. 概念
    2. 快速入門
    3. JQuery對象和JS對象區(qū)別與轉(zhuǎn)換
    4. 選擇器
    5. DOM操作
    6. 案例

JQuery 基礎(chǔ):

1. 概念: 一個(gè)JavaScript框架微酬。簡化JS開發(fā)
    * jQuery是一個(gè)快速萤厅、簡潔的JavaScript框架枫虏,是繼Prototype之后又一個(gè)優(yōu)秀的JavaScript代碼庫(或JavaScript框架)稀轨。jQuery設(shè)計(jì)的宗旨   是“write Less链嘀,Do More”漂彤,即倡導(dǎo)寫更少的代碼凉倚,做更多的事情友驮。它封裝JavaScript常用的功能代碼,提供一種簡便的JavaScript設(shè)計(jì)模式蹬屹,優(yōu) 化HTML文檔操作侣背、事件處理、動畫設(shè)計(jì)和Ajax交互慨默。

    * JavaScript框架:本質(zhì)上就是一些js文件贩耐,封裝了js的原生代碼而已
2. 快速入門
    1. 步驟:
        1. 下載JQuery
            * 目前jQuery有三個(gè)大版本:
                1.x:兼容ie678,使用最為廣泛的,官方只做BUG維護(hù)厦取,
                     功能不再新增潮太。因此一般項(xiàng)目來說,使用1.x版本就可以了虾攻,
                     最終版本:1.12.4 (2016年5月20日)
                2.x:不兼容ie678铡买,很少有人使用,官方只做BUG維護(hù)霎箍,
                     功能不再新增奇钞。如果不考慮兼容低版本的瀏覽器可以使用2.x,
                     最終版本:2.2.4 (2016年5月20日)
                3.x:不兼容ie678漂坏,只支持最新的瀏覽器蛇券。除非特殊要求,
                     一般不會使用3.x版本的樊拓,很多老的jQuery插件不支持這個(gè)版本纠亚。
                     目前該版本是官方主要更新維護(hù)的版本。最新版本:3.2.1(2017年3月20日)
            * jquery-xxx.js 與 jquery-xxx.min.js區(qū)別:
                1. jquery-xxx.js:開發(fā)版本筋夏。給程序員看的蒂胞,有良好的縮進(jìn)和注釋。體積大一些
                2. jquery-xxx.min.js:生產(chǎn)版本条篷。程序中使用骗随,沒有縮進(jìn)蛤织。體積小一些。程序加載更快

        2. 導(dǎo)入JQuery的js文件:導(dǎo)入min.js文件
        3. 使用
            var div1 = $("#div1");
            alert(div1.html());


3. JQuery對象和JS對象區(qū)別與轉(zhuǎn)換
    1. JQuery對象在操作時(shí)鸿染,更加方便指蚜。
    2. JQuery對象和js對象方法不通用的.
    3. 兩者相互轉(zhuǎn)換
        * jq -- > js : jq對象[索引] 或者 jq對象.get(索引)
        * js -- > jq : $(js對象)


4. 選擇器:篩選具有相似特征的元素(標(biāo)簽)

    1. 基本操作學(xué)習(xí):
        1. 事件綁定
            //1.獲取b1按鈕
            $("#b1").click(function(){
                alert("abc");
            });
        2. 入口函數(shù)
             $(function () {
               
             });
             window.onload  和 $(function) 區(qū)別
                 * window.onload 只能定義一次,如果定義多次,后邊的會將前邊的覆蓋掉
                 * $(function)可以定義多次的涨椒。
        3. 樣式控制:css方法
             // $("#div1").css("background-color","red");
            $("#div1").css("backgroundColor","pink");


    2. 分類
        1. 基本選擇器
            1. 標(biāo)簽選擇器(元素選擇器)
                * 語法: $("html標(biāo)簽名") 獲得所有匹配標(biāo)簽名稱的元素
            2. id選擇器 
                * 語法: $("#id的屬性值") 獲得與指定id屬性值匹配的元素
            3. 類選擇器
                * 語法: $(".class的屬性值") 獲得與指定的class屬性值匹配的元素
            4. 并集選擇器:
                * 語法: $("選擇器1,選擇器2....") 獲取多個(gè)選擇器選中的所有元素
        2. 層級選擇器
            1. 后代選擇器
                * 語法: $("A B ") 選擇A元素內(nèi)部的所有B元素       
            2. 子選擇器
                * 語法: $("A > B") 選擇A元素內(nèi)部的所有B子元素
        3. 屬性選擇器
            1. 屬性名稱選擇器 
                * 語法: $("A[屬性名]") 包含指定屬性的選擇器
            2. 屬性選擇器
                * 語法: $("A[屬性名='值']") 包含指定屬性等于指定值的選擇器
            3. 復(fù)合屬性選擇器
                * 語法: $("A[屬性名='值'][]...") 包含多個(gè)屬性條件的選擇器
        4. 過濾選擇器
            1. 首元素選擇器 
                * 語法: :first 獲得選擇的元素中的第一個(gè)元素
            2. 尾元素選擇器 
                * 語法: :last 獲得選擇的元素中的最后一個(gè)元素
            3. 非元素選擇器
                * 語法: :not(selector) 不包括指定內(nèi)容的元素
            4. 偶數(shù)選擇器
                * 語法: :even 偶數(shù)摊鸡,從 0 開始計(jì)數(shù)
            5. 奇數(shù)選擇器
                * 語法: :odd 奇數(shù),從 0 開始計(jì)數(shù)
            6. 等于索引選擇器
                * 語法: :eq(index) 指定索引元素
            7. 大于索引選擇器 
                * 語法: :gt(index) 大于指定索引元素
            8. 小于索引選擇器 
                * 語法: :lt(index) 小于指定索引元素
            9. 標(biāo)題選擇器
                * 語法: :header 獲得標(biāo)題(h1~h6)元素蚕冬,固定寫法
        5. 表單過濾選擇器
            1. 可用元素選擇器 
                * 語法: :enabled 獲得可用元素
            2. 不可用元素選擇器 
                * 語法: :disabled 獲得不可用元素
            3. 選中選擇器 
                * 語法: :checked 獲得單選/復(fù)選框選中的元素
            4. 選中選擇器 
                * 語法: :selected 獲得下拉框選中的元素

5. DOM操作
    1. 內(nèi)容操作
        1. html(): 獲取/設(shè)置元素的標(biāo)簽體內(nèi)容   <a><font>內(nèi)容</font></a>  --> <font>內(nèi)容</font>
        2. text(): 獲取/設(shè)置元素的標(biāo)簽體純文本內(nèi)容   <a><font>內(nèi)容</font></a> --> 內(nèi)容
        3. val(): 獲取/設(shè)置元素的value屬性值
    2. 屬性操作
        1. 通用屬性操作
            1. attr(): 獲取/設(shè)置元素的屬性
            2. removeAttr():刪除屬性
            3. prop():獲取/設(shè)置元素的屬性
            4. removeProp():刪除屬性

            * attr和prop區(qū)別免猾?
                1. 如果操作的是元素的固有屬性,則建議使用prop
                2. 如果操作的是元素自定義的屬性囤热,則建議使用attr
        2. 對class屬性操作
            1. addClass():添加class屬性值
            2. removeClass():刪除class屬性值
            3. toggleClass():切換class屬性
                * toggleClass("one"): 
                    * 判斷如果元素對象上存在class="one"猎提,則將屬性值one刪除掉。  如果元素對象上不存在class="one"旁蔼,則添加
            4. css():
    3. CRUD操作:
        1. append():父元素將子元素追加到末尾
            * 對象1.append(對象2): 將對象2添加到對象1元素內(nèi)部锨苏,并且在末尾
        2. prepend():父元素將子元素追加到開頭
            * 對象1.prepend(對象2):將對象2添加到對象1元素內(nèi)部,并且在開頭
        3. appendTo():
            * 對象1.appendTo(對象2):將對象1添加到對象2內(nèi)部棺聊,并且在末尾
        4. prependTo():
            * 對象1.prependTo(對象2):將對象1添加到對象2內(nèi)部伞租,并且在開頭


        5. after():添加元素到元素后邊
            * 對象1.after(對象2): 將對象2添加到對象1后邊。對象1和對象2是兄弟關(guān)系
        6. before():添加元素到元素前邊
            * 對象1.before(對象2): 將對象2添加到對象1前邊躺屁。對象1和對象2是兄弟關(guān)系
        7. insertAfter()
            * 對象1.insertAfter(對象2):將對象2添加到對象1后邊肯夏。對象1和對象2是兄弟關(guān)系
        8. insertBefore()
            * 對象1.insertBefore(對象2): 將對象2添加到對象1前邊经宏。對象1和對象2是兄弟關(guān)系

        9. remove():移除元素
            * 對象.remove():將對象刪除掉
        10. empty():清空元素的所有后代元素犀暑。
            * 對象.empty():將對象的后代元素全部清空,但是保留當(dāng)前對象以及其屬性節(jié)點(diǎn)


6. 案例

今日內(nèi)容:

1. JQuery 高級
    1. 動畫
    2. 遍歷
    3. 事件綁定
    4. 案例
    5. 插件

JQuery 高級

1. 動畫
    1. 三種方式顯示和隱藏元素
        1. 默認(rèn)顯示和隱藏方式
            1. show([speed,[easing],[fn]])
                1. 參數(shù):
                    1. speed:動畫的速度烁兰。三個(gè)預(yù)定義的值("slow","normal", "fast")或表示動畫時(shí)長的毫秒數(shù)值(如:1000)
                    2. easing:用來指定切換效果耐亏,默認(rèn)是"swing",可用參數(shù)"linear"
                        * swing:動畫執(zhí)行時(shí)效果是 先慢沪斟,中間快广辰,最后又慢
                        * linear:動畫執(zhí)行時(shí)速度是勻速的
                    3. fn:在動畫完成時(shí)執(zhí)行的函數(shù),每個(gè)元素執(zhí)行一次主之。

            2. hide([speed,[easing],[fn]])
            3. toggle([speed],[easing],[fn])
        
        2. 滑動顯示和隱藏方式
            1. slideDown([speed],[easing],[fn])
            2. slideUp([speed,[easing],[fn]])
            3. slideToggle([speed],[easing],[fn])

        3. 淡入淡出顯示和隱藏方式
            1. fadeIn([speed],[easing],[fn])
            2. fadeOut([speed],[easing],[fn])
            3. fadeToggle([speed,[easing],[fn]])

2. 遍歷
    1. js的遍歷方式
        * for(初始化值;循環(huán)結(jié)束條件;步長)
    2. jq的遍歷方式
        1. jq對象.each(callback)
            1. 語法:
                jquery對象.each(function(index,element){});
                    * index:就是元素在集合中的索引
                    * element:就是集合中的每一個(gè)元素對象

                    * this:集合中的每一個(gè)元素對象
            2. 回調(diào)函數(shù)返回值:
                * true:如果當(dāng)前function返回為false择吊,則結(jié)束循環(huán)(break)。
                * false:如果當(dāng)前function返回為true槽奕,則結(jié)束本次循環(huán)几睛,繼續(xù)下次循環(huán)(continue)
        2. $.each(object, [callback])
        3. for..of: jquery 3.0 版本之后提供的方式
            for(元素對象 of 容器對象)
    
3. 事件綁定
    1. jquery標(biāo)準(zhǔn)的綁定方式
        * jq對象.事件方法(回調(diào)函數(shù));
        * 注:如果調(diào)用事件方法粤攒,不傳遞回調(diào)函數(shù)所森,則會觸發(fā)瀏覽器默認(rèn)行為囱持。
            * 表單對象.submit();//讓表單提交
    2. on綁定事件/off解除綁定
        * jq對象.on("事件名稱",回調(diào)函數(shù))
        * jq對象.off("事件名稱")
            * 如果off方法不傳遞任何參數(shù),則將組件上的所有事件全部解綁
    3. 事件切換:toggle
        * jq對象.toggle(fn1,fn2...)
            * 當(dāng)單擊jq對象對應(yīng)的組件后焕济,會執(zhí)行fn1.第二次點(diǎn)擊會執(zhí)行fn2.....
            
        * 注意:1.9版本 .toggle() 方法刪除,jQuery Migrate(遷移)插件可以恢復(fù)此功能纷妆。
             <script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>

4. 案例
    1. 廣告顯示和隱藏
        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="UTF-8">
            <title>廣告的自動顯示與隱藏</title>
            <style>
                #content{width:100%;height:500px;background:#999}
            </style>
        
            <!--引入jquery-->
            <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
            <script>
                /*
                    需求:
                        1. 當(dāng)頁面加載完,3秒后晴弃。自動顯示廣告
                        2. 廣告顯示5秒后掩幢,自動消失。
        
                    分析:
                        1. 使用定時(shí)器來完成肝匆。setTimeout (執(zhí)行一次定時(shí)器)
                        2. 分析發(fā)現(xiàn)JQuery的顯示和隱藏動畫效果其實(shí)就是控制display
                        3. 使用  show/hide方法來完成廣告的顯示
                 */
        
                //入口函數(shù)粒蜈,在頁面加載完成之后,定義定時(shí)器旗国,調(diào)用這兩個(gè)方法
                $(function () {
                   //定義定時(shí)器枯怖,調(diào)用adShow方法 3秒后執(zhí)行一次
                   setTimeout(adShow,3000);
                   //定義定時(shí)器,調(diào)用adHide方法能曾,8秒后執(zhí)行一次
                    setTimeout(adHide,8000);
                });
                //顯示廣告
                function adShow() {
                    //獲取廣告div度硝,調(diào)用顯示方法
                    $("#ad").show("slow");
                }
                //隱藏廣告
                function adHide() {
                    //獲取廣告div,調(diào)用隱藏方法
                    $("#ad").hide("slow");
                }

?
</script>
</head>
<body>

<div>

<div id="ad" style="display: none;">
<img style="width:100%" src="../img/adv.jpg" />
</div>

            <!-- 下方正文部分 -->
            <div id="content">
                正文部分
            </div>
        </div>
        </body>
        </html>


    2. 抽獎
        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="UTF-8">
            <title>jquery案例之抽獎</title>
            <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
        
            <script language='javascript' type='text/javascript'>
        
                /*
                    分析:
                        1. 給開始按鈕綁定單擊事件
                            1.1 定義循環(huán)定時(shí)器
                            1.2 切換小相框的src屬性
                                * 定義數(shù)組寿冕,存放圖片資源路徑
                                * 生成隨機(jī)數(shù)蕊程。數(shù)組索引


                        2. 給結(jié)束按鈕綁定單擊事件
                            1.1 停止定時(shí)器
                            1.2 給大相框設(shè)置src屬性
        
                 */
                var imgs = ["../img/man00.jpg",
                            "../img/man01.jpg",
                            "../img/man02.jpg",
                            "../img/man03.jpg",
                            "../img/man04.jpg",
                            "../img/man05.jpg",
                            "../img/man06.jpg",
                            ];
                var startId;//開始定時(shí)器的id
                var index;//隨機(jī)角標(biāo)
                $(function () {
                    //處理按鈕是否可以使用的效果
                    $("#startID").prop("disabled",false);
                    $("#stopID").prop("disabled",true);


                   //1. 給開始按鈕綁定單擊事件
                    $("#startID").click(function () {
                        // 1.1 定義循環(huán)定時(shí)器 20毫秒執(zhí)行一次
                        startId = setInterval(function () {
                            //處理按鈕是否可以使用的效果
                            $("#startID").prop("disabled",true);
                            $("#stopID").prop("disabled",false);


                            //1.2生成隨機(jī)角標(biāo) 0-6
                            index = Math.floor(Math.random() * 7);//0.000--0.999 --> * 7 --> 0.0-----6.9999
                            //1.3設(shè)置小相框的src屬性
                            $("#img1ID").prop("src",imgs[index]);
        
                        },20);
                    });


                    //2. 給結(jié)束按鈕綁定單擊事件
                    $("#stopID").click(function () {
                        //處理按鈕是否可以使用的效果
                        $("#startID").prop("disabled",false);
                        $("#stopID").prop("disabled",true);


                       // 1.1 停止定時(shí)器
                        clearInterval(startId);
                       // 1.2 給大相框設(shè)置src屬性
                        $("#img2ID").prop("src",imgs[index]).hide();
                        //顯示1秒之后
                        $("#img2ID").show(1000);
                    });
                });

?
?
</script>

        </head>
        <body>
        
        <!-- 小像框 -->
        <div style="border-style:dotted;width:160px;height:100px">
            <img id="img1ID" src="../img/man00.jpg" style="width:160px;height:100px"/>
        </div>
        
        <!-- 大像框 -->
        <div
                style="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px">
            <img id="img2ID" src="../img/man00.jpg" width="800px" height="500px"/>
        </div>
        
        <!-- 開始按鈕 -->
        <input
                id="startID"
                type="button"
                value="點(diǎn)擊開始"
                style="width:150px;height:150px;font-size:22px">
        
        <!-- 停止按鈕 -->
        <input
                id="stopID"
                type="button"
                value="點(diǎn)擊停止"
                style="width:150px;height:150px;font-size:22px">


        </body>
        </html>

5. 插件:增強(qiáng)JQuery的功能
    1. 實(shí)現(xiàn)方式:
        1. $.fn.extend(object)       //由對象調(diào)用
            * 增強(qiáng)通過Jquery獲取的對象的功能  $("#id")
            *代碼:
            $.fn.extend({
            check:function(){
            },
            uncheck:function(){
            }
             })
        2. $.extend(object)                //由全局變量$調(diào)用
            * 增強(qiáng)JQeury對象自身的功能  $/jQuery
            * 代碼:
            *代碼:
            $.extend({
            max:function(){
            },
            min:function(){
            }
             })
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市驼唱,隨后出現(xiàn)的幾起案子藻茂,更是在濱河造成了極大的恐慌,老刑警劉巖玫恳,帶你破解...
    沈念sama閱讀 212,657評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件辨赐,死亡現(xiàn)場離奇詭異,居然都是意外死亡京办,警方通過查閱死者的電腦和手機(jī)掀序,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,662評論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來惭婿,“玉大人不恭,你說我怎么就攤上這事〔萍ⅲ” “怎么了换吧?”我有些...
    開封第一講書人閱讀 158,143評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長钥星。 經(jīng)常有香客問我沾瓦,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,732評論 1 284
  • 正文 為了忘掉前任暴拄,我火速辦了婚禮漓滔,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘乖篷。我一直安慰自己响驴,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,837評論 6 386
  • 文/花漫 我一把揭開白布撕蔼。 她就那樣靜靜地躺著豁鲤,像睡著了一般。 火紅的嫁衣襯著肌膚如雪鲸沮。 梳的紋絲不亂的頭發(fā)上琳骡,一...
    開封第一講書人閱讀 50,036評論 1 291
  • 那天,我揣著相機(jī)與錄音讼溺,去河邊找鬼楣号。 笑死,一個(gè)胖子當(dāng)著我的面吹牛怒坯,可吹牛的內(nèi)容都是我干的炫狱。 我是一名探鬼主播,決...
    沈念sama閱讀 39,126評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼剔猿,長吁一口氣:“原來是場噩夢啊……” “哼视译!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起归敬,我...
    開封第一講書人閱讀 37,868評論 0 268
  • 序言:老撾萬榮一對情侶失蹤酷含,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后汪茧,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體椅亚,經(jīng)...
    沈念sama閱讀 44,315評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,641評論 2 327
  • 正文 我和宋清朗相戀三年陆爽,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了什往。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片扳缕。...
    茶點(diǎn)故事閱讀 38,773評論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡慌闭,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出躯舔,到底是詐尸還是另有隱情驴剔,我是刑警寧澤,帶...
    沈念sama閱讀 34,470評論 4 333
  • 正文 年R本政府宣布粥庄,位于F島的核電站丧失,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏惜互。R本人自食惡果不足惜布讹,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,126評論 3 317
  • 文/蒙蒙 一琳拭、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧描验,春花似錦白嘁、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,859評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至呼股,卻和暖如春耕魄,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背彭谁。 一陣腳步聲響...
    開封第一講書人閱讀 32,095評論 1 267
  • 我被黑心中介騙來泰國打工吸奴, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人缠局。 一個(gè)月前我還...
    沈念sama閱讀 46,584評論 2 362
  • 正文 我出身青樓奄抽,卻偏偏與公主長得像,于是被迫代替她去往敵國和親甩鳄。 傳聞我的和親對象是個(gè)殘疾皇子逞度,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,676評論 2 351

推薦閱讀更多精彩內(nèi)容