好程序員web前端培訓JavaScript學習筆記--jQuery今天來說一些 jQuery 別的東西
元素操作
創建一個元素
var div = $('
內部插入元素
// 向 div 元素中插入一個 p 元素，放在最後$('div').append($(''))// 把 p 元素插入到 div 中去，放在最後$('
hello
').appendTo($('div'))// 向 div 元素中插入一個 p 元素，放在最前$('div').prepend($(''))// 把 p 元素插入到 div 中去，放在最前$('hello
').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) {
console.log(e.data)})
scroll
// 直接給 div 綁定一個滾動事件$('div').scroll(function () {
console.log('我被點擊了')})// 給 div 綁定一個滾動事件並傳遞參數$('div').scroll({ name: 'Jack' }, function (e) {
console.log(e.data)})
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() // 停止在動畫結束狀態