Jquery

1.Jquery 的定義

​ 簡單來說，jQuery是一個小巧，功能豐富的 js 庫存

2. Jquery 的基本使用

​ 2.1引入jQuery檔案**

​ 2.2寫 一個入口函式**

​ 2.3找到你要操作的元素(jQuery選擇器)，去操作它(給他新增屬性，樣式，文字)

3.入口函式的兩種種寫法

1. $(document).ready(function(){})
2. $(function(){}) //常用寫法

4.window.onload = function(){} 與 $(function(){}) 的執行順序先後

​ 3.4.1版本之前都是 $(function(){}) 先執行，在3.4.1後 window.onload = function(){}先執行

5.$是一個函式

1.jquery檔案結構

​ ( function(){ window.jQuery = window.$ = jQuery; } () ); 一個自動執行函式

2.js檔案執行過程

• 引入一個js 檔案，會執行這個檔案中的程式碼
• jQuery檔案是一個自執行函式，執行這個jQuery檔案中的程式碼就是執行這個自執行函式
• 這個自執行檔案就是給window物件新增一個jQuery屬性和$屬性

3.$是一個函式

​ 1. 如果引數傳遞的是一個匿名函式——入口函式

​ $(function(){});

​ 2. 如果引數傳遞的是一個字串—選擇器/建立一個標籤

​ $(’#one’)

​ $(‘div啦啦啦啦/div’)

​ 3. 如果引數傳遞的是一個dom物件，那麼它會把dom物件轉化為jQuery物件

​ 1. dom物件

​ 原生js獲取到的物件，特點是：只能呼叫dom方法和屬性，不能呼叫jQuery的方法和屬性

​ var div1 = document.getElementById('one');

​ div1.style.backgroundColor = 'red'// 正常呼叫dom屬性

​ div1.css('backgroundColor','green') ，//報錯 因為不能呼叫jQuery的方法和屬性

​ 2.jQuery物件

​ 利用jQuery選擇器獲取到的物件，特點: 只能呼叫jquer方法和屬性，不能呼叫dom的方法和屬性

​ var $div1 = $('#one')

​ $div1.css('backgroundColor','green') ;//正常

​ $div1.style.backgroundColor = 'red' //報錯 因為不能呼叫dom物件的屬性

​ 3.jQuery物件是什麼樣子的？

​ 首先jQuery物件是一個偽陣列，jQuery物件其實就是dom物件的一個包裝集

​ 4.dom物件轉化為jQuery物件

​ $(dom物件)

​ 5. jQuery物件轉化為dom物件

​ 5.1使用下標取出來

​ var $divs = $('div'); //jQuery物件

​ var div1 = $divs[0]; //dom物件

​ 5.2使用jQuery的方法 get(index);

​ var div2 = $divs.get(1)

6.jQuery物件的方法

​ 6.1 text() 方法

​ 獲取文字： text() 方法不給引數；會獲取標籤中的所有文字，包括後代元素的文字

​ 設定文字：text(‘我是新設定的文字’) ; 設定的文字會覆蓋原來的文字資訊，如果設定的文字包含標籤，不會解析

​ 如果jQuery物件 裡面包含多個dom元素，所有dom元素的文字都會被新設定的文字覆蓋

​ 6.2 css() 方法

​ **獲取樣式：css(‘樣式名’) **css(‘width’) //結果 200px css(‘border’) //結果 2px solid rgb(255,0,0)

​ **注意：**獲取包含了多個dom元素的jQuery物件的樣式，只能獲取到第一個dom物件的樣式

**設定樣式:**   css(樣式名，樣式值)

​ 6.2.1設定單樣式( css(樣式名，樣式值) )

​ $('#div1').css('width','300px')

​ $('#div1').css('backgroundColor','red')

​ 6.2.2設定多樣式( css({}) )

  $('#div1').css({
                    width:300,                  

   					height:'400px',

					backgroundColor:'green' })

7.jQuery的基本選擇器

名稱	用法	描述
ID選擇器	$(’#id’)	獲取指定ID的元素
類選擇器	$(’.class’)	獲取同一類class的元素
標籤選擇器	$(‘div’)	獲取同一類標籤的元素
並集選擇器	$(‘div,p,li’)	使用逗號分隔，只要符合條件之一即可
交集選擇器	$(‘div.redClass’)	獲取類名為redClass的div元素

7.2jQuery過濾選擇器

7.3jQuery篩選選擇器(方法)

8.滑鼠事件

mouseover 事件在滑鼠移動到選取的元素及其子元素時觸發

mouseenter 事件只在滑鼠移動到選取的元素時觸發

moustout 事件在滑鼠離開時觸發

9.class類操作

**9.1新增類 addClass(類名)**

​ $('#div1').addClass('class01') //新增單個類 class01

​ $('#div1').addClass('class01 class02') //新增多個類 class01 class02 (中間用空格隔開)

​ 9.2移除類 removeClass(類名)

​ $('#div1').removeClass('class01') //刪除單個類 class01

​ $('#div1').removeClass('class01 class02') //刪除多個類 class01 class02 (中間用空格隔開)

​ $('#div1').removeClass() //刪除所有類

​ 9.3判斷類 hasClass()

​ $('#div1').hasClass('class01') //判斷一個元素有沒有這個類，有就返回true，沒有則為false

​ 9.4切換類 toggleClass()

​ $('#div1').toggleClass('class01') //如果元素有這個類則移除這個類，沒有這個類則新增這個類

10.jquery動畫

**10.1 show() 顯示方法**

​ 引數1：代表執行動畫的時長，毫秒值，也可以是時長字串 fast(200ms)，normal(400ms), slow(600ms) 例：show(2000)

​ 引數2：動畫執行完畢之後的回撥函式 例子： show(2000, function(){} )

​ 10.2hide() 隱藏方法

​ 引數1：代表執行動畫的時長，毫秒值 例子：hide(2000)

​ 引數2：動畫執行完畢之後的回撥函式 例子：hide(2000, function(){} )

​ 10.3toggle()方法

​ 注意：如果元素是隱藏狀態就動畫顯示，如果是顯示狀態就動畫隱藏

​ 10.4 slideDown() 滑下來

​ 引數：與show() 相同

​ 10.5 slideUp() 滑上去

​ 引數：與show() 相同

​ 10.6 slideToggle() 切換

​ 注意：如果元素是隱藏狀態就滑下來，如果是顯示狀態就滑上去

   **10.7 fadeIn() 淡入**

​ 10.8 fadeOut() 淡出

​ 10.9 fadeToggle() 切換

​ 10.10 fadeTo() 到什麼狀態

​ 例子：fageTo( 1000, 0.5 ) //0.5表示opacity

11.自定義動畫 animate()

​

​ 11.2 stop() 停止動畫

​ 引數1：是否清除佇列

​ 引數2：是否跳轉到最終結果

​ 例子: $(’#div1’).stop( true, true ) 預設 stop(false,false)

12.動態建立元素

12.1 html(引數) 建立

• 會把原來的內容覆蓋

• 如果設定的內容包含了標籤，會把標籤解析出來

  12.2 $() 建立元素

  可以建立元素，但是元素只存在於記憶體中，要在頁面上顯示就要追加

var $link = $('<a href="https://news.baidu.com">新聞</a>')
$('#div1').append($link)  //追加元素

13.新增節點的幾種方法

• append() 方法

  • 父元素.append(子元素) //作為最後一個子元素新增
  • 把ul裡面存在的li新增到ul中去，則把原來存在的li剪下後作為最後一個子元素新增

• prepend() 方法

  • 父元素.prepend(子元素) //作為第一個子元素新增
  • 把ul裡面存在的li新增到ul中去，則把原來存在的li剪下後作為第一個子元素新增

• before() 方法

  • 元素A.before(元素B) // 把元素B插入到元素A的前面，作為兄弟元素新增

• after() 方法

  • 元素A.before(元素B) // 把元素B插入到元素A的後面，作為兄弟元素新增

• appendTo() 方法

  • 子元素.appendTo(父元素) //把子元素作為父元素的最後一個子元素新增

14.克隆節點

• jQuery中克隆節點 clone() 方法

  • 只存在於記憶體中，要在頁面顯示就要追加到頁面
  • clone() 方法的引數不管是 true 還是 false 都會克隆到後代節點
  • clone() 方法的引數為true表示會把事件一起克隆，false表示不會把事件克隆，沒引數預設是false

• var() 獲取表單的值或者設定值

  • 不給引數就是獲取值 // val()
  • 傳參就是設定值 //val(‘啦啦啦’)

15 jQuery操作屬性

• attr() 方法設定屬性

  • 例子：對圖片的屬性進行設定 $(‘img’).attr( ‘src’, ‘666.gif’) //把原來src的屬性值修改
  • $(‘img’).attr( ‘aaa’, ‘888’ ) //如果元素沒有這個屬性，就是新增屬性

• attr() 方法獲取屬性

  • $(‘img’).attr( ‘src’) // 獲取圖片自帶的src 屬性，也可以獲取自定義的屬性

• removeAttr() 方法移除屬性

  • $(‘img’).removeAttr( ‘src’) //移除圖片自帶的src屬性

16.操作布林型別的屬性

• 使用的是prop() 操作
  • 對於checked，selected，disabled，這類Boolean型別的s屬性，不能使用attr方法只能使用prop方法

17.jQuery尺寸和位置操作

• width()方法和height()方法

  • 設定或者獲取高度和寬度，不包括內邊距和外邊距

    $('#div1').height(200)   //設定高度為200
    $('#div1').height()      //獲取高度  
    

• innerWidth() 方法和innerHeight() 方法

• 返回元素的寬高 ，包括內邊距

• outWidth() 方法和outHeight() 方法

• 返回元素的寬高 ，包括內邊距和邊框

• outWidth(true) 方法和outHeight(true) 方法

• 返回元素的寬高 ，包括內邊距，外邊距，邊框

• 獲取頁面可視區的寬高

• $(window).width() $(window).height()

• offset() 方法

  • 獲取的是一個物件，裡面包含了top和left的值
  • offset方法獲取的是元素距離document的位置

• position() 方法

  • 獲取的是一個物件，裡面包含了top和left的值
  • position方法獲取的是元素距離有定位的父元素的位置

• scrollTop() 方法和 scrollLeft() 方法

  • 分別表示元素被捲曲出去的高度和寬度
  • 傳入參數列示設定元素被捲曲出去的高度和寬度

• $(window).scrollLeft() $(window).scrollTop()

  • 獲取頁面被捲曲的寬度和高度

18.事件註冊(on 統一了事件註冊方式)

• on註冊簡單事件
  • 不支援動態註冊

$('div').on('click',function(){
	console.log('我是單擊事件')
})

• on 委託註冊
  • 支援動態註冊

$('body').on('click','div',function(){    // body表示父級元素 (利用事件冒泡上傳)
	console.log('單擊事件')
})

• 事件解綁 off()
  • $(’#one’).off() //解綁所以事件
  • $(’#one’).off(‘click’) //解綁指定事件