JQuery 總結（1） 選擇器的使用
一 注意：
1.DOM物件：通過原生js獲取的DOm物件（DOm樹上的節點就是，比如<li></li>）
2.jQuery物件：通過jQuery 選擇器獲取的
jQuery物件智慧用jQuery中封裝的方法，不能使用DOm物件的方法 同理 DOm也是一樣
二 選擇器相互更換：
1.DOM轉換成JQ物件 $(“DOM物件”)
2.JQ物件轉換成DOM物件 $("div")[index] 或者 $("div").get(index)
1. #id > $("#id名"),
2. .class > $(".class名")
3. element標籤 > $("div")
4.群組選擇器 > $("div,p")
5.* > $("*")
四 後代選擇器 子元素選擇器 緊鄰的同輩選擇器
1.$("#id li"), 這個是所有的後代
2. $("#id > li"), 這個是隻查到兒子為止
3. $("#id + p ") 緊挨著#id 後面的p元素
4. $("#id ~ p ") 在#id 後面的同輩兄弟p元素
五.表單元素選擇器
<form>
<input type="text" />
<input type="checkbox"checked /> 複選框
<input type="radio" /> 單選框
<input type="image" />
<input type="file" />
<input type="submit" />
<input type="reset" />
<input type="password" />
<input type="button" /> <select><option/></select> <textarea></textarea> <button></button> </form> </body>
<script>
$("input:text").css({ "background":"red", width:200, height:100 })
$("input:enabled") 所有可用元素 disabled 不可用
$("input:checked") 所有選中的複選框
六.過濾元素選擇器
過濾和其他的選擇器搭配使用 這個基本通過下標來過濾
1.$("li:first") 所有的li中的第一個，$("li:last") 最後一個
2.$("li:eq(4)") 選擇第4個 下標0開始
$("li:gt(4)") 下標大於4，great that 。
$("li:lt(4)") 下標小於4，little that。
$("li:nth-child(-n+3)") 和css類似 2n 2n+1，-n+3 一樣使用
$("li").slice(1,2) 第1個到第二個 第二個不包含,如果不寫後面的數字 一直到最後
$('.gg').prevUntil('.ab').css('backgroundColor', 'red'); 在ab到gg， 他們之間全部同輩元素選中
3. $("li:odd") 下標基數，$("li:even") 下標偶數
4. $("li:not(.a5)") 去除a5剩下的元素
5.$(":header") 獲得所有的標題元素集合（H1-H6)
6.:animated 匹配正在執行動畫的元素
li中 沒動畫的元素給加個動畫 每100毫秒 left值增加200
$("li:not(:animated)").animate({ left:"+=200" },100 )
7. $("div").css("background", "orange").filter(".box").css("border-color", "red"); 全部的div設定橙色，其中 有class.box的設定 紅色 好鏈式呼叫
$("div").filter(".box") 等效於 $("div.box")
8.if ($("p").parent().is("div")) { alert("p 的父元素是 div"); }用來判斷p的父級是不是div 是的話返回 true
七:內容過濾選擇器 （根據內容來篩選 子孫都算）
1.$("li:contains('hospital')").css("background","red") 在li中文字含有hospital的 變紅色
$("li:not(li:contains('hospital'))").css("background","red") 在li中文字沒有hospital的變紅
$("span:contains('九江')").text("南昌") span中有九江的換成南昌
2. $("li:has(span)") 中查詢有span元素的li
3. $("li:empty()") 篩選所有內容為空的li ， $("li:parent()") 篩選所有內容非空的li
八 屬性選擇器
1. $("li[title]") 篩選出含有title 屬性的元素
2. $("li[title='aac1']") 選擇title等於aac1的元素，
$("li[title！='aac1']") 選擇title不等於aac1的元素 沒title的也算
$("li[title^='c1']") 以什麼開頭， $("li[title$='c1']") 以什麼結尾，
$("li[title*='c']") 選擇title值裡面含有 c 的元素
$("li[id][title='aac']") 組合 屬性中有id 而且 title=aac的元素
九 查詢選擇器
1.獲取子元素
$("li").children("span") 獲取li的兒子元素含有span
$("li").find("span") 獲取li的子孫元素含有span，，find() 必需要有引數
2. 獲取父級
$("span").parent() 獲取 span元素的直接上級
$("span").parents() 獲取 span元素的所有上級
3. 獲取同級元素
1.$(".bb").prev() 前一個 prevAll()前面所有的同級
$(".bb").next() 後一個 nextAll()後面所有的同級
2.$(".bb").siblings() 所有的同級
一 元素選擇：
1. $('*') 選擇所有元素 預設選擇document下的所有元素 或者選擇某個div下的元素
2. $('#box') $('.box') $('p') $("div .p") 這些都是類似於css的選擇方式 返回的是jquery物件
3.$('p:first') $('p:last') $('p:even') $('p:odd') ，第一個最後一個 奇數 偶數。
4.$("p:eq(3)") 列表中的第三個（0開始算），$("p:lt(1)") $("p:gt(1)") 從第幾個開始 往後，和往前。
進階：
$('#a').prevUntil('.b').css('backgroundColor', 'red'); 從a到b 之間的同輩元素都紅
.siblings() 選取所有同輩元素
.prev() .next() 下一個兄弟，nextAll()後面同級所有，
.parent() 父級，children("a")兒子 有a的，
.find("p") 查詢當前元素 所有的後代 只要符合條件，找出正在處理的元素的後代元素的好方法。
總結：用 $(this) 可以判斷 事件發生是誰呼叫，就表示當前熱點是給誰的，比如當前選中的標籤 我想它其他的兄弟元素 改變樣式，就要依託 當前元素的關係 ,然後找到其他的元素 改變 。
找出正在處理的元素的 兄弟關係 是最合適的
二 DOM 增刪改查
A.增加
1. var div=$("<div/>"); var father=$("body"); father.append(div); 在father裡面插入div 注意插入 的是jquery物件
father..prepend(div); 插在father的前面
2. var div=$("<div/>"); div.appendTo($("#wrap")); 把兒子塞到父親裡面。
div.prependTo($("#wrap")); 查到父親的前面
3. $(".p2").after($("<span/>")) .p2的後面放span 這麼理解
$("<span/>").insertAfter($(".p2")) 把span放到 p2的後面 [insert 是插入的動作]
4. before 和insertAfter 也是同上
B.刪除
1 .$(".p2").remove(); 誰呼叫.remove() 就刪誰
$a=$(".p2").remove(); 刪完之後 用$a來接收，$a.insertAfter(".p3"); 把接收的東西插入到p3
2. $(".p4").empty(); 這個是清空p4下所有的節點 文字，兒子孫子什麼的都清空 只留下p4
C.修改 檢視 [ 注意這裡既可以賦值 也可以 獲取]
•text() - 取值和賦值都是一組，
•html() - 取值和賦值（帶html標記）[碰到物件的話 取值第一個]
•val() - 設定或返回表單欄位的值
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<a href="+"www.baidu.com"+">Hello world!</a>"); (碰到分號結尾或者開始的用 +號給分開)
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
});
</script>
三 屬性新增
1. 新增css
$(".bb").css({
color:"red",
width:"100px",
height:"100px",
background:"orange"
})
獲取css
console.log($(".p2").css("width")) 在這裡獲取到css樣式內容 要提取數字 parseInt
2.新增屬性和檢視屬性
固有屬性：id class src href title type alt value .attr支援固有和自定義 ，.prop 只支援固有（判斷checkbox動態返回true和false）
$('img').attr('src','1.jpg') 這種就是給img新增屬性，[這個最好給固有屬性新增]，
($("div").attr('class')); 獲取這個物件的class屬性
$("#ccc").removeAttr("class") 刪除樣式
延伸 點選哪個按鈕 下面img分別顯示不同的圖片
console.log($(this).css(["width","background"])) 同時檢視兩個屬性。200px
console.log($(this).width()) 200 Number
width（）content，
innerWidth（）content+padding，
outerWidth() content+padding+border，
outerWidth(true) content+padding+border+margin，
console.log($(this).css("left")) 350px
console.log($(this).offset().left) 358 [相對視窗]
console.log($(this).position().left) 350 【相對有定位的父級】
arr.join(",")拼接字串
<body> <p class=p2>p2 內容</p> <p class=p3>p3 內容</p> <p class=p4>p4 內容</p> <p class=p5>p5 內容</p> <img src="https://gss0.bdstatic.com/5bVWsj_p_tVS5dKfpU_Y_D3/res/r/image/2018-11-06/6a9857e338f779063000ee316ac51c5c.jpg" alt="">
<script>
$(".p2").click(function () {
$("img").attr(
"src","https://gss0.bdstatic.com/5bVWsj_p_tVS5dKfpU_Y_D3/res/r/image/2018-11-06/4aa4b8ce4b9c40bceddd13417b46af63.jpg"
)
})
$(".p3").click(function () {
$("img").attr(
"src","https://gss0.bdstatic.com/5bVWsj_p_tVS5dKfpU_Y_D3/res/r/image/2018-11-06/12f1ad4efc0a5beae63a8f998dcadd5f.gif"
)
})
</script>
</body>
可以設定多個值
$("img").attr({
src: "test.jpg",
alt: "Test Image"
});
在原生js中 document.getElementsByTagName("INPUT")[0] . setAttribute("type","button");
五 獲取螢幕尺寸 偏移相關
$.offset().left 是指當前元素距離文件左邊多少距離
var left=($(".p2")r.offset().left;
var top1=($(".p2").offset().top;
注意 $.position().left 這個才是獲取 css中left的值
六 載入完DOM 再執行函式：
winodw.onload=function(){} 所有包含圖片載入完，然後再執行 效率低 而且只能使用一次。
$(document).ready( fn) 簡寫 $(fn) 可以使用多次。
