JQuery 基礎

JQuery 基礎:

1. 概念: 一個JavaScript框架晃虫。簡化JS開發(fā)
    * jQuery是一個快速龟糕、簡潔的JavaScript框架竹椒,是繼Prototype之后又一個優(yōu)秀的JavaScript代碼庫(或JavaScript框架)藕帜。jQuery設計的宗旨   是“write Less,Do More”赏迟,即倡導寫更少的代碼,做更多的事情蠢棱。它封裝JavaScript常用的功能代碼锌杀,提供一種簡便的JavaScript設計模式,優(yōu) 化HTML文檔操作泻仙、事件處理糕再、動畫設計和Ajax交互。

    * JavaScript框架:本質上就是一些js文件玉转,封裝了js的原生代碼而已
2. 快速入門
    1. 步驟:
        1. 下載JQuery
            * 目前jQuery有三個大版本:
                1.x:兼容ie678,使用最為廣泛的突想,官方只做BUG維護,
                     功能不再新增。因此一般項目來說猾担,使用1.x版本就可以了袭灯,
                     最終版本:1.12.4 (2016年5月20日)
                2.x:不兼容ie678,很少有人使用绑嘹,官方只做BUG維護稽荧,
                     功能不再新增。如果不考慮兼容低版本的瀏覽器可以使用2.x工腋,
                     最終版本:2.2.4 (2016年5月20日)
                3.x:不兼容ie678姨丈,只支持最新的瀏覽器。除非特殊要求夷蚊,
                     一般不會使用3.x版本的构挤,很多老的jQuery插件不支持這個版本。
                     目前該版本是官方主要更新維護的版本惕鼓。最新版本:3.2.1(2017年3月20日)
            * jquery-xxx.js 與 jquery-xxx.min.js區(qū)別:
                1. jquery-xxx.js:開發(fā)版本筋现。給程序員看的,有良好的縮進和注釋箱歧。體積大一些
                2. jquery-xxx.min.js:生產版本矾飞。程序中使用,沒有縮進呀邢。體積小一些洒沦。程序加載更快

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


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


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

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

5. DOM操作
    1. 內容操作
        1. html(): 獲取/設置元素的標簽體內容   <a><font>內容</font></a>  --> <font>內容</font>
        2. text(): 獲取/設置元素的標簽體純文本內容   <a><font>內容</font></a> --> 內容
        3. val(): 獲取/設置元素的value屬性值
    2. 屬性操作
        1. 通用屬性操作
            1. attr(): 獲取/設置元素的屬性
            2. removeAttr():刪除屬性
            3. prop():獲取/設置元素的屬性
            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元素內部僧家,并且在末尾
        2. prepend():父元素將子元素追加到開頭
            * 對象1.prepend(對象2):將對象2添加到對象1元素內部雀摘,并且在開頭
        3. appendTo():
            * 對象1.appendTo(對象2):將對象1添加到對象2內部,并且在末尾
        4. prependTo():
            * 對象1.prependTo(對象2):將對象1添加到對象2內部八拱,并且在開頭


        5. after():添加元素到元素后邊
            * 對象1.after(對象2): 將對象2添加到對象1后邊阵赠。對象1和對象2是兄弟關系
        6. before():添加元素到元素前邊
            * 對象1.before(對象2): 將對象2添加到對象1前邊烁落。對象1和對象2是兄弟關系
        7. insertAfter()
            * 對象1.insertAfter(對象2):將對象2添加到對象1后邊。對象1和對象2是兄弟關系
        8. insertBefore()
            * 對象1.insertBefore(對象2): 將對象2添加到對象1前邊豌注。對象1和對象2是兄弟關系

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


6. 案例
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末轧铁,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子旦棉,更是在濱河造成了極大的恐慌齿风,老刑警劉巖,帶你破解...
    沈念sama閱讀 219,270評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件绑洛,死亡現(xiàn)場離奇詭異救斑,居然都是意外死亡,警方通過查閱死者的電腦和手機真屯,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,489評論 3 395
  • 文/潘曉璐 我一進店門脸候,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人绑蔫,你說我怎么就攤上這事运沦。” “怎么了配深?”我有些...
    開封第一講書人閱讀 165,630評論 0 356
  • 文/不壞的土叔 我叫張陵携添,是天一觀的道長。 經常有香客問我篓叶,道長烈掠,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,906評論 1 295
  • 正文 為了忘掉前任缸托,我火速辦了婚禮左敌,結果婚禮上,老公的妹妹穿的比我還像新娘嗦董。我一直安慰自己母谎,他們只是感情好,可當我...
    茶點故事閱讀 67,928評論 6 392
  • 文/花漫 我一把揭開白布京革。 她就那樣靜靜地躺著奇唤,像睡著了一般。 火紅的嫁衣襯著肌膚如雪匹摇。 梳的紋絲不亂的頭發(fā)上咬扇,一...
    開封第一講書人閱讀 51,718評論 1 305
  • 那天,我揣著相機與錄音廊勃,去河邊找鬼懈贺。 笑死经窖,一個胖子當著我的面吹牛,可吹牛的內容都是我干的梭灿。 我是一名探鬼主播画侣,決...
    沈念sama閱讀 40,442評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼堡妒!你這毒婦竟也來了配乱?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,345評論 0 276
  • 序言:老撾萬榮一對情侶失蹤皮迟,失蹤者是張志新(化名)和其女友劉穎搬泥,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體伏尼,經...
    沈念sama閱讀 45,802評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡忿檩,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,984評論 3 337
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了爆阶。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片燥透。...
    茶點故事閱讀 40,117評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖扰她,靈堂內的尸體忽然破棺而出兽掰,到底是詐尸還是另有隱情,我是刑警寧澤徒役,帶...
    沈念sama閱讀 35,810評論 5 346
  • 正文 年R本政府宣布孽尽,位于F島的核電站,受9級特大地震影響忧勿,放射性物質發(fā)生泄漏杉女。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,462評論 3 331
  • 文/蒙蒙 一鸳吸、第九天 我趴在偏房一處隱蔽的房頂上張望熏挎。 院中可真熱鬧,春花似錦晌砾、人聲如沸坎拐。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,011評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽哼勇。三九已至,卻和暖如春呕乎,著一層夾襖步出監(jiān)牢的瞬間积担,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,139評論 1 272
  • 我被黑心中介騙來泰國打工猬仁, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留帝璧,地道東北人先誉。 一個月前我還...
    沈念sama閱讀 48,377評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像的烁,于是被迫代替她去往敵國和親褐耳。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,060評論 2 355

推薦閱讀更多精彩內容

  • (續(xù)jQuery基礎(2)) 四渴庆、動畫篇 第1章 動畫基礎隱藏和顯示 (1)隱藏元素的hide方法 讓頁面上的元素...
    凜0_0閱讀 458評論 0 6
  • (續(xù)jQuery基礎(1)) 第5章 DOM節(jié)點的復制與替換 (1)DOM拷貝clone() 克隆節(jié)點是DOM的常...
    凜0_0閱讀 1,342評論 0 8
  • jQuery基礎(一)——樣式篇 1-2環(huán)境搭建 1-3 jQuery HelloWorld體驗 $(docume...
    croyance0601閱讀 1,084評論 0 8
  • JQuery基礎 小知識點:instanceof 函數(shù)判斷對象是否是某種類型的實例漱病。 下載 引用 基礎語法 彈出提...
    棕色試劑瓶閱讀 158評論 0 0
  • 久違的晴天,家長會把曼。 家長大會開好到教室時,離放學已經沒多少時間了漓穿。班主任說已經安排了三個家長分享經驗嗤军。 放學鈴聲...
    飄雪兒5閱讀 7,523評論 16 22