前端——jquery
阿新 • • 發佈：2018-01-02
鼠標 repl mode 網站 復制代碼 event float mda 名稱 
一、jQuery是什麽？
1.jQuery由美國人John Resig創建，至今已吸引了來自世界各地的眾多JavaScript高手加入其team
2.jQuery是繼prototype之後有一個優秀的JavaScript框架。其宗旨是——WRITE LESS.DO MORE!
3.它是輕量級的js庫（壓縮後只有21k），這是其他的js庫所不及的，它兼容CSS3，還兼容各種瀏覽器
4.jQuery是一個快速的，簡潔的JavaScript庫，使用戶能更方便地處理HTMLdocuments、event、實現動畫效果，並且方便地為網站提供AJAX交互。
5.jQuery還有一個比較大的優勢是，它的文檔說明很全，而且各種應用說得很詳細，同時還有許多成熟的插件可供選擇。
二、什麽是jQuery對象？
jQuery對象就是通過包裝DOM對象後產生的對象。jQuery對象是jQuery獨有的。如果一個對象是jQuery對象。那麽它就可以使用jQuery裏的方法：
$("#p1") -------> jQuery對象 var ele=document.getElementById("p1") ele------>DOM對象 jQuery與DOM對象下的方法和屬性不能混用 jquery對象： jQuery.方法====$.方法 基礎語法：$（selector）.action（） selector：查找想操作的標簽
三、尋找元素（選擇器和篩選器）
3.1：選擇器
1 基本選擇器 $("*") $("#id") $(".class") $("element") $(".class,p,div") 2 層級選擇器 $(".outer div")：後代選擇器 $(".outer>div")：子代選擇器 $(".outer+div")：毗鄰選擇器 $(".outer~div")：普通兄弟選擇器 3 基本篩選器 $("li:last")：最後一個 $("li:first")：第一個 $("li:eq(2)")：索引為2 $("li:odd")：奇數 $("li:even")：偶數 $("li:gt(1)")：大於 $("li:lt(5)")：小於 4 屬性選擇器 $(‘[id="div1"]‘)：id為div1的標簽 $(‘["alex="sb"][id]‘)：alex屬性為sb並且有id屬性 5 表單選擇器 $("[type=‘text‘]") 簡寫：$(":text") 註意只適用於input標簽 :$("input:checked")
3.2：篩選器
3.2.1：過濾篩選器
$("li").eq(2)：推薦寫法
$("li").first()：第一個
$("li").last()：最後一個
$("ul li").hasclass("test")：有class的值是test
3.2.2：查找篩選器
1.查找子標簽：
$("div").children(".test")：所有子代中的.test標簽
$("div").find(".test")：所有後代中的.test標簽
2.向下查找兄弟標簽：
$(".test").next():下一個兄弟標簽
$(".test").nextAll()：找到下面所有的兄弟標簽
$(".test").nextUntil(條件)：直到條件成立停止，同樣顧頭不顧尾，最後一個取不到
3.向上查找兄弟標簽：
$("div").prev()：上一個兄弟標簽
$("div").prevAll()：找到上面所有的兄弟標簽
$("div").prevUntil(條件)：直到條件成立停止，顧頭不顧尾
4.查找所有兄弟標簽：
$("div").siblings()
5.查找父標簽：
$(".test").parent()：找父標簽
$(".test").parents()：找多個父標簽，父標簽的父標簽也是父標簽，一直找到body層
$(".test").parentUntil(條件)：找所有的父標簽直到條件成立停止，顧頭不顧尾
註意：jQuery支持鏈式操作，比如：
$("#d1").next().css("color","red").next().css("color","green");
四、操作元素（屬性，css，文檔處理）
4.1：事件
4.1.1：頁面載入
當DOM載入就緒可以查詢及操縱時綁定一個要執行的函數。這是事件模塊中最重要的一個函數，因為它可以極大地提高web應用程序的響應速度。
寫法：
$(document).read(function(){
// 在這裏寫你的JS代碼...
})
簡寫：
$(function(){
// 你在這裏寫你的代碼
})
4.1.2：事件綁定
//語法: 標簽對象.事件(函數)
eg: $("p").click(function(){})
4.1.3：事件委派（父標簽把方法委派給子標簽）
on方法：事件綁定不再給指定的標簽綁定，而是綁定給父標簽
語法：$("父級標簽").on(eve,[selector],[data],fn)
// 在選擇元素上綁定一個或多個事件的事件處理函數。
off：解除事件（綁定誰解除誰）
events:一個或多個用空格分隔的事件類型和可選的命名空間，如"click"或"keydown.myPlugin" 。
selector:一個選擇器字符串用於過濾器的觸發事件的選擇器元素的後代。如果選擇器為null或省略，當它到達選定的元素，事件總是觸發。
data:當一個事件被觸發時要傳遞event.data給事件處理函數。
fn:該事件被觸發時執行的函數。 false 值也可以做一個函數的簡寫，返回false。
4.2：屬性操作
--------------------------CSS類
$("").addClass(class名)：添加類
$("").removeClass([class名])：刪除類
--------------------------屬性
$("").attr();：
$("").attr("屬性")：取值
$("").attr(“屬性”，“值”)：賦值
$("").removeAttr();：刪除屬性
$("").prop()：用於checked、selected屬性
$("").prop("屬性")：取值
$("").prop(“屬性”，“值”)：賦值
$("").removeProp();
--------------------------HTML代碼/文本/值
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])
---------------------------
$("#c1").css({"color":"red","fontSize":"35px"})
4.3：each循環
jQuery支持兩種循環方式，方式一（類下的方法）：
格式：$each（obj，callback）
li=[10,20,30,40];
$.each(li,function(i,x){
console.log(i,x)
});
在這裏i是索引，x是值
方式二（實例下的方法）：
格式：$("").each(fn)
$("tr").each(function(){
console.log($(this).html())
})
在這裏,$(this)代指當前循環標簽。
擴展
li=[11,22,33,44];
$.each(li,function(i,v){
if (v==33){
return ;
}
console.log(v)
});
//each的參數function內如果出現return 結束檔次循環，類似於continue；
如果出現return false，結束的是整個each循環，類似break。
//結果是11,22,44；因為這裏每次循環都執行一個函數，當v==33的時候只是結束了一次函數
4.4：文檔節點處理
//創建一個標簽對象，用變量名拿對象時要加$，表示這是一個jquery對象 $("<p>") //內部插入 $("").append(content|fn)：追加到最後一個位置 ----->$("p").append("<b>Hello</b>"); $("").appendTo(content)：子標簽添加到父標簽裏面的最後 ----->$("p").appendTo("div"); $("").prepend(content|fn)：添加到第一個位置 ----->$("p").prepend("<b>Hello</b>"); $("").prependTo(content)：子標簽添加到父標簽裏面的首尾 ----->$("p").prependTo("#foo"); //外部插入 $("").after(content|fn)：添加兄弟標簽到後面 ----->$("p").after("<b>Hello</b>"); $("").before(content|fn)：添加兄弟標簽到前面 ----->$("p").before("<b>Hello</b>"); $("").insertAfter(content)：標簽添加到某個兄弟標簽的後面 ----->$("p").insertAfter("#foo"); $("").insertBefore(content)：標簽添加到某個兄弟標簽的前面 ----->$("p").insertBefore("#foo"); //替換 $("").replaceWith(content|fn)：直接oldnode替換成newnode ----->$("p").replaceWith("<b>Paragraph. </b>"); //刪除 $("").empty()：清空節點內容 $("").remove([expr])：刪除節點（刪誰誰調用） //復制 $("").clone([Even[,deepEven]])
4.5：動畫效果
1.基本
.show([speed, [easing], [fn]])：顯示 //顯示隱藏的匹配元素。 .hide([speed, [easing], [fn]])：隱藏 //隱藏顯示的匹配元素。 .toggle([speed], [easing], [fn]) //如果元素是可見的，切換為隱藏的；如果元素是隱藏的，切換為可見的。 參數介紹： speed:三種預定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數值(如：1000)。 easing:(Optional) 用來指定切換效果，默認是”swing”，可用參數”linear”。 fn:在動畫完成時執行的函數，每個元素執行一次。
2.滑動
.slideDown([speed, [easing], [fn]])：顯示 //通過高度變化（向下增大）來動態地顯示所有匹配的元素。 .slideUp([speed, [easing], [fn]])：隱藏 //通過高度變化（向下減小）來動態地隱藏所有匹配的元素。 .slideToggle([speed, [easing], [fn]]) //通過高度變化來切換所有匹配元素的可見性。 參數同上
3.淡入淡出
.fadeIn([speed, [easing], [fn]])：顯示 //通過不透明度的變化來實現所有匹配元素的淡入效果。 .fadeOut([speed, [easing], [fn]])：隱藏 //通過不透明度的變化來實現所有匹配元素的淡出效果。 .fadeTo([speed, [easing], [fn]]) //把所有匹配元素的不透明度以漸進方式調整到指定的不透明度。 .fadeToggle([speed, [easing], [fn]]) //通過不透明度的變化來切換所有匹配元素的淡入和淡出效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>圖片輪播</title>
<style>
*{
margin: 0;
padding: 0;
}
.image_carousel{
position: relative;
left: 0;
top:0;
/*border: 1px solid;*/
width: 790px;
height: 340px;
margin: 138px auto;
overflow: hidden;
}
.image_list li{
list-style: none;
position: absolute;
left: 0;
top:0;
}
.cut_button{
position: absolute;
/*z-index: 1;*/
left: 37%;
bottom: 22px;
width: 194px;
height: 12px;
background-color: hsla(0,0%,100%,.3);
padding: 5px 10px;
border-radius: 12px;
line-height: 12px;
text-align: center;
}
.cut_button_list li{
display:inline-block;
width: 12px;
height: 12px;
background-color: #fff;
list-style: none;
margin-left: 4px;
margin-right: 4px;
border-radius: 100%;
}
.cut_button_list li:hover{
background-color: #db192a;
}
.btn a{
font-size: 25px;
color: white;
position: absolute;
bottom: 141px;
width: 30px;
height: 60px;
background-color: RGBA(0,0,0,0.3);
line-height: 60px;
text-align: center;
text-decoration: none;
}
.last a{
left: 0;
}
.next a{
right: 0;
}
a:hover{
background-color: RGBA(0,0,0,0.7);
}
</style>
</head>
<body>
<div class="image_carousel">
<div class="image">
<ul class="image_list">
<li class="img"><a href=""><img id="img1" src="//img12.360buyimg.com/da/jfs/t6946/30/363119663/215517/327addf9/597594f1N6d4f6f9a.jpg" ></a></li>
<li class="img"><a href=""><img id="img2" src="//img1.360buyimg.com/da/jfs/t6838/58/1188598350/101456/93ca512d/597e7d28N65750c3d.jpg" ></a></li>
<li class="img"><a href=""><img id="img3" src="//img12.360buyimg.com/da/jfs/t5614/73/8258277091/129172/cd6b7ea5/59793d03N8173f093.jpg" ></a></li>
<li class="img"><a href=""><img id="img4" src="//img11.360buyimg.com/da/jfs/t5728/157/8872231321/301637/86d6fc6a/597fdcf3N78181b6c.jpg" ></a></li>
<li class="img"><a href=""><img id="img5" src="//img12.360buyimg.com/da/jfs/t5839/154/8380421091/51117/6f3d50fb/5979ad9dN277885bf.jpg" ></a></li>
<li class="img"><a href=""><img id="img6" src="//img11.360buyimg.com/da/jfs/t7027/263/1474527209/100106/e209db17/598165beNf30e7083.jpg" ></a></li>
<li class="img"><a href=""><img id="img7" src="//img10.360buyimg.com/da/jfs/t6040/352/7744875341/73277/88588ea2/59814f5fN4746e6f0.jpg" ></a></li>
<li class="img"><a href=""><img id="img8" src="//img11.360buyimg.com/babel/jfs/t6886/165/1330183705/71170/e069d1e5/59802506N0c042758.jpg" ></a></li>
</ul>
</div>
<div class="cut_button">
<ul class="cut_button_list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="last btn"><a> < </a></div>
<div class="next btn"><a> > </a></div>
</div>
<script src="jquery-3.2.1.js"></script>
<script>
var x=0; //定義全局變量用來標識兩輪播圖位置
//輪播圖切換函數
function cut_img() {
$(".cut_button_list li").eq(x).css("background-color","#db192a").siblings().css("background-color","#fff");
$(".image_list li").eq(x).fadeIn(1000).siblings().fadeOut(1000);
}
//自動切換圖片函數
function auto_cut_img() {
if (x!==$(".img").length-1){
x++;
}
else {
x=0;
}
cut_img()
}
var ID;
cut_img();
ID=setInterval(auto_cut_img,2000); //啟動定時器
$(".cut_button_list li").mouseover(function () {
x=$(this).index();
cut_img()
});
$(".image_carousel").hover(function () {
clearInterval(ID);
},function () {
ID=setInterval(auto_cut_img,2000);
});
//上一張圖按鈕
$(".last").click(function () {
if (x!==0){
x--;
}
else {
x=$(".img").length-1;
}
cut_img()
});
//下一張圖按鈕
$(".next").click(function () {
auto_cut_img()
})
</script>
</body>
</html>
4.自定義
.animate(params, [speed], [easing], [fn]) //用於創建自定義動畫的函數。 參數介紹： params:一組包含作為動畫屬性和終值的樣式屬性和及其值的集合。 speed:三種預定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數值(如：1000)。 easing:要使用的擦除效果的名稱(需要插件支持).默認jQuery提供”linear” 和 “swing”。 fn:在動畫完成時執行的函數，每個元素執行一次。
4.6：CSS操作
1.CSS位置操作
$("").offset([coordinates])：偏移，有兩個屬性，分別是top和left，位置是以左上角的位置來判斷的（針對整個窗口去拿位置）
賦值方式：$("").offset({left:200,top:200})
$("").position()：定位，也有一個top值和left值（針對父級已定位標簽去拿位置）
$("").scroll：滾動條滾動時觸發的事件
$("").scrollTop([val])：調上下的滾動條
返回頂部，要給整個窗口加，$(window).scrolltop（0），可以取值可以賦值
$("").scrollLeft([val])：調左右的滾動條
$("").css("cursor","move")：cursor改變鼠標樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<script src="../day45jQuery/jquery-3.2.1.js"></script>
<style>
*{
margin: 0;
}
.s1{
width: 200px;
height: 200px;
background-color: #396bb3;
}
</style>
</head>
<body>
<div class="s1"></div>
<script>
var mouse_x=0;
var mouse_y=0;
$(".s1").mouseover(function () {
$(this).css("cursor","move")
});
$(".s1").mousedown(function (e) {
mouse_x=e.clientX;
mouse_y=e.clientY;
var $box_top=$(".s1").offset().top;
var $box_left=$(".s1").offset().left;
$(document).mousemove(function (e) {
var new_mouse_x=e.clientX;
var new_mouse_y=e.clientY;
$(".s1").offset({"left":$box_left+new_mouse_x-mouse_x,"top":$box_top+new_mouse_y-mouse_y})
})
});
$(document).mouseup(function () {
$(this).off("mousemove")
})
</script>
</body>
</html>
狀態事件對象：event
event對象是保存事件觸發狀態的對象，由操作系統發送
ele.onkeydown=function (e) {
e=e||window.event;
console.log(String.fromCharCode(e.keyCode));
e.keyCode拿到的是鍵盤按下鍵的asc碼，然後用String.fromCharCode方法拿到用戶按下的鍵
e.clientX：拿到鼠標的X軸坐標
e.clientY：拿到鼠標的Y軸坐標
2.尺寸操作
$("").height([val|fn])：拿的是文本框的高
$("").width([val|fn])：拿的是文本框的寬
$("").innerHeight()：加上padding的高
$("").innerWidth()：加上padding的寬
$("").outerHeight([soptions])：再加上border的高，如果裏面的參數加上ture，會連Maggin都算上
$("").outerWidth([options])：加上border的寬，同上
練習
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<script src="jquery-3.2.1.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.navbar{
float: left;
width: 100%;
height: 50px;
background-color: #272425;
}
.left_menu{
float: left;
width: 20%;
margin-left: -1px;
height: 500px;
border-right: 1px solid;
}
.right_content{
position: relative;
top: 0;
left: 0;
float: left;
width: 77%;
height: 500px;
padding-left: 40px;
margin-right: -1px;
}
.operation{
margin-top: 20px;
color: white;
width: 100%;
height: 30px;
text-align: center;
line-height: 30px;
background-color: #396bb3;
}
.operation_list{
list-style: none;
}
.operation_list li{
margin: 10px;
font-size: 14px;
}
.operation_list li a{
color: #396bb3;
text-decoration: none;
}
.book_info{
width: 100%;
font-size: 14px;
}
td{
width: 50px;
height: 40px;
border-top: 1px solid #e1e1e1;
}
.search_box{
width: 100%;
height: 100px;
}
#search_bar{
padding: 10px;
position: absolute;
right: 144px;
top: 36px;
width: 200px;
border-radius: 7px;
border: 1px solid #e1e1e1;
}
.search_btn{
color: white;
border-radius: 5px;
padding: 9px;
background-color: #396bb3;
position: absolute;
right: 93px;
top: 34px;
}
.hide{
display: none;
}
.shade{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: black;
opacity: 0.4;
}
.model,.model2{
width: 500px;
height: 400px;
background-color:white;
position: fixed;
top: 50%;
left:50%;
margin-top: -200px;
margin-left: -250px;
}
.btn{
width: 50px;
height: 30px;
border-radius: 5px;
color: white;
}
.del_btn{
background-color: #ff1732;
}
.btn2{
background-color: #396bb3;
}
.btn3{
background-color: #4cff82;
}
.edit_btn{
background-color: #ffdd3f;
}
.cancel_btn{
background-color: #ff1732;
}
.input_field{
height: 30px;
border-radius: 5px;
margin: 10px;
}
.model{
padding-left: 150px;
}
#put_info{
margin-left: 100px;
}
#cancle{
margin-left: 50px;
}
.head{
width: 80%;
height: 100%;
margin: 0 auto;
}
.title{
float: left;
color: white;
font-size: 28px;
line-height: 100%;
margin-top: 8px;
}
.index_link{
float: left;
color: #e1e1e1;
font-size: 15px;
margin-top: 15px;
margin-left: 80px;
text-decoration: none;
}
.copyright{
line-height: 30px;
text-align: center;
font-size: 14px;
}
</style>
</head>
<body>
<div class="outer">
<div class="navbar">
<div class="head">
<div class="title">圖書管理系統</div>
<div ><a href="" class="index_link">首頁</a></div>
</div>
</div>
<div class="left_menu">
<div class="operation">操作</div>
<ul class="operation_list">
<!--<li><a href="" >>>>添加書籍</a></li>-->
<li><a href="" >>>>草稿箱</a></li>
<li><a href="" >>>>設置默認編輯器</a></li>
<li><a href="" >>>>備份書籍</a></li>
</ul>
</div>
<div class="right_content">
<div class="search_box">
<form action="">
<input type="text" placeholder="Title" id="search_bar">
</form>
<button class="search_btn">查找</button>
</div>
<button class="btn2 btn" id="add_info">添加</button>
<table class="book_info">
<tr>
<td>圖書編號</td>
<td>書名</td>
<td>作者</td>
<td>價格</td>
<td>分類</td>
<td>上架時間</td>
<td>操作</td>
</tr>
<tr>
<td>1</td>
<td>囚徒健身</td>
<td>保羅·威德(美)</td>
<td>79￥</td>
<td>健身</td>
<td>2013年10月</td>
<td>
<button class="edit_btn btn">編輯</button>
<button class="del_btn btn">刪除</button>
</td>
</tr>
<tr>
<td>2</td>
<td>萬歷十五年</td>
<td>黃仁宇</td>
<td>18￥</td>
<td>歷史</td>
<td>1990年1月1日</td>
<td>
<button class="edit_btn btn">編輯</button>
<button class="del_btn btn">刪除</button>
</td>
</tr>
</table>
</div>
<div class="shade hide"></div>
<div class="model hide">
<div>圖書編號：<input type="text" class="input_field" value=""></div>
<div> 書名：<input type="text" class="input_field" value=""></div>
<div> 作者：<input type="text" class="input_field" value=""></div>
<div> 價格：<input type="text" class="input_field" value=""></div>
<div> 分類：<input type="text" class="input_field" value=""></div>
<div>上架時間：<input type="text" class="input_field" value=""></div>
<button class="btn3 btn" id="put_info">提交</button>
<button class="cancel_btn btn" id="cancle">取消</button>
</div>
<div class="copyright">
<p>©All rights reserved</p>
<p><b>Powered by</b> Amos</p>
</div>
</div>
<script>
var x; //用來判斷是添加還是編輯
//點擊添加信息，彈出空對話框
$("#add_info").click(function () {
$(".shade,.model").removeClass("hide");
$(":text").val("")
});
//點擊取消，收回對話框
$("#cancle").click(function () {
$(".shade,.model").addClass("hide");
});
//點擊提交信息，
$("#put_info").click(function () {
//添加頁面
if (x==undefined){
var $tr=$("<tr>");
$(".model :text").each(function () {
var $td=$("<td>");
$td.text($(this).val());
$tr.append($td);
});
var $td=$("<td>");
var $edit_btn=$("<button>");
var $del_btn=$("<button>");
$td.append($edit_btn.text("編輯").addClass("edit_btn").addClass("btn"));
$td.append($del_btn.text("刪除").addClass("del_btn").addClass("btn"));
$tr.append($td);
$(".book_info").append($tr);
$(".shade,.model").addClass("hide");
}
//編輯頁面
else {
//創建新的tr節點，添加td節點
var $tr=$("<tr>");
$(".model :text").each(function () {
var $td=$("<td>");
$td.text($(this).val());
$tr.append($td);
});
//拿新建的tr內容去替換舊的tr內容
$tr.children().each(function () {
var $index_val=$(this).index();//拿到索引
$(edit_obj[$index_val]).text($(this).text())
});
x=undefined;//把x恢復成原裝
$(".shade,.model").addClass("hide"); //關閉對話框
}
});
//點擊刪除按鈕
$(".book_info").on("click",".del_btn",function () {
$(this).parent().parent().remove()
});
//點擊編輯按鈕
$(".book_info").on("click",".edit_btn",function () {
x=1;
edit_obj=$(this).parent().siblings();//定義全局變量讓上面知道在操作哪行
$(this).parent().siblings().each(function () {
var $input_field=$(".model :text");
var index_val=$(this).index(); //拿到每個格子的索引值
//把每個框的value值換成表格裏的值
$($input_field[index_val]).val($(this).text());
});
$(".shade,.model").removeClass("hide"); //彈出對話框
})
</script>
</body>
</html>
前端——jquery