好程式員web前端教育訓練JavaScript學習筆記--jQuery

好程式員web前端教育訓練JavaScript學習筆記--jQuery今天來說一些 jQuery 别的東西

元素操作

建立一個元素

var div = $('

')

内部插入元素

// 向 div 元素中插入一個 p 元素，放在最後$('div').append($('

'))​// 把 p 元素插入到 div 中去，放在最後$('

hello

').appendTo($('div'))​// 向 div 元素中插入一個 p 元素，放在最前$('div').prepend($('

'))​// 把 p 元素插入到 div 中去，放在最前$('

').prependTo($('div'))

外部插入元素

// 在 div 的後面插入一個元素 p$('div').after($('

'))​// 在 div 的前面插入一個元素 p$('div').before($('

'))​// 把 p 元素插入到 div 元素的後面$('div').insertAfter($('

'))​// 把 p 元素插入到 div 元素的前面$('div').insertBefore($('

'))

替換元素

// 把 div 元素替換成 p 元素$('div').replaceWith($('

'))​// 用 p 元素替換掉 div 元素$('

').replaceAll($('div'))

删除元素

// 删除元素下的所有子節點$('div').empty()​// 把自己從頁面中移除$('div').remove()

克隆元素

// 克隆一個 li 元素// 接受兩個參數// 參數1： 自己身上的事件要不要複制，預設是 false// 參數2： 所有子節點身上的事件要不要複制，預設是 true$('li').clone()

元素尺寸

操作元素的寬和高

// 擷取 div 元素内容位置的高，不包含 padding 和 border$('div').height()// 設定 div 内容位置的高為 200px$('div').height(200)​// 擷取 div 元素内容位置的寬，不包含 padding 和 border$('div').width()// 設定 div 内容位置的寬為 200px$('div').width(200)

擷取元素的内置寬和高

// 擷取 div 元素内容位置的高，包含 padding 不包含 border$('div').innerHeight()​// 擷取 div 元素内容位置的寬，包含 padding 不包含 border$('div').innerWidth()

擷取元素的外置寬和高

// 擷取 div 元素内容位置的高，包含 padding 和 border$('div').outerHeight()// 擷取 div 元素内容位置的高，包含 padding 和 border 和 margin$('div').outerHeight(true)​// 擷取 div 元素内容位置的寬，包含 padding 和 border$('div').outerWidth()// 擷取 div 元素内容位置的高，包含 padding 和 border 和 margin$('div').outerWidth(true)

元素位置

元素相對頁面的位置

// 擷取 div 相對頁面的位置$('div').offset() // 得到的是以一個對象 { left: 值, top: 值 }​// 給 div 設定相對頁面的位置$('div').offset({ left: 100, top: 100 })// 擷取定位到一個距離頁面左上角 100 100 的位置

元素相對于父元素的偏移量

// 擷取 div 相對于父元素的偏移量（定位的值）$('div').position()

擷取頁面卷去的高度和寬度

window.onscroll = function () {

// 擷取浏覽器卷去的高度 console.log($(window).scrollTop())}​window.onscroll = function () {

// 擷取浏覽器卷去的寬度 console.log($(window).scrollLeft())}

元素事件

綁定事件的方法

// 給 button 按鈕綁定一個點選事件$('button').on('click', function () {

console.log('我被點選了')})​// 給 button 按鈕綁定一個點選事件，并且攜帶參數$('button').on('click', { name: 'Jack' }, function (e) {

console.log(e) // 所有的内容都再事件對象裡面 console.log(e.data) // { name: 'Jack' }})​// 事件委托的方式給 button 綁定點選事件$('div').on('click', 'button', function () {

console.log(this) // button 按鈕})​// 事件委托的方式給 button 綁定點選事件并攜帶參數$('div').on('click', 'button', { name: 'Jack' }, function (e) {

console.log(this) // button 按鈕 console.log(e.data)})

移除事件

// 給 button 按鈕綁定一個 點選事件，執行 handler 函數$('button').on('click', handler)​// 移除事件使用 off$('button').off('click', handler)

隻能執行一次的事件

// 這個事件綁定再 button 按鈕身上// 當執行過一次以後就不會再執行了$('button').one('click', handler)

直接觸發事件

// 當代碼執行到這裡的時候，會自動觸發一下 button 的 click 事件$('button').trigger('click')

可以直接使用的常見事件

可以直接使用的事件就是可以不利用 on 來綁定，直接就可以使用的事件方法

click

// 直接給 div 綁定一個點選事件$('div').click(function () {

console.log('我被點選了')})​// 給 div 綁定一個點選事件并傳遞參數$('div').click({ name: 'Jack' }, function (e) {

console.log(e.data)})

dblclick

// 直接給 div 綁定一個輕按兩下事件$('div').dblclick(function () {

console.log('我被點選了')})​// 給 div 綁定一個輕按兩下事件并傳遞參數$('div').dblclick({ name: 'Jack' }, function (e) {

scroll

// 直接給 div 綁定一個滾動事件$('div').scroll(function () {

console.log('我被點選了')})​// 給 div 綁定一個滾動事件并傳遞參數$('div').scroll({ name: 'Jack' }, function (e) {

hover

// 這個事件要包含兩個事件處理函數// 一個是移入的時候，一個是移出的時候觸發$('div').hover(function () {

console.log('我會再移入的時候觸發')}, function () {

console.log('我會在移出的時候觸發')})

動畫

show

// 給 div 綁定一個顯示的動畫$('div').show() // 如果元素本身是 display none 的狀态可以顯示出來​// 給 div 綁定一個顯示的動畫// 接受三個參數// $('div').show('毫秒', '速度', '回調函數') $('div').show(1000, 'linear', function () {

console.log('我顯示完畢')})

hide

// 給 div 綁定一個隐藏的動畫$('div').hide() // 如果元素本身是 display block 的狀态可以隐藏起來​// 給 div 綁定一個顯示的動畫// 接受三個參數// $('div').show('毫秒', '速度', '回調函數') $('div').hide(1000, 'linear', function () {

console.log('我隐藏完畢')})

toggle

// 給 div 綁定一個切換的動畫$('div').hide() // 元素本身是顯示，那麼就隐藏，本身是隐藏那麼就顯示​// 給 div 綁定一個顯示的動畫// 接受三個參數// $('div').show('毫秒', '速度', '回調函數') $('div').toggle(1000, 'linear', function () {

console.log('動畫執行完畢')})

animate

// 定義一個自定義動畫$('.show').click(function () {

$('div').animate({

width: 500,

height: 300

}, 1000, 'linear', function () {           

console.log('動畫運動完畢')

})})           

stop

// 立刻定制動畫$('div').stop() // 就停止再目前狀态

finish

// 立刻結束動畫$('div').finish() // 停止在動畫結束狀态