前端 -- jQuery
jQuery引入
-
下載鏈接:
[jQuery官網](https://jquery.com/)，首先需要下載這個jQuery的文件，然后在HTML文件中引入這個文件，就可以使用這個文件中幫我們提供的jquery的接口了。 -
引入:
<script src = 'jquery.js'> </script>
jQuery對象和dom對象
-
jQuery找到的對象稱為 --> jQuery對象
-
原生js找到的標簽稱為 --> dom對象
-
dom對象只能使用dom對象的方法,不能使用jquery對象的方法,jquery對象也是,它不能使用dom對象的方法
-
dom對象和jquery對象互相轉換:
-
jquery對象轉dom對象 -- jquery對象[0] 示例: $('#d1')[0]
-
dom對象轉jquery對象 -- $(dom對象)
-
jQuery選擇器
基本選擇器(同css一樣)
-
不管找什么標簽，用什么選擇器，都必須要寫$("")，引號里面再寫選擇器，通過jQuery找到的標簽對象就是一個jQuery對象，用原生JS找到的標簽對象叫做DOM對象
-
通過 .text() 可以拿到標簽里面的文本內容
-
id選擇器
-
$("#id值")
-
-
標簽選擇器
-
$("標簽名")
-
-
class選擇器
-
$(".類名")
-
-
配合使用
-
$("div.c1") 找到有c1 class類的div 標簽
-
-
所有元素選擇器
-
$("*")
-
-
組合選擇器
-
$("#id, .className, tagName")
-
-
層級選擇器
-
x和y可以為任意選擇器
-
$("x y"); x的所有后代y（子子孫孫）
-
$("x > y"); x的所有兒子y（兒子）
-
$("x + y"); 找到所有緊挨在x后面的y(一個)
-
$("x ~ y"); x之后所有的兄弟y
-
-
選擇器找到的可能是多個標簽,會放到數組里面,但還是jquery對象,能夠直接使用jquery的方法,意思是找到的所有標簽進行統一設置,如果要單獨設置選中的所有標簽中的某個標簽,可以通過索引取值的方式找到,然后注意,通過索引取值拿到的標簽,是個dom對象
基本篩選器(選擇之后進行過濾)
<ul>
<li id="1">南山</li>
<li id="2">
<a href="">百度</a>
寶安
</li>
<li id="3">坪山</li>
<li id="4">羅湖</li>
<li id="5">
<a href="">華為</a>
福田
</li>
<li id="6">龍崗</li>
</ul>
?
:first -- 示例:$('li:first') // 第一個
:last // 最后一個
:eq(index) // 索引等于index的那個元素
:even // 匹配所有索引值為偶數的元素，從 0 開始計數
:odd // 匹配所有索引值為奇數的元素，從 0 開始計數
:gt(index) // 匹配所有大于給定索引值的元素
:lt(index) // 匹配所有小于給定索引值的元素
:not(選擇器) // 排除所有滿足not條件的標簽
:has(選擇器) // --$('li:has(.c1)') 找到后代中含有滿足has里面選擇器的那個標簽
:not(:has(.c1)) -- $('li:not(:has(.c1))') 排除后代中含有滿足has里面選擇器的那個標簽
屬性選擇器
-
[attribute = value] 屬性等于
-
[attribute != value] 屬性不等于
// 示例,多用于input標簽 <input type="text"> <input type="password"> <input type="checkbox"> $("input[type='checkbox']"); // 取到checkbox類型的input標簽 $("input[type!='text']"); // 取到類型不是text的input標簽
表單篩選器
-
多用于找form表單里面出現的input標簽,當然通過屬性選擇器找肯定沒有問題的,這樣就是寫著簡單一點
找到的是type屬性為這個值的input標簽中 :text :password :file ? :radio :checkbox ? :submit :reset :button ? // 例子: $(":checkbox") // 找到所有的checkbox
表單對象屬性篩選器
-
:enabled 可用的標簽
-
:disabled 不可用的標簽
-
:checked 選中的input標簽
-
:selected 選中的option標簽
// 找到可用的input標簽 <form> <input name="email" disabled="disabled" /> <input name="id" /> </form> ? $("input:enabled") // 找到可用的input標簽 ? // 找到被選中的option： <select id="s1"> <option value="beijing">北京市</option> <option value="shanghai">上海市</option> <option selected value="guangzhou">廣州市</option> <option value="shenzhen">深圳市</option> </select> ? $(":selected") // 找到所有被選中的option
篩選器方法
-
選擇器或者篩選器選擇出來的都是對象，而篩選器方法其實就是通過對象來調用一個進一步過濾作用的方法，寫在對象后面加括號，不再是寫在選擇器里面的了。
-
下一個元素
$('#l3').next(); 找到下一個兄弟標簽 $('#l3').nextAll(); 找到下面所有的兄弟標簽 $('#l3').nextUntil('#l5'); 直到找到id為l5的標簽就結束查找，不包含它 -
上一個元素
$("#id").prev() 找到上一個兄弟標簽 $("#id").prevAll() 找到上面所有的兄弟標簽 $("#id").prevUntil("#i2") 直到找到id為i2的標簽就結束查找，不包含它 -
父親元素
$("#id").parent() // 查找一級父類 $("#id").parents() // 查找當前元素的所有的父輩元素（爺爺輩、祖先輩都找到） $("#id").parentsUntil('body') // 查找當前元素的所有的父輩元素，直到遇到匹配的那個元素為止，這里直到body標簽，不包含body標簽，基本選擇器都可以放到這里面使用。 -
兒子和兄弟元素
$('ul').children(); // 找所有的兒子們標簽 $('ul').children('#l3'); // 找到符合后面這個選擇器的兒子標簽 ? $('#l5').siblings(); // 找到所有的兄弟們標簽,不包含自己 $('#l5').siblings('#l3'); // 找到符合后面這個選擇器的兄弟標簽 -
查找
-
搜索所有與指定表達式匹配的元素。這個函數是找出正在處理的元素的后代元素的好方法
-
$("div").find("p")找到div后代中的p標簽,相當于 `$('div p')
-
-
篩選
-
篩選出與指定表達式匹配的元素集合。這個方法用于縮小匹配的范圍。用逗號分隔多個表達式
$("div").filter(".c1") // 從結果集中過濾出有c1樣式類的，從所有的div標簽中過濾出有class='c1'屬性的div，和find不同，find是從div標簽的子子孫孫中找到一個符合條件的標簽 等價于 $("div.c1")--> 找到類值等于c1的div標簽 .first() // 獲取匹配的第一個元素 .last() // 獲取匹配的最后一個元素 .not() // 從匹配元素的集合中刪除與指定表達式匹配的元素$('li').not('#l3'); .has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。 .eq() // 索引值等于指定值的元素
-
標簽操作
樣式操作
-
樣式類操作
-
addClass(); 添加指定的css類名
-
removeClass(); 移除指定的css類名
-
hasClass(); 判斷樣式是否存在
-
toggleClass(); 切換css類名,有就移除沒有就添加
示例代碼 $('.c1').addClass('c2'); $('.c1').removeClass('c2'); $('.c1').hasClass('c2'); $('.c1').toggleClass('c2');
-
-
css樣式
-
原生js: 標簽.style.color = 'red';
-
jquery: $('.c1').css('background-color','red')
同時設置多個css樣式:
$('.c1').css({'background-color':'red','width':'200px'})
-
-
位置操作
-
position() 查看相對位置,不能設置位置
-
offset() 查看距離窗口左上角的絕對位置
查看位置:
$('.c2').position(); //查看相對位置
$('.c2').offset(); //查看距離窗口左上角的絕對位置
設置位置:
$('.c2').offset({'top':'20','left':'40'});
-
-
jQuery綁定點擊事件的寫法
//原生js綁定點擊事件: $('.c1')[0].onclick = function(){ this.style.background = 'red'; } ? // jquery綁定點擊事件 $('.c1').click(function () { $(this).css('background-color','green'); })
-
$(window).scrollTop() // 滾輪向下移動的距離
$(window).scrollLeft() // 滾輪向右移動的距離
View Code// 滾動事件.監聽滾動事件來顯示或者隱藏標簽 ? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ background-color: green; height: 4000px; width: 100px; } .s1{ position: fixed; left:20px; bottom:20px; height: 30px; width: 70px; background-color: black; text-align: center; line-height: 30px; } .s1 a{ color: white; font-size: 14px; text-decoration: none; } .hide{ display: none; // 隱藏標簽 } </style> </head> <body> <span>頂部位置</span> <div class="c1"></div> <span class="s1 hide"> <a href="#top">回到頂部</a> // <span>返回頂部</span> </span> <script src="jqu.js"></script> <script> $(window).scroll(function () { console.log($(window).scrollTop()); if ($(window).scrollTop()>200){ $('.s1').removeClass('hide') // 當滑動的距離超過200的時候,就顯示標簽 }else{ $('.s1').addClass('hide') } }) ? // 回到頂部,scrollTop設置值 // $('.s1').click(function(){ // $(window).scrollTop(0) // }) </script> </body> </html>
-
尺寸
$('.c1').height(); //content 高度 $('.c1').width(); //content 寬度 $('.c1').innerHeight(); //content高度+padding高度 $('.c1').innerWidth(); //content寬度+padding寬度 $('.c1').outerHeight(); //content高度+padding高度 + border高度 $('.c1').outerWidth(); //content寬度+padding寬度+ border寬度
文本操作
-
html() 取得第一個匹配元素的html內容，包含標簽內容
-
html(val) 設置所有匹配元素的html內容，識別標簽，能夠表現出標簽的效果
-
text() 取得所有匹配元素的內容，只有文本內容，沒有標簽
-
text(val) 設置所有匹配元素的內容，不識別標簽，將標簽作為文本插入進去
$('.c1').html('<h1>你好</h1>'); // 將你好插入文本中 $('.c1').text('<h1>你好</h1>'); // 無法識別標簽,所以將標簽作為文本插入進去
值操作
獲取值
input type='text'的標簽--$('#username').val();
input type='radio'標簽獲取被選中的標簽的值 --- $(':radio:checked').val();
input type='checkbox'標簽獲取被選中的標簽的值 --- 直接$(':checkbox:checked').val();是不行的,只會拿到一個值,需要循環取值
var d = $(':checkbox:checked');
for (var i=0;i<d.length;i++){
console.log(d.eq(i).val());
}
單選select --- $('#city').val(); 拿到value設置的值
多選select --- $('#author').val(); // ["2", "3"]
?
設置值
input type='text'的標簽 --- $('#username').val('李杰');
input type='radio'標簽 --- $('[name="sex"]').val(['3']);
如果 $('[name="sex"]').val('3'),所有標簽的值都變成了'3';
input type='checkbox'設置值 --- $('[name="hobby"]').val(['2','3'])
單選select --- $('#city').val('1'); option value='1'
多選select --- $('#author').val(['2','3'])
屬性操作
attr(attrName)// 返回第一個匹配元素的屬性值 attr(attrName, attrValue)// 為所有匹配元素設置一個屬性值 attr({k1: v1, k2:v2})// 為所有匹配元素設置多個屬性值 removeAttr(attrName)// 從每一個匹配的元素中刪除一個屬性
?
示例: 設置單個屬性 $('.c1').attr('xx','oo'); 設置多個屬性 $('.c1').attr({'age':'18','sex':'alex'}); 查看屬性 $('.c1').attr('屬性名'); $('.c1').attr('xx'); 刪除屬性 $('.c1').removeAttr('xx'); ? prop -- 針對的是checked\selected\disabled.. ? 查看標簽是否有checked屬性,也就是是否被選中 attr $(':checked').attr('checked'); //checked --沒被選中: undefined prop $(':checked').prop('checked'); //true -- 沒被選中 : false 通過設置屬性的方式來設置是否選中: $(':radio').eq(2).prop('checked',true); true和false不能加引號 $(':radio').eq(2).prop('checked',false); ? 簡單總結: 1.對于標簽上有的能看到的屬性和自定義屬性都用attr 2.對于返回布爾值的比如checkbox、radio和option的是否被選中或者設置其被選中與取消選中都用prop。 具有 true 和 false 兩個屬性的屬性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
文檔處理
添加到指定元素內部的后面 $(A).append(B) // 把B追加到A $(B).appendTo(A) // 把B追加到A // 添加字符串照樣能識別標簽 ***** $('#d1').append('<a ); ? 添加到指定元素內部的前面 $(A).prepend(B) // 把B前置到A $(B).prependTo(A) // 把B前置到A 示例 $('a').prependTo($('div')); ? 添加到指定元素外部的后面 $(A).after(B) // 把B放到A的后面 $(B).insertAfter(A) // 把B放到A的后面 ? 添加到指定元素外部的前面 $(A).before(B) // 把B放到A的前面 $(B).insertBefore(A) // 把B放到A的前面 移除和清空元素 remove() // 從DOM中刪除所有匹配的元素,包括自己也刪除 empty() // 刪除匹配的元素集合中所有的子節點，包括文本被全部刪除，但是匹配的元素還在 $('div').remove(); // 清空包括div自己的數據 $('div').empty(); // 清空div標簽里面的數據 ? 替換 replaceWith() replaceAll() 示例: var a = document.createElement('a') a.href = 'http://www.baidu.com'; a.innerText = 'xxx'; $('span').replaceWith(a); // 用a標簽替換span標簽 $(a).replaceAll('span'); // 用a標簽替換span標簽 clone()克隆 <button class="btn">屠龍寶刀,點擊就送!</button> ? $('.btn').click(function () { // var a = $(this).clone(); // 克隆標簽 var a = $(this).clone(true); // 括號內加一個true,連帶事件一起克隆 $(this).after(a); ? })
事件
事件綁定方式
<script>
// 方式一
$('.c1').click(function () {
$(this).css({'background-color':'purple'})
})
?
// 方式二
$('.c1').on('click',function () {
$(this).css({'background-color':'purple'})
})
</script>
常用事件
click 左鍵點擊事件 //獲取光標觸發的事件 $('[type="text"]').focus(function () { $('.c1').css({'background-color':'black'}); }); //失去光標(焦點)觸發的事件 $('[type="text"]').blur(function () { $('.c1').css({'background-color':'purple'}); }); ? //域內容發生改變時觸發的事件 $('select').change(function () { $('.c1').toggleClass('cc'); }); ? //鼠標懸浮觸發的事件 // $('.c1').hover( // //第一步:鼠標放上去 // function () { // $(this).css({'background-color':'blue'}); // }, // //第二步,鼠標移走 // function () { // $(this).css({'background-color':'yellow'}); // } // ) ? // 鼠標懸浮 等同于hover事件 // 鼠標進入 // $('.c1').mouseenter(function () { // $(this).css({'background-color':'blue'}); // }); // 鼠標移出 // $('.c1').mouseout(function () { // $(this).css({'background-color':'yellow'}); // }); // $('.c2').mouseenter(function () { // console.log('啦啦啦啦'); // }); // 鼠標懸浮事件 // $('.c2').mouseover(function () { // console.log('啦啦啦啦'); // }); // mouseover 和 mouseenter的區別是：mouseover事件是如果該標簽有子標簽，那么移動到該標簽或者移動到子標簽時會連續觸發，mmouseenter事件不管有沒有子標簽都只觸發一次，表示鼠標進入這個對象 ? ? //鍵盤按下觸發的事件 e\event事件對象 $(window).keydown(function (e) { // console.log(e.keyCode); //每個鍵都有一個keyCode值,通過不同的值來觸發不同的事件 if (e.keyCode === 37){ $('.c1').css({'background-color':'red'}); }else if(e.keyCode === 39){ $('.c1').css({'background-color':'green'}); } else { $('.c1').css({'background-color':'black'}); } }) // 鍵盤抬起觸發的事件 $(window).keyup(function (e) { console.log(e.keyCode); }) ? input事件: 22期百度:<input type="text" id="search"> <script src="jquery.js"></script> <script> $('#search').on('input',function () { console.log($(this).val()); }) ? </script>
事件冒泡
-
冒泡的意思就是因為html可以嵌套，如果你給兒子標簽綁定了點事件或者沒有綁定點擊事件，父級標簽綁定了點擊事件，那么你一點擊子標簽，不管子標簽有沒有綁定事件，都會觸發父級標簽的點擊事件，如果有，會先觸發子標簽的點擊事件，然后觸發父級標簽的點擊事件，不管子標簽有沒有點擊事件，都會一級一級的還往上找點擊事件
<style> #d1{ background-color: red; height: 200px; } #d2{ background-color: green; height: 100px; width: 100px; } </style> ? <div id="d1"> <div id="d2"></div> </div> <script src="jquery.js"></script> <script> $('#d1').click(function () { alert('父級標簽'); }); $('#d2').click(function () { alert('子級標簽'); }); </script>
阻止后續事件發生
$('#d1').click(function () {
alert('父級標簽');
});
$('#d2').click(function (e) {
alert('子級標簽');
return false;
// e.stopPropagation();
});
事件委托
-
事件委托是通過事件冒泡的原理.利用父級標簽捕獲子標簽的事件,將未來添加進來的某些子標簽自動綁定上事件
<div id="d1"> <button class="c1">xin</button> </div> ? <script src="jqu.js"></script> ? <script> // 將button按鈕選擇器選中的標簽的點擊事件委托給了$('#d1') $('#d1').on('click','.c1',function () { alert('未成年禁入'); var btn = document.createElement('button'); $(btn).text('xin'); $(btn).addClass('c1'); console.log(btn); console.log($(this)); // this還是點擊的那個button按鈕 $('#d1').append(btn) // 添加到div標簽里面的后面 }) </script>
浙公網安備 33010602011771號