主頁 > 企業開發 > JQuery總結

JQuery總結

2021-06-09 18:52:58 企業開發

目錄
  • 一、jQuery介紹
    • jQuery引入
  • 二、jQuery物件和DOM物件
  • 三、jQuery選擇器
    • 基本選擇器
    • 層級選擇器
    • 基本篩選器
    • 屬性選擇器
    • 表單篩選器
    • 表單物件屬性篩選器
    • 篩選器方法
  • 四、標簽操作
    • 樣式操作
    • 文本操作
    • 值操作
    • 屬性操作
    • 檔案操作
  • 五、事件
    • 事件系結方式
    • 常用事件
    • 事件冒泡
    • 阻止事件冒泡
    • 事件委托
  • 六、補充
    • 頁面載入
    • 影片效果
    • each 回圈
    • .data( ) 方法

一、jQuery介紹

1、jQuery是一個輕量級的、兼容多瀏覽器的JavaScript庫，

2、jQuery使用戶能夠更方便地處理HTML Document、Events、實作影片效果、方便地進行Ajax互動，能夠極大地簡化JavaScript編程，它的宗旨就是：“Write less, do more.“

jQuery引入

首先需要jQuery官網下載jQuery的檔案，然后在HTML檔案中引入這個檔案，就可以使用這個檔案中幫我們提供的jquery的介面了，

<script src="https://www.cnblogs.com/XiaoYang-sir/p/jQuery.js"></script>

二、jQuery物件和DOM物件

jQuery 找到的標簽物件稱為 ——> jQuery物件

原生 JS 找到的標簽物件稱為 ——> DOM物件

DOM物件只能使用DOM物件的方法,不能使用jQuery物件的方法

jQuery物件也是,它不能使用DOM物件的方法

我們在宣告一個jQuery物件變數的時候在變數名前面加上$：

var $variable = jQuery對像;
var variable = DOM物件;

jQuery物件轉成DOM物件，通過一個jQuery物件+[0]索引零，就變成了DOM物件，就可以使用JS的代碼方法了，DOM物件轉換成jQuery物件：$(DOM物件)，通過$符號包裹一下就可以了

$variable[0];

DOM 物件和 jQuery 物件互相轉換：

jQuery物件轉DOM物件 ——> jQuery物件[0]  示例:$('#d1')[0]
DOM物件轉jQuery物件 ——> $(dom物件)

三、jQuery選擇器

不管找什么標簽，用什么選擇器，都必須要寫$("")，引號里面再寫選擇器，通過jQuery找到的標簽物件就是一個jQuery物件，用原生JS找到的標簽物件叫做DOM物件

選擇器找到的可能是多個標簽,會放到陣列里面,但還是jquery物件,能夠直接使用jquery的方法,意思是找到的所有標簽進行統一設定,如果要單獨設定選中的所有標簽中的某個標簽,可以通過索引取值的方式找到,然后注意,通過索引取值拿到的標簽,是個dom物件

基本選擇器

和css一樣

id選擇器：
$("#id");

標簽選擇器：
$("tagName");

class選擇器：
$(".className");

配合使用：
$("div.c1");  	// 找到有c1 class類的div標簽

所有元素選擇器：
$("*");

組合選擇器：
$("#id, .className, tagName");

層級選擇器

和css一樣

x 和 y 可以為任意選擇器

$("x y");		// x 的所有后代 y（子子孫孫）
$("x > y");		// x 的所有兒子 y（兒子）
$("x + y");		// 找到所有緊挨在 x 后面的 y
$("x ~ y");		// x 之后所有的兄弟 y

基本篩選器

選擇之后進行過濾篩選

方式一：

:first 		// 第一個
:last 		// 最后一個
:eq(index)	// 索引等于index的那個元素
:even 		// 匹配所有索引值為偶數的元素，從 0 開始計數
:odd 		// 匹配所有索引值為奇數的元素，從 0 開始計數
:gt(index)	// 匹配所有大于給定索引值的元素
:lt(index)	// 匹配所有小于給定索引值的元素
:not(元素選擇器)	// 移除所有滿足not條件的標簽
:has(元素選擇器)	// 選取所有包含一個或多個標簽在其內的標簽(指的是從后代元素找)


// 找到所有后代中有h1標簽的div標簽，意思是首先找到所有div標簽，把這些div標簽的后代中有h1的div標簽篩選出來
$("div:has(h1)")
// 找到所有后代中有c1樣式類（類屬性class='c1'）的div標簽
$("div:has(.c1)")

$("li:not(.c1)")		// 找到所有不包含c1樣式類的li標簽
$("li:not(:has(a))")	// 找到所有后代中不含a標簽的li標簽

例子：
<ul>
    <li id="1">上海</li>
    <li id="2">成都</li>
    <li id="3">瀘州</li>
    <li id="4">雅安</li>
    <li id="5">北京</li>
</ul>

$('li:first');	// 查找所有li標簽中的第一個標簽

方式二：

和前面使用冒號的一樣 :first等，只不過冒號的那個是寫在選擇器里面的，而下面的這幾個是方法

.first() 	// 獲取匹配的第一個元素
.last() 	// 獲取匹配的最后一個元素
.not() 		// 從匹配元素的集合中洗掉與指定運算式匹配的元素
.has() 		// 保留包含特定后代的元素，去掉那些不含有指定后代的元素，
.eq() 		// 索引值等于指定值的元素

$('li').first();	// 查找所有li標簽中的第一個標簽

屬性選擇器

[attribute]
[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

例子：多用于input標簽
<input type="text">
<input type="password">
<input type="checkbox">
    
$(':password')	// 找到input標簽中type屬性為password的標簽

表單物件屬性篩選器

:enabled	// 可用的標簽
:disabled	// 不可用的標簽
:checked	// 選中的input標簽
:selected	// 選中的option標簽

例子1：
<input type="text" disabled="disabled">
<input type="password">
$("input:enabled")  	// 找到可用的input標簽

例子2：
<select id="s1">
  <option value="https://www.cnblogs.com/XiaoYang-sir/p/1">北京</option>
  <option value="https://www.cnblogs.com/XiaoYang-sir/p/2">四川</option>
  <option selected value="https://www.cnblogs.com/XiaoYang-sir/p/3">云南</option>	// 默認選中
  <option value="https://www.cnblogs.com/XiaoYang-sir/p/4">深圳</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'); 	// 找到符合后面這個選擇器的兄弟標簽

查找：find

搜索所有與指定運算式匹配的元素，這個函式是找出正在處理的元素的后代元素的好方法，

$('ul').find('#l3');  --> 類似于  $('ul #l3')

過濾：filter

和find不同，find是找div標簽的子子孫孫中找到一個符合條件的標簽

// 從結果集中過濾出有c1樣式類的,從所有的div標簽中過濾出有class='c1'屬性的div
('li').filter('.l3');

四、標簽操作

樣式操作

樣式類操作：

addClass();		// 添加指定的CSS類名，
removeClass();	// 移除指定的CSS類名，
hasClass();		// 判斷樣式存不存在
toggleClass();	// 切換CSS類名，如果有就移除，如果沒有就添加，

例子：

$('div.c1').addClass('c2');
$('div.c1').removeClass('c2');
$('div.c1').hasClass('c2');
$('div.c1').toggleClass('c2');

CSS樣式：

// 原生js
標簽.style.backgroundColor = 'black';

// jQuery
$('.c1').css('background-color','red');  
// 同時設定多個css樣式
$('.c1').css({'background-color':'yellow','width':'200px'})

位置操作：

.offset()方法允許我們檢索一個元素相對于檔案（document）的當前位置，

.position()的差別在于： .position()獲取相對于它最近的具有相對位置(position: relative 或 position: absolute)的父級元素的距離，如果找不到這樣的元素，則回傳相對于瀏覽器界面左上角的距離，

offset()	// 獲取匹配元素在當前視窗的相對偏移或設定元素位置
position()	// 獲取匹配元素相對父元素的偏移，不能設定位置
$(window).scrollTop();  	// 滾輪向下移動的距離
$(window).scrollLeft(); 	// 滾輪向左移動的距離

// 查看位置
$('.c2').position();  // 查看相對于父級元素位置
$('.c2').offset();    // 查看距離視窗左上角的絕對位置

// 設定位置
$('.c2').offset({'top':'20','left':'40'});

尺寸操作：

// 與盒子模型相關
$('.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內容，包含標簽內容
html(val)	// 修改所有匹配元素的html內容，識別標簽，能夠表現出標簽的效果

文本值：

text()		// 取得所有匹配元素的內容，只有文本內容，沒有標簽
text(val)	// 修改所有匹配元素的內容，不識別標簽，將標簽作為文本插入進去

例子：

$('.c1').text('<h3>hello Word</h3>');
$('.c1').html('<h3>hello Word</h3>');

值操作

val()		// 取得第一個匹配元素的當前值
val(val)	// 修改所有匹配元素的值
val([val1, val2])	// 修改多選的checkbox、多選select的值

實體一：獲取值

<input type="text" >  ————>獲取值：$('.c1').val();

<input type="checkbox" value="https://www.cnblogs.com/XiaoYang-sir/p/1">
// 獲取被選中的值這樣是不行的：$(':checkbox:checked').val();
// 需要回圈取值
var d = $(':checkbox:checked');
for (var i=0;i<d.length;i++){
    console.log(d.eq(i).val());
}

單選select ---> $('#city').val();
多選select ---> $('#author').val(); 	// ["2", "3"]

實體二：設定值

<input type="text" >  ——>設定值：$('.c1').val('小楊');

<input type="checkbox" value="https://www.cnblogs.com/XiaoYang-sir/p/1">	——>設定值：$(':checkbox').val([1,3]);
// 如果直接：$(':checkbox').val(1);這樣的話會把所有的的value全部設定為1

單選select ---> $('#city').val('1'); // 或者——> option value='https://www.cnblogs.com/XiaoYang-sir/p/1'
多選select ---> $('#author').val(['2','3'])；

屬性操作

用于ID自帶屬性等或自定義屬性：

attr(attrName)				// 回傳第一個匹配元素的屬性值
attr(attrName, attrValue)	// 為所有匹配元素設定一個屬性值
attr({k1: v1, k2:v2})		// 為所有匹配元素設定多個屬性值
removeAttr(attrName)		// 從每一個匹配的元素中洗掉一個屬性

用于checkbox和radio

prop() 		// 獲取屬性

實體：

// 設定單個屬性
$('.c1').attr('id','d1');

// 設定多個屬性
$('.c1').attr({name:'xiao',id:'d1'});

// 查看屬性
$('.c1').attr('屬性名');

// 洗掉屬性
$('.c1').removeAttr('屬性名');


// 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);

prop和attr的區別：

attr全稱attribute(屬性)

prop全稱property(屬性)

雖然都是屬性，但他們所指的屬性并不相同，attr所指的屬性是HTML標簽屬性，而prop所指的是DOM物件屬性，可以認為attr是顯式的，而prop是隱式的，

簡單總結：

1、對于標簽上有的能看到的屬性和自定義屬性都用attr

2、對于回傳布林值的比如checkbox、radio和option的是否被選中或者設定其被選中與取消選中都用prop，

具有 true 和 false 兩個屬性的屬性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()

檔案操作

添加到指定元素--內部的后面

$(A).append(B)		// 把B追加到A
$(A).appendTo(B)	// 把A追加到B

實體：
// 添加字串照樣能識別標簽
$('#d1').append('<a href="http://www.jd.com">京東</a>');

添加到指定元素--內部的前面

$(A).prepend(B)		// 把B前置到A
$(A).prependTo(B)	// 把A前置到B

實體：
// 添加字串照樣能識別標簽
$('#d1').perpend('<a href="http://www.jd.com">京東</a>');

添加到指定元素--外部的后面

$(A).after(B)		// 把B放到A的后面
$(A).insertAfter(B)	// 把A放到B的后面

實體：
// 添加字串照樣能識別標簽
$('#d1').after('<a href="http://www.jd.com">京東</a>');

添加到指定元素--外部的前面

$(A).before(B)			// 把B放到A的前面
$(A).insertBefore(B)	// 把A放到B的前面

移除和清空元素

remove()	// 從DOM中洗掉所有匹配的元素，
empty()		// 洗掉匹配的元素集合中所有的子節點，包括文本被全部洗掉，但是匹配的元素還在

實體：
$('div').remove();	// 移除div標簽
$('div').empty();	// 清空div標簽中的所有內容

替換

replaceWith()
replaceAll()

實體：
var a = document.createElement('a')
a.href = 'http://www.baidu.com';
a.innerText = '百度';

// 寫法不一樣效果一樣
$('div').replaceWith(a);		// 將所有的div標簽替換成a標簽
$(a).replaceAll('div');			// 將所有的div標簽替換成a標簽

克隆

clone()		// 克隆 


實體：
<button >按鈕</button>

<script>
    $('.btn').click(function (){
        // var a = $(this).clone(); 	// 克隆標簽
        var a = $(this).clone(true);	// 連帶事件一起克隆
        $(this).after(a)
    })

</script>

五、事件

事件系結方式

方式一：

<style>
.c1{
    height: 100px;
    width: 100px;
    background: red;
}
</style>

<div ></div>

<script>
    $('.c1').click(function () {
        $(this).css({backgroundColor:'green'})
    })
</script>

方式二：

<style>
.c1{
    height: 100px;
    width: 100px;
    background: red;
}
</style>

<div ></div>

<script>
    $('.c1').on('click', function () {
        $(this).css({backgroundColor:'green'})
    })
</script>

常用事件

click(function(){...})		// 左鍵點擊的事件
hover(function(){...})		// 滑鼠懸浮觸發的事件
blur(function(){...})		// 失去游標(焦點)觸發的事件
focus(function(){...})		// 獲取游標觸發的事件
change(function(){...}) 	// 內容發生變化，input，select等
keyup(function(){...}) 		// 鍵盤抬起觸發的事件
keydown(function(){...})	// 鍵盤按下觸發的事件

**左鍵點擊的事件：click **

$('.c1').click(function () {
	$(this).css({backgroundColor:'green'})
})

獲取游標觸發的事件：focus —— 失去游標(焦點)觸發的事件：blur

<style>
    .c1{
        height: 100px;
        width: 100px;
        background: red;
    }
</style>

<div  ></div>
<input type="text">

<script>
    $('[type="text"]').focus(function () {			// 獲取游標事件
        $('.c1').css({backgroundColor:'green'})
    })

    $('[type="text"]').blur(function () {			// 失去游標事件
        $('.c1').css({backgroundColor:'red'})
    })
</script>

域內容發生改變時觸發的事件：change ——內容發生變化，input，select等

<select name="" id="d1">
    <option value="https://www.cnblogs.com/XiaoYang-sir/p/1">成都</option>
    <option value="https://www.cnblogs.com/XiaoYang-sir/p/2">北京</option>
    <option value="https://www.cnblogs.com/XiaoYang-sir/p/3">上海</option>
</select>

<script>
    $('#d1').change(function () {	
        console.log($(this).val())
    })
</script>

input 實時監聽事件：只要input框里面的值發生變化就觸發某個事件，input事件不能直接系結，必須用on系結才行

<input type="text" id="d1">

<script>
    $('#d1').on("input", function () {
        console.log($(this).val())
    })
</script>

滑鼠懸浮觸發的事件：hover

<style>
    .c1{
        height: 100px;
        width: 100px;
        background: red;
    }
</style>

<div ></div>

<script>
    $('.c1').hover(
        // 第一步：滑鼠放上去
        function () {$(this).css({backgroundColor: 'yellow'});},
        // 第二步：滑鼠移走
        function () {$(this).css({backgroundColor: 'red'});}
    )
</script>

滑鼠懸浮觸發的事件：mouseenter、mouseout——等同于hover

mouseover 和 mouseenter 的區別是：mouseover事件是如果該標簽有子標簽，那么移動到該標簽或者移動到子標簽時會連續觸發，mmouseenter事件不管有沒有子標簽都只觸發一次，表示滑鼠進入這個物件

<style>
    .c1{
        height: 100px;
        width: 100px;
        background: red;
    }
</style>

<div ></div>

<script>
    // 第一步：滑鼠放上去
    $('.c1').mouseenter(function () {
        $(this).css({backgroundColor: 'yellow'})
    })
    // 第二部：滑鼠移走
    $('.c1').mouseout(function () {
        $(this).css({backgroundColor: 'red'})
    })
</script>

鍵盤按下觸發的事件：keydown

$(window).keydown(function (e) {
    console.log(e.keyCode); 	//每個鍵都有一個keyCode值,通過不同的值來觸發不同的事件
})

鍵盤抬起觸發的事件：keyup

$(window).keyup(function (e) {
    console.log(e.keyCode);
})

移除事件：. off

.off( events [, selector ][,function(){}])

1.events： 事件
2.selector: 選擇器（可選的）
3.function: 事件處理函式


off() 方法移除用 .on()系結的事件處理程式，
$("li").off("click")；就可以了

事件冒泡

冒泡的意思就是因為HTML可以嵌套，如果你給兒子標簽系結了事件或者沒有系結點擊事件，父級標簽系結了點擊事件，那么你一點擊子標簽，不管子標簽有沒有系結事件，都會觸發父級標簽的點擊事件，如果有，會先觸發子標簽的點擊事件，然后觸發父級標簽的點擊事件，不管子標簽有沒有點擊事件，都會一級一級的往上找點擊事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1{
            background-color: red;
            height: 200px;
        }
        #d2{
            background-color: green;
            height: 100px;
            width: 100px;
        }
    </style>

</head>
<body>

<div id="d1">
    <div id="d2"></div>
</div>

<script src="https://www.cnblogs.com/XiaoYang-sir/p/jquery.js"></script>
<script>
    $('#d1').click(function () {
        alert('父級標簽');
    });
    $('#d2').click(function () {
        alert('子級標簽');
    });
</script>

</body>
</html>

阻止事件冒泡

就是為了阻止后續事件發生

1、return false；

$('#d1').click(function () {
    alert('父級標簽');
});
$('#d2').click(function () {
    alert('子級標簽');
    return false
});

2、e.stopPropagation( );

用事件物件的這個方法就能阻止冒泡 （Propagation：傳遞的意思）

$('#d1').click(function () {
    alert('父級標簽');
});
$('#d2').click(function (e) {	// 這個引數e(只是個形參)表示當前事件本身，這個事件也是一個物件
    alert('子級標簽');
    e.stopPropagation();
});

事件委托

事件委托是通過事件冒泡的原理，利用父標簽去捕獲子標簽的事件，給未來將要添加進來的某些子標簽自動系結上事件，

例一：沒有事件委托，只有第一個按鈕可以觸發事件，其他新添加的按鈕雖然 class=c1 但是不能觸發事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div >
    <button >添加按鈕</button>
</div>

<script src="https://www.cnblogs.com/XiaoYang-sir/p/jQuery.js"></script>
<script>
    $('.c1').click(function () {
        var btn = document.createElement("button");		// 新建button標簽
        btn.innerText = '添加按鈕';	
        btn.className = 'c1'		// 給新標簽添加class=c1
        $(this).after(btn);			// 把新標簽放在自己的后面
    })
</script>
</body>
</html>

列二：設定事件委托，每個新增按鈕都可以觸發事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div >
    <button >添加按鈕</button>
</div>

<script src="https://www.cnblogs.com/XiaoYang-sir/p/jQuery.js"></script>
<script>
    
    // 將 'button.c1' 選擇器中的標簽的點擊事件委托給了 $('div.cc')
    $('div.cc').on('click','button.c1',function () {
        var btn = document.createElement("button");
        btn.innerText = '添加按鈕';
        btn.className = 'c1'
        $(this).after(btn);
    })
</script>
</body>
</html>

六、補充

頁面載入

JS 代碼寫到head標簽和寫道 body 標簽下面的作用是不同的，寫在 head 標簽里面的話，如果你寫了操作某個標簽的內容的話，那個標簽還沒加載出來，先加載了你的 JS 代碼，就找不到這個標簽，所以不會生效，所以寫在 body 標簽最下面是一種解決辦法，但還有另外兩種方法：

方法一 ：等頁面上所有的元素都加載完，在執行這里面的 JS 代碼

缺點：如果你自己寫了兩個 JS 檔案，每個 JS 檔案中都有一個 window.onload 的話，那么后引入的檔案會把前面引入的檔案的 window.onload 里面的 JS 代碼全部覆寫掉，也會等到頁面上的檔案、圖片、視頻等所有資源都加載完才執行里面的 JS 代碼，加載比較慢

window.onload=function(){
    // JS的代碼
}

方法二（推薦）：不存在覆寫問題，而且只要檔案加載完就觸發，不需要等著一些圖片視頻什么的，加載 JS 效果的速度快，

// 寫法一：
$(document).ready(function(){
	// JS的代碼
})

// 寫法二：簡寫
$(function(){
	// JS代碼
})

$(document).ready 與 window.onload( ) 的區別

1、window.onload() 函式有覆寫現象，必須等待著圖片資源加載完成之后才能呼叫

2、$(document).ready 的這個入口函式沒有函式覆寫現象，檔案加載完成之后就可以呼叫（建議使用此函式）

影片效果

基本影片

show()	--> $('.c1').show(5000)	// 5秒之后顯示這個標簽，顯示程序有個影片
hide()	--> $('.c1').hide(5000)	// 5秒之后這個標簽消失，消失程序有個影片

滑動（拉窗簾一樣）

slideDown()		--> $('.c1').slideDown(5000)
slideUp()		--> $('.c1').slideUp(5000)
slideToggle()	--> $('.c1').slideToggle(5000)	// 前兩個互相切換

淡入淡出（控制透明度）

fadeIn()		-->$('.c1').fadeIn(5000)
fadeOut()		-->$('.c1').fadeOut(5000)
fadeTo()		-->$('.c1').fadeTo(5000,0.2)	// 0.2是最后顯示透明度
fadeToggle()	-->$('.c1').fadeToggle(5000)	// 前兩項互相切換

each 回圈

$.each (可迭代物件，function (k,v) { 迭代結果操作 } )

function 里面可以接受兩個引數，K 是索引，V 是每次回圈的具體元素，

實體一：獲取選中的值
<input type="checkbox" value="https://www.cnblogs.com/XiaoYang-sir/p/1">一
<input type="checkbox" value="https://www.cnblogs.com/XiaoYang-sir/p/2">二
<input type="checkbox" value="https://www.cnblogs.com/XiaoYang-sir/p/3">三
<input type="checkbox" value="https://www.cnblogs.com/XiaoYang-sir/p/4">四
<input type="checkbox" value="https://www.cnblogs.com/XiaoYang-sir/p/5">五

$.each($(':checkbox:checked'),function(k,v){
    console.log(k,v.value);
})

// 輸出
0 "2"
1 "4"
2 "5"

實體二：
var li =[10,20,30,40]
$.each(li,function(k, v){  
  console.log(k, v);
})

// 輸出
0 10
1 20
2 30
3 40

.each ( function (k,v) { 迭代結果操作 } )

描述：遍歷一個jQuery物件，為每個匹配元素執行一個函式，

K 是索引，V 是每次回圈的具體元素，

// 由于回呼函式是在當前DOM元素為背景關系的語境中觸發的，所以關鍵字 this 總是指向這個元素，
// 為每一個li標簽加class
$("li").each(function(){
  $(this).addClass("c1");
});

注意： jQuery的方法回傳一個jQuery物件，遍歷jQuery集合中的元素 -- 被稱為隱式迭代的程序，當這種情況發生時，它通常不需要顯式地回圈的 .each()方法：

也就是說，上面的例子沒有必要使用each()方法，直接像下面這樣寫就可以了：

$("li").addClass("c1");  	// 對所有標簽做統一操作

終止 each 回圈

在遍歷程序中可以使用 return false提前結束each回圈，

而直接使用return后面什么都不加，不寫false，就是跳過本次回圈的意思，

JS 和 jQuery 中的 for 回圈也是通過他們兩個來跳出當此回圈或者終止回圈

實體一：return false
var a = [1,2,3,4,5,6,7,8]
$.each(a, function(k,v){
    if (v > 3){			// 大于3就結束回圈
        return false;
    }else{
        console.log(v);
    }
});

// 輸出
1
2
3

實體二：return
var a = [1,2,3,4,5,6,7,8]
$.each(a, function(k,v){
    if (v > 2 && v < 7){	// 在2-7之間的數字就跳過回圈
        return false;
    }else{
        console.log(v);
    }
});

// 輸出
1
2
7
8

.data( ) 方法

任意 jQuery 物件都有 data 方法，可以保存任意值，可以用來代替全域變數

.data(key, value)：設定值

描述：在匹配的元素上存盤任意相關資料，

$("div").data("age",18);	//給所有div標簽都保存一個名為age，值為18

.data(key)：取值，沒有的話回傳undefined

描述: 回傳匹配的元素集合中的第一個元素的給定名稱的資料存盤的值

$("div").data("age");		//回傳第一個div標簽中保存的"age"的值

可以保存標簽

$('div.c1').data('a標簽',$('a.c2'));
$('.c1').data('a標簽').text();	-->百度

.removeData(key)：洗掉

描述：移除存放在元素上的資料，不加key引數表示移除所有保存的資料，

$('.c1').removeData('a標簽');		// 移除元素上存放’a標簽‘對應的資料

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/285926.html

標籤：jQuery

上一篇：jQuery常見事件的監聽方式

下一篇：實踐指南-網頁生成PDF

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C＃(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • IEEE1588PTP在數字化變電站時鐘同步方面的應用

    IEEE1588ptp在數字化變電站時鐘同步方面的應用 京準電子科技官微——ahjzsz 一、電力系統時間同步基本概況 隨著對IEC 61850標準研究的不斷深入，國內外學者提出基于IEC61850通信標準體系建設數字化變電站的發展思路。數字化變電站與常規變電站的顯著區別在于程序層傳統的電流/電壓互 ......

    uj5u.com 2020-09-10 03:51:52 more
  • HTTP request smuggling CL.TE

    CL.TE 簡介 前端通過Content-Length處理請求，通過反向代理或者負載均衡將請求轉發到后端，后端Transfer-Encoding優先級較高，以TE處理請求造成安全問題。 檢測 發送如下資料包 POST / HTTP/1.1 Host: ac391f7e1e9af821806e890 ......

    uj5u.com 2020-09-10 03:52:11 more
  • 網路滲透資料大全單——漏洞庫篇

    網路滲透資料大全單——漏洞庫篇漏洞庫 NVD ——美國國家漏洞庫 →http://nvd.nist.gov/。 CERT ——美國國家應急回應中心 →https://www.us-cert.gov/ OSVDB ——開源漏洞庫 →http://osvdb.org Bugtraq ——賽門鐵克 →ht ......

    uj5u.com 2020-09-10 03:52:15 more
  • 京準講述NTP時鐘服務器應用及原理

    京準講述NTP時鐘服務器應用及原理京準講述NTP時鐘服務器應用及原理 安徽京準電子科技官微——ahjzsz 北斗授時原理 授時是指接識訓通過某種方式獲得本地時間與北斗標準時間的鐘差，然后調整本地時鐘使時差控制在一定的精度范圍內。 衛星導航系統通常由三部分組成：導航授時衛星、地面檢測校正維護系統和用戶 ......

    uj5u.com 2020-09-10 03:52:25 more
  • 利用北斗衛星系統設計NTP網路時間服務器

    利用北斗衛星系統設計NTP網路時間服務器 利用北斗衛星系統設計NTP網路時間服務器 安徽京準電子科技官微——ahjzsz 概述 NTP網路時間服務器是一款支持NTP和SNTP網路時間同步協議，高精度、大容量、高品質的高科技時鐘產品。 NTP網路時間服務器設備采用冗余架構設計，高精度時鐘直接來源于北斗 ......

    uj5u.com 2020-09-10 03:52:35 more
  • 詳細解讀電力系統各種對時方式

    詳細解讀電力系統各種對時方式 詳細解讀電力系統各種對時方式 安徽京準電子科技官微——ahjzsz，更多資料請添加VX 衛星同步時鐘是我京準公司開發研制的應用衛星授時時技術的標準時間顯示和發送的裝置，該裝置以M國全球定位系統（GLOBAL POSITIONING SYSTEM,縮寫為GPS）或者我國北 ......

    uj5u.com 2020-09-10 03:52:45 more
  • 如何保證外包團隊接入企業內網安全

    不管企業規模的大小，只要企業想省錢，那么企業的某些服務就一定會采用外包的形式，然而看似美好又經濟的策略，其實也有不好的一面。下面我通過安全的角度來聊聊使用外包團的安全隱患問題。 先看看什么服務會使用外包的，最常見的就是話務/客服這種需要大量重復性、無技術性的服務，或者是一些銷售外包、特殊的職能外包等 ......

    uj5u.com 2020-09-10 03:52:57 more
  • PHP漏洞之【整型數字型SQL注入】

    0x01 什么是SQL注入 SQL是一種注入攻擊，通過前端帶入后端資料庫進行惡意的SQL陳述句查詢。 0x02 SQL整型注入原理 SQL注入一般發生在動態網站URL地址里，當然也會發生在其它地發，如登錄框等等也會存在注入，只要是和資料庫打交道的地方都有可能存在。 如這里http://192.168. ......

    uj5u.com 2020-09-10 03:55:40 more
  • [GXYCTF2019]禁止套娃

    git泄露獲取原始碼 使用GET傳參，引數為exp 經過三層過濾執行 第一層過濾偽協議，第二層過濾帶引數的函式，第三層過濾一些函式 preg_replace('/[a-z,_]+\((?R)?\)/', NULL, $_GET['exp'] (?R)參考當前正則運算式，相當于匹配函式里的引數 因此傳遞 ......

    uj5u.com 2020-09-10 03:56:07 more
  • 等保2.0實施流程

    流程 結論 ......

    uj5u.com 2020-09-10 03:56:16 more
最新发布
  • 使用Django Rest framework搭建Blog

    在前面的Blog例子中我們使用的是GraphQL, 雖然GraphQL的使用處于上升趨勢,但是Rest API還是使用的更廣泛一些. 所以還是決定回到傳統的rest api framework上來, Django rest framework的官網上給了一個很好用的QuickStart, 我參考Qu ......

    uj5u.com 2023-04-20 08:17:54 more
  • 記錄-new Date() 我忍你很久了！

    這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 大家平時在開發的時候有沒被new Date()折磨過？就是它的諸多怪異的設定讓你每每用的時候，都可能不小心踩坑。造成程式意外出錯，卻一下子找不到問題出處，那叫一個煩透了…… 下面，我就列舉它的“四宗罪”及應用思考 可惡的四宗罪 1. Sa ......

    uj5u.com 2023-04-20 08:17:47 more
  • 使用Vue.js實作文字跑馬燈效果

    實作文字跑馬燈效果，首先用到 substring()截取 和 setInterval計時器 clearInterval()清除計時器 效果如下： 實作代碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ......

    uj5u.com 2023-04-20 08:12:31 more
  • JavaScript 運算子

    JavaScript 運算子/運算子 在 JavaScript 中，有一些運算子可以使代碼更簡潔、易讀和高效。以下是一些常見的運算子： 1、可選鏈運算子（optional chaining operator） ?.是可選鏈運算子（optional chaining operator）。?. 可選鏈操 ......

    uj5u.com 2023-04-20 08:02:25 more
  • CSS—相對單位rem

    一、概述 rem是一個相對長度單位，它的單位長度取決于根標簽html的字體尺寸。rem即root em的意思，中文翻譯為根em。瀏覽器的文本尺寸一般默認為16px，即默認情況下： 1rem = 16px rem布局原理：根據CSS媒體查詢功能，更改根標簽的字體尺寸，實作rem單位隨螢屏尺寸的變化，如 ......

    uj5u.com 2023-04-20 08:02:21 more
  • 我的第一個NPM包:panghu-planebattle-esm(胖虎飛機大戰)使用說明

    好家伙,我的包終于開發完啦 歡迎使用胖虎的飛機大戰包!! 為你的主頁添加色彩 這是一個有趣的網頁小游戲包,使用canvas和js開發 使用ES6模塊化開發 效果圖如下: (覺得圖片太sb的可以自己改) 代碼已開源!! Git: https://gitee.com/tang-and-han-dynas ......

    uj5u.com 2023-04-20 08:01:50 more
  • 如何在 vue3 中使用 jsx/tsx?

    我們都知道,通常情況下我們使用 vue 大多都是用的 SFC(Signle File Component)單檔案組件模式,即一個組件就是一個檔案,但其實 Vue 也是支持使用 JSX 來撰寫組件的。這里不討論 SFC 和 JSX 的好壞,這個仁者見仁智者見智。本篇文章旨在帶領大家快速了解和使用 Vu ......

    uj5u.com 2023-04-20 08:01:37 more
  • 【Vue2.x原始碼系列06】計算屬性computed原理

    本章目標：計算屬性是如何實作的？計算屬性快取原理以及洋蔥模型的應用？在初始化Vue實體時，我們會給每個計算屬性都創建一個對應watcher，我們稱之為計算屬性watcher ......

    uj5u.com 2023-04-20 08:01:31 more
  • http1.1與http2.0

    一、http是什么 通俗來講，http就是計算機通過網路進行通信的規則，是一個基于請求與回應，無狀態的，應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行，否則無法連接。tcp(三次握手，四次揮手)。 請求與回應：客戶端請求、服務端回應資料。 無狀態 ......

    uj5u.com 2023-04-20 08:01:10 more
  • http1.1與http2.0

    一、http是什么 通俗來講，http就是計算機通過網路進行通信的規則，是一個基于請求與回應，無狀態的，應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行，否則無法連接。tcp(三次握手，四次揮手)。 請求與回應：客戶端請求、服務端回應資料。 無狀態 ......

    uj5u.com 2023-04-20 08:00:32 more

Copyright © 2010-2020 有解無憂