jQuery 能做什么？
jQuery是一個輕量級的javascript庫，可以少寫代碼，做更多的事。
1.jQuery庫擁有強大的選擇器。jquery允許開發(fā)者使用CSS1到CSS3幾乎所有選擇器，以及jquery獨創(chuàng)的高級復(fù)雜的選擇器。
2.出色的DOM操作。jquery封裝了大量常用的DOM操作，使開發(fā)者在編寫DOM操作程序的時候得心應(yīng)手。
3.可靠的事件處理機制。使開發(fā)者處理事件更方便。
4.良好的兼容性。jquery可以在IE 6.0+,FF 2+,Safari 2.0+和Opera 9.0+下正常運行，同時還修復(fù)了一些瀏覽器之間的差異。
5.鏈?zhǔn)讲僮鞣绞健Πl(fā)生在同一個jQuery對象上的一組動作，可以直接連寫而無需重復(fù)獲取對象。
6.隱士迭代。當(dāng)用jQuery找到“.myclass”類的全部元素，然后隱藏它們時，無需循環(huán)遍歷每個返回元素。
7.ajax操作。jquery將所有的ajax操作封裝在到一個函數(shù)$.ajax()里,使得開發(fā)者在處理ajax的時候，能夠?qū)Ｐ奶幚順I(yè)務(wù)邏輯而無需關(guān)心復(fù)雜的瀏覽器兼容性和XMLHttpRequest對象的創(chuàng)建和使用的問題。
jQuery 對象和 DOM 原生對象有什么區(qū)別？如何轉(zhuǎn)化？
jquery對象
jquery對象就是通過jQuery包裝DOM對象后產(chǎn)生的對象。jQuery對象是jQuery獨有的，如果一個對象是jQuery對象就可以使用jQuery中的方法，如：
$("#id").html();
在jQuery對象中無法使用DOM對象的任何方法，DOM對象也不可以使用jQuery里的方法，
DOM對象
DOM對象是文檔對象模型(Document Object Medol),每份DOM都可以表示成一顆DOM樹，如：
可以通過javascript中的一些 方法拿到元素節(jié)點，如getElementById()等，
像這樣得到的DOM元素就是DOM對象，DOM對象可以使用Javascript中的方法，
var text=getElementById("text")；//獲取dom對象
text.innerText="hello world";
互相轉(zhuǎn)化
jquery對象轉(zhuǎn)化成DOM對象
jQuery提供了兩種方法將一個jQuery對象轉(zhuǎn)化成DOM對象，即[index]和get[index],
1.jQuery對象是一個數(shù)組對象，可以通過數(shù)組下標(biāo)獲取到相應(yīng)的DOM對象，如
var $obj=$("#obj") ;//jQuery對象
var obj=$obj[0];//DOM對象，
2.jquery中提供get(index)方法獲取相應(yīng)的DOM對象，如
var $obj=$("#obj") ;//jQuery對象
var obj=$obj.get(0);//DOM對象，
DOM對象轉(zhuǎn)化成jQuery對象
DOM對象只要用$()將DOM對象包裝起來，就可以獲得一個jQuery對象，方式為$(DOM對象)，
如：
var obj=getElementById("obj");
var $obj=$(obj);
jQuery中如何綁定事件？bind、unbind、delegate、live、on、off都有什么作用？推薦使用哪種？使用on綁定事件使用事件代理的寫法？
jQuery通過bind()、delegate()、live()、on()等方法綁定事件。
bind()
bind(type,[,data],fn),bind()方法有三個參數(shù)，第一個參數(shù)是一個或者多個事件類型，第二個是可選參數(shù)，作為event.data的屬性值傳給事件對象，第三個是綁定的處理函數(shù)。
bind方法必須使用在一個已經(jīng)存在的元素中，bind也只能把事件處理程序綁定到指定的DOM元素上面，如果經(jīng)常刪除或者創(chuàng)建DOM,不適合使用bind。當(dāng)選擇器選擇的DOM元素很多的時候，要在每個元素上都綁定事件處理程序，會有很大的額外開銷。
delegate()
delegate(selector,[type],[data],fn),delegate方法有四個參數(shù)，第一個參數(shù)是選擇器，指當(dāng)觸發(fā)事件的DOM元素匹配這個選擇器時觸發(fā)事件處理程序，后面的三個參數(shù)與bind相同。如：
//當(dāng)點擊鼠標(biāo)時，隱藏或顯示 p 元素：
<div style="background-color:red">
<p>這是一個段落。</p>
<button>點擊</button>
</div>
<script>
$("div").delegate("button","click",function(){
$("p").slideToggle();
});
</script>
delegate可以把事件處理程序委托到一個指定的根元素上面，但是event.stopPropagation在代理的事件處理程序中是無效的，如果在根元素的DOM樹下，有一個元素的事件處理程序阻止事件冒泡，那么代理的事件處理程序?qū)⒈蛔柚箞?zhí)行。
live()
live(type, [data], fn),三個參數(shù)都與bind相同，可以說live方法是bind方法的變體，使用 .bind() 時，選擇器匹配的元素會附加一個事件處理函數(shù)，而以后再添加的元素則不會有。為此需要再使用一次 .bind() 才行。live給所有匹配的元素附加一個事件處理函數(shù)，即使這個元素是以后再添加進來的也有效。如：
<body>
<div class="click">點擊這里</div>
</body>
<body>
<script>
$('.click').live('click', function() {
console.log("點擊這里");
});
</script>
再添加一個元素
$('body').append('<div class="click">另一個</div>');
然后再點擊新增的元素，依然能夠觸發(fā)事件處理函數(shù)。
live() 方法能對一個還沒有添加進DOM的元素有效，是由于使用了事件委托：綁定在祖先元素上的事件處理函數(shù)可以對在后代上觸發(fā)的事件作出回應(yīng)。所以無論在綁定事件的時候選擇器對應(yīng)的元素是否存在，都能在事件觸發(fā)之后正確執(zhí)行相關(guān)的事件處理程序。
live的缺點：
1.live不支持鏈?zhǔn)降膶懛?
2.因為所有的事件處理程序都是綁定在document元素，如果目標(biāo)元素所在的DOM樹節(jié)點比較深，會有一個比較長的冒泡路徑。
3.當(dāng)一個事件處理函數(shù)用 .live() 綁定后，要停止執(zhí)行其他的事件處理函數(shù)，那么這個函數(shù)必須返回 false。 stopPropagation() 是無效的,因為事件已經(jīng)冒泡到document上了。
on()
on方法是在選擇元素上綁定一個或多個事件的事件處理函數(shù)。
on(events,[selector],[data],fn);
events:是要綁定的事件類型；
selector：可選參數(shù)，過濾選擇器，用于過濾器的觸發(fā)事件的選擇器元素的后代，只有匹配這個選擇器的元素才執(zhí)行事件處理程序。如果沒有提供則認(rèn)為是綁定在選中的元素上。
后面兩個與bind相同。
如果on有selector這個參數(shù)，就跟delegate類似，是一個事件代理，把selector匹配的元素的事件處理程序代理到選中的元素上。如果沒有，就跟bind類似，綁定在某個指定的元素上。
** unbind()**
unbind(type,[data|fn]])
bind()的反向操作，從每一個匹配的元素中刪除綁定的事件。
1.把所有段落的所有事件取消綁定
$("p").unbind()
2.將段落的click事件取消綁定
$("p").unbind( "click" )
3.刪除特定函數(shù)的綁定，將函數(shù)作為第二個參數(shù)傳入
$("p").bind("click", foo); // ... 當(dāng)點擊段落的時候會觸發(fā) foo
$("p").unbind("click", foo); // ... 再也不會被觸發(fā) foo
off
off(events,[selector],[fn]),off() 方法移除用on()方法中綁定的事件處理程序。
1.把所有段落的所有事件取消綁定
$("p").offf()
2.把所有段落的點擊事件都取消
$("p").off( "click", "**" )
3.點擊p時移除foo事件
$("body").off("click", "p", foo);
4.移除命名空間下的所有事件
var validate = function () {}
$("form").on("click.validator", "button", validate);
$("form").off(".validator");
終上所述，推薦使用on綁定事件，較好的彌補了其他幾種綁定事件的缺點。
on事件代理寫法,加個過濾參數(shù)即可
<div class="test">
<p class="btn">點擊</p>
</div>
<script>
$('.test').on('click','.btn',function() {
console.log("點擊這里");
});
</script>
jQuery 如何展示/隱藏元素？
使用show()和hide()
<div class="demo"></div>
<button class="btn1">點擊隱藏</button>
<button class="btn2">點擊顯示</button>
<script>
$(function(){
$(".btn1").click(function(){
$(".demo").hide(2000);
})
$(".btn2").click(function(){
$(".demo").show(2000);
})
})
</script>
jQuery 動畫如何使用？
1.show()和hide()
show()方法和hide()方法沒有參數(shù)的時候，相當(dāng)于css("display"，"none/block"),立即隱藏或顯示元素，不會有任何動畫，動畫效果的顯示功能：
show(speed,[callback])
隱藏功能：
show(speed,[callback])
speed:表示執(zhí)行動畫時的速度
callback:可選參數(shù)，表示動畫結(jié)束后執(zhí)行的回調(diào)函數(shù)。
<div class="demo"></div>
<button class="btn1">點擊隱藏</button>
<button class="btn2">點擊顯示</button>
<script>
$(function(){
$(".btn1").click(function(){
$(".demo").hide(2000);
})
$(".btn2").click(function(){
$(".demo").show(2000,function(){
$(this).css('border','1px solid')
});
})
})
</script>
2.toggle()
在使用show()和hide()方法顯示隱藏元素時，為了正確執(zhí)行切換顯示的動作，需要檢測當(dāng)前元素的顯示狀態(tài)，然后根據(jù)該狀態(tài)再執(zhí)行顯示或者隱藏，toggle()方法就是切換元素的可見狀態(tài)。
1.無參數(shù)調(diào)用
toggle()
2.參數(shù)是一個布爾值，如果是true顯示，false隱藏。
toggle(boolean)
3.與show()參數(shù)所表示的意義一樣。
toggle(speed,[callbakc])
<div class="demo"></div>
<button class="btn1">點擊1</button>
<button class="btn2">點擊2</button>
<button class="btn3">點擊3</button>
<script>
$(function(){
$(".btn1").click(function(){
$(".demo").toggle();//無參數(shù)方法
});
$(".btn2").click(function(){
$(".demo").toggle(false);//根據(jù)參數(shù)顯示或隱藏
});
$(".btn3").click(function(){
$(".demo").toggle(2000,function(){
$(".demo").css("background","yellow"); //有兩個參數(shù)
})
});
})
</script>
3.slideUp()和slideDown(),slideToggle()
slideUp()方法格式如：
slideUp(speed,[callback]),動畫效果是將所選元素的高度向上減小，呈現(xiàn)一種向上滑動的效果。
slideDown()方法格式如：
slideDown(speed,[callback]),動畫效果是將所選元素的高度向下增大，僅僅改變元素的高度屬性，所含參數(shù)與slideUp一樣。
slideToggle()方法格式如下：
slideDown(speed,[callback])，動畫效果是自動切換所選元素的高度狀態(tài)。
<body>
<div class="demo"></div>
<button class="btn1">點擊1</button>
<button class="btn2">點擊2</button>
<button class="btn3">點擊3</button>
<script>
$(function(){
$(".btn1").click(function(){
$(".demo").slideUp(2000);
});
$(".btn2").click(function(){
$(".demo").slideDown(2000);
});
$(".btn3").click(function(){
$(".demo").slideToggle(2000,function(){
$(".demo").css("background","yellow");
})
});
})
</script>
</body>
4.fadeIn()、fadeOut()、fadeTo()
show(),hide()與fadeOut()、fadeIn()比較，相同之處就是切換元素的顯示狀態(tài)，不同在于show()和hide()的動畫使元素的高度和寬度屬性都發(fā)生了變化，而fadeOut()和fadeIn()只是元素的透明度發(fā)生變化。
fadeOut()方法格式如：
fadeOut()(speed,[callback]),通過改變元素的透明度，實現(xiàn)淡出的動畫效果。
fadeIn()方法格式如：
fadeIn()(speed,[callback]),通過改變元素的透明度，實現(xiàn)淡入的動畫效果。
fadeTo()方法格式如：
fadeTo()(speed,opacity,[callback]),該方法是將所選元素的不透明度以動畫的效果調(diào)整到指定的透明度。參數(shù)speed是動畫速度，opacity是指定的不透明值，范圍是0.0~1.0,可選參數(shù)回調(diào)函數(shù) ，與別的動畫相同。
<div class="demo"></div>
<button class="btn1">點擊1</button>
<button class="btn2">點擊2</button>
<button class="btn3">點擊3</button>
<script>
$(function(){
$(".btn1").click(function(){
$(".demo").fadeIn(2000);
});
$(".btn2").click(function(){
$(".demo").fadeOut(2000);
});
$(".btn3").click(function(){
$(".demo").fadeTo(2000,0.2,function(){
$(".demo").css("background","yellow");
})
});
})
5.自定義動畫
animate()可以自定義各種復(fù)雜的高級的動畫，調(diào)用語法格式為：
animate(params,[duration],[easing],[callback])
params：表示用于制作動畫效果的屬性樣式和值的集合，
duration：可選，表示自定義動畫的速度，可以是normal，slow，fast或自定義的數(shù)字，
easing：可選，為動畫插件使用，用于控制動畫的表現(xiàn)效果，有swing和linear等值，
callback：可選，自定義動畫完成后的回調(diào)函數(shù)。
簡單的動畫,點擊之后變大
<script src="js/jquery-1.8.3.min.js"></script>
<style>
.demo{width: 100px;height: 100px;background: #ff0000;}
</style>
</head>
<body>
<div class="demo">點擊變大</div>
<button class="btn">點擊變大</button>
<script>
$(function(){
$(".btn").click(function(){
$(".demo").animate({
width:"200",
height:"200px"
},2000)
})
})
</script>
位置移動的動畫,要給元素設(shè)置position，位置移動才生效。
<script>
$(function(){
$(".btn").click(function(){
$(".demo").animate({
width:"200",
height:"200px",
top:"40px",
left:"50px"
},2000)
})
})
</script>
隊列中的動畫，就是元素在執(zhí)行一個以上的多個動畫效果,即有多個animate()方法在元素中執(zhí)行，如先將元素放大，然后再縮小，
<div class="demo">點擊變大</div>
<button class="btn">點擊變大</button>
<script>
$(function(){
$(".btn").click(function(){
$(".demo")
.animate({height:"200px"},2000)
.animate({width:"200px"},1000)
.animate({height:"50px"},1000)
.animate({width:"50px"},1000)
})
})
</script>
如何設(shè)置和獲取元素內(nèi)部 HTML 內(nèi)容？如何設(shè)置和獲取元素內(nèi)部文本？
用html()和text()獲取元素中的內(nèi)容，將內(nèi)容作為html(val)和text(val)的參數(shù)分別設(shè)置元素內(nèi)容。
設(shè)置元素內(nèi)部的HTML,使用$().html()或者innerHTML
<div class="demo"></div>
<button class="btn1">點擊1</button>
1.
<script>
var demo=document.querySelector(".demo");
var btn1=document.querySelector(".btn1");
btn1.onclick=function(){
demo.innerHTML="<p>這是一個段落</p>";
}
})
</script>
2.<script>
$(function(){
$(".btn1").click(function(){
$(".demo").html("<p>這是一個段落</p>");
});
</script>
獲取元素內(nèi)部的HTML
<div class="demo">
<p>這是一個段落</p>
</div>
<button class="btn1">點擊1</button>
1.原生的方法
<script>
var demo=document.querySelector(".demo");
var btn1=document.querySelector(".btn1");
btn1.onclick=function(){
var innerhtml=demo.innerHTML;
console.log(innerhtml);// <p>這是一個段落</p>
}
</script>
2.jquery方法
<script>
$(function(){
$(".btn1").click(function(){
console.log($(".demo").html());// <p>這是一個段落</p>
});
})
</script>
設(shè)置元素內(nèi)部的文本,使用$().text()或者innerText
<div class="demo"></div>
<button class="btn1">點擊1</button>
1.原生的方法
<script>
var demo=document.querySelector(".demo");
var btn1=document.querySelector(".btn1");
btn1.onclick=function(){
demo.innerText="這是一個文本";
}
</script>
2.jQuery方法
<script>
$(function(){
$(".btn1").click(function(){
$(".demo").text("這是一個文本");
});
})
</script>
獲取文本，與獲取html方法一樣
<div class="demo">這是一個文本</div>
<button class="btn1">點擊1</button>
1. 原生的方法
var demo=document.querySelector(".demo");
var btn1=document.querySelector(".btn1");
btn1.onclick=function(){
console.log(demo.innerText);
}
2.jQuery的方法
$(function(){
$(".btn1").click(function(){
console.log($(".demo").text()) ;//不寫參數(shù)即可
});
})
如何設(shè)置和獲取表單用戶輸入或者選擇的內(nèi)容？如何設(shè)置和獲取元素屬性？
如果想要獲取元素的值，可以通過val()方法實現(xiàn)，語法：
$(‘selector’).val(val)，
如果不帶參數(shù)就是獲取輸入的值，如果帶有參數(shù)就是設(shè)置元素的值，
<form class="demo">
<input type="text" id="txt">
</form>
<script>
$(function() {
//獲取值
$("#txt").focus(function () {
var txtvalue = $(this).val();
console.log(txtvalue)
});
//設(shè)置值
$("#txt").blur(function () {
var txtvalue = $(this).val();
if (txtvalue==""){
$(this).val("文本框不能為空")
}
});
})
</script>
獲取選擇的內(nèi)容,val()方法還有一個用處是，可以使下拉列表，復(fù)選框和單選框相應(yīng)的選項被選中，
<form class="demo">
<select id="single">
<option >選項1</option>
<option >選項2</option>
<option >選項3</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">選擇1號</option>
<option >多選2</option>
<option >多選3</option>
</select>
<input type="checkbox" value="check1">多選1
<input type="checkbox" value="check2">多選2
<input type="checkbox" value="check3">多選3
<input type="radio" value="check1">單選1
<input type="radio" value="check2">單選2
<input type="radio" value="check3">單選3
</form>
<script>
$(function() {
//使下拉框的第二個被選中
$("#single").val("選項2");
//使下拉列表的第二第三個被選中
$("#multiple").val(["多選2","多選3"])
$(":checkbox").val(["check1","check2"]);
$(":radio").val(["check1"])
})
</script>
$(‘selector’).attr(attr):獲取元素屬性;
$(‘selector’).attr(‘a(chǎn)ttr’,’type’):設(shè)置元素屬性的值;
8
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
ul li{list-style: none}
a{text-decoration: none}
.wrap{
width: 600px;
margin: 0 auto;
}
.nav-aside{
margin-top: 30px;
width: 180px;
}
.category{
position: relative;
width: 190px;
background: #c7171e;
}
.category>a{
display: block;
padding: 10px;
margin: 0 10px;
width: 150px;
color: #fff;
font-size: 14px;
border-bottom:1px dotted #de272e;
}
.icon-jiantou{
position: absolute;
top: 10px;
right: 10px;
font-family: SimSun-ExtB;
font-style: normal;
font-weight: 700;
color: #fff;
}
.category-child{
display: none;
position: absolute;
top: 0;
left: 190px;
width: 190px;;
background: #fff;
border: 1px solid #ddd;
}
.category-child>li{
float: left;
width: 75px;
padding: 10px;
text-align: center;
}
.category-child>li>a{
color: #333;
font-size: 14px;
}
.show{display: block}
</style>
</head>
<body>
<div class="wrap">
<ul class="nav-aside">
<li class="category">
<a href="">珠寶玉器</a>
<i class="icon-jiantou"> > </i>
<ul class="category-child">
<li><a href="">翡翠</a></li>
<li><a href="">玉石</a></li>
<li><a href="">翡翠</a></li>
<li><a href="">玉石</a></li>
<li><a href="">翡翠</a></li>
<li><a href="">翡翠</a></li>
<li><a href="">玉石</a></li>
<li><a href="">翡翠</a></li>
<li><a href="">玉石</a></li>
<li><a href="">翡翠</a></li>
</ul>
</li>
<li class="category">
<a href="">珠寶玉器</a>
<i class="icon-jiantou"> > </i>
<ul class="category-child">
<li><a href="">翡翠</a></li>
<li><a href="">玉石</a></li>
<li><a href="">翡翠</a></li>
<li><a href="">玉石</a></li>
<li><a href="">翡翠</a></li>
<li><a href="">翡翠</a></li>
</ul>
</li>
<li class="category">
<a href="">珠寶玉器</a>
<i class="icon-jiantou"> > </i>
<ul class="category-child">
<li><a href="">翡翠</a></li>
<li><a href="">玉石</a></li>
<li><a href="">翡翠</a></li>
<li><a href="">玉石</a></li>
</ul>
</li>
<li class="category">
<a href="">珠寶玉器</a>
<i class="icon-jiantou"> > </i>
<ul class="category-child">
<li><a href="">翡翠</a></li>
<li><a href="">玉石</a></li>
<li><a href="">翡翠</a></li>
<li><a href="">玉石</a></li>
<li><a href="">翡翠</a></li>
<li><a href="">翡翠</a></li>
<li><a href="">玉石</a></li>
<li><a href="">翡翠</a></li>
</ul>
</li>
<li class="category">
<a href="">珠寶玉器</a>
<i class="icon-jiantou"> > </i>
<ul class="category-child">
<li><a href="">翡翠</a></li>
<li><a href="">玉石</a></li>
<li><a href="">翡翠</a></li>
<li><a href="">玉石</a></li>
<li><a href="">翡翠</a></li>
<li><a href="">翡翠</a></li>
</ul>
</li>
</ul>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script>
$(function(){
/*
$(".category").on("mouseenter",function(){
$(this).find(".category-child").show();
});
$(".category").on("mouseleave",function(){
$(this).find(".category-child").hide();
});*/
$(".category").on("mouseenter",function(){
$(this).find(".category-child").addClass("show");
});
$(".category").on("mouseleave",function(){
$(this).find(".category-child").removeClass("show");
});
})
</script>
</body>
</html>
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
ul li{ list-style: none}
a{text-decoration: none;color: #ddd;}
.clearfix:after{
content: "";
display: block;
clear: both;
}
.tab{
width: 200px;
padding: 5px;
border: 1px solid #ddd;
text-align: center;
}
.tab>span{
padding: 0 5px;
line-height: 1;
border-right: 1px solid #ddd;
}
.tab-wrap{
position: relative;
width: 600px;
height: 400px;
overflow: hidden;
}
.tab-panel{
position: absolute;
height: 400px;
}
.tab-item{
float: left;
width: 600px;
height: 400px;
}
.tab-item:nth-of-type(1){
background: #ff0000;
left:0;
}
.tab-item:nth-of-type(2){background: #6A6AFF}
.tab-item:nth-of-type(3){background: #00ff00}
.select{background: #ddd;}
</style>
</head>
<body>
<div class="wrap">
<div class="tab">
<span class="select">tab1</span>
<span>tab2</span>
<span>tab3</span>
</div>
<div class="tab-wrap clearfix">
<ul class="tab-panel">
<li class="tab-item"></li>
<li class="tab-item"></li>
<li class="tab-item"></li>
</ul>
</div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script>
$(function(){
$(".tab>span").on('click',function(){
var $this=$(this);
var index=$(this).index();
var wid=$(".tab-wrap").width();
$this.siblings().removeClass("select");
$this.addClass("select");
$(this).parents(".wrap").find(".tab-panel").animate({left:-wid*index},1000);
})
})
</script>
</body>
</html>
