1.jquery
（1）jquery是什么？
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
jQuery是一個快速、小型、功能豐富的JavaScript庫。它使HTML文檔遍歷和操作、事件處理、動畫和Ajax等工作變得更加簡單，并且具有在多個瀏覽器之間工作的易于使用的API。結(jié)合了通用性和可擴展性，jQuery改變了數(shù)百萬人編寫JavaScript的方式。
（2） 版本要求：看版本.txt
壓縮和非壓縮
<1>.min.js : 壓縮版本，一行代碼，沒有了空格、縮進等
<2> .js : 非壓縮版本，正常的代碼查看
（3） 使用方式
<1>可以本地使用
<script src="jquery/jquery-1.11.3.min.js"></script>
<2>可以引入網(wǎng)絡(luò)文件使用
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
（4）選擇器
jquery通過選擇器就可以找到指定的節(jié)點
id、class、標(biāo)簽、層級
基本
:first 第一個
:last 最后一個
:even 偶數(shù)下標(biāo)
:odd 奇數(shù)下標(biāo)
:eq() 等于哪個下標(biāo)
:gt() 大于哪個下標(biāo)
:lt() 小于哪個下標(biāo)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jquery</title>
<script src="jquery/jquery-1.11.3.min.js"></script>
</head>
<body>
<div id="lala">周杰倫</div>
<div class="star">王力宏</div>
<div class="star">林俊杰</div>
<div class="song">
<div class="wang">
<ul>
<li>王寶強</li>
<li>王者榮耀</li>
<li>王孜孜</li>
</ul>
</div>
<div class="ma">
<ul>
<li>馬云</li>
<li>馬蘭蘭</li>
<li>馬化騰</li>
</ul>
</div>
</div>
</body>
</html>
<script>
$(function () {
// jquery代碼都寫到這里
// $('#lala').css('backgroundColor', 'red')
// $('.star').css('backgroundColor', 'yellow')
// $('li').css('backgroundColor', 'blue')
// $('.song > li').css('backgroundColor', 'cyan')
// 第一個
// $('li:first').css('backgroundColor', 'cyan')
// 最后一個
// $('li:last').css('backgroundColor', 'cyan')
// 偶數(shù)下標(biāo)的
// $('li:even').css('backgroundColor', 'cyan')
// 奇數(shù)下標(biāo)的
// $('li:odd').css('backgroundColor', 'cyan')
// 等于1的
// $('li:eq(1)').css('backgroundColor', 'cyan')
// 大于2的
// $('li:gt(2)').css('backgroundColor', 'cyan')
// 小于2的
// $('li:lt(2)').css('backgroundColor', 'cyan')
})
</script>
1、選擇器
基本
:first :last :even :odd :not :eq()
內(nèi)容
contains 內(nèi)容包含某某某的節(jié)點
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結(jié)束的input
// $('input[name$=user]').css('backgroundColor', 'cyan')
子元素
:first-child
:last-child
:nth-child
// 找到li標(biāo)簽，li是第一個兒子節(jié)點的li標(biāo)簽
// $('li:first-child').css('backgroundColor', 'cyan')
// 找到li標(biāo)簽，li是最后一個兒子節(jié)點的li標(biāo)簽
// $('li:last-child').css('backgroundColor', 'cyan')
// 找li標(biāo)簽，找指定下標(biāo)的li標(biāo)簽，這個下標(biāo)是兒子節(jié)點里面的第幾個
// $('li:nth-child(1)').css('backgroundColor', 'cyan')
2、樣式添加、屬性獲取
css({})
// 可以連寫-鏈?zhǔn)讲僮? // $('#lala').css('backgroundColor', 'red').css('fontSize', '30px')
// 可以傳遞一個js對象，直接全部修改
// $('#lala').css({backgroundColor: 'blue', fontSize: '40px'})
attr()
// 獲取指定節(jié)點的class屬性
// console.log($('#lala').attr('class'))
// 只能獲取第一個符合要求的id屬性
// console.log($('.libai').attr('id'))
// 通過eq選擇第二個符合要求的id屬性
// console.log($('.libai:eq(1)').attr('id'))
// 給指定節(jié)點添加屬性
// $('#lala').attr('class', 'bai').attr('name', '狗蛋')
removeAttr()
// 將指定節(jié)點的屬性刪除
// $('#lala').removeAttr('class')
prop()
經(jīng)常用來設(shè)置checked、selected等屬性，設(shè)置的值就是true、false
// 所有下標(biāo)大于1的多選框選中
// $('input:gt(1)').prop('checked', true)
// 將第二個下拉框設(shè)置為默認選中
// $('#se > option:eq(2)').prop('selected', true)
addClass
// $('#lala').addClass('hei')
removeClass
// 給指定的節(jié)點添加類名
// $('#lala').addClass('hei')
// 給指定的節(jié)點移除指定的節(jié)點class名 bai
// $('#lala').removeClass('bai')
toggleClass
// 有bai這個class，那就是刪除這個class，沒有bai這個class，那就是添加class
// $('#lala').toggleClass('bai')
html()
// 讀取或者設(shè)置節(jié)點內(nèi)容，和innerHTML功能相同
// console.log($('#lala').html('醉臥沙場君莫笑,古來征戰(zhàn)幾人回'))
text()
讀取或者設(shè)置節(jié)點內(nèi)容，和innerText功能相同
val()
// 讀取input框里面的內(nèi)容
// console.log($('#ip').val())
// 設(shè)置input框里面的內(nèi)容
// console.log($('#ip').val('今天中午吃什么呢？'))
width()
height()
// 讀取指定對象寬度 不帶px
// console.log($('#dudu').width())
// 設(shè)置寬度 不帶px
// console.log($('#dudu').width(300))
// 讀取高度
// console.log($('#dudu').height())
// 設(shè)置高度
// console.log($('#dudu').height(400))
offset()
// 獲取div的top值和left值
// console.log($('#dudu').offset().top, $('#dudu').offset().left)
3、js對象和jquery對象轉(zhuǎn)化
js對象和jquery對象的函數(shù)不能通用
js對象和jquery對象相互轉(zhuǎn)化
// var odiv = document.getElementById('dudu')
// js對象轉(zhuǎn)化jquery對象
// console.log($(odiv).width())
// jquery對象轉(zhuǎn)化為js對象
// console.log($('#dudu')[0].style.width)
// console.log($('.lala')[1].style.width)
4、文檔處理
append
appendTo
prepend
prependTo
// 向父節(jié)點添加子節(jié)點
// $('#car').append('<li>本田飛度</li>')
// 通過子節(jié)點調(diào)用，添加到父節(jié)點
// $('<li>本田飛度</li>').appendTo($('#car'))
// 通過父節(jié)點調(diào)用，添加到父節(jié)點的最前面
// $('#car').prepend('<li>本田飛度</li>')
// 通過子節(jié)點調(diào)用，添加到父節(jié)點的最前面
// $('<li>通用別克</li>').prependTo($('#car'))
after
before
// 是兄弟節(jié)點關(guān)系，在mao節(jié)點后面添加一個指定節(jié)點
// $('#mao').after('<li>鈴木雨燕</li>')
// 是兄弟節(jié)點關(guān)系，在mao節(jié)點前面添加一個指定節(jié)點
// $('#mao').before('<li>鈴木雨燕</li>')
empty
remove
// 清空指定節(jié)點里面的內(nèi)容，節(jié)點還在
// $('#mao').empty()
// 原生js中：父節(jié)點.removeChild(子節(jié)點)
// 通過子節(jié)點直接調(diào)用，刪除當(dāng)前節(jié)點
// $('#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
// 找到所有l(wèi)i，過濾出來 .jing 的這些li
// $('li').filter('.jing').css('backgroundColor', 'cyan')
slice
// 取出符合要求li里面的第0個和第1個 [start, end)
// $('li').slice(0, 2).css('backgroundColor', 'cyan')
children
// 所有的兒子節(jié)點
// $('#nan').children().css('backgroundColor', 'red')
// 兒子節(jié)點中 有 .feng 的節(jié)點
// $('#nan').children('.feng').css('backgroundColor', 'red')
find
// 去子孫節(jié)點中查找所有的 .feng 的節(jié)點
// $('#nan').find('.feng').css('backgroundColor', 'cyan')
next
nextAll
// 指定對象的下一個兄弟節(jié)點
// $('#wu').next().css('backgroundColor', 'cyan')
// 指定對象的后面所有的節(jié)點
// $('#wu').nextAll().css('backgroundColor', 'cyan')
prev 指定對象的上一個兄弟節(jié)點
prevAll 指定對象的上面所有的兄弟節(jié)點
parent
parents
// 找到當(dāng)前節(jié)點的父節(jié)點
// $('.lin').parent().css('backgroundColor', 'cyan')
// 查找得到所有的上層節(jié)點
// $('#qing').parents().css('backgroundColor', 'cyan')
// 查找得到指定的上層節(jié)點
// $('#qing').parents('div').css('backgroundColor', 'cyan')
siblings
// 查找qing節(jié)點所有的兄弟節(jié)點
// $('#qing').siblings().css('backgroundColor', 'orange')
// 查找qing節(jié)點所有的兄弟節(jié)點，而且是.lin的兄弟節(jié)點
// $('#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)
// 事件只能觸發(fā)一次
$('div').one('click', test2)
取消冒泡
ev.stopPropagation()
阻止默認行為
ev.preventDefault()
獲取鼠標(biāo)坐標(biāo)
ev.pageX, ev.pageY
index
// 得到指定jquery對象在前面數(shù)組中的下標(biāo)
// console.log($('div').index($('#heng')))
7、動畫
show()
// 參數(shù)1：動畫的事件
// 參數(shù)2：動畫完畢之后執(zhí)行的函數(shù)
$('#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秒之內(nèi)，透明度變?yōu)?.01
// $('#dudu').fadeTo(5000, 0.01)
fadeToggle()
如果隱藏就淡入顯示，如果顯示就淡出消失
自定義的動畫效果
animate()
// 自定義動畫
// $('#dudu').animate({width: 1000, height: 500, opacity: 0.1}, 5000)
stop()
停止動畫
$('#dudu').stop()
