【2017-06-02】Jquery基礎
Jquery就是Js集成的一些方法包。
註意：Jquery的引入位置在<head></head>裏。
一、選擇器
1、Id選擇器
$("#div1")
2、Class選擇器
$(".div")
用class選擇器選出一堆對象給他們附事件，不用像Js一樣遍歷。直接附加事件，取到的所有對象都會附上事件。
註意：Js中的this,在Jquery中變為$(this)。
3、標簽選擇器
$("div")
4、並列選擇器
用,隔開
$("#div1,#div2")
5、後代選擇器
用空格隔開
6、過濾選擇器
第一個：$(".div:first")
最後一個：$(".div:last")
任意個：$(".div:eq(索引號)")
$(".div").eq(索引號)
大於：$(".div:gt(索引號)") 取到的是索引號以後的
小於：$(".div:lt(索引號)") 取到的是索引號之前的
排除：$(".div:not(選擇器)") 取到的是排除掉選擇的剩下的
$(".div:not(.div:eq(2))") 取到的是排除掉第三個剩下的
奇數個：$(".div:odd") 索引奇數個
偶數個：$(".div:even") 索引偶數個，包含0
屬性名過濾：$(".div[屬性名]")
屬性名+值過濾：$(".div[屬性名=值]") $(".div[屬性名!=值]")
內容過濾：$(".div:contains(‘字符串‘)")
包含子元素：$(".div:has(‘選擇器‘)")
二、事件：
1、基本事件：
就是把js事件中的on去掉。
2、復合事件
hover(function(){},function(){})
就是把鼠標移入移出事件合在一起了，第一個function裏是移入事件，第二個function是移出事件。
toggle(function(){},function(){},....) 需要引Jquery1.7.1版本。
鼠標點擊循環執行裏面的方法。可以放無數個function
3、未來元素附事件
對象.live("事件名",function(){});
給還沒有創建出來的對象附上事件。
4、阻止事件冒泡
在事件function裏最後return false;
三、Dom操作
（一）操作屬性
1、獲取屬性
var s = $("選擇器").attr("屬性名")
2、設置屬性
$("選擇器").attr("屬性名","屬性值")
3、刪除屬性
$("選擇器").removeAttr("屬性名")
（二）操作樣式
1、操作內聯樣式
獲取樣式
var s = $("選擇器").css("樣式名")
設置樣式
$("選擇器").css("樣式名","值")
2、操作樣式表的class
添加class，相當於並列class。
$("選擇器").addClass("class名")
移除class
$("選擇器").removeClass("class名")
添加移除交替class
$("選擇器").toggleClass("class名")
（三）操作內容
1、表單元素
取值
var s = $("選擇器").val()
賦值
$("選擇器").val("值")
2、非表單元素
取值
var s = $("選擇器").html() var s = $("選擇器").text()
賦值
$("選擇器").html("內容") $("選擇器").text("內容")
（四）操作相關元素
1、查找
找父級 parent()
找前輩 parents(選擇器)
找子集 children(選擇器)
找後代 find(選擇器)
找哥哥 prev() prevAll(選擇器)
找弟弟 next() nextAll(選擇器)
2、操作
新建： $("HTML字符串")
例： $("#div1").append($("<div class=‘div2‘></div>"));
添加： appen(jquery對象) ---往內部添加
after(,..) ----下部平級添加
before("...") -----上部平級添加
移除： empty() ----清空內部全部元素
remove() -----移除元素
復制： clone()
Js創建對象
var d1=document.createElement(‘div‘);
d1.setAttribute("class","div2"); //設置class屬性
$("#div1").append(d1); //往div1下面增添。
Jquery創建對象
$("#div1").append($("<div class=‘div2‘></div>"));
四、動畫
show(),hide() 顯示、隱藏。
slideDown(),slideUp() 下拉顯示，上拉隱藏
fadeIn(),fadeOut() 淡入淡出
自定義動畫
animate({left:"300px",top:"300px"},3000,function(){回調函數})
停止動畫，防止動畫積累： .stop()
導航欄制作
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.7.2.min.js"></script>
<title></title>
<style type="text/css">
.div1 {
position: relative;
width: 100px;
height: 50px;
background-color: red;
float: left;
margin-left: 20px;
}
.div2 {
position: absolute;
width: 100%;
height: 0px;
top: 50px;
background-color: green;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
<div class="div1">
<div class="div2"></div>
</div>
<div class="div1">
<div class="div2"></div>
</div>
<div class="div1">
<div class="div2"></div>
</div>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>
<script type="text/javascript">
$(".div1").mouseover(function () {
var aaa = $(this).children(".div2:eq(0)");
aaa.stop().animate({ height: "300px" }, 500, function () {
aaa.css("background-color", "blue");
});
});
$(".div1").mouseout(function () {
var aaa = $(this).children(".div2:eq(0)");
aaa.stop().animate({ height: "0px" }, 500, function () {
aaa.css("background-color", "green");
});
});
</script>
動畫顏色漸變，需要另引Jquery.color。放在之前引用的Jquery下面。
【2017-06-02】Jquery基礎