一、事件機(jī)制

1、事件源.事件類(lèi)型(事件處理程序)

$(this)中的this不能加引號(hào)

$('#box').click(function () {$(this).css('background-color','blue')//點(diǎn)擊顏色變?yōu)樗{(lán)色
})

2、事件源.on/bind(事件類(lèi)型，事件處理程序)

$("#box").on('dbclick',function () {$(this).css('border-radius','100px')
})

$('#box').bind('mouseover',function () {$(this).csss('font-size','60px')
})

3、事件源.on/bind({事件類(lèi)型1：事件處理程序1，事件類(lèi)型2：事件處理程序2，}）

$('#box').on({ //用on或bindmousedown: function () {//按下鼠標(biāo)console.log("鼠標(biāo)按下了")},mouseup: function () {//抬起鼠標(biāo)console.log("鼠標(biāo)抬起了")}
})

區(qū)別.on()與.bind()：

• 與 .bind() 不同的是，.on() 方法可以附加額外的參數(shù)，如可選的選擇器，用于對(duì)事件目標(biāo)進(jìn)行過(guò)濾。這樣，您可以只在滿足選擇器條件的元素上觸發(fā)事件處理程序。

4、事件對(duì)象

event不用考慮兼容性 輸出必須要event.屬性

$("#box").on({mouseenter: function () {
//MouseEvent {isTrusted: true, screenX: 168, screenY: 178, clientX: 127 …}console.log(event)console.log('pageX:' + event.pageX)//距離瀏覽器左邊的橫坐標(biāo) 包括滾動(dòng)條卷去的console.log('clientX:' + event.clientX)//距離瀏覽器左邊的橫坐標(biāo)},
})

$('#user').bind('keyup', function () {console.log(event);//如果按下enter就跳轉(zhuǎn)頁(yè)面if(event.keyCode == 13 && event.key == 'Enter') {window.location.href = "https://www.***.com"}
})

5、each() 函數(shù)用于遍歷的對(duì)象和數(shù)組。

$('#btn').click(function () {console.log($("ul>li"));$('ul>li').each(function () {console.log($(this).text()// 輸出每個(gè)列表項(xiàng)的文本內(nèi)容})
})

6、jQuery.each(數(shù)組/對(duì)象,回調(diào)函數(shù)(key,value)) 遍歷數(shù)組或者對(duì)象

遍歷數(shù)組

var arr = ['web', '前端']
//遍歷數(shù)組   key  value也可以
$.each(arr, function (index, item) {
//數(shù)組的索引是0，值是web 數(shù)組的索引是1，值是前端 console.log('數(shù)組的索引是' + index + '，值是' + item)
})

遍歷對(duì)象

var obj = { name: "小明", age: 20, sex: "男" }
$.each(obj, function (index, item) {
//屬性名：name，屬性值：小明  屬性名：age，屬性值：20  屬性名：sex，屬性值：男console.log("屬性名：" + index + "，屬性值：" + item)
})

二、DOM操作

1、 html()獲取或設(shè)置被選元素的所有節(jié)點(diǎn)

• 相當(dāng)于innerHTML

console.log($('#box').html());
//<p>哈哈哈</p>   <!-- 我是注釋 -->  都可以獲取到
$("#btn").on('click',function(){$("#box").html("<a>我是超鏈接</a><!-- 我是注釋的升級(jí)版 -->")
})

2、text()設(shè)置或返回所選元素的內(nèi)容

• 相當(dāng)于innerText

console.log($('#box').text())//返回內(nèi)容
$('#btn').bind('mouseover', function () {$('#box').text('段落標(biāo)簽')//改變內(nèi)容為段落標(biāo)簽
})

3、val()設(shè)置或返回表單字段的值

<input type="text" id="user" value="我是輸入框的文本">
console.log($('#user').val())//返回 我是輸入框的文本
$('#user').on({click: function () {$(this).val('web31')//點(diǎn)擊以后  值變?yōu)?web31}
})

4、attr()、prop()獲取或者設(shè)置被選元素的屬性，參數(shù)是屬性名和屬性值

區(qū)別1：

• attr() 不僅可以獲取和設(shè)置元素的本身屬性和設(shè)置元素的自定義屬性
• prop()只能設(shè)置元素的本身屬性

區(qū)別2：

• 表單中的一些屬性disabled/selected/checked用prop()

<p class="text" name_1="proName">我是盒子box中的段落文本text</p>
console.log($('.text').attr('class')) //text  獲取類(lèi)名為text的class為
console.log($('.text').prop('class')) //text  獲取類(lèi)名為text的class為
//proName  獲取類(lèi)名為text的name_1為 
console.log($('.text').attr('name_1'))//proName
console.log($('.text').prop('name_1')) //undefined  prop不能獲取自定義屬性
$('#btnSet').click(function () {console.log($(this).attr('disabled')) //undefined 表單中的不能用attrconsole.log($(this).prop('disabled'))//flase
})

三、jquery對(duì)尺寸操作

1、width()和height()方法

• 設(shè)置或返回元素的寬度高度
• 相當(dāng)于 style.width()
  元素本身大小

console.log($('#child').width())//返回元素的寬度
console.log($('#child').height())
$('button').click(function () {$('#child').width('400px')//點(diǎn)擊以后 將元素的寬度改為400px$('#child').height('300px')
})

2、innerWidth() 和 innerHeight()

• 相當(dāng)于clientWidth() / clientHeight()
  元素本身 + padding

console.log($('#child').innerWidth())
console.log($('#child').innerHeight())

3、outerWidth() 和 outerHeight()

• 相當(dāng)于offsetWidth offsetHeight
  元素本身 + padding + border

console.log($('#child').outerWidth())
console.log($('#child').outerHeight())

4、scrollTop()和scrollLeft()

• 方法設(shè)置或者返回滾動(dòng)條被卷去的元素的高度
• scrollLeft() 方法設(shè)置或者返回滾動(dòng)條被卷去的元素的寬度

$(window).scroll(function () {
// console.log($(window).scrollTop())
console.log($(window).scrollLeft())
})

$('#set').click(function () {$(window).scrollTop(600)//點(diǎn)擊按鈕  滾動(dòng)條卷去600px
})

四、jQuery添加和刪除元素

1、append() 結(jié)尾插入（選擇的元素內(nèi)部）

$("#add").click(function () {console.log($("#parent").append("<li>我是添加的元素</li>"));
})

2、prepend() 開(kāi)頭插入（選擇的元素內(nèi)部）

$("#add").click(function () {console.log($("#parent").prepend("<li>我是添加的元素</li>"));
})

3、after() 之后插入 （該元素的外面）

$("#add").click(function () {console.log($("#parent").after("<li>我是添加的元素</li>"));
})

4、before() 之前插入 （該元素的外面）

$("#add").click(function () {console.log($("#parent").before("<li>我是添加的元素</li>"));
})

5、remove() 刪除元素 （包括自己）

• 刪除自己和自己的子元素
• 刪除以后不占位置

$("#add").click(function () {console.log($("#parent").remove());
})

6、empty() 刪除元素（自己本身不刪除）

• 刪除自己的子元素
• 自己本身不刪除

$("#add").click(function () {console.log($("#parent").empty());
})//parent不刪除  里面的都刪除