午夜美女网站,亚洲国产精品久久,成人av电影在线播放

導航首頁 ? 技術教程 ? 前端jquery部分很精彩

全站頭部文字我要出現在這里

前端jquery部分很精彩 706 2024-03-06

一、簡介
jQuery是一個兼容多瀏覽器的javascript庫，核心理念是write less,do more(寫得更少,做得更多)。jQuery在2006年1月由美國人John Resig在紐約的barcamp發布，吸引了來自世界各地的眾多JavaScript高手加入，由Dave Methvin率領團隊進行開發。如今，jQuery已經成為最流行的javascript庫，在世界前10000個訪問最多的網站中，有超過55%在使用jQuery。

二、選擇器
1.id選擇器

<body>
<div id="demo">我是一個div</div>
<script rel="script" src="http://www.gimoo.net/t/1903/jquery-2.2.3.min.js"></script>
<script>
$('#demo').css('color','red');
</script>
</body>

2.元素標簽名選擇器element

<body>
<div>我是一個div</div>
<div>我是一個div</div>
<div>我是一個div</div>
<h3>標題1</h3>
<h3>標題2</h3>
<h3>標題3</h3>
<h3>標題4</h3>
<script rel="script" src="http://www.gimoo.net/t/1903/jquery-2.2.3.min.js"></script>
<script>
$('div').css('color','red');
$('h3').css('color','red').css('font-size','30px');
</script>
</body>

3.類選擇器

<body>
<h3 class="demo">我是一個擁有class的h3</h3>
<h3 class="demo">我是一個擁有class的h3</h3>
<h3 class="demo" >我是一個擁有class的h3</h3>
<script rel="script" src="http://www.gimoo.net/t/1903/jquery-2.2.3.min.js"></script>
<script>
$('.demo').css('color','red');
</script>

4.*選擇器（匹配所有元素）

<body>
<div id="demo">我是一個div</div>
<div>我是一個div</div>
<div>我是一個div</div>
<div>我是一個div</div>
<h3>標題1</h3>
<h3>標題2</h3>
<h3>標題3</h3>
<h3>標題4</h3>
<h3 class="demo">我是一個擁有class的h3</h3>
<h3 class="demo">我是一個擁有class的h3</h3>
<h3 class="demo" >我是一個擁有class的h3</h3>
<script rel="script" src="http://www.gimoo.net/t/1903/jquery-2.2.3.min.js"></script>
<script>
$('*').css('color','red'); //選擇所有元素
<script>
</body>

5.群組選擇器

<body>
<div id="demo">我是一個div</div>
<h3>標題1</h3>
<h3 class="demobox">我是一個擁有class的h3</h3>
<script rel="script" src="http://www.gimoo.net/t/1903/jquery-2.2.3.min.js"></script>
<script>
$('#demo,.demobox,h3').css('color','red');
</script>
</body>

6.后代選擇器

<body>
<ul>
<li>
  <a>ul的li的a標簽</a>
  <a>ul的li的a標簽</a>
  <a>ul的li的a標簽</a>
</li>
</ul>
<script rel="script" src="http://www.gimoo.net/t/1903/jquery-2.2.3.min.js"></script>
<script>
$('ul li a').css('color','red');
</script>
</body>

6.指定選擇器

<body>
<div class="demo">class的div</div>
<p class="demo">class的p</p>
<div>普通div</div>
<script rel="script" src="http://www.gimoo.net/t/1903/jquery-2.2.3.min.js"></script>
<script>
$('div.demo').css('color','red');
</script>
</body>

7.子選擇器

<body>
<div id="demo">
<p>子p1</p>
<p>子p2</p>
<p>子p3</p>
<div>
  <p>孫子p1</p>
  <p>孫子p2</p>
  <p>孫子p3</p>
</div>
</div>
<script rel="script" src="http://www.gimoo.net/t/1903/jquery-2.2.3.min.js"></script>
<script>
$('#demo>p').css('color','red');
</script>
</body>

8.next(選擇器)

<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<div id="demo">div</div>
<P>p4</P>
<p>p5</p>
<p>p6</p>
<P>p7</P>
<script rel="script" src="http://www.gimoo.net/t/1903/jquery-2.2.3.min.js"></script>
<script>
//$('#demo').next('p').css('color','red'); //第一種方法
$('#demo+p').css('color','red');    //第二種方法
</script>
</body>

9.nextall(選擇器)

<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<div id="demo">div</div>
<P>p4</P>
<p>p5</p>
<p>p6</p>
<P>p7</P>
<script rel="script" src="http://www.gimoo.net/t/1903/jquery-2.2.3.min.js"></script>
<script>
//$('#demo').nextAll().css('color','red'); //第一種方法
 $('#demo~p').css('color','red'); //第二種方法
</script>
</body>

10.prev方法

<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<div id="demo">div</div>
<P>p4</P>
<p>p5</p>
<p>p6</p>
<P>p7</P>
<script rel="script" src="http://www.gimoo.net/t/1903/jquery-2.2.3.min.js"></script>
<script>
$('#demo').prev().css('color','red');
</script>  
</body>

11.prevall方法

<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<div id="demo">div</div>
<P>p4</P>
<p>p5</p>
<p>p6</p>
<P>p7</P>
<script rel="script" src="http://www.gimoo.net/t/1903/jquery-2.2.3.min.js"></script>
<script>
$('#demo').prevAll().css('color','red');
</script>
</body>

12.slbings()方法

<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<div id="demo">div</div>
<P>p4</P>
<p>p5</p>
<p>p6</p>
<P>p7</P>
<script rel="script" src="http://www.gimoo.net/t/1903/jquery-2.2.3.min.js"></script>
<script>
$('#demo').siblings().css('color','red');
</script>
</body>

三、篩選器（過濾選擇器）

濾器主要通過特定的過濾規則來篩選所需的 DOM 元素，和 CSS 中的偽類的語法類
：使用冒號(:)開頭。

1.基本篩選

查看圖片

$('li:first').css('background', '#ccc'); //第一個元素
$('li:last).css('background', '#ccc'); //最后一個元素
$('li:not(.red)).css('background', '#ccc'); //非 class 為 red 的元素
$('li:even').css('background', '#ccc'); //索引為偶數的元素
$('li:odd).css('background', '#ccc'); //索引為奇數的元素
$('li:eq(2)).css('background', '#ccc'); //指定索引值的元素
$('li:gt(2)').css('background', '#ccc'); //大于索引值的元素
$('li:lt(2)').css('background', '#ccc'); //小于索引值的元素
$(':header').css('background', '#ccc'); //頁面所有 h1 ~ h6 元素
focus 過濾器，必須是網頁初始狀態的已經被激活焦點的元素才能實現元素獲取。
而不是鼠標點擊或者 Tab 鍵盤敲擊激活的。
$('input').get(0).focus(); //先初始化激活一個元素焦點
$(':focus').css('background', 'red'); //被焦點的元素

：:first、:last 和 first()、last()這兩組過濾器和方法在出現相同元素的時候，first 會實現第一個父元素的第一個子元素，last 會實現最后一個父元素的最后一個子元素。所以，如果需要明確是哪個父元素，需要指明：
$('#box li:last').css('background', '#ccc'); //#box 元素的最后一個 li
//或$('#box li).last().css('background', '#ccc'); //同上

2.內容篩選器

查看圖片

//選擇元素文本節點含有 ycku.com 文本的元素
$('div:contains("ycku.com")').css('background', '#ccc');
$('div:empty').css('background', '#ccc'); //選擇空元素
$('ul:has(.red)').css('background', '#ccc'); //選擇子元素含有 class 是 red 的元素
$(':parent').css('background', '#ccc'); //選擇非空元素

jQuery 提供了一個名稱和:parent 相似的方法，但這個方法并不是選取含有子元素或文本
的元素，而是獲取當前元素的父元素，返回的是元素集合。

$('li').parent().css('background', '#ccc'); //選擇當前元素的父元素
$('li').parents().css('background', '#ccc'); //選擇當前元素的父元素及祖先元素
$('li').parentsUntil('div').css('background', '#ccc'); //選擇當前元素遇到 div 父元素停止

3.可見性過濾器

- 查看圖片

$('p:hidden).size(); //元素 p 隱藏的元素
$('p:visible').size(); //元素 p 顯示的元素

注意：:hidden 過濾器一般是包含的內容為：CSS 樣式為 display:none、input 表單類型為
type="hidden"和 visibility:hidden 的元素。

4.子元素過濾器

查看圖片

子元素過濾器的過濾規則是通過父元素和子元素的關系來獲取相應的元素。

$('li:first-child').css('background', '#ccc'); //每個父元素第一個 li 元素
$('li:last-child').css('background', '#ccc'); //每個父元素最后一個 li 元素
$('li:only-child').css('background', '#ccc'); //每個父元素只有一個 li 元素
$('li:nth-child(odd)').css('background', '#ccc'); //每個父元素奇數 li 元素
$('li:nth-child(even)').css('background', '#ccc'); //每個父元素偶數 li 元素
$('li:nth-child(2)').css('background', '#ccc'); //每個父元素第三個 li 元素

5.其他方法

查看圖片

四、基礎DOM和css操作

1.元素內容操作

查看圖片

在常規的 DOM 元素中，我們可以使用 html()和 text()方法獲取內部的數據。html()方法
可以獲取或設置 html 內容，text()可以獲取或設置文本內容。

$('#box').html(); //獲取 html 內容
$('#box').text(); //獲取文本內容，會自動清理 html 標簽
$('#box').html('<em>www.li.cc</em>'); //設置 html 內容
$('#box').text('<em>www.li.cc</em>'); //設置文本內容，會自動轉義 html 標簽

注意：當我們使用 html()或 text()設置元素里的內容時，會清空原來的數據。而我們期
望能夠追加數據的話，需要先獲取原本的數據。
$('#box').html($('#box').html() + '<em>www.li.cc</em>'); //追加數據
如果元素是表單的話，jQuery 提供了 val()方法進行獲取或設置內部的文本數據。

$('input').val(); //獲取表單內容
$('input').val('www.li.cc'); //設置表單內容

如果想設置多個選項的選定狀態，比如下拉列表、單選復選框等等，可以通過數組傳遞
操作。
$("input").val(["check1","check2", "radio1" ]); //value 值是這些的將被選定

2.元素屬性操作

查看圖片

除了對元素內容進行設置和獲取，通過 jQuery 也可以對元素本身的屬性進行操作，包
括獲取屬性的屬性值、設置屬性的屬性值，并且可以刪除掉屬性。

$('div').attr('title'); //獲取屬性的屬性值
$('div').attr('title', '我是域名'); //設置屬性及屬性值
$('div').attr('title', function () { //通過匿名函數返回屬性值
return '我是域名';
});
$('div').attr('title', function (index, value) { //可以接受兩個參數
return value + (index+1) + '，我是域名';
});

3.元素樣式操作

查看圖片

元素樣式操作包括了直接設置 CSS 樣式、增加 CSS 類別、類別切換、刪除類別這幾種操作方法。而在整個 jQuery 使用頻率上來看，CSS 樣式的操作也是極高的，所以需要重點掌握。

$('div').css('color'); //獲取元素行內 CSS 樣式的顏色
$('div').css('color', 'red'); //設置元素行內 CSS 樣式顏色為紅色
在需要設置多個樣式的時候，我們可以傳遞多個 CSS 樣式的鍵值對即可。

$('div').css({
'background-color' : '#ccc',
'color' : 'red',
'font-size' : '20px'
});

除了行內 CSS 設置，我們也可以直接給元素添加 CSS 類，可以添加單個或多個，并且
也可以刪除它。

$('div').addClass('red'); //添加一個 CSS 類
$('div').addClass('red bg'); //添加多個 CSS 類
$('div').removeClass('bg'); //刪除一個 CSS 類
$('div').removeClass('red bg'); //刪除多個 CSS 類

我們還可以結合事件來實現 CSS 類的樣式切換功能。

$('div').click(function () { //當點擊后觸發
$(this).toggleClass('red size'); //單個樣式多個樣式均可
});
.toggleClass()方法的第二個參數可以傳入一個布爾值， true 表示執行切換到class 類，false表示執行回默認 class 類(默認的是空 class)，運用這個特性，我們可以設置切換的頻率。
var count = 0;
$('div').click(function () { //每點擊兩次切換一次 red
$(this).toggleClass('red', count++ % 3 == 0);
});

4.css方法

jQuery 不但提供了 CSS 的核心操作方法，比如.css()、.addClass()等。還封裝了一些特殊功能的 CSS 操作方法，我們分別來了解一下。

查看圖片

$('div').width(); //獲取元素的長度，返回的類型為 number
$('div').width(500); //設置元素長度，直接傳數值，默認加 px
$('div').width('500pt'); //同上，設置了 pt 單位
$('div').width(function (index, value) { //index 是索引，value 是原本值
return value - 500; //無須調整類型，直接計算
});

查看圖片

$('div').height(); //獲取元素的高度，返回的類型為 number
$('div').height(500); //設置元素高度，直接傳數值，默認加 px
$('div').height('500pt'); //同上，設置了 pt 單位
$('div').height(function (index, value) { //index 是索引，value 是原本值
return value - 1; //無須調整類型，直接計算
});

查看圖片

alert($('div').width()); //不包含
alert($('div').innerWidth()); //包含內邊距 padding
alert($('div').outerWidth()); //包含內邊距 padding+邊框 border
alert($('div').outerWidth(true)); //包含內邊距 padding+邊框 border+外邊距 margin

查看圖片

$('strong').offset().left; //相對于視口的偏移
$('strong').position().left; //相對于父元素的偏移
$(window).scrollTop(); //獲取當前滾動條的位置
$(window).scrollTop(300); //設置當前滾動條的位置

以上就是本文的全部內容，希望對大家的學習有所幫助。

jquery

#免責聲明#

本站[綠夏技術導航]提供的一切軟件、教程和內容信息僅限用于學習和研究目的；不得將上述內容用于商業或者非法用途，否則，一切后果請用戶自負。本站信息來自網絡收集整理，版權爭議與本站無關。您必須在下載后的24個小時之內，從您的電腦或手機中徹底刪除上述內容。如果您喜歡該程序或內容，請支持正版，購買注冊，得到更好的正版服務。我們非常重視版權問題，如有侵權請郵件[admin@lxwl520.com]與我們聯系進行刪除處理。敬請諒解！

文章分類