jQuery基礎知識總結二

 * DOM操做css

   *1 基本操做html

     * html() - 等價於innerHTML屬性面試

     * text() - 等價於textContent屬性json

     * val() - 等價於value屬性數組

     * attr() - 等價於getAttribute()setAttribute()併發

       * removeAttr() - 等價於removeAttribute()app

   * 2 CSS操做dom

     ①* attr()方法 - 設置樣式(刪除原有樣式,設置新樣式)ide

       * style屬性和class屬性函數

     ②* class操做

         * addClass() - 添加樣式

         * removeClass() - 刪除樣式

         * removeClass() - 刪除全部樣式

         * removeClass(className) - 刪除指定樣式

          * toggleClass(className) - 切換樣式

          * 判斷當前元素是否具備className樣式

             * 若是有,刪除 - removeClass()

             * 若是有,添加 - addClass()

          * hasClass(className) - 判斷是否包含指定樣式

     ③* css()方法

       * css(name, value) - 設置一個樣式屬性

       * css({name:value,name:value,...}) - 設置多個樣式屬性

   *3 遍歷元素

     * 祖先元素與後代元素

       * 祖先元素 - parents()

       * 後代元素 - find(expr)

     * 父元素與子元素

       * 父元素 - parent()

       * 子元素 - children()

     * 兄弟元素

       * 前一個兄弟 - prev()

       * 前面全部的兄弟 - prevAll()

       * 後一個兄弟 - next()

       * 後面全部的兄弟 - nextAll()

       * 全部兄弟 - siblings()

   *4 建立元素 - $(HTML代碼)

   * 5插入節點

     * 內部插入

       * append()

       * prepend()

     * 外部插入

       * after()

       * before()

   * 6替換節點

     * replaceWith()

     * replaceAll() - 顛倒了的replaceWith()

   * 7刪除節點

     * remove() - 刪除自身與後代

     * empty() - 保留自身,刪除後代

   *8 複製節點

     * clone(boolean) - 是否複製事件

 * 9事件

   * ready()方法

     * 做用 - 等價於 window.onload

     * window.onload的區別

       * ready()

         * 每個HTML頁面中容許存在多個

         * 具備簡寫

           * $().ready(function(){})

           * $(function(){})

         * 速度快 - 只加載DOM結構

       * window.onload

         * 每個HTML頁面中只能存在一個

         * 沒有簡寫

         * 速度慢 - 加載頁面全部內容

   * 10JS庫衝突

     * 緣由 - $符號的使用權

     * 原則 - jQuery主動放棄

     * 解決

       * jQuery.noConflict(); - 表示jQuery主動放棄

       * 利用自調函數

         (function($){

 

         })(jQuery);

       * 利用ready()方法

         $(function($){})

25今天的內容:

 25.1 事件

   25.1.1 事件的綁定與解綁

     * bind(type, data, fn)

       * type - 綁定的事件名稱

       * data - (可選)做爲event.data屬性值傳遞給事件對象的額外數據對象

       * fn - 綁定事件的對應處理函數

     * unbind(type, fn)

       * type - 解綁的事件名稱

       * fn - 解綁事件的對應處理函數

 TODO bind()方法綁定多個事件

 TODO * type - 若是綁定的是多個事件,中間使用空格隔開

$('h5').bind('mouseover mouseout',function(){

            var $div = $(this).next();

            if($div.is(':hidden')){

                $div.show();

            }else{

                $div.hide();

            }

        });

 unbind()方法解綁

            TODO * 不傳遞任何參數時 - 表示解綁全部事件

            TODO * 傳遞一個事件名稱 - 表示解綁指定事件

            TODO * 傳遞多個事件名稱 - 表示解綁多個事件

 $('h5').unbind('mouseover mouseout');

 unbind()方法的fn參數

            TODO * 默認狀況下,容許不傳遞

  TODO * 傳遞解綁的事件處理函數fn - 必須與 bind() 方法的處理函數是同一個

 $('#btn').click(function(){

            alert('xxx');

        });

        // TODO trigger()方法 - 用於模擬用戶觸發指定事件

        $('#btn').trigger('click');

     * 面試題 - bind()one()live()on()的區別

               unbind()die()off()的區別

       * one() - 事件綁定,只能綁定一次(觸發一次即失效)

       * live() - 事件綁定,爲後面添加的元素綁定事件

         * jQuery 1.7版本後,被棄用了

         * jQuery 1.7版本後,新增delegate()方法,做用與live()相同

       * bind() - 事件綁定

       * on() - 統一以上全部事件綁定,on()bind()的底層邏輯

         * jQuery 1.7版本後,新增

   24.2 動畫

     24.2.1 顯示與隱藏 - 同時改變寬度和高度

       * show() - 顯示

         * show() - 無參版本,沒有動畫效果

         * show() - 有參版本,具備動畫效果

           * 參數 - slownormalfast預約義,自定義時間(毫秒)

       * hide() - 隱藏

         * hide() - 無參版本,沒有動畫效果

         * hide() - 有參版本,具備動畫效果

           * 參數 - slownormalfast預約義,自定義時間(毫秒)

       * toggle() - show() + hide()

         * 顯示與隱藏的切換效果

$('h5').click(function(){
     $(this).next().slideToggle(3344);
 })

     * 滑動效果 - 改變高度

       * slideUp()

         * 注意 - 並無提供無動畫版本

         * 不傳遞參數時 - 底層邏輯默認提供一個動畫執行的時間

       * slideDown()

       * slideToggle() - slideUp() + slideDown()

         * 向上滑動與向下滑動的切換效果

$('#navigation ul li:has(ul)').mouseover(function(event){
     $(this).children('ul').slideDown();
 }).mouseOut(function(){
     $(this).children('ul').slideUp();
 })

hover(fn,fn)個模仿懸停事件(鼠標移動到一個對象上面及移出這個對象)的方法。這是一個自定義的方法,它爲頻繁使用的任務提供了一種「保持在其中」的狀態。

$('#navigation ul li:has(ul)').hover(function(){
     $(this).children('ul').stop(true,true).slideDown(444);
 },function(){
     $(this).children('ul').stop(true,true).slideUp("fast");
 })

 

     * 淡入淡出 - 改變透明度

       * fadeIn() - 淡入

       * fadeOut() - 淡出

       * fadeTo(speed, opacity) - 將指定元素的透明度改變到指定值

         * opacity - 表示設置透明度變化到的值

       * fadeToggle() - jQuery 1.4版本之後

     * 自定義動畫

       * animate(params, [duration], [easing], [callback])

         * params - 表示用於實現動畫效果的CSS樣式屬性

           * 格式 - Object 類型

             { name : value, name : value,... }

         * duration - 表示用於實現動畫所執行的時長,單位爲毫秒

         * easing - 要使用的擦除效果的名稱(須要插件支持)

         * callback - 表示動畫執行完畢後的回調函數

       *animate(params, options)

         * params - 表示用於實現動畫效果的CSS樣式屬性

           * 格式 - Object 類型

             { name : value, name : value,... }

         * options

           * 格式 - Object 類型

           * 選項

             * duration - 表示用於實現動畫所執行的時長,單位爲毫秒

             * easing - 要使用的擦除效果的名稱(須要插件支持)

             * complete - 表示動畫執行完畢後的回調函數

             * queue - true時排隊效果,爲false時併發效果

       * 兩種用法的效果

         * 併發效果 - 同時改變多個CSS樣式屬性

            $('#panel').animate({

                left : 400,

                top : 400

            },3000)

         * 排隊效果 - 多個CSS樣式屬性按照前後順序依次改變

            $('#panel').animate({

                left : 400

            },3000).animate({

                top : 400

            },3000)

       * 注意 - 全部與顏色相關的 CSS 樣式屬性不能使用

         * background-color

         * border-color

         * color

 * jQuery類數組對象

   * 特色 - 容許存儲多個元素,有序排列

   * 屬性

     * length - 表示長度,指的是當前存儲元素的個數

   * 方法

     * 循環遍歷方法

       * $().each(function(index,domEle){})以每個匹配的元素做爲上下文來執行一個函數返回 'false' 將中止循環 (就像在普通的循環中使用 'break')。返回 'true' 跳至下一個循環(就像在普通的循環中使用'continue')

       * $.each(object,function(index,domEle){})通用例遍方法,可用於例遍對象和數組不一樣於例遍 jQuery 對象的 $().each() 方法,此方法可用於例遍任何對象。回調函數擁有兩個參數:第一個爲對象的成員或數組的索引,第二個爲對應變量或內容。若是須要退出 each 循環可以使回調函數返回 false,其它返回值將被忽略。

     * toArray()方法(調用toArray()方法打印內容,打印方法的返回值)

       * jQuery對象轉換爲真正的數組

       * 注意 - 只能操做 jQuery 對象

     * $.inArray(value, array)

       * 做用 - 表示判斷指定的值在指定數組中的位置(是否存在)(索引值)

var arr = [1,2,3,4,5];
console.log($.inArray(1,arr));//0下角標

  * 注: 若是數組包含指定的值 - 返回對應的索引值

         * 若是數組不包含指定的值 - 返回固定值 -1

   TODO   $.inArray()不能判斷對象中是否包含屬性或方法,in能夠

TODO $.inArray()方法
TODO * 做用 - 用於判斷指定 jQuery 對象中是否包含指定的 DOM 對象
TODO   * 若是包含,返回對應的索引值
TODO   * 若是不包含,返回 -1

var obj = {
      name : 'zhangwuji',
      age : 18}
  console.log($.inArray('name',obj));//-1
  console.log('name' in obj);//true

     * $.makeArray(obj)

       * 做用 - 將類數組對象轉換爲數組對象

       * 注意 :類數組對象 - 不單單只是指 jQuery 對象,全部類數組對象均可以

var $inputs = $('input');
 console.log($.makeArray($inputs));//array[5]

 * JSON格式

   * $.pareseJSON() - jQuery提供了將JSON字符串轉換爲JSON對象的方法

var jsonObj = {
     name : 'zhangwuji',
     age : 18
 }
 var jsonStr = '{"name":"zhangwuji","age":18}';
 console.log(JSON.parse(jsonStr));//obj
 console.log(JSON.stringify(jsonObj));//{"name":"zhangwuji","age":18}
 console.log($.parseJSON(jsonStr));//obj

 

 * jQuery插件

   TODO laydate插件
   TODO * 最初設計時,以 jQuery 的插件出現
   TODO * 後期發展,脫離了 jQery

TODO laydate 插件
TODO * class="laydate-icon" - 插件提供的
TODO * placeholder - HTML5新增屬性,提供默認提示內容
TODO   * 相似於 <input> 標籤中的 value 屬性
TODO * 經過事件屬性實現
TODO   * laydate()方法 - 插件提供的

<input placeholder="請輸入日期" class="laydate-icon" onclick="laydate()">
<!-- TODO 老版本提供的 -->
<input placeholder="請輸入日期" id="hello1">
<span class="laydate-icon" onclick="laydate({elem: '#hello1'});"></span>

 

   * 日期插件

     * 基本用法

       * HTML頁面中引入插件文件

       * <input>標籤設置 onclick 事件屬性,值爲 laydate() 方法

    1 TODO 參考了基本用法 - 本身想到的
    $('#mydate').click(laydate);

2 TODO 插件提供的JS方式
TODO * 直接調用 laydate(options) 方法
TODO   * options - Object 類型
TODO * 選項
TODO   * elem - 設置對應的元素(#ID)
TODO   * format - 設置日期格式
TODO     YYYY-MM-DD - 標準日期格式

laydate({
       elem : '#mydate',
       // TODO YYYY-MM-DD
       format : 'YYYY/MM/DD',
       istoday : false,
       isclear : false,
       min : '1999-01-01 00:00:00'
   });

 

jQuery插件

表單驗證插件:常見的有四種(及管網地址)

TODO effect(effect, options, duration, callback)
      TODO * effect - 表示設置的動畫效果
      TODO   * blind
      TODO   * bounce
      TODO   * ...
      TODO * options - 選項
      TODO * duration - 表示動畫執行的時長,單位爲毫秒
      TODO * callback - 表示動畫執行完畢後的回調函數
   */
/*  $('#effect').effect('blind',{},3000);*/
  $('#effect').effect('blind',{},3000);

draggable()方法的選項
* axis - 設置只能在x軸或y軸方向拖動
* containment - 設置在某個區域內拖動
* cursor - 設置拖動時鼠標的樣式
* cursorAt - 設置鼠標的相對定位
* handle - 設置指定元素觸發鼠標按下事件才能拖動
* cancel - 防止在指定元素上拖動
* revert - 當中止拖動時,元素是否被重置到初始位置
* snap - 拖動元素是否吸附在其餘元素
* snapMode - 設置拖動元素在指定元素的哪一個邊緣
  * snap設置爲true時該選項有效
  * 可選值 - inner|outer|both

$( "#draggable1" ).draggable({ axis: "y" });
$( "#draggable2" ).draggable({ axis: "x" });
$( "#draggable3" ).draggable({ containment: "#containment-wrapper" });
$( "#draggable4" ).draggable({ cursor: "move", cursorAt: { top: 56, left: 56 } });
$( "#draggable5" ).draggable({ handle: "p" });
$( "#draggable6" ).draggable({ cancel: "p.ui-widget-header" });
$( "#draggable7" ).draggable({ revert: true });
$( "#draggable8" ).draggable({ snap: true });
$( "#draggable9" ).draggable({ snap: "#containment-wrapper", snapMode: "outer" });

 

dropaable()方法的選項
* accept - 指定可拖動的元素可被接受
* activeClass - 被容許拖放的元素覆蓋時,改變樣式
* hoverClass - 被容許拖放的元素懸停時,改變樣式
droppable()方法的事件
* drop - 該事件在被容許拖放的元素覆蓋時觸發

$( "#droppable" ).droppable({
    accept: "#draggable",
    activeClass: "ui-state-hover",
    hoverClass: "ui-state-active",
    drop: function( event, ui ) {
        $( this )
                .addClass( "ui-state-highlight" )
                .find( "p" )
                .html( "Dropped!" );    }});

相關文章
相關標籤/搜索