一.JQuery庫(kù)中的'$()'是什么？
$()函數(shù)是JQuery()函數(shù)的別稱(chēng)脓鹃。$()函數(shù)用于將任何對(duì)象包裹成
JQuery對(duì)象逸尖，接著你就被允許調(diào)離定義在JQuery對(duì)象上的多個(gè)
不同方法。你可以將一個(gè)選擇器字符串傳入$()函數(shù)瘸右，它會(huì)返回
一個(gè)包含所有匹配的DOM元素?cái)?shù)組的JQuery對(duì)象
二.$(this) 和 this 關(guān)鍵字在 jQuery 中有何不同娇跟？
$(this) 返回一個(gè) jQuery 對(duì)象，你可以對(duì)它調(diào)用多個(gè) jQuery 方
法太颤，比如用 text() 獲取文本苞俘，用val() 獲取值等等。而 this 代表當(dāng)
前元素龄章，它是 JavaScript 關(guān)鍵詞中的一個(gè)吃谣，表示上下文中的當(dāng)前
DOM 元素。你不能對(duì)它調(diào)用 jQuery 方法做裙，直到它被 $() 函數(shù)包裹岗憋，例如 $(this)。
三.jquery操作
1.jQuery 元素選擇器
jQuery 使用 CSS 選擇器來(lái)選取 HTML 元素锚贱。
$("p") 獲取 <p> 元素仔戈。
$(".p")獲取class名為p的元素
$("#p")獲取id名為p的元素
2.jQuery CSS 選擇器
jQuery CSS 選擇器可用于改變 HTML 元素的 CSS 屬性。
下面的例子把所有 p 元素的背景顏色更改為紅色：
$("p").css("background-color","red");
3.jQuery獲得內(nèi)容/設(shè)置內(nèi)容
text() - 設(shè)置或返回所選元素的文本內(nèi)容
html() - 設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標(biāo)記）
val() - 設(shè)置或返回表單字段的值
4.設(shè)置屬性 - attr():
一般用于設(shè)置自定義屬性
$("#test").attr("test","aaa") // 設(shè)置
參數(shù)一:參數(shù)名稱(chēng)
參數(shù)二:參數(shù)內(nèi)容
//添加自定義屬性(增拧廊，改)
// $('.box').attr('index', 1);
//刪除自定義屬性(刪)
// $('.box').attr('index', null);
//查找屬性(查)
// console.log($('.box').attr('index'))
// console.log($('.box'));
5.刪除屬性 - removeAttr()
$("#test").removeAttr("test") // 刪除
6.添加新的 HTML 內(nèi)容
1.append() 方法在被選元素的結(jié)尾插入內(nèi)容杂穷。
var $h = $('<div class="box2"></div>')
在body的后面加入$h
$('body').append($h)
將$h添加到body的最后面
$h.appendTo($('body'));
2.prepend() 方法在被選元素的開(kāi)頭插入內(nèi)容。
將$h添加到body的首位
var $h = $('<div class="box2"></div>')
$h.prependTo($('body'))
3.after() 和 before() 方法
after() 方法在被選元素之后插入內(nèi)容卦绣。
before() 方法在被選元素之前插入內(nèi)容耐量。
在元素的最后添加一個(gè)元素
$('.box').after($('<div class="box3"></div>'))
在元素的首位添加一個(gè)元素
$('.box').before($('<div class="box2"></div>'))
7.刪除remove()
remove() 方法刪除被選元素及其子元素。
$('.box2').remove();
empty() 方法刪除被選元素的子元素滤港。
$("#div1").empty();
8.替換元素replaceAll()
//用A替換B 返回A
$('<div class="box1"></div>').replaceAll($('.box3'));
9.clone() 克隆
A.clone(); 克隆 深克隆 克隆A
$('.box1').clone().appendTo($('.box'));
10.獲取父元素parent()
A.parent();找A的父元素
console.log($('.box').parent())
11.查找子元素children()
//查找A的子元素 返回一個(gè)集合
console.log($('.ul').children())
12.獲取兄弟元素 next() prev()
//A.next(): 查找A的下一個(gè)兄弟元素
//A.prev(): 查找A的上一個(gè)兄弟元素
//A.siblings():獲取所有兄弟元素
console.log($('.box').prev)
13.對(duì)類(lèi)名的操作
//添加類(lèi)名
$('.box').addClass('box5');
//刪除類(lèi)名
$('.box').removeClass('box5');
//切換類(lèi)名
$('div').toggleClass('box6');
//設(shè)置內(nèi)容廊蜒，也可以添加元素
$('.box').html($('<div class="p"></div>'))
14.jQuery 尺寸 方法
1.width() height()
width() 方法設(shè)置或返回元素的寬度（不包括內(nèi)邊距、邊框或外邊距）溅漾。
height() 方法設(shè)置或返回元素的高度（不包括內(nèi)邊距山叮、邊框或外邊距）。
//讀寫(xiě) 當(dāng)沒(méi)有參數(shù)的時(shí)候 是讀取寬高 當(dāng)有參數(shù)的時(shí)候 設(shè)置寬高
$('.box').css('width','800px')
.css('height','800px')
console.log($('.box').width())//800
console.log($('.box').height())//800
2.innerWidth() 和 innerHeight()
innerWidth() 方法返回元素的寬度（包括內(nèi)邊距）添履。
innerHeight() 方法返回元素的高度（包括內(nèi)邊距）屁倔。
3.outerWidth() 和 outerHeight()
outerWidth() 方法返回元素的寬度（包括內(nèi)邊距和邊框）。
outerHeight() 方法返回元素的高度（包括內(nèi)邊距和邊框）暮胧。
2.讀取元素的偏移量 top/left
console.log($('.box').offset().left)
console.log($('.box').offset().top)
3.position 讀取元素的定位值
console.log($('.box').position())
4.滾動(dòng)偏移
scrollTop() / scrollLeft();
console.log($('.box').scrollTop())
15.事件綁定
1.點(diǎn)擊事件
// $('.box').click(function(){
// $('.box').css('background','green')
// })
2.移出事件
$('.box').off('click');
JQuery中addClass,removeClass,toggleClass的使用锐借。
$(selector).addClass(class)：為每個(gè)匹配的元素添加指定的類(lèi)名
$(selector).removeClass(class)：從所有匹配的元素中刪除全部或者指定的類(lèi)问麸，刪除class中某個(gè)值；
$(selector).toggleClass(class)：如果存在（不存在）就刪除（添加）一個(gè)類(lèi)
$(selector).removeAttr(class);刪除class這個(gè)屬性钞翔；
