jQuery

概念

jQuery：是JavaScript的一個庫，

它對JavaScript的相關操作進行了封裝：

遍歷HTML檔案、操作DOM、事件處理、Ajax等

書寫代碼也比JavaScript原來的寫法簡便許多，

使用方式

（1）引入jQuery庫：

<script src="jquery.js"></script>

這里的jQuery檔案可以在jQuery官網上自行下載檔案，

（2）撰寫jQuery的入口函式：

$(docunent).ready(function(){
	js代碼
})

也可以簡寫為：

$(function(){
	js代碼
})

注意：'$'代表jQuery，

jQuery選擇器

優點

（1）簡潔的寫法

例如：$('#id')

（2）完善的時間處理機制

jQuery獲取網頁中的元素即使不存在也不會報錯，

基本選擇器

id選擇器：#id
類選擇器：.class
標簽名選擇器：
*：匹配所有元素

例如：

<p id="xy">西安</p>
<div class="dv">江南</div>
<div>云南</div>

var flag={
    'color':'red',
    'fontSize':'35px',
    'backgroundColor':'pink',
    'width':'200px',
    'height':'100px'
}
$(function(){
    $('#xy').css('color','red')   //id選擇器

    $('.dv').css(flag)    //類選擇器
    var arr=$('div')   //標簽選擇器
    console.log(arr)
})

在這里插入圖片描述

基本過濾選擇器

Element:first ：選取第一個元素
Element:last : 選取最后一個元素
Element:not(selector)：去除所有與給定選擇器匹配的元素
Element:even ：選取所有索引為偶數的元素，索引從0開始
Element:odd ：選取所有索引為奇數的元素，索引從0開始
Element:eq(index)：選取索引等于index的元素，索引從0開始
Element:gt(index)：選取索引大于index的元素，索引從0開始
Element:lt(index) ：選取索引小于index的元素，索引從0開始
header ：選取索引的標題標簽

例如：

為指定的元素設定css樣式

<div>西游記</div>
<div>三國演義</div>
<div>水滸傳</div>
<div>紅樓夢</div>

$(function(){
   $('p:first').css('backgroundColor','#bbffaa')   //第一個p標簽

   $('div:last').css('color','#bbffaa')   //最后一個div的標簽

   $('p:not("#nj")').css('color','red')   //將所有id不是nj的p標簽的文字變為紅色

   $('tbody>tr:even').css('backgroundColor','#bbffaa')  //選擇tbody下所有索引為偶數的行(tr),索引從0開始

   $('tbody>tr:odd').css('backgroundColor','#ccc')  //索引為奇數的

   $('tbody>tr:eq(3)').css('color','red')    //索引為3的一行（第四行）文字顏色變為紅色

   $('div:gt(2)').css('color','blue')

   $('div:lt(3)').css('fontSize','35px')

在這里插入圖片描述

屬性過濾選擇器

Element[attribute]：選取擁有此屬性的選擇器
Element[attribute=value]：選取指定屬性值為value的元素
Element[attribute!=value]：選取指定屬性值不等于value的元素
Element[attribute^=value]：選取指定屬性值以value開始的元素
Element[attribute$=value]：選取指定屬性值以value結束的元素
Element[attribute*=value]：選取指定屬性值中含有value的元素

例如：

<p id="bbff">*********</p>
<p id="bbee">^^^^^^^^^</p>
<p id="abc">*********</p>

$(function(){
    $('label[for]').css('color','red')   //選取擁有for屬性的label標簽

    $('input[type="password"]').css('color','red')   //選取type="password"的input標簽
    $('input[type!="password"]').css('color','blue')  //選取type不等于"password"的input標簽
    $("p[id^='bb']").css('backgroundColor','#bbffaa') //選取id以bb開頭的p標簽

    $("p[id$='c']").css('backgroundColor','pink')    //選取id以c結尾的p標簽

    $("p[id*='b']").css('fontSize','35px')          //選取id中包含b的p標簽
})

效果：
在這里插入圖片描述

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

標籤：其他

上一篇：JavaScript入門第二章（變數宣告/賦值/取值）

下一篇：前端框架Vue學習

jQuery與jQuery選擇器及練習

目錄