Jquery進階
阿新 • • 發佈：2017-10-16
lan jquery 消失 pan doctype 就會 使用 自定義 fun 
一 css屬性
二 文檔操作
三 動畫
四 事件處理
一 css屬性操作
1：css（）
4種情況：
（1）獲得單個屬性值
- .css("color") -> 獲取color css值
（2）設置屬性值
- .css("color", "#ff0000") -> 設置值
（3）獲得多個屬性值
- .css(["color", "border"]) -> 獲取多個值
（3）設置多個屬性值
- .css({"color": "#cccccc", "border": "1px solid #ff0000"}) -> 設置多個值
例子：
2 位置操作：
.offset
--獲取相對位置
--比較的對象是html也就是目前的窗口
.position
--獲取相對已經定位的父標簽的位置
--比較的是最近的那個做過定位的祖先標簽
3 返回頂部 scrollTop([val]) 和 scrollLeft([val])
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="滾動條實例stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"> <script src="jquery-3.2.1.js"></script> <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> <style> .btn{ position: fixed; right:50px; bottom:15px; } .hide{ display: none; }</style> </head> <body> <div class="c1" GDP="100">綠油油1</div> <div class="c1" GDP="100">綠油油2</div> <div class="c1" GDP="100">綠油油3</div> <div class="c1" GDP="100">綠油油4</div> <div class="c1" GDP="100">綠油油5</div> <div class="c1" GDP="100">綠油油6</div> <div class="c1" GDP="100">綠油油7</div> <div class="c1" GDP="100">綠油油8</div> <div class="c1" GDP="100">綠油油9</div> <div class="c1" GDP="100">綠油油10</div> <div class="c1" GDP="100">綠油油11</div> <div class="c1" GDP="100">綠油油12</div> <div class="c1" GDP="100">綠油油13</div> <div class="c1" GDP="100">綠油油14</div> <div class="c1" GDP="100">綠油油15</div> <div class="c1" GDP="100">綠油油16</div> <div class="c1" GDP="100">綠油油17</div> <div class="c1" GDP="100">綠油油18</div> <div class="c1" GDP="100">綠油油19</div> <div class="c1" GDP="100">綠油油20</div> <div class="c1" GDP="100">綠油油21</div> <div class="c1" GDP="100">綠油油22</div> <div class="c1" GDP="100">綠油油23</div> <div class="c1" GDP="100">綠油油24</div> <div class="c1" GDP="100">綠油油25</div> <div class="c1" GDP="100">綠油油26</div> <div class="c1" GDP="100">綠油油27</div> <div class="c1" GDP="100">綠油油28</div> <div class="c1" GDP="100">綠油油29</div> <div class="c1" GDP="100">綠油油30</div> <div class="c1" GDP="100">綠油油31</div> <div class="c1" GDP="100">綠油油32</div> <div class="c1" GDP="100">綠油油33</div> <div class="c1" GDP="100">綠油油34</div> <div class="c1" GDP="100">綠油油35</div> <div class="c1" GDP="100">綠油油36</div> <div class="c1" GDP="100">綠油油37</div> <div class="c1" GDP="100">綠油油38</div> <div class="c1" GDP="100">綠油油39</div> <div class="c1" GDP="100">綠油油40</div> <div class="c1" GDP="100">綠油油41</div> <div class="c1" GDP="100">綠油油42</div> <div class="c1" GDP="100">綠油油43</div> <div class="c1" GDP="100">綠油油44</div> <div class="c1" GDP="100">綠油油45</div> <div class="c1" GDP="100">綠油油46</div> <div class="c1" GDP="100">綠油油47</div> <div class="c1" GDP="100">綠油油48</div> <div class="c1" GDP="100">綠油油49</div> <div class="c1" GDP="100">綠油油50</div> <div class="c1" GDP="100">綠油油51</div> <div class="c1" GDP="100">綠油油52</div> <div class="c1" GDP="100">綠油油53</div> <div class="c1" GDP="100">綠油油54</div> <div class="c1" GDP="100">綠油油55</div> <div class="c1" GDP="100">綠油油56</div> <div class="c1" GDP="100">綠油油57</div> <div class="c1" GDP="100">綠油油58</div> <div class="c1" GDP="100">綠油油59</div> <div class="c1" GDP="100">綠油油60</div> <div class="c1" GDP="100">綠油油61</div> <div class="c1" GDP="100">綠油油62</div> <div class="c1" GDP="100">綠油油63</div> <div class="c1" GDP="100">綠油油64</div> <div class="c1" GDP="100">綠油油65</div> <div class="c1" GDP="100">綠油油66</div> <div class="c1" GDP="100">綠油油67</div> <div class="c1" GDP="100">綠油油68</div> <div class="c1" GDP="100">綠油油69</div> <div class="c1" GDP="100">綠油油70</div> <div class="c1" GDP="100">綠油油71</div> <div class="c1" GDP="100">綠油油72</div> <div class="c1" GDP="100">綠油油73</div> <div class="c1" GDP="100">綠油油74</div> <div class="c1" GDP="100">綠油油75</div> <div class="c1" GDP="100">綠油油76</div> <div class="c1" GDP="100">綠油油77</div> <div class="c1" GDP="100">綠油油78</div> <div class="c1" GDP="100">綠油油79</div> <div class="c1" GDP="100">綠油油80</div> <div class="c1" GDP="100">綠油油81</div> <div class="c1" GDP="100">綠油油82</div> <div class="c1" GDP="100">綠油油83</div> <div class="c1" GDP="100">綠油油84</div> <div class="c1" GDP="100">綠油油85</div> <div class="c1" GDP="100">綠油油86</div> <div class="c1" GDP="100">綠油油87</div> <div class="c1" GDP="100">綠油油88</div> <div class="c1" GDP="100">綠油油89</div> <div class="c1" GDP="100">綠油油90</div> <div class="c1" GDP="100">綠油油91</div> <div class="c1" GDP="100">綠油油92</div> <div class="c1" GDP="100">綠油油93</div> <div class="c1" GDP="100">綠油油94</div> <div class="c1" GDP="100">綠油油95</div> <div class="c1" GDP="100">綠油油96</div> <div class="c1" GDP="100">綠油油97</div> <div class="c1" GDP="100">綠油油98</div> <div class="c1" GDP="100">綠油油99</div> <div class="c1" GDP="100">綠油油100</div> <button type="button" class="btn hide" id="b1">點擊就送，屠龍寶刀</button> <script> //如果小於100就隱藏反之就顯示 $(window).scroll(function () { if ($(window).scrollTop()>100){ $("#b1").removeClass("hide") } else( $("#b1").addClass("hide")) }) //點擊就會到頭頂 $("#b1").on("click",function () { $(window).scrollTop(500);//滾動條離頭部的高度 // $(window).scrollLeft(15); }) </script> </body> </html>
4 元素的尺寸設置包括（）：
（1）元素的高度.height()
（2）元素的寬度.width()
（3）元素包括padding的高度.innerHeight()
（4）元素包括padding的寬度.innerHeight()
（5）元素在innerHeight的高度上加上border的高度.outerHeight()
（6）元素在innerHeight的寬度上加上border的寬度.outerWidth(
二 文檔操作
（1）內部插入
append(content|fn) 往後加
appendTo(content)
A.append(B) -> 把B添加到A的後面
A.appendTo(B) -> 把A添加到B的後面
prepend(content|fn) --> 往前加
prependTo(content)
A.prepend(B) -> 把B添加到A的前面
A.prependTo(B) -> 把A添加到B的前面
（2）外部插入
after(content|fn) 往後加
insertAfter(content)
A.after(B) --> 把B添加到A的後面
A.insertAfter(B) --> 把A添加到B的後面
before(content|fn) --> 往前加
insertBefore(content)
A.before(B) --> 把B添加到A的前面
A.insertBefore(B) --> 把A添加到B的前面
（3）包裹
wrap(html|else|fn)
A.wrap(B) B包A
unwrap（）
----不要加參數
wrapAll(html|ele)
wrapInner(html|ele|fn)//相當於li裏的數據添加包裹
（4）替換
replaceWith（content|fn）
A.replaceWih(B) B替換A
replaceAll（selector）
A.replaceAll(B) A替換B
（5）刪除
empty()
---清空，內部清空
remove（[expr]）
----刪除 整體都刪除
detach（[ expr]）
-----剪切 多保存在變量中，方便再次使用
（6）克隆
clone([Even[,deepEven]])
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="c1"> 一刀999，免費送</button>
<script src="jquery-3.2.1.js"></script>
<script>
$("#c1").on("click",function () {
$(this).clone(true).insertAfter($(this))
})
</script>
</body>
</html>
克隆代碼
三 動畫
基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
滑動
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
- 淡出到0.66透明度
fadeToggle([s,[e],[fn]])
- .fadeToggle(3000, function () {
alert("真沒用3");
});
自定義
animate(p,[s],[e],[fn])1.8*
- css屬性值都可以設置
- 女朋友變小（漏氣）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>動畫示例</title>
<style>
/*.hide {*/
/*display: none;*/
/*}*/
</style>
</head>
<body>
<img src="http://www.iyi8.com/uploadfile/2017/0523/20170523114637271.jpg" >
<button id="b1">召喚</button>
<button id="b2">淡出</button>
<button id="b3">淡入</button>
<button id="b5">淡入淡出</button>
<button id="b4">淡出到0.66</button>
<button id="b6">邊框變大</button>
<script src="jquery-3.2.1.js"></script>
<script>
//顯示與否
$("#b1").on("click", function () {
// $("img").show();
// $("img").hide();//隱藏
//用toggle就可以替代show和hide
$("img").toggle();
})
// 淡出圖片消失
$("#b2").on("click", function () {
// $("img").fadeOut("slow");
// $("img").fadeOut("fast");
$("img").fadeOut("30000");
})
// 淡入增加了時間方法和回調函數
$("#b3").on("click", function () {
// 掌握了增加時間的方法
$("img").fadeIn("slow", function () {
alert("真漂亮");
});
// $("img").fadeIn("fast", function () {
// alert("真漂亮");
// });
})
// 淡入淡出
$("#b5").on("click", function () {
$("img").fadeToggle(3000, function () {
alert("真沒用3");
});
})
// 淡出到0.66透明度 有三個參數 fadeTo([[speed],opacity,[easing],[fn]])
$("#b4").on("click", function () {
// 掌握了新知識
$("img").fadeTo(3000, 0.66, function () {
alert("真沒用2");
});
})
// 動畫-圖片變小自定義動畫效果 返回值:jQueryanimate(params,[speed],[easing],[fn]) 目前三個參數第一個是設置css樣式第二個是速度的第三個是回調函數
$("#b6").on("click", function () {
$("img").animate({
width: "100px",
height: "60px",
}, 3000, function () {
// 這是回調函數
alert(123);
});
})
</script>
</body>
</html>
動畫操作
四 事件處理
之前綁定事件的方式：（JS） 1. onclick=clickMe(); function clickMe() {} 2. ele.onclick = function(){} 3. ele.addEventListener("click", function(){}) jQuery綁定事件的方式： 1. $(ele).on("click", function(){}) 2. $("tbody").delegate(".btn-warning", "click", function(){}) 3. $("tbody").on("click",".btn-warning",function(){}) 我們要用的事件委派(現在主要用這個)
Jquery進階