day30-jQuery
1、選擇器
- 基本
:first :last :even :odd :not :eq()
- 內容
contains 內容包含某某某的節點
has 寫一個選擇器，
$('li:has(a)') li裡面有a的li
- 屬性
input[name] 有屬性name的input
input[name=user] name屬性等於user的input
input[name!=user] name屬性不等於user的input
// 有屬性name的input
// $('input[name]').css('backgroundColor', 'cyan')
// 屬性name值為user的input
// $('input[name=user]').css('backgroundColor', 'cyan')
// 屬性name值不為user的input
// $('input[name!=user]').css('backgroundColor', 'cyan')
// 屬性name值以user開頭的input
// $('input[name^=user]').css('backgroundColor', 'cyan')
// 屬性name值以user結束的input
// $('input[name$=user]').css('backgroundColor', 'cyan')
- 子元素
:first-child
:last-child
:nth-child
// 找到li標籤，li是第一個兒子節點的li標籤
// $('li:first-child').css('backgroundColor', 'cyan')
// 找到li標籤，li是最後一個兒子節點的li標籤
// $('li:last-child').css('backgroundColor', 'cyan')
// 找li標籤，找指定下標的li標籤，這個下標是兒子節點裡面的第幾個
// $('li:nth-child(1)').css('backgroundColor', 'cyan')
2、樣式新增、屬性獲取
- css({})
// 可以連寫-鏈式操作
// $('#lala').css('backgroundColor', 'red').css('fontSize', '30px')
// 可以傳遞一個js物件，直接全部修改
// $('#lala').css({backgroundColor: 'blue', fontSize: '40px'})
- attr()
// 獲取指定節點的class屬性
// console.log($('#lala').attr('class'))
// 只能獲取第一個符合要求的id屬性
// console.log($('.libai').attr('id'))
// 通過eq選擇第二個符合要求的id屬性
// console.log($('.libai:eq(1)').attr('id'))
// 給指定節點新增屬性
// $('#lala').attr('class', 'bai').attr('name', '狗蛋')
- removeAttr()
// 將指定節點的屬性刪除
// $('#lala').removeAttr('class')
- prop()
經常用來設定checked、selected等屬性，設定的值就是true、false
// 所有下標大於1的多選框選中
// $('input:gt(1)').prop('checked', true)
// 將第二個下拉框設定為預設選中
// $('#se > option:eq(2)').prop('selected', true)
- addClass
// $('#lala').addClass('hei')
- removeClass
// 給指定的節點新增類名
// $('#lala').addClass('hei')
// 給指定的節點移除指定的節點class名 bai
// $('#lala').removeClass('bai')
- toggleClass
// 有bai這個class，那就是刪除這個class，沒有bai這個class，那就是新增class
// $('#lala').toggleClass('bai')
- html()
// 讀取或者設定節點內容，和innerHTML功能相同
// console.log($('#lala').html('醉臥沙場君莫笑,古來征戰幾人回'))
- text()
讀取或者設定節點內容，和innerText功能相同
- val()
讀取input框裡面的內容
console.log($('#ip').val())
設定input框裡面的內容
console.log($('#ip').val('今天中午吃什麼呢？'))
- width() 、height()
讀取指定物件寬度 不帶px
console.log($('#dudu').width())
設定寬度 不帶px
console.log($('#dudu').width(300))
讀取高度
console.log($('#dudu').height())
設定高度
console.log($('#dudu').height(400))
- offset()
// 獲取div的top值和left值
// console.log($('#dudu').offset().top, $('#dudu').offset().left)
3、js物件和jquery物件轉化
- js物件和jquery物件的函式不能通用、js物件和jquery物件相互轉化
var odiv = document.getElementById('dudu')
js物件轉化jquery物件
console.log($(odiv).width())
jquery物件轉化為js物件
console.log($('#dudu')[0].style.width)
console.log($('.lala')[1].style.width)
4、文件處理
- append、appendTo、prepend、prependTo
// 向父節點新增子節點
// $('#car').append('<li>本田飛度</li>')
// 通過子節點呼叫，新增到父節點
// $('<li>本田飛度</li>').appendTo($('#car'))
// 通過父節點呼叫，新增到父節點的最前面
// $('#car').prepend('<li>本田飛度</li>')
// 通過子節點呼叫，新增到父節點的最前面
// $('<li>通用別克</li>').prependTo($('#car'))
- after、before
// 是兄弟節點關係，在mao節點後面新增一個指定節點
// $('#mao').after('<li>鈴木雨燕</li>')
// 是兄弟節點關係，在mao節點前面新增一個指定節點
// $('#mao').before('<li>鈴木雨燕</li>')
- empty、remove
清空指定節點裡面的內容，節點還在
$('#mao').empty()
原生js中：父節點.removeChild(子節點)
通過子節點直接呼叫，刪除當前節點
$('#mao').remove()
5、篩選和查詢
- eq
// $('li').eq(n).css('backgroundColor', 'red')
// $('li:eq(0)').css('backgroundColor', 'red')
// $('li:eq(' + 0 + ')').css('backgroundColor', 'red')
- first、last
// 第一個li 和:first 一模一樣
// $('li').first().css('backgroundColor', 'red')
// 最後一個li 和:last 一模一樣
// $('li').last().css('backgroundColor', 'red')
- hasClass
// 判斷有沒有這個class,有就返回true，沒有返回false
// console.log($('li').eq(0).hasClass('wang'))
- filter
// 找到所有li，過濾出來 .jing 的這些li
// $('li').filter('.jing').css('backgroundColor', 'cyan')
- slice
// 取出符合要求li裡面的第0個和第1個 [start, end)
// $('li').slice(0, 2).css('backgroundColor', 'cyan')
- children
// 所有的兒子節點
// $('#nan').children().css('backgroundColor', 'red')
// 兒子節點中 有 .feng 的節點
// $('#nan').children('.feng').css('backgroundColor', 'red')
- find
// 去子孫節點中查詢所有的 .feng 的節點
// $('#nan').find('.feng').css('backgroundColor', 'cyan')
- next、nextAll
// 指定物件的下一個兄弟節點
// $('#wu').next().css('backgroundColor', 'cyan')
// 指定物件的後面所有的節點
// $('#wu').nextAll().css('backgroundColor', 'cyan')
prev 指定物件的上一個兄弟節點
prevAll 指定物件的上面所有的兄弟節點
parent、parents
// 找到當前節點的父節點
// $('.lin').parent().css('backgroundColor', 'cyan')
// 查詢得到所有的上層節點
// $('#qing').parents().css('backgroundColor', 'cyan')
// 查詢得到指定的上層節點
// $('#qing').parents('div').css('backgroundColor', 'cyan')
siblings
// 查詢qing節點所有的兄弟節點
// $('#qing').siblings().css('backgroundColor', 'orange')
// 查詢qing節點所有的兄弟節點，而且是.lin的兄弟節點
// $('#qing').siblings('.lin').css('backgroundColor', 'orange')
6、事件
- 新增事件
$('div).click(function () {})
- 事件繫結
on off one
- 繫結事件
$('div').on('click', test1)
$('div').on('click', test2)
- 取消事件繫結
$('div').off('click', test2)
// 事件只能觸發一次
$('div').one('click', test2)
- 取消冒泡
ev.stopPropagation()
- 阻止預設行為
ev.preventDefault()
- 獲取滑鼠座標
ev.pageX, ev.pageY
index
// 得到指定jquery物件在前面陣列中的下標
// console.log($('div').index($('#heng')))
7、動畫
- show()
引數1：動畫的事件
引數2：動畫完畢之後執行的函式
$('#dudu').show(5000, function () {
alert('菊花殘,滿地傷')
})
- hide()
和show一樣
$('#dudu').hide(5000, fn)
- slidedown()
原來不顯示，動畫下拉顯示
$('#dudu').slideDown(5000)
- slideup()
原來顯示，動畫的上拉消失
- slideToggler()
如果隱藏就下拉顯示，如果顯示就上拉消失
- fadeIn()
慢慢的顯示出來
$('#dudu').fadeIn(5000)
- fadeOut()
慢慢的消失
$('#dudu').fadeOut(5000)
- fadeTo()
5秒之內，透明度變為0.01
$('#dudu').fadeTo(5000, 0.01)
- fadeToggle()
如果隱藏就淡入顯示，如果顯示就淡出消失
自定義的動畫效果
- animate()
自定義動畫
$('#dudu').animate({width: 1000, height: 500, opacity: 0.1}, 5000)
- stop()
停止動畫
$('#dudu').stop()