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的變紅
? ??? ?li:contains('"+texta+"')? 用變量的時候 用這個方法
? ? ? $("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() - 設置或返回表單字段的值
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | <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(",")拼接字符串
?
| 1 2 3 4 5 6 | <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=""> |
| 1 | <script> |
| 1 2 3 4 5 6 7 8 9 10 | $(".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" ) }) |
| 1 | </script> |
| 1 | </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.οnlοad=function(){} 所有包含圖片加載完，然后再執行 效率低 而且只能使用一次。
? ?$(document).ready( fn)? ?簡寫 $(fn) 可以使用多次。
?
總結
以上是生活随笔為你收集整理的JQuery 总结（1） 选择器的使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jQuery 实例 教程
- 下一篇： JQuery 总结（2） jQuery