1. Jquery概念
jQuery 是一個(gè) JavaScript 庫
jQuery 庫包含以下特性：
1. HTML 元素選取
2. HTML 元素操作
3. CSS 操作
4. HTML 事件函數(shù)
5. JavaScript 特效和動(dòng)畫
6. HTML DOM 遍歷和修改
7. AJAX
2. 庫和框架的區(qū)別
1. 庫:庫可以看作是一種方法的集合哗讥，他不會(huì)特定的去解決某些問題朵栖，他是將所有的方法整合在一個(gè)庫中责循，供使用者使用撮珠，Jquery可以看成一個(gè)庫，它提供了相當(dāng)多的方法和函數(shù)塌忽。
2. 框架:框架的含義是一個(gè)骨架拍埠，它封裝了某領(lǐng)域內(nèi)處理流程的控制邏輯，所以我們經(jīng)常說框架是一個(gè)半成品的應(yīng)用砚婆。由于領(lǐng)域的種類是如此眾多械拍，所以框架必須具有針對(duì)性，比如装盯，專門用于解決底層通信的框架坷虑，或?qū)ｉT用于醫(yī)療領(lǐng)域的框架」∧危框架中也包含了很多元素迄损，框架中的所有元素都為了實(shí)現(xiàn)一個(gè)共同的目標(biāo)而相互協(xié)作
3. jquery 能做什么？
1. HTML 元素選取
2. HTML 元素操作
3. CSS 操作
4. HTML 事件函數(shù)
5. JavaScript 特效和動(dòng)畫
6. HTML DOM 遍歷和修改
7. AJAX
4.jquery 對(duì)象和 DOM 原生對(duì)象有什么區(qū)別账磺？如何轉(zhuǎn)化芹敌？
- 區(qū)別：
jquery對(duì)象是通過jquery選擇器選擇的對(duì)象，得到的是類數(shù)組對(duì)象垮抗，有自己的獨(dú)有的屬性和方法氏捞；DOM原生對(duì)象是通過JS選擇器獲得的對(duì)象,有自己的屬性和方法。二者不能夠混用冒版，否則會(huì)報(bào)錯(cuò)液茎。
1.原生DOM對(duì)象：根據(jù)W3C DOM規(guī)范，DOM是HTML與XML的應(yīng)用接口（API）辞嗡。通過 DOM捆等，可以訪問所有的 HTML 元素，連同它們所包含的文本和屬性续室《翱荆可以對(duì)其中的內(nèi)容進(jìn)行修改和刪除，同時(shí)也可以創(chuàng)建新的元素挺狰。HTML DOM 獨(dú)立于平臺(tái)和編程語言明郭。它可被任何編程語言諸如 Java买窟、JavaScript 和 VBScript 使用。DOM對(duì)象达址，即是我們用傳統(tǒng)的方法(javascript)獲得的對(duì)象蔑祟。
2.jQuery對(duì)象：jquery對(duì)象其實(shí)是一個(gè)javascript的數(shù)組這個(gè)數(shù)組對(duì)象包含125個(gè)方法和4個(gè)屬性4個(gè)屬性分別是：
(1)jquery 當(dāng)前的jquery框架版本號(hào)
(2)length 指示該數(shù)組對(duì)象的元素個(gè)數(shù)
(3)context 一般情況下都是指向HtmlDocument對(duì)象
(4)selector 傳遞進(jìn)來的選擇器內(nèi)容 如：#yourId或.yourClass等
- 如何轉(zhuǎn)換：
獲取jquery對(duì)象：$('#header');
獲取DOM對(duì)象 ：document.getElementById('header');
jquery轉(zhuǎn)原生DOM對(duì)象：$('#header')[0];
DOM對(duì)象轉(zhuǎn)jquery:$(DOM對(duì)象)趁耗；
5.jquery中如何綁定事件沉唠？bind、unbind苛败、delegate满葛、live、on罢屈、off都有什么作用嘀韧？推薦使用哪種？使用on綁定事件使用事件代理的寫法缠捌？
jQuery中綁定事件的方法有：bind()锄贷，live()，delegate()曼月，on()谊却。
與之對(duì)應(yīng)的移除事件的方法有：unbind()，die()哑芹，undeleate()炎辨，off()。
其中l(wèi)ive()和die()在jQuery1.7中以棄用聪姿，bind()碴萧、unbind(),delegate()、undeleate()在在jQuery3.0中以棄用末购。
- bind:bind()是最直接的破喻、存在最久的綁定方法，但它不會(huì)綁定到在它執(zhí)行完后動(dòng)態(tài)添加的那些元素上盟榴。
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
<input type="button" value="添加">
<script>
$('li').bind('click',function(){
console.log($(this).text())
});
var $li =$('<li>item5</li>')//新添加的li不會(huì)被綁定到上面的點(diǎn)擊效果
$('input').bind('click',function(){
$('ul').append($li)
});
</script>
- unblind:用于移除指定元素綁定的事件
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
<input type="button" value="添加">
<script>
$('li').bind('click',function(){
console.log($(this).text())
});
var $li =$('<li>item5</li>')
$('input').bind('click',function(){
$('ul').append($li)
});
$('li').unbind();//被移除綁定點(diǎn)擊效果
$('input').unbind();//被移除綁定點(diǎn)擊效果
</script>
- live:這個(gè)方法用到了事件委托的概念來處理事件的綁定,它將事件綁定到了document上曹质，所以在它執(zhí)行之后添加的元素仍然可以觸發(fā)綁定事件。
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
<input type="button" value="添加">
<script>
$('li').live('click',function(){
console.log($(this).text())
});
var $li =$('<li>item5</li>')//新添加的li有上面綁定的點(diǎn)擊效果
$('input').live('click',function(){
$('ul').append($li)
});
</script>
- delegate:delegate()有點(diǎn)像live(),不同于.live()的地方在于曹货，它不會(huì)把事件全部綁定到document,而是由你決定把它放在哪兒(事件代理)咆繁。
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
<input type="button" value="添加">
<script>
$('ul').delegate('li','click',function(){//事件代理
console.log($(this).text())
});
var $li =$('<li>item5</li>')
$('input').on('click',function(){
$('ul').append($li)
});
</script>
- on:提供了一種統(tǒng)一綁定事件的方法，它替代了.bind(), .live(), .delegate()這三種方法顶籽。
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
<input type="button" value="添加">
<script>
$('ul').on('click','li',function(){
console.log($(this).text())
});
var $li =$('<li>item5</li>')
$('input').on('click',function(){
$('ul').append($li)
});
</script>
- off:提供了一種統(tǒng)一移除綁定事件的方法玩般，它替代了.unbind(), .die(), .undelegate()這三種方法。
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
<input type="button" value="添加">
<script>
$('ul').on('click.console','li',function(){
console.log($(this).text())
});
var $li =$('<li>item5</li>')
$('input').on('click.add',function(){
$('ul').append($li)
});
$('ul').off('click.console');//移除綁定點(diǎn)擊
$('input').off('click.add');//移除綁定點(diǎn)擊
</script>
- 推薦使用on()和off()方法.
6..jquery 如何展示/隱藏元素礼饱？
jquery中可以使用hide()和show()的方法進(jìn)行展示和隱藏元素
如：
<div>
<button id="hide">隱藏</button>
<button id="show">展示</button>
<p>hello world</p>
</div>
<script src='http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js'></script>
<script>
$('#hide').on('click',function(){
$("p").hide();//隱藏p元素
})
$('#show').on('click',function(){
$('p').show();//展示p元素
})
</script>
7. jquery 動(dòng)畫如何使用坏为？
jQuery animate() 方法用于創(chuàng)建自定義動(dòng)畫究驴。
語法：$(selector).animate({params},speed,callback);
1.必需的 params 參數(shù)定義形成動(dòng)畫的 CSS 屬性。
2.可選的 speed 參數(shù)規(guī)定效果的時(shí)長(zhǎng)匀伏。它可以取以下值："slow"洒忧、"fast" 或毫秒。
3. 可選的 callback 參數(shù)是動(dòng)畫完成后所執(zhí)行的函數(shù)名稱够颠。
<input type="button" value="開始" id="input">
<input type="button" value="重置" id="input2">
<div id="ct"></div>
<script>
var clock = true;
$('#input').on('click',function(){
if (!clock) {
return;
}
clock = false;
$('#ct').animate({width:'200',height:'200'},2000)
$('#ct').animate({opacity:'0'},2000)
.animate({opacity:'1'},3000)
.animate({top:'0',left:'50%'},2000)
$('#ct').animate({top:'0',left:'0'},3000)
$('#ct').animate({width:'100',height:'100'},2000,function(){
clock =true;
})
});
$('#input2').on('click',function(){
$('#ct').finish();//結(jié)束所以動(dòng)畫返回css樣式
})
</script>
8. 如何設(shè)置和獲取元素內(nèi)部 HTML 內(nèi)容熙侍？如何設(shè)置和獲取元素內(nèi)部文本？
text() 設(shè)置或返回所選元素的文本內(nèi)容
html() 設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標(biāo)記）
- 獲嚷哪ァ：
<p id="test">這是段落中的<b>粗體</b>文本蛉抓。</p>
<script>
console.log( $('#test').html() ); // 這是段落中的<b>粗體</b>文本。
console.log( $('#test').text() ); // 這是段落中的粗體文本
</script>
- 設(shè)置：
console.log( $('#test').html('<span>hello</span>' )); //
這是段落中的<b>粗體</b>文本剃诅。被替換成hello
console.log( $('#test').text('<span>hello</span>' )); //
這是段落中的<b>粗體</b>文本巷送。<span>hello</span>
9. 如何設(shè)置和獲取表單用戶輸入或者選擇的內(nèi)容？如何設(shè)置和獲取元素屬性矛辕？
val() 設(shè)置或返回表單字段的值
attr() 設(shè)置或返回元素的屬性
- 獲刃︴恕：
<p id="test">這是段落中的<b>粗體</b>文本。</p>
<input id="test-input" type="text" placeholder="測(cè)試表單val">
<a id="test-a" >這是鏈接</a>
<script>
console.log( $('#test-input').val() );
console.log( $('#test-a').attr('href') );
console.log( $('#test-img').attr('data-src') );
</script>
- 設(shè)置：
<p id="test">這是段落中的<b>粗體</b>文本聊品。</p>
<input id="test-input" type="text" placeholder="測(cè)試表單val">
<a id="test-a" >這是鏈接</a>
<script>
$('#test-input').val('輸入xxx') ;
$('#test-a').attr('href','http://www.baidu.com') ;
$('#test-img').attr('src', $('#test-img').attr('data-src')) ;
</script>
