jquery主要知識點(精簡)

拾荒舊痕發表於2020-11-22

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’) //解綁指定事件

相關文章