web前端【第十二篇】jQuery文檔相關操作
阿新 • • 發佈：2018-02-20
scroll 知識點 eight 查看 for otto fix jquer utf-8
一、相關知識點總結
1、CSS
.css()
- .css("color") -> 獲取color css值
- .css("color", "#ff0000") -> 設置值
- .css({"color": "#cccccc", "border": "1px solid #ff0000"}) -> 設置多個值
- .css(["color", "border"]) -> 獲取多個值
.offset
- 獲取相對位置
- 比較的對象是html (窗口)
.position
- 獲取相對已經定位的父標簽的位置
- 比較的是最近的那個做過定位的祖先標簽
.scrollTop([val])
- 返回頂部的例子
.scrollLeft([val])
尺寸：
height([val|fn])
- 元素的高度
width([val|fn])
- 元素的寬度
innerHeight()
- 帶padding的高度
innerWidth()
- 帶padding的寬度
outerHeight([soptions])
- 在innerHeight的基礎上再加border的高度
outerWidth([options])
- 在innerHeight的基礎上再加border的高度
2、文檔操作
內部插入
A.append(B) 吧B添加到A的後面
A.appendTo(B) 吧A添加到B的後面
A.prepend(B) 吧B添加到A的前面
A.prependTo(B) 吧A添加到B的前面
外部插入
A.after(B) 吧B添加到A的後面
A.insertAfter(B) 吧A添加到B的後面
A.before(B) 吧B添加到A的前面
A.insertBefore(B) 吧A添加到B的前面
包裹
wrap(html|ele|fn)
A.wrap(B) --> B包A
unwrap() 不抱
- 不要加參數
wrapAll(html|ele) 都包(作為整體包)，只包你選中的那個
wrapInner(html|ele|fn) 裏面包
替換
replaceWith(content|fn)
A.replaceWith(B) --> B替換A
replaceAll(selector)
A.replaceAll(B) --> A替換B
刪除
empty()
- 清空 內部清空
remove([expr])
- 刪除 整體都刪除
detach([expr])
- 剪切 多保存在變量中，方便再次使用
克隆/復制
clone([Even[,deepEven]])
3、動畫
基本
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屬性值都可以設置
- 圖片變小（漏氣）
4. 事件處理
之前綁定事件的方式：
1. onclick=clickMe(); function clickMe() {}
2. ele.onclick = function(){}
3. ele.addEventListener("click", function(){}) js事件委派
jQuery綁定事件的方式：
1. $(ele).on("click", function(){})
2. $("tbody").delegate(".btn-warning", "click", function(){}) 這個3.幾的版本沒有這個方法了，這是3.幾以前版本有的方法
3. $("tbody").on("click",".btn-warning",function(){}) jQuery的事件委派
二、圖片詳述
（1）offset 和 postion
（2）innerwrap 和 wrap 和 warpAll
（3）克隆
（4）empty 和 remove
（5）牛逼的操作
（6）取消Bootstrap默認提示
三、具體代碼實現
1、返回首頁
返回首頁示例<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>返回首頁</title>
</head>
<style>
.c1{
height: 100px;
}
button{
position: fixed;
right: 15px;
bottom: 15px;
background-color: #336699;
}
.hide{
display: none;
}
</style>
<body>
<div class="c1">1</div>
<div class="c1">2</div>
<div class="c1">3</div>
<div class="c1">4</div>
<div class="c1">5</div>
<div class="c1">6</div>
<div class="c1">7</div>
<div class="c1">8</div>
<div class="c1">9</div>
<div class="c1">10</div>
<div class="c1">11</div>
<div class="c1">12</div>
<div class="c1">13</div>
<div class="c1">14</div>
<div class="c1">15</div>
<div class="c1">16</div>
<div class="c1">17</div>
<div class="c1">18</div>
<div class="c1">19</div>
<div class="c1">20</div>
<div class="c1">21</div>
<div class="c1">22</div>
<div class="c1">23</div>
<div class="c1">24</div>
<div class="c1">25</div>
<div class="c1">26</div>
<div class="c1">27</div>
<div class="c1">28</div>
<div class="c1">29</div>
<div class="c1">30</div>
<div class="c1">31</div>
<div class="c1">32</div>
<div class="c1">33</div>
<div class="c1">34</div>
<div class="c1">35</div>
<div class="c1">36</div>
<div class="c1">37</div>
<div class="c1">38</div>
<div class="c1">39</div>
<div class="c1">40</div>
<div class="c1">41</div>
<div class="c1">42</div>
<div class="c1">43</div>
<div class="c1">44</div>
<div class="c1">45</div>
<div class="c1">46</div>
<div class="c1">47</div>
<div class="c1">48</div>
<div class="c1">49</div>
<div class="c1">50</div>
<div class="c1">51</div>
<div class="c1">52</div>
<div class="c1">53</div>
<div class="c1">54</div>
<div class="c1">55</div>
<div class="c1">56</div>
<div class="c1">57</div>
<div class="c1">58</div>
<div class="c1">59</div>
<div class="c1">60</div>
<div class="c1">61</div>
<div class="c1">62</div>
<div class="c1">63</div>
<div class="c1">64</div>
<div class="c1">65</div>
<div class="c1">66</div>
<div class="c1">67</div>
<div class="c1">68</div>
<div class="c1">69</div>
<div class="c1">70</div>
<div class="c1">71</div>
<div class="c1">72</div>
<div class="c1">73</div>
<div class="c1">74</div>
<div class="c1">75</div>
<div class="c1">76</div>
<div class="c1">77</div>
<div class="c1">78</div>
<div class="c1">79</div>
<div class="c1">80</div>
<div class="c1">81</div>
<div class="c1">82</div>
<div class="c1">83</div>
<div class="c1">84</div>
<div class="c1">85</div>
<div class="c1">86</div>
<div class="c1">87</div>
<div class="c1">88</div>
<div class="c1">89</div>
<div class="c1">90</div>
<div class="c1">91</div>
<div class="c1">92</div>
<div class="c1">93</div>
<div class="c1">94</div>
<div class="c1">95</div>
<div class="c1">96</div>
<div class="c1">97</div>
<div class="c1">98</div>
<div class="c1">99</div>
<div class="c1">100</div>
<button class="hide">返回頂部</button>
<button class="cc hide">返回底部</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
$(":button").on("click",function () {
$(window).scrollTop(0);// 給一個滾動條位置
// $(window).scrollTop(500)
});
$(window).scroll(function () {
//滾動的時候做的操作
if ($(window).scrollTop()>100){
$(":button").removeClass("hide")
}
else{
$(":button").addClass("hide")
}
});
</script>
</body>
</html>
2、查看尺寸
尺寸測試<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>尺寸</title>
<style>
.c1{
height: 100px;
width: 80px;
background-color: red;
}
</style>
</head>
<body>
<div class="c1"></div>
<script src="jquery-3.2.1.min.js"></script>
<script>
// 沒設置前
console.log($(".c1").height);
console.log($(".c1").width);
console.log($(".c1").innerHeight()); //100
// 設置後 innerHeight()
$(".c1").css("padding","20px");
console.log($(".c1").innerHeight()); //140(自己的高度+padding(內邊距)
console.log($(".c1").innerWidth()); //120(自己的高度+padding(內邊距)
// 測試margin
$(".c1").css("margin","20px"); //和外邊距沒有關系，高度還是140
console.log($(".c1").innerHeight());
// outerHeight()
console.log($(".c1").outerHeight()); //140(自己的高度+padding(內邊距)
$(".c1").css("border","10px solid yellow")//120(自己的高度+padding(內邊距)
console.log($(".c1").outerHeight()); //160(自己的高度+padding(內邊距)+border的寬度
// 測試margin
$(".c1").css("margin","30px"); //和外邊距沒有關系，高度還是160
console.log($(".c1").outerHeight());
</script>
</body>
</html>
3、CSS示例
CSS相關操作<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css示例</title>
</head>
<style>
.c2{
width: 100px;
height: 100px;
background-color: red;
position: relative;
top: 50px;
left: 50px;
}
.c3{
width: 100px;
height: 100px;
background-color: greenyellow;
position: absolute;
left: 100px;
top: 100px;
}
</style>
<body>
<div class="c1">你好那？</div>
<div class="c4">哎呦歪</div>
<div class="c2">
<div class="c3"></div>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
// 1、 .css()
$(".c1").css("color","#336699");//找到標簽，設置單個樣式
console.log($(".c1").css("color"));//獲取color css值
$(".c4").css({"color":"red","border":"1px solid green","font-size":"20px"});//設置多個樣式
console.log($(".c4").css(["color","border","font-size"]))
// 2、offset
console.log($(".c2").offset());
console.log($(".c2").offset().left);
console.log($(".c2").offset().top);
console.log($(".c3").offset()); //{top: 107, left: 58}
console.log($(".c3").position());//{top: 100, left: 100}
</script>
</body>
</html>
4、文檔操作
文檔操作<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文檔操作</title>
</head>
<ul id="u1">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<p>蒼茫的大海是我的哎</p>
<ul id="u2">
<li>第一章</li>
<li>第二章</li>
<li>第三章</li>
<li>第四章</li>
</ul>
<body>
<script src="jquery-3.2.1.min.js"></script>
<script>
// 在內部插入
// append：往後添加
$("#u1").append("<li>456</li>");
var li =document.createElement("li");
$(li).text(666);
$(li).appendTo($("#u1"));
$("#u1>li:first").appendTo($("#u1")); //吧第一個添加到這個列表中。註意是挪動，不是復制
$("#u1>li:last").appendTo($("#u1"));
// prepend ：往前添加
$("#u2").prepend("<li>啦啦啦</li>"); //吧啦啦啦添加到列表的前面
var tem = document.createElement("li");
tem.innerText = "嘩啦啦。呼啦啦";
$(tem).prependTo($("#u2")) ;//吧啦啦啦添加到列表裏（先創建）
// 在外部插入
// after
$("#u2").after("<div>哈啊好好</div>"); //在列表的後面插入
var tem = document.createElement("div");
$(tem).text("哎哎呀");
$(tem).css("color","red");
$(tem).insertAfter($("#u2")); //插入到列表的後面
// before
$("#u2").before("<div>111</div>"); //在列表的前面插入
var tem = document.createElement("div");
$(tem).text("six");
$(tem).css("color","blue");
$(tem).insertBefore($("#u2")) //插入到列表的後面
// 包裹
// wrap和unwrap
var tem = document.createElement("div");
$(tem).css("border","1px solid #ff0000");
$("#u1").wrap($(tem)); //讓tem吧列表包起來
$("#u1").unwrap() ;//不包，不需要加參數
// wrapAll和wrap和wrapInner
var tem = document.createElement("div");
$(tem).css("border","1px solid yellow");
$("ul").wrapAll($(tem)); //都包
$("ul").wrap($(tem)); //單個包
$("ul").wrapInner($(tem));//裏面包
// 替換
// replaceWith和replaceAll
$("ul").replaceWith("<p>你愁啥？<p>") ;//吧所有的列表替換成你愁啥？
var ele = document.createElement("p");
$(ele).text("你愁啥？");
$(ele).replaceAll($("ul"));
// 刪除
$("ul:first").empty() ;//吧第一個ul清空
$("ul>li:first").empty() ;//只是清空內容
$("ul>li:last").remove();//都清空
var a = $("#u1>li:first").detach(); //刪除以後還保留著，可以再次使用
a.appendTo($("#u1"))
</script>
</body>
</html>
5、克隆（復制）
克隆（clone）<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>克隆</title>
</head>
<body>
<button class="c1">點我點我</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
$(".c1").on("click",function () {
$(this).clone(true).insertAfter($(this))
})
</script>
</body>
</html>
6、動畫效果
動畫效果<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>動畫</title>
<style>
.hide{
display: none;
}
</style>
</head>
<body>
<img src="z.png" >
<script src="jquery-3.2.1.min.js"></script>
<button class="c1">召喚</button>
<button class="c2">淡出</button>
<button class="c3">淡入</button>
<button class="c4">淡出到0.66透明度</button>
<button class="c5">淡入淡出</button>
<button class="c6">動畫:圖片變小</button>
<script>
$(".c1").on("click",function () {
// $("img").hide();
// $("img").show();
$("img").toggle();
});
// 淡出
$(".c2").on("click",function () {
$("img").fadeOut();
$("img").fadeOut("fast"); //快速的淡出
});
// 淡入
$(".c3").on("click",function () {
// 增加淡入的時間
$("img").fadeIn(3000,function () {
// alert(123)
});
});
// 淡出到0.66透明度
$(".c4").on("click",function () {
$("img").fadeTo(3000,0.66,function () {
// alert(123)
})
});
// 淡入淡出
$(".c5").on("click",function () {
$("img").fadeToggle(3000,function () {
// alert(123)
})
})
// 動畫-圖片變小
$(".c6").on("click",function () {
$("img").animate(
{
width:"80px",
height:"80px"
},3000,function () {
//這是一個回調函數
alert(123)
}
)
})
</script>
</body>
</html>
web前端【第十二篇】jQuery文檔相關操作