問答部分
一衡载、說說庫和框架的區(qū)別搔耕？
- 庫~是一個提供了封裝好很多方法的工具，在這個工具里面，用與不用都是由你決定弃榨，控制權在于使用者
- 框架~提供整套的解決方案菩收，你可以往里面填充你的內(nèi)容，但是你要遵循框架創(chuàng)造一些規(guī)則和范例鲸睛，控制權在于框架
二娜饵、jQuery能做什么？
jQuery能做如下操作：
- 獲取HTML中的元素官辈，如下代碼：
$("ul li");
$("li").next(".s");
$("li").parent();
- dom操作箱舞，如下代碼：
$("#ct").append(".newdiv");
- css操作，如下代碼：
$("p").css("color","red");
- 事件處理拳亿，如下代碼：
//綁定事件
$("#btn").on("click",function(){
console.log("event handling");
});
//解除事件
$("#btn").off();
- 動畫操作晴股，如下代碼：
$(".box1").hide(1500,function(){
$(".box2").hide(1500,function(){
$(".box3").hide(1500);
});
});
- ajax操作
三、jQuery對象和DOM原生對象有什么區(qū)別肺魁？如何轉(zhuǎn)化电湘？
- 二者區(qū)別
- jQuery對象是在DOM原生對象上做了一層包裝后的對象，只能夠使用jQuery對象的方法
- DOM原生對象是通過Javascript方法所獲得的的對象万搔，也只能使用Javascript所提供的的方法
- 兩者的轉(zhuǎn)化：
- jQuery對象轉(zhuǎn)化為DOM對象
//數(shù)組下標的轉(zhuǎn)化方式
var $li = $("li");//jQuery對象
var li = $li[2];//DOM對象
//jQuery的get(index)方法
//當get()不寫參數(shù)把所有對象轉(zhuǎn)為DOM對象返回
var $li = $("li");//jQuery對象
var li = $li.get(3);//DOM對象
- DOM對象轉(zhuǎn)化為 jQuery對象
//用$()把DOM原生對象包裝起來，就可以轉(zhuǎn)換為jQuery對象官帘，即$(DOM對象)
var li = document.getElementsByTagName("li");//DOM對象
var $li = $(li);//jQuery對象
四瞬雹、jQuery中如何綁定事件刽虹？bind酗捌、unbind、delegate涌哲、live胖缤、on、off都有什么作用阀圾？推薦使用哪種哪廓？使用on綁定事件使用事件代理的寫法？
- .bind()~用于直接附加一個事件處理程序到元素上==>（注意：在jQuery3.0中初烘，.bind()已被標記為棄用）涡真，用法如下：
$("#btn").bind("mouseenter mouseleave",function(){
console.log(111);
});
-
unbind()~用于移除
.bind()綁定的事件處理程序==>（注意：在jQuery3.0中，.unbind()已被標記為棄用）肾筐，用法如下：
$("#btn").unbind();//移除#btn上所有綁定的處理程序
$("#btn").unbind("click");//移除#btn上所有綁定的click處理程序
- live()~該方法將委托的事件處理程序附加到一個頁面的document元素哆料，從而簡化了在頁面上動態(tài)添加的內(nèi)容上事件處理的使用==>（注意：在jQuery1.7中，.live()已被標記為棄用）吗铐，用法如下：
$(".pic").live("click",function(){
$(this).hide("slow");
});
- delegate()~為所有匹配選擇器（selector參數(shù)）的元素綁定一個或多個事件處理函數(shù)东亦，基于一個指定的根元素的子集（匹配的元素包括那些目前已經(jīng)匹配到的元素，也包括那些今后可能匹配到的元素）==>（注意：在jQuery3.0中唬渗，.delegate()已被標記為棄用）典阵，用法如下：
$(".content").delegate(".btn","click",function(){
console.log("delegate()");
});
- on()~在選定的元素上綁定一個或多個事件處理函數(shù)==>（推薦使用.on()方法進行事件綁定）
//.on()的語法如下
.on(events[,selectors][,data],handler);
- events~一個或多個空格分隔的事件類型和可選的命名空間奋渔，或僅僅是命名空間，比如
"click"萄喳、"mouseenter mouseleave"卒稳、"keydown.myPlugin"、".myPlugin"他巨，命名空間時如下代碼：
function myHandler(){
console.log(111);
}
//為所有類名為items的元素綁定click事件充坑，定義在test和foo兩個命名空間下
$(".items").on("click.test.foo",myHandler);
// 觸發(fā)所有click事件
$("#btn").trigger("click");
// 觸發(fā)定義在test命名空間下的click事件
$("#btn").trigger("click.test");
// 觸發(fā)定義在foo命名空間下的click事件
$("#btn").trigger("click.foo");
// 觸發(fā)同時定義在test和foo兩個命名空間下的click事件
$("#btn").trigger("click.test.foo");
- selectors~一個選擇器字符串，用于過濾出被選中的元素中能觸發(fā)事件的后代元素染突；如果選擇器是 null 或者忽略了該選擇器捻爷，那么被選中的元素總是能觸發(fā)事件，如下代碼：
$("#ct").on("click",".items",function(){
console.log(111);
});
- data~當一個事件被觸發(fā)時份企，要傳遞給事件處理函數(shù)的event.data也榄，如下代碼：
$("#btn").on("click",{name:"dp",age:25},function(event){
console.log(event.data);
});
- handler~事件被觸發(fā)時，執(zhí)行的函數(shù)司志。若該函數(shù)只是要執(zhí)行return false的話甜紫，那么該參數(shù)位置可以直接簡寫成 false，如下代碼：
$("#btn").on("click",function(){
console.log(111);
});
-
off()~移除
.on()上綁定的事件處理函數(shù)==>（推薦使用.off()方法進行事件移除）
//.off()的語法如下
.off(events[,selectors][,handler]);
//移除所有事件
$("#btn").off();
//移除元素上所有的代理事件骂远，而不移除任何非代理事件囚霸，請使用特殊值 "**"
$("#btn").off("click","**");
//通過命名空間來移除事件
function myHandler(){
console.log(111);
}
$("#btn1").on("click.test.foo",myHandler);
$("#btn1").off("click.test");
$("#btn1").off("clck.test.foo");
五、jQuery如何展示元素和隱藏元素激才？
- 基礎方法
-
.show()~該方法展示元素拓型，用法如下：
$(".pic").show();
$(".pic").show("fast");
$("#btn").on("click",function(){
$(".items").show("slow",function(){
//to do...
});
});
-
.hide()~該方法隱藏元素，用法如下：
$(".pic").hide();
$(".pic").hide("fast");
$("#btn").on("click",function(){
$(".items").hide("slow",function(){
//to do...
});
});
-
.toggle()~該方法顯示或隱藏元素瘸恼，用法如下：
$(".pic").toggle();
$(".pic").toggle(200);
$("#btn").on("click",function(){
$(".items").toggle("slow",function(){
//to do...
});
});
比如如下GIF：
show()/hide()/toggle()
- 漸變（淡入淡出）
-
.fadeIn()~通過淡入的方式顯示匹配元素劣挫，用法如下：
$(".pic").fadeIn();
$(".pic").fadeIn("fast");
$("button").on("click",function(){
$("div").fadeIn("slow",function(){
//to do...
});
});
-
.fadeOut()~通過淡出的方式隱藏匹配元素，用法如下：
$(".pic").fadeIn();
$(".pic").fadeIn(200);
$("button").on("click",function(){
$("div").fadeOut("slow",function(){
//to do...
});
});
-
.fadeToggle()~通過匹配的元素的不透明度動畫东帅，來顯示或隱藏它們压固，方法執(zhí)行匹配元素的不透明度動畫，用法如下：
$(".pic").fadeToggle();
$(".pic").fadeToggle("slow");
$("button").on("click",function(){
$("div").fadeToggle("slow",function(){
//to do...
});
});
-
.fadeTo()~調(diào)整匹配元素的透明度靠闭，方法通過匹配元素的不透明度做動畫效果邓夕，用法如下：
$("img").fadeTo("slow", 0.5, function() {
// to do...
});
比如如下GIF：
漸變
- 滑動
-
.slideDown()~用滑動動畫顯示一個匹配的元素，方法將給匹配元素的高度的動畫阎毅，這會導致頁面的下面部分滑下去焚刚，彌補了顯示的方式，用法如下：
$(".pic").slideDown();
$(".pic").slideDown("fast");
$("button").on("click",function(){
$("div").slideDown(1000,function(){
//to do...
});
});
-
.slideUp()~用滑動動畫隱藏一個匹配的元素扇调，方法將給匹配元素的高度的動畫矿咕，這會導致頁面的下面部分滑上去，當一個隱藏動畫后，高度值達到0的時候碳柱，display 樣式屬性被設置為none捡絮，以確保該元素不再影響頁面布局，用法如下：
$(".pic").slideUp();
$(".pic").slideUp("slow");
$("button").on("click",function(){
$("div").slideUp(1500,function(){
//to do...
});
});
-
.slideToggle()~用滑動動畫顯示或隱藏一個匹配元素莲镣，方法將給匹配元素的高度的動畫福稳，這會導致頁面中，在這個元素下面的內(nèi)容往下或往上滑瑞侮，用法如下：
$(".pic").slideToggle();
$(".pic").slideToggle("fast");
$("button").on("click",function(){
$("div").slideToggle("slow",function(){
//to do...
});
});
比如如下GIF：
滑動
六的圆、jQuery動畫如何使用？
.animate()~是一種根據(jù)一組 CSS 屬性半火，執(zhí)行自定義動畫的方法越妈，其語法如下：
.animate(properties[,duration][,easing][,complete])
.animate( properties, options )
- properties~一個CSS屬性和值的對象,動畫將根據(jù)這組對象移動，注意以下幾點：
- 所有用于動畫的屬性必須是數(shù)字的钮糖，除非另有說明梅掠；否則不能使用jQuery的基本功能
- 屬性值被視為一個像素數(shù)，除非另有說明店归；em和%需要指定使用
- 除了定義數(shù)值阎抒，每個屬性能使用"show"、"hide"消痛、"toggle"
- 動畫屬性也可以是一個相對值且叁；如果提供一個+=或-=開始的值，那么目標值就以當前值加上或減去給定的數(shù)字來計算
- 如果元素的定位屬性是static肄满，那么他們的定位屬性（top谴古、right质涛、 bottom稠歉、 left)沒有明顯的效果
- 基本用法如下：
$("#clickme").on("click",function(){
$("div").animate({
left:"+=50",
opacity:0.5,
height:"toggle"
},5000,function(){
console.log(111);
});
});
- options~一組包含動畫選項的值的集合，支持的選項如下：
- duration(default:400)~一個字符串或者數(shù)字決定動畫將運行多久
- easing(default:swing)~一個字符串汇陆，表示過渡使用哪種緩動函數(shù)
- queue(default:true)~一個布爾值怒炸，指示是否將動畫放置在效果隊列中。如果為false時毡代，將立即開始動畫
- step~每步動畫執(zhí)行后調(diào)用的回調(diào)函數(shù)阅羹，需要注意的是step函數(shù)被每個動畫元素的每個動畫屬性調(diào)用；其接受兩個參數(shù)（now： 每一步動畫屬性的數(shù)字值教寂；fx：jQuery.fx 原型對象的一個引用捏鱼，其中包含了多項屬性）；比如如下代碼
$("li").animate({
left:"50",
height:"50%",
opacity:0.5
},{step:function(now,fx){
var data = fx.elem.id + "" + fx.prop + "：" + now;
$("body").append("<div>" + data + "</div>");
}
});
- 其它更多查閱.animate
七 酪耕、如何設置和獲取元素內(nèi)部 HTML內(nèi)容导梆？如何設置和獲取元素內(nèi)部文本？
-
.html()~設置和獲取元素內(nèi)部的HTML內(nèi)容，用法如下：
//獲取元素內(nèi)部的HTML內(nèi)容看尼，包括HTML標記
$("#ct").html();
//設置元素內(nèi)部的HTML內(nèi)容
$("#demo").html("<div>jirengu<strong>hunger</strong></div>")
-
.text()~設置和獲取元素內(nèi)部的文本內(nèi)容递鹉，用法如下：
//獲取元素內(nèi)部的文本內(nèi)容
$("#ct").text();
//設置元素內(nèi)部的文本內(nèi)容
$("#demo").html("here is jirengu")
八、如何設置和獲取表單用戶輸入或者選擇的內(nèi)容藏斩？如何設置和獲取元素屬性躏结？
-
.val()~設置和獲取表單用戶輸入或選擇的內(nèi)容，用法如下：
//獲取
$( "input:checkbox:checked" ).val();
//設置
$( "#username" ).val("hunger");
-
.attr()~獲取匹配的元素集合中的第一個元素的屬性的值狰域，用法如下：
//獲取
$( "ims" ).val("src");
//設置媳拴，當設置多個屬性,包裹屬性名的引號是可選的
$( "img" ).attr({
alt:"hunger",
title:"frank"
});
代碼部分
一、使用 jquery實現(xiàn)如下效果
二北专、使用 jquery 實現(xiàn)如下效果禀挫，提問：點奢侈品2的時候頁面跳到了頂部，可能是什么原因拓颓？如何解決
//將href屬性里的值設置為javascript:如下代碼
<a href="javascript:">奢侈品2</a>
//使用preventDefault()取消其默認行為
$("a").on("click",function(){
event.preventDefault();
});
