1.基本選擇器
1.所有元素選擇器:$("*") 2.id選擇器:$("#id") 3.標籤選擇器:$("tagName") 4.class選擇器:$(".className") 配合使用:$("div.c1") // 找到有c1 class類的div標籤。and的關係 5.組合選擇器:$("#id, .className, tagName") 把符合條件的都能找到,or的關係,逗號分開
2.層級選擇器
找到的都是y標籤 1.$("x y");// x的所有後代y(子子孫孫) 2.$("x > y");// x的所有兒子y(兒子) 3.$("x + y")// 找到所有緊挨在x後面的y 4.$("x ~ y")// x之後所有的兄弟y
<ul class="dropdown-menu"> <li><a href="#">Rain</a></li> <li><a href="#">Egon</a></li> <li><a href="#">Yuan</a></li> <li role="separator" class="divider"></li> <li><a href="#">Q1mi</a></li> </ul> <div>你好嗎</div> <span>我很好</span> <div>你怎麼樣</div>
1.$(".dropdown-menu a") #r.fn.init(4) [a, a, a, a, 4個符合條件的,找到的都是a標籤 2.$(".dropdown-menu>a") #fn.init 無結果 3.$(".dropdown-menu>li") #r.fn.init(5) [li, li, li, li.divider, li 4.$(".dropdown-menu+div") #r.fn.init [div, 5.$(".dropdown-menu~div") #r.fn.init(2) [div, div,
3.屬性選擇器
<input type="text" name="username"> <input type="checkbox" name="gender" value="basketball">籃球 1.[attribute] 2.[attribute=value]// 屬性等於 <input type="checkbox"> $("input[type='checkbox']");// 取到checkbox類型的input標籤 $("input[name='username']") // 取到name屬性爲username類型的input標籤 $("input[type!='text']");// 取到類型不是text的input標籤
4.基本篩選器
:first // 第一個 $("div:first"); :last // 最後一個 $("#1 >div:last"); :eq(index)// 索引等於index的那個元素 $("#1 > div:eq(1)"); :even // 匹配所有索引值爲偶數的元素,從 0 開始計數 :odd // 匹配所有索引值爲奇數的元素,從 0 開始計數 :gt(index)// 匹配所有大於給定索引值的元素 :lt(index)// 匹配所有小於給定索引值的元素 not和has
:not(元素選擇器)// 找到所有滿足not條件的標籤,即在這個標籤內沒有noy中的條件 :has(元素選擇器)// 選取所有包含一個或多個標籤在其內的標籤(指的是從後代元素找)111111111144 $("#1:has(div)");將後代中有div標籤的id=1的標籤找出來。找到的時id=1這個大標籤 $("div:has(h1)")// 找到所有後代中有h1標籤的div標籤 $("li:not(“a")// 找到所有本身不含a標籤的li標籤 $("span:not("icon-bar")找到所有本身不含icon-bar類的span標籤
5.表單常用篩選
:text :password :file :radio :checkbox $("input[type='checkbox']");可以直接寫成$(":checkbox") 表單對象屬性:
:enabled #可用的 :disabled :checked #單選和複選框 :selected #下拉框 $(":selected") // 找到所有被選中的option
<select id="s1"> <option value="beijing">北京市</option> <option value="shanghai">上海市</option> <option selected value="guangzhou">廣州市</option> <option value="shenzhen">深圳市</option> </select> $(":selected") // 找到所有被選中的option
對符合條件的標籤做css樣式:$("div").css("color", "red")
篩選器方法
1.下一個元素:指同一級的元素 $("#id").next() $("#id").nextAll() $("#id").nextUntil("#i2")
<div id="1"> <div>天青色等煙雨 <div class="sub">江南</div> <div>而我在等你</div> </div> </div> <div id="2">只要你敢不懦弱</div> <div id="3">憑什麼我們要錯過</div> $("#1").next();顯示的是<div id="2">只要你敢不懦弱</div>這個標籤 $("#1").nextAll() 顯示所有和它同級的元素<div id="2">只要你敢不懦弱</div> <div id="3">憑什麼我們要錯過</div>
2.上一個元素: $("#id").prev() $("#id").prevAll() $("#id").prevUntil("#i2")
3.父親元素: $("#id").parent() $("#2").parent();父元素是body $("#id").parents() // 查找當前元素的所有的父輩元素 找祖先,一直找到html $("#id").parentsUntil() // 查找當前元素的所有的父輩元素,直到遇到匹配的那個元素爲止。 $(".jk").parentsUntil("#1"); 4.兒子和兄弟元素: $("#id").children();// 兒子們 $("#id").siblings();// 兄弟們 #上下都找 find和filter
find查找元素: $("#id").find()// 搜索所有與指定表達式匹配的元素。這個函數是找出正在處理的元素的後代元素的好方法。 $("div").find("p") 等價於$("div p") 找到div標籤中的所有p標籤 $("div").find("span") #r.fn.init(8) [span.sr-only, span.icon-bar, filter篩選:用於縮小匹配的範圍 $("div").filter(".c1") // 等價於 $("div.c1") 從結果集中過濾出有c1樣式類的div標籤。找到的時div標籤 $("div").filter(".navbar-header") #r.fn.init [div.navbar-header
操作標籤
樣式類操作
addClass();// 添加指定的CSS類名。 removeClass();// 移除指定的CSS類名。 hasClass();// 判斷樣式存不存在 toggleClass();// 切換CSS類名,如果有就移除,如果沒有就添加。
<div class="container"> 1.$(".container").addClass("item") <div class="container item "> 2.$(".container").hasClass("item") #true 將所有p標籤的字體設置爲紅色: $("p").css("color", "red");
菜單操作
<div class="menu"> <div class="title">菜單一</div> <div class="item-list hide"> <div>內容一</div> <div>內容二</div> <div>內容三</div> </div> <div class="title">菜單二</div> <div class="item-list hide"> <div>內容一</div> <div>內容二</div> <div>內容三</div> </div> <div class="title">菜單三</div> <div class="item-list hide"> <div>內容一</div> <div>內容二</div> <div>內容三</div> </div> </div> <script> // 找到所有 class 中有title的div標籤 $(".title").on("click", function () { // 把其它的選項隱藏掉 // $(this) // 找到當前點擊標籤的兄弟標籤 --> 含有title class的兄弟標籤 $(this).siblings(".title").next().addClass("hide"); $(this).next().removeClass("hide"); // 方法二: $(".items").addClass("hide"); //批量操作 $(this).next().removeClass("hide"); // 當前點擊的標籤 下一個標籤 顯示出來--> 從class移除hide // this --> 當前操作的標籤 --> DOM對象 --> 不能調用jQuery對象 // $(this) --> DOM對象用$()包起來就能轉換成jQuery對象,就能調用jQuery的方法 // $(this).next() --> 找到了當前點擊標籤的下一個標籤 }) </script>
位置
offset()// 獲取匹配元素在當前窗口的相對偏移或設置元素位置 position()// 獲取匹配元素相對父元素的偏移 scrollTop()// 獲取匹配元素相對滾動條頂部的偏移 scrollLeft()// 獲取匹配元素相對滾動條左側的偏移 $(".c1").offset(); #{left: 200, top:200} 可以自定義:$(".c1").offset({left: 400, top:100});
文本操作
<div class="jer">你好嗎</div> <span class="jer">我很好</span> <div class="jer">你怎麼樣</div>
1.HTML代碼: html()// 取得第一個匹配元素的html內容 $(".jer").html() "你好嗎" html(val)// 設置所有匹配元素的html內容 $(".jer").html("zhaoguangfei")
<div class="jer">zhaoguangfei</div> <span class="jer">zhaoguangfei</span> <div class="jer">zhaoguangfei</div>
2.文本值: text()// 取得所有匹配元素的內容 $(".jer").text() 你好嗎我很好你怎麼樣" text(val)// 設置所有匹配元素的內容 3.val值:用於獲取form表單的值 val()// 取得第一個匹配元素的當前值 val(val)// 設置所有匹配元素的值 val([val1, val2])// 設置checkbox、select的值
<p> #單選框 checked=""默認被選中 <label >性別: <input type="radio" name="gender" value="1" checked="">男 #默認被選中 <input type="radio" name="gender" value="2">女 <input type="radio" name="gender" value="3">不詳 </label> </p> <p> #多選框 checked=""默認被選中 <label >愛好: <input type="checkbox" name="gender" value="basketball">籃球 <input type="checkbox" name="gender" value="football">足球 <input type="checkbox" name="gender" value="voallbe">網球 </label> </p> <p> #單選下拉框 selected="" 默認被選中 <label >喜歡看的書籍: <select name="book" > <option value="book1" selected="" >圍城</option> <option value="book2">活着</option> <option value="book3">大秦帝國</option> <option value="book4">平凡的世界</option> <option value="book5">穆斯林的葬禮</option> </select> </label> </p> <p> #多選下拉框 selected="" 默認被選中 <label >喜歡看的影視: <select name="tv" multiple> <option value="1" >唐人街探案</option> <option value="2" selected="" >泰囧</option> <option value="3">極限挑戰</option> <option value="4">僞裝者</option> <option value="5">琅琊榜</option> </select> </label> </p>
1.獲取值:
1.獲取單選框被選中的value值 console.log($('input[type=radio]:checked').val()) 2.複選框被選中的value,獲取的是第一個被選中的值 console.log($('input[type=checkbox]:checked').val())
獲取所有選中的值:
var content=$("input[type='checkbox']:checked") $.each(content,function(){ console.log($(this).val()); }) basketball football
獲取所有的值存到列表中:
var value=new Array(); $.each(content,function(){ value.push(($(this).val())); }) #["basketball", "football"]
3.下拉列表被選中的值 $("select[name='book'] option:selected").val() 4.下拉列表被選中的值,獲取的是第一個被選中的值 $("select[name='tv] option:selected").val()
2.設置值:
1.設置單選按鈕和多選按鈕被選中項 $('input[type=radio]').val(['112']); $('input[type=checkbox]').val(['a','b']); 2.設置下拉列表框的選中值,必須使用select 因爲option只能設置單個值,當給select標籤設置multiple。 那麼我們設置多個值,就沒有辦法了,但是使用select設置單個值和多個值都可以 $('select').val(['3','2'])
屬性操作
attr(attrName)// 返回第一個匹配元素的屬性值 attr(attrName, attrValue)// 爲所有匹配元素設置一個屬性值 attr({k1: v1, k2:v2})// 爲所有匹配元素設置多個屬性值 removeAttr()// 從每一個匹配的元素中刪除一個屬性
attr():
1.獲取值:attr()設置一個屬性值的時候 只是獲取值 <div class="jer" name="zhao"></div> $("select").attr('name'); #"zhao" $("div").attr('class') #"jer" 2.設置值
1.設置一個值 設置div的class爲box $('div').attr('class','box') //2.設置多個值,參數爲對象,鍵值對存儲
$('div').attr({name:'hahaha',class:'happy'}) $("div").attr({name:'haahha',class:['box','zhao']}) #<div class="box,zhao" name="haahha"></div>
removeAttr():
1.刪除單個屬性 $('div').removeAttr('class') 2.刪除多個屬性 $('div').removeAttr('name class');
jquery中attr和prop的區別
對於HTML元素本身就帶有的固有屬性(本身就帶有的屬性),在處理時,使用prop方法。 對於HTML元素我們自己自定義的DOM屬性,在處理時,使用attr方法。
<a href="#" id="link1" class="btn" action="delete">刪除</a>
這個例子裏<a>元素的DOM屬性有“href、id,class和action”,很明顯,前三個是固有屬性,而後面一個“action”屬性是我們自己自定義上去的 <a>元素本身是沒有這個屬性的。這種就是自定義的DOM屬性。處理這些屬性時,建議使用attr方法 使用prop方法對自定義屬性取值和設置屬性值時,都會返回undefined值。 像checkbox,radio和select這樣的元素,選中屬性對應“checked”和“selected”,這些也屬於固有屬性,因此需要使用prop方法去操作才能獲得正確的結果。
$("#chk1").prop("checked") == false $("#chk2").prop("checked") == true
如果上面使用attr方法,則會出現:
$("#chk1").attr("checked") == undefined $("#chk2").attr("checked") == "checked"
爲了兼容性,我們在處理checkbox和radio的時候儘量使用特定的prop(),不要使用attr("checked", "checked")。
<input type="checkbox" value="1"> <input type="radio" value="2"> <script> $(":checkbox[value='1']").prop("checked", true); $(":radio[value='2']").prop("checked", true); </script>
文檔處理
1.添加
1.添加到指定元素內部的後面 父元素.append(子元素)
$(A).append(B)// 把B追加到A $(A).appendTo(B)// 把A追加到B 追加某元素,在父元素中添加新的子元素。子元素可以爲:stirng | element(js對象) | jquery元素
var newtag=document.createElement("span") newtag.innerText="天青煙雨"; $("[name=jerd]").append(newtag); #js對象 $('[name=jerd]').append('<li>1233</li>'); #stirng $('[name=jerd]l').append($('#app')); #jquery元素 如果追加的是jquery對象那麼這些元素將從原位置上消失。簡言之,就是一個移動操作。
2.添加到指定元素內部的前面父元素.prepend(子元素)
$(A).prepend(B)// 把B前置到A 前置添加, 添加到父元素的第一個位置
$(A).prependTo(B)// 把A前置到B
3.添加到指定元素外部的後面
$(A).after(B)// 把B放到A的後面 $(A).insertAfter(B)// 把A放到B的後面
4.添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面 $(A).insertBefore(B)// 把A放到B的前面 增加.刪除操作
<table border="1"> <thead> <tr> <th>#</th> <th>姓名</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>金老闆</td> <td><input type="button" value="刪除" class="delete"></td> </tr> <tr> <td>2</td> <td>景女神</td> <td><input type="button" value="刪除" class="delete"></td> </tr> <tr> <td>3</td> <td>隔壁老王</td> <td><input type="button" value="刪除" class="delete"></td> </tr> </tbody> </table> <script src="jquery-3.3.1.js"></script> <script> // 點擊添加按鈕添加一條新數據 // 1. 找到按鈕綁定點擊事件 $("#add").on("click", function () { // 當添加按鈕被點擊之後要做的事兒 // 1. 創建一個新的tr var trEle = document.createElement("tr"); trEle.innerHTML = "<td>4</td> <td>哪吒</td>"; // 2. 把創建好的tr追加到tbody裏面 $("tbody").append(trEle); }); // 點擊每一行的刪除按鈕,把當前行刪除掉 // 1. 找到每一行的刪除按鈕,綁定點擊事件 $(".delete").on("click", function () { // 當每一行的刪除按鈕被點擊後要做的事兒 // 1. 刪除當前被點擊的按鈕的這一行 console.log(this); $(this).parent().parent().remove(); }) </script>
2.修改
replaceWith()和replaceAll() 替換 remove()// 從DOM中刪除所有匹配的元素。 empty()// 刪除匹配的元素集合中所有的子節點。
1.replaceWith()和replaceAll()
$(selector).replaceWith(content); 將所有匹配的元素替換成指定的string、js對象、jquery對象。 //將所有的h5標題替換爲a標籤 $('h5').replaceWith('<a href="#">hello world</a>') //將所有h5標題標籤替換成id爲app的dom元素 $('h5').replaceWith($('#app')); 替換所有。將所有的h2標籤替換成p標籤。 $('<p>哈哈哈</p>')replaceAll('h2');
2.remove()
$(selector).remove(); 刪除節點後,事件也會刪除(簡言之,刪除了整個標籤) $(selector).detach();:刪除節點後,事件會保留 var $btn = $('button').detach() //此時按鈕能追加到ul中, $('ul').append($btn) <input type="button" value="點我就點我">在原來位置消失,但在ul標籤內會出現
3.empty()
清空選中元素中的所有後代節點 //清空掉ul中的子元素,保留ul $('ul').empty()
克隆操作
$(選擇器).clone(); 1.clone():克隆匹配的DOM元素 2.clone(true):元素以及其所有的事件處理並且選中這些克隆的副本(簡言之,副本具有與真身一樣的事件處理能力)
<button id="b1">屠龍寶刀,點擊就送</button> <hr> <button id="b2">屠龍寶刀,點擊就送</button> <script src="jquery-3.2.1.min.js"></script> <script> // clone方法不加參數true,克隆標籤但不克隆標籤帶的事件 $("#b1").on("click", function () { $(this).clone().insertAfter(this); }); // clone方法加參數true,克隆標籤並且克隆標籤帶的事件 $("#b2").on("click", function () { $(this).clone(true).insertAfter(this); }); </script>