一、jQuery介紹？

1、什么是jQuery？

• 是一個JavaScript函數庫

2、jQuery特點

• 寫的少，做的多

3、jQuery的安裝

• 直接下載引入

<script src="jquery-1.10.2.min.js"></script>

• 通過cdn引入

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> 

4、jQuery()函數===$()函數

獲取DOM函數

//js獲取元素
var textP = document.getElementById('text')
console.log($1('text'))//DOM對象
console.log($1('text').innerText)//文本內容

// jQuery獲取的元素
console.log(jQuery('#text')) //jQuery對象
console.log($('#text'))//可以簡寫
console.log(jQuery('#text').innerText) //undefined

js入口函數

window.onload = function () {console.log('javascript 的入口函數1')
}
window.onload = function () {console.log('javascript 的入口函數2')//第二個會覆蓋第一個
}
jQuery(document).ready(function () {console.log('jQuery的入口函數1')
})
jQuery(document).ready(function () {console.log('jQuery的入口函數2')//jQuery不會發生覆蓋
})
$(function () {console.log('jQuery的入口函數3')//jQuery可以簡寫
})

5、js入口函數與jQuery入口函數的區別

• js的入口函數多了會發生覆蓋，jQuery是可以重復的
• JavaScript 的 window.onload 事件是等到所有內容，包括外部圖片之類的文件加載完后，才會執行。
• jQuery 的入口函數是在 html 所有標簽(DOM)都加載之后，就會去執行
• js的入口函數不能簡寫，jquery的入口函數可以簡寫

二、jQuery的css方法

1、通過css()獲取選中元素的樣式

//通過#('#box')獲取id為box的元素  css()獲取當前元素的的寬度
console.log($('#box').css('width'))//400px   
console.log($('#box').css('height'))//400px  

//通過css()返回的顏色的屬性值是reg格式的
console.log($('#box').css("background-color"))//rgb(255, 255, 255)
console.log($('#box').css('color'))//rgb(255, 0, 0)

2、通過css()設置樣式

如果屬性名中間有 - ，要加引號 或者去掉-大寫第一個字母

// $('#btn').onclick = function () {} 不可以這樣寫
document.getElementById("btn").onclick = function () {
//可以單獨設置 css(屬性名,屬性值)$("#box").css('width',"600px")$("#box").css('height',"600px")
//簡寫  多個屬性同時設置
$('box').csss({width:'600px',height:'600px','background-color':'blue',//如果屬性名中間有 - ，要加引號'font-size':"50px"})
}

三、jquery選擇器

1、基本選擇器

• id選擇器

console.log($('#list')) //獲取id為list的元素  寫#

• 類名選擇器

console.log($('.lic'))//獲取class為liC的元素  寫.

• 標簽

console.log($('li')) //獲取所有的li標簽

• 并集（所有的）

//獲取header和id為list和footer標簽，所有標簽的字體都設置為30px
$('header,#list,footer').css('font-size', '30px')

• 交集（都滿足的）

//獲取p標簽 并且class為liC的元素   字體顏色改為blue  
$('p.liC').css('color', 'blue')

2、層級選擇器

• 子代

//獲取ul子元素的所有li  背景顏色改為pink   
$('ul>li').css('background-color', 'pink')

• 后代

//ul后代的li  加粗
$('ul li').css('font-weight', '700')

3、過濾選擇器

索引獲取 :eq(索引)

//獲取到的li元素中 選擇索引為1的元素  文字居中顯示   一定用冒號
$('li:eq(1)').css('text-align', 'center')

索引為奇數的

//獲取到的li元素中 選擇索引為奇數的元素   字體傾斜
$('li:odd').css('font-style', 'italic')

索引為偶數的

//獲取到的li元素中 選擇索引為偶數的元素  加下劃線
$('li:even').css('text-decoration', 'underline')

4、篩選選擇器（方法）

子類選擇器 $(“ul”).children(“li”)

console.log($('ul').children())//獲取ul下的所有孩子
//相當于$('ul>li')
console.log($('ul').children('li'))//獲取ul下名字為li的孩子

后代選擇器，$(“ul”).find(“li”); 必須添加參數

//獲取ul后代的p標簽
console.log($('ul').find('p'))

查找兄弟節點，不包括自己本身，$(“#first”).siblings(“li”); 添加參數返回指定的兄弟

//兄弟包括 .li3 上面的下面的
console.log($('.li3').siblings())  //選擇所有兄弟
console.log($('.li3').siblings('li'))  //選擇名字為li兄弟

查找父親 $(“#first”).parent();

console.log($('.li3').parenet())//獲取li3的父親  ul

祖先

console.log($('.li3').parents())//0:ul#list, 1: body, 2: html

索引

//獲取#list下面的索引為2的li
console.log($('#list>li').eq(2))

下一個兄弟 $(“li”).next()

console.log($('.li3').next())//獲取li3下一個的標簽

下邊所有的兄弟

console.log($('.li3').nextAll())

上一個兄弟 $(“li”).prev()

console.log($('.li3').prev())//獲取li3的上一個元素

獲取當前的位置（索引）$(“li”).index()

console.log($('.li3').index())//獲取li3的索引  2

返回不帶有類名 “intro” 的所有

元素$(“p”).not(“.intro”)

console.log($('.liC').not('li'))//選擇class為liC  但是不是li的元素

四、jQuery事件 （不用on）

1、鼠標事件

//jQuery中綁定事件： 事件源（jquery對象）.事件類型（不加on事件的處理程序）
$('#btn').click(function () {console.log("單擊了")console.log($(this))$(this).css('background-color', 'red')
}

//鼠標按下  按鈕改變
$('button').mousedown(function () {$(this).css({  height: '100px','font-size': '30px',})
})

2、鍵盤事件

$('#user').keydown(function () {console.log(this.value)//內容console.log($(this).value)//undefined
})

3、瀏覽器事件

$(window).scroll(function () {console.log('滾動了')
})

五、jQuery css類

1、addClass()向被選元素添加一個或者多個類

$('#add').click(function () {
//獲取類名為box的元素   添加類名select_1 select_2$('.box').addClass('select_1 select_2')
})

2、removeClass()向被選元素刪除一個或者多個類

//鼠標進入  獲取類名為box的元素  刪除兩個類
$('#remove').mouseenter(function () {$('.box').removeClass('box select_2')
})

3、toggleClass()刪除類和添加類的切換操作

$('#toggle').click(function () {$('.box').toggleClass('select_1')
})

六、jQuery 動畫方法

1、隱藏hide()

$('#hide').click(function () {$('#box').hide()//單擊按鈕  box隱藏
//相當于 display:none;不占位置
})

2、顯示show()

$('#show').click(function () {$('#box').show()//點擊按鈕顯示
})

3、顯示隱藏切換 toggle()

$('#toggle').click(function () {$('#box').toggle()//點擊按鈕切換
})

4、淡出 fadeOut() 慢慢消失

• ()加參數 參數為動畫時間

$('#fadeOut').click(function () {
// $('#box').fadeOut()
$('#box').fadeOut(5000)//獲取id為box的元素，動畫時間為5s
})

5、淡入 fadeIn() 顯示出來

$('#fadeIn').click(function () {// $('#box').fadeIn()$('#box').fadeIn(5000)})

6、淡入淡出切換 fadeToggle()

$('#fadeToggle').click(function () {
// $('#box').fadeIn()$('#box').fadeToggle(2000)
})

7、滑動向上 slideUp()

• 點擊按鈕 高度慢慢減小

//點擊按鈕  高度慢慢減小
$('#slideUp').click(function () {$('#box').slideUp(3000)
})

8、滑動向下 slideDown()

//點擊按鈕 高度慢慢變大  時間為3s
$('#slideDown').click(function () {$('#box').slideDown(3000)
})

9、滑動上下的切換 slideToggle()

$('#slideToggle').click(function () {$('#box').slideToggle(2000)
})

10、定義動畫 animate(對象,時間間隔)

暫時能改變顏色屬性

$('#animate').click(function () { //自定義動畫$('#boxTwo').animate(  //獲取元素添加動畫{width: '500px', height: 500,'border-radius': '50%','background-color': 'red',//暫時不以改變顏色color: 'red',//暫時不以改變顏色},3000   //時間為3s)
})