一、事件機制

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

$(this)中的this不能加引號

$('#box').click(function () {$(this).css('background-color','blue')//點擊顏色變為藍色
})

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

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

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

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

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

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

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

4、事件對象

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

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

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

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

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

6、jQuery.each(數組/對象,回調函數(key,value)) 遍歷數組或者對象

遍歷數組

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

遍歷對象

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

二、DOM操作

1、 html()獲取或設置被選元素的所有節點

• 相當于innerHTML

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

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

• 相當于innerText

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

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

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

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

區別1：

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

區別2：

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

<p class="text" name_1="proName">我是盒子box中的段落文本text</p>
console.log($('.text').attr('class')) //text  獲取類名為text的class為
console.log($('.text').prop('class')) //text  獲取類名為text的class為
//proName  獲取類名為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對尺寸操作

1、width()和height()方法

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

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

2、innerWidth() 和 innerHeight()

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

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

3、outerWidth() 和 outerHeight()

• 相當于offsetWidth offsetHeight
  元素本身 + padding + border

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

4、scrollTop()和scrollLeft()

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

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

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

四、jQuery添加和刪除元素

1、append() 結尾插入（選擇的元素內部）

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

2、prepend() 開頭插入（選擇的元素內部）

$("#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不刪除  里面的都刪除