jquery主要知識點(精簡)
Jquery
1.Jquery 的定義
簡單來說,jQuery是一個小巧,功能豐富的 js 庫存
2. Jquery 的基本使用
2.1引入jQuery檔案**
2.2寫 一個入口函式**
2.3找到你要操作的元素(jQuery選擇器),去操作它(給他新增屬性,樣式,文字)
3.入口函式的兩種種寫法
$(document).ready(function(){})
$(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’) //解綁指定事件
相關文章
- jQuery 知識點總結jQuery
- jQuery面試知識點整理jQuery面試
- jQuery第二章知識點jQuery
- jQuery 個人學習知識點jQuery
- jQuery第五章知識點jQuery
- jQuery第七章知識點jQuery
- Web前端知識體系精簡Web前端
- jQuery第一章知識點jQuery
- jQuery第三章知識點jQuery
- jQuery第四章知識點jQuery
- jQuery第六章知識點jQuery
- Linux簡單知識點Linux
- web前端javascript+jquery知識點總結Web前端JavaScriptjQuery
- Vue知識精簡總結-更新中Vue
- jQuery常用的一些知識點總結jQuery
- 5張思維導圖,jQuery知識點梳理jQuery
- JQuery知識總結jQuery
- linux-gcc簡要知識點 **LinuxGC
- jquery.form.js知識jQueryORMJS
- 精選Spring Boot三十五道必知必會知識點!Spring Boot
- jQuery知識總結之事件jQuery事件
- JQuery基本知識彙總;JQuery常用方法;淺入瞭解JQueryjQuery
- 【精益生產】精益知識大全
- 知識點
- 【知識分享】海外伺服器租用主要看以下三點伺服器
- jquery基礎知識你知道哪些?jQuery
- 【輕知識】phper回顧下jqueryPHPjQuery
- jQuery知識總結之DOM操作jQuery
- JQuery的一些基本知識jQuery
- 簡歷表面的一些知識點(一)
- rabbitmq 知識點MQ
- SQL知識點(+)SQL
- 前端知識點前端
- Android 知識點Android
- Weex 知識點
- Promise知識點Promise
- Laravel 知識點Laravel
- MySQL知識點MySql