1. Jquery概念
jQuery 是一個 JavaScript 庫
jQuery 庫包含以下特性：
1. HTML 元素選取
2. HTML 元素操作
3. CSS 操作
4. HTML 事件函數(shù)
5. JavaScript 特效和動畫
6. HTML DOM 遍歷和修改
7. AJAX
2. 庫和框架的區(qū)別
1. 庫:庫可以看作是一種方法的集合，他不會特定的去解決某些問題，他是將所有的方法整合在一個庫中，供使用者使用，Jquery可以看成一個庫，它提供了相當(dāng)多的方法和函數(shù)。
2. 框架:框架的含義是一個骨架，它封裝了某領(lǐng)域內(nèi)處理流程的控制邏輯，所以我們經(jīng)常說框架是一個半成品的應(yīng)用。由于領(lǐng)域的種類是如此眾多，所以框架必須具有針對性，比如，專門用于解決底層通信的框架，或?qū)ｉT用于醫(yī)療領(lǐng)域的框架。框架中也包含了很多元素，框架中的所有元素都為了實現(xiàn)一個共同的目標而相互協(xié)作
3. jquery 能做什么？
1. HTML 元素選取
2. HTML 元素操作
3. CSS 操作
4. HTML 事件函數(shù)
5. JavaScript 特效和動畫
6. HTML DOM 遍歷和修改
7. AJAX
4.jquery 對象和 DOM 原生對象有什么區(qū)別？如何轉(zhuǎn)化？
- 區(qū)別：
jquery對象是通過jquery選擇器選擇的對象，得到的是類數(shù)組對象，有自己的獨有的屬性和方法；DOM原生對象是通過JS選擇器獲得的對象,有自己的屬性和方法。二者不能夠混用，否則會報錯。
1.原生DOM對象：根據(jù)W3C DOM規(guī)范，DOM是HTML與XML的應(yīng)用接口（API）。通過 DOM，可以訪問所有的 HTML 元素，連同它們所包含的文本和屬性?？梢詫ζ渲械膬?nèi)容進行修改和刪除，同時也可以創(chuàng)建新的元素。HTML DOM 獨立于平臺和編程語言。它可被任何編程語言諸如 Java、JavaScript 和 VBScript 使用。DOM對象，即是我們用傳統(tǒng)的方法(javascript)獲得的對象。
2.jQuery對象：jquery對象其實是一個javascript的數(shù)組這個數(shù)組對象包含125個方法和4個屬性4個屬性分別是：
(1)jquery 當(dāng)前的jquery框架版本號
(2)length 指示該數(shù)組對象的元素個數(shù)
(3)context 一般情況下都是指向HtmlDocument對象
(4)selector 傳遞進來的選擇器內(nèi)容 如：#yourId或.yourClass等
- 如何轉(zhuǎn)換：
獲取jquery對象：$('#header');
獲取DOM對象 ：document.getElementById('header');
jquery轉(zhuǎn)原生DOM對象：$('#header')[0];
DOM對象轉(zhuǎn)jquery:$(DOM對象)；
5.jquery中如何綁定事件？bind、unbind、delegate、live、on、off都有什么作用？推薦使用哪種？使用on綁定事件使用事件代理的寫法？
jQuery中綁定事件的方法有：bind()，live()，delegate()，on()。
與之對應(yīng)的移除事件的方法有：unbind()，die()，undeleate()，off()。
其中l(wèi)ive()和die()在jQuery1.7中以棄用，bind()、unbind(),delegate()、undeleate()在在jQuery3.0中以棄用。
- bind:bind()是最直接的、存在最久的綁定方法，但它不會綁定到在它執(zhí)行完后動態(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不會被綁定到上面的點擊效果
$('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();//被移除綁定點擊效果
$('input').unbind();//被移除綁定點擊效果
</script>
- live:這個方法用到了事件委托的概念來處理事件的綁定,它將事件綁定到了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有上面綁定的點擊效果
$('input').live('click',function(){
$('ul').append($li)
});
</script>
- delegate:delegate()有點像live(),不同于.live()的地方在于，它不會把事件全部綁定到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');//移除綁定點擊
$('input').off('click.add');//移除綁定點擊
</script>
- 推薦使用on()和off()方法.
6..jquery 如何展示/隱藏元素？
jquery中可以使用hide()和show()的方法進行展示和隱藏元素
如：
<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 動畫如何使用？
jQuery animate() 方法用于創(chuàng)建自定義動畫。
語法：$(selector).animate({params},speed,callback);
1.必需的 params 參數(shù)定義形成動畫的 CSS 屬性。
2.可選的 speed 參數(shù)規(guī)定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。
3. 可選的 callback 參數(shù)是動畫完成后所執(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é)束所以動畫返回css樣式
})
</script>
8. 如何設(shè)置和獲取元素內(nèi)部 HTML 內(nèi)容？如何設(shè)置和獲取元素內(nèi)部文本？
text() 設(shè)置或返回所選元素的文本內(nèi)容
html() 設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標記）
- 獲取：
<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è)置或返回元素的屬性
- 獲?。?/li>
<p id="test">這是段落中的<b>粗體</b>文本。</p>
<input id="test-input" type="text" placeholder="測試表單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="測試表單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>
