一.基礎(chǔ)選擇器
1.Id選擇器 ?? 格式：$("#id屬性值") 獲取指定id值的對象（只會獲取到第一個id的值 ? /*必須會/
2.類選擇器 ? 格式：$(".class屬性值")? 獲取所有指定class屬性的屬性/*必須會/
3.元素選擇器 ? 格式：$("元素名/標簽名")? 獲取所有指定標簽名的元素/*必須會/
4.通用選擇器 ? 格式：$("*")? 獲取所有的元素的對象
5.組合選擇器 ? ? 格式：$("選擇器1,選擇器2...")
例子：
1.id選擇器
var div1 = $("#div1");
console.log(div1);
2.類選擇器
var cls = $(".test");
console.log(cls);
3. 元素選擇器
var divs = $("div");
console.log(divs);
4. 通用選擇器
var all = $("*");
console.log(all);
5. 組合選擇器
var group = $("#div1,span,.test");
console.log(group)
二.層次選擇器
1.后代選擇器 ancestor descendant $("#parent div")選擇id為parent的元素的所有div元素
2.子代選擇器 parent > child $("#parent>div")選擇id為parent的直接div子元素
3.相鄰選擇器 prev + next $(".blue + img")選擇css類為blue的下一個img元素
4.同輩選擇器 prev ~ sibling $(".blue ~ img")選擇css類為blue的之后的img元素
三.表單選擇器
1.表單元素：文本框、密碼框、單選框、復(fù)選框、文件域、隱藏域、文本域textarea、下拉框select
2.非表單元素：div、span、p、h1~h6、img、a、table
四.過濾選擇器
1.:checked 選擇所有被選中的元素
var checkboxs = $(":checkbox");
checkboxs.each(function(){
console.log(this);
console.log(this.checked);
});
2.:eq(index) 匹配指定下標的元素
var second = $(":checkbox:eq(1)")
second.each(function(){
console.log(this);
});
:gt(index) 匹配下標大于指定值的所有元素
var gtfirst = $(":checkbox:gt(0)")
gtfirst.each(function(){
console.log(this);
});
:odd 選擇每個相隔的（奇數(shù)） 元素
var odds= $(":checkbox:odd")
odds.each(function(){
console.log(this);
});
:even 選擇每個相隔的（偶數(shù)） 元素
var evens= $(":checkbox:even")
evens.each(function(){
console.log(this);
});
五.元素
1.操作元素屬性
獲取屬性的值：attr(屬性名稱) 獲取指定的屬性值，操作 checkbox 時選中返回 checked，沒有選中返回 undefined。 attr('checked')attr('name')
prop(屬性名稱) 獲取具有true和false兩個屬性的屬性值 prop('checked')
設(shè)置屬性的值：
attr(屬性名稱,屬性值);
prop(屬性名稱,屬性值);
移除屬性：removeAttr(屬性名) 移除指定的屬性 removeAttr('checked')
如果屬性的返回值是true或false（checked、selected、disabled），使用prop()方式；其他屬性使用attr();
2.操作元素樣式
attr(“class”) 獲取class屬性的值，即樣式名稱
attr(“class”,”樣式名”)
????????????修改class屬性的值，修改樣式
addClass(“樣式名”)
????????添加樣式名稱
css() ? ? 添加具體的樣式
removeClass(class)
????????????移除樣式名稱
例子：
?attr?
?設(shè)置元素的class屬性（如果屬性不存在，則添加屬性）
$("#conRed").attr("class","red");
?如果屬性存在，則修改屬性值
$("#conBlue").attr("class","green");
?addClass() 添加樣式，原來的樣式保留，如果出現(xiàn)相同的樣式，以后面定義樣式為準
$("#conRed").addClass("larger");
?css()
添加一個具體樣式? css("樣式名","樣式值")
$("#remove").css("color","red");
?同時添加多個具體的樣式名 css({"樣式名":"樣式值","樣式名":"樣式值"})
$("#remove").css({"color":"red","font-family":"楷體","background-color":"gray"})
3.操作元素內(nèi)容
html() 獲取元素的html內(nèi)容
html("html,內(nèi)容") 設(shè)定元素的html內(nèi)容
text() 獲取元素的文本內(nèi)容，不包含html
text("text 內(nèi)容") 設(shè)置元素的文本內(nèi)容，不包含html
val() 獲取元素value值
val(‘值’) 設(shè)定元素的value值
例子：
?設(shè)置（非表單）元素的內(nèi)容
包含的html標簽
$("#html").html("<h3>上海</h3>");
?$("#html").html("上海");
?不包含html標簽,只能設(shè)置純文本
$("#text").text("<h3>上海</h3>");
$("#text").text("上海");
?設(shè)置表單元素的值
$("input").val("Hello");
?獲取元素的值
console.log($("#getHtml").html());
console.log($("#getHtml").text());
console.log($("input").val());
4.創(chuàng)建元素
創(chuàng)建元素 ? ? $("元素內(nèi)容")
添加元素
prepend(content) 在被選元素內(nèi)部的開頭插入元素或內(nèi)容，被追加的 content 參數(shù)，可以是字符、HTML 元素標記。
$(content).prependTo(selector) 把 content 元素或內(nèi)容加入 selector 元素開頭
append(content) 在被選元素內(nèi)部的結(jié)尾插入元素或內(nèi)容，被追加的 content 參數(shù)，可以是字符、HTML 元素標記。
$(content).appendTo(selector) 把 content元素或內(nèi)容插入selector 元素內(nèi)，默認是在尾部
before()：在元素前插入指定的元素或內(nèi)容:$(selector).before(content)
after()：在元素后插入指定的元素或內(nèi)容:$(selector).after(content)
5.刪除元素
remove() 刪除所選元素或指定的子元素，包括整個標簽和內(nèi)容一起刪。
empty() 清空所選元素的內(nèi)容
6.遍歷元素
each()
$(selector).each(function(index,element)) :遍歷元素
參數(shù) function 為遍歷時的回調(diào)函數(shù)，
index 為遍歷元素的序列號，從 0 開始。
element是當前的元素，此時是dom元素。
六.事件
1.ready()加載事件
ready()類似于 onLoad()事件
ready()可以寫多個，按順序執(zhí)行
$(document).ready(function(){})等價于$(function(){})
onload與ready()的區(qū)別：
1、ready()在DOM結(jié)構(gòu)解析完畢后即執(zhí)行
2、onload在DOM結(jié)構(gòu)解析完畢，并且外部資源加載完畢后執(zhí)行
js的onlooad事件
window.onload = function(){
var mydiv = $("#mydiv");
console.log(mydiv);}
jquery的ready事件
$(document).ready(function(){
var mydiv = $("#mydiv");
console.log(mydiv);
});
2.按鈕事件
1.確定為哪些元素綁定事件
獲取元素
2.綁定什么事件（事件類型）
第一個參數(shù)：事件的類型
3.相應(yīng)事件觸發(fā)的，執(zhí)行的操作
第二個參數(shù)：函數(shù)
3種綁定簡單事件:
1.js綁定事件
document.getElementById("btn").onclick = function(){
alert('這是個按鈕。。。');
};
2.bind()綁定事件
$("#btn").bind("click",function(){
alert('這是個按鈕。。。');
});
3.直接綁定事件(必須會)
$("#btn").click(function(){
alert('這是個按鈕。。。');
});
綁定多個事件
聚焦失焦事件
方式一：
????$("#txt").focus(function(){
????聚焦時清空文本框
????$("#txt").val("");
????}).blur(function(){
????$("#txt").val("你好");
????});
多個事件綁定一種行為
$("#txt").bind("focus blur",function(){
console.log("。。。");
});
