jQuery學習(1)——jQuery選擇器

阿新 • • 發佈：2018-12-12

jQuery選擇器

先看看w3cschool的對jQuery的概述:

jQuery 選擇器允許您對 HTML 元素組或單個元素進行操作。 jQuery 選擇器基於元素的 id、類、型別、屬性、屬性值等"查詢"（或選擇）HTML 元素。它基於已經存在的 CSS 選擇器，除此之外，它還有一些自定義的選擇器。 jQuery 中所有選擇器都以美元符號開頭：$()。

最常用的有以下三個：

1. 元素選擇器

$("div")

2. ID選擇器

$("#ID")

3. class選擇器

$(".test")

下面這個demo，包含了以上鍊接的例項練習：

<!DOCTYPE html> 

<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>jquery 選擇器學習</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js" 
></script>
    <script>
    $(document).ready(function(){
        $('*').css('font-size','30px');     //選取所有元素 設定字型

        $('#a').css('background','green');  //id選擇器 設定背景顏色 綠色
        // alert($('#a'));
        // alert(document.getElementById('a'));
        $('.b').css('background','blue'); 
   //.class選擇器 設定背景顏色 藍色

        $('p').css('background','yellow');  //元素選擇器 設定背景顏色 黃色

        $('#a span').css('border','2px solid yellow');      //後代選擇器 設定黃色邊框

        $('div:first').css('border','3px solid red');     //偽類選擇器 選擇第一個div  設定紅色邊框

        $('p.test').css('background','gray');   //選擇class為test的p元素
        
        //ul--------------------------

        $('ul li:first').css('border','2px solid red');  //選擇第一個ul的第一個li 設定紅色邊框
        
        $('ul li:last-child').css('color','green');     //選擇所有ul下的最後一個li 設定綠色字型
        
        $('[href]').html('我是帶href屬性元素');     //選擇帶href屬性的元素 修改元素內容為‘我是帶href屬性元素’

        $("a[target='_blank']").html("我是帶target='_blank'屬性的a標籤");    //選擇帶target='_blank'屬性的a標籤

        $(':button').css('background','green');     //選擇type=button的input,或者<button>標籤 設定綠色

        $('li:even').css('background','#999');    //選擇偶數位置的li 設定#333背景

        $('li:odd').css('background','pink');    //選擇偶數位置的li 設定#333背景

    })
    </script>
</head>
<body>
    <div id="a">
        A
        <span>span</span>
    </div>
    <div class="b">
        B
    </div>
    <p>p</p>
    <p class="test">選擇class為test的p元素</p>

    <hr>
    <ul>
        <li>0</li>
        <li>1</li>
        <li><a target="_blank">2</a></li>
        <li>3</li>
    </ul>
    <ul>
        <li>0</li>
        <li>1</li>
        <li><a href="#">2</a></li>
        <li>3</li>
    </ul>
    <input style="width:350px" type="button" value="我是type=button的input">
    <br>
    <button>button</button>
</body>
</html>

jQuery學習(1)——jQuery選擇器

jQuery選擇器先看看w3cschool的對jQuery的概述: jQuery 選擇器允許您對 HTML 元素組或單個元素進行操作。 jQuery 選擇器基於元素的 id、類、型別、屬性、屬性值

jQuery學習之基本選擇器、層次選擇器和並且選擇器

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>JQuery學習</title><script type="text/java

JQuery 總結（1）選擇器的使用

一注意： 1.DOM物件：通過原生js獲取的DOm物件（DOm樹上的節點就是，比如<li></li>） 2.jQuery物件：通過jQuery 選擇器獲取的 jQuery

jQuery學習筆記——jQuery選擇器練習

<!DOCTYPE html> <html> <head> <meta char

jQuery原始碼研究：選擇器模組所用方法(1)

Sizzle模組第二篇。順序看下去，看模組所用的方法。 2、createCache()方法，建立一個受限的鍵值對型別快取。返回的是一個函式， function createCache(){ var keys = []; function cache( key

jQuery-介紹加載選擇器樣式操作屬性操作綁定click事件

hid css var ref 完成 ntb 技術 win 排名 jQuery - 介紹加載選擇器樣式操作屬性操作綁定click事件註意：以下部分問題不能實現效果，因該是單詞拼寫錯誤(少個t)或者沒有加引號(“swing&rdquo

jquery的遍歷選擇器-隨機整理下

highlight nts ext 下一個 over tor evel andself block 我從w3c上截了一張圖，如圖所示：下面我們來詳細說一說。這些選擇器。 1.add() 方法將元素添加到匹配元素的集合中。例子： .add(selector) $("di

【jQuery】方法和選擇器的雙重使用詳解

節點使用詳解選擇器 query 除了 nbsp clas pos ren 1.jQuery選擇直接子節點+除了某個元素　　1》方法 $(".begon").children(".row:not(.moreDetail)") 　　2》選擇器 $(".begon

jQuery的12種選擇器

post pri 多個 index pmt nbsp 偶數 p標簽 dsr jQuery的12種選擇器 1、#id : 根據給定的ID匹配一個元素顯示（用加粗的代替顏色）：這是第一個p標簽 2、* : 匹配所有元素，多用於結合上下文來搜索顯示：這是p標簽

jQuery的介紹和選擇器詳解

markdown spa 結果過程問題 js對象 -m 版本分享圖片本文最初發表於博客園，並在GitHub上持續更新前端的系列文章。歡迎在GitHub上關註我，一起入門和進階前端。以下是正文。 jQuery 的介紹引入 jQuery 的原因在用 js

JQuery 和 CSS 等選擇器：

com alt 技術分享 bsp mage img mic jquery jquer JQuery 選擇器： CSS 選擇器： JQuery 和 CSS 等選擇器：

JQuery實現子級選擇器

AR jquer 技術分享 scrip head sca gin document device 效果圖如下： HTML代碼如下： <!DOCTYPE html> <html lang="en"> <head> <met

JQuery實現父級選擇器(廣告實現)

ont highlight .com jquery實現 src absolute content 1.0 utf-8 效果圖如下： HTML代碼如下： <!DOCTYPE html> <html lang="en"> <head>

jQuery的簡單用法（jQuery的簡介，選擇器，屬性和css,文檔處理）

isa isp 3.6 大於 doc ie6 tab append 需要一、jQuery簡介 1.1. JS庫 JavaScript 庫封裝了很多預定義的對象和實用函數。能幫助使用者建立有高難度交互客戶端頁面, 並且兼容各大瀏覽器。 1.2. 當前流行的 JavaSc

Jquery | 基礎 | 使用 jQuery 表單過濾選擇器

提交按鈕密碼框 1.0 doc nal gid 過濾選擇器 ffffff <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DT

jQuery入口函式及選擇器 - 01

1.什麼是jQuery？ 1.1 jQuery介紹 jQuery是一個輕型、快速的、小巧的功能豐富的JavaScript類庫。本質就是一堆js的函式的組合。對原生DOM操作做了一些非常有用的封裝，可以讓開發人員更簡單、更方便、更統一的對DOM進行操作，比如：封裝了事件相關統一操作api、DO

jQuery中的一些選擇器

① CSS選擇器選擇器語法示例標籤選擇器 D{CSS} td{font-size:14px;}ID選擇器 #ID{CSS} #header{font-size:14px;}類選擇器 D.calssName{Css} .dream{font-size:14px;}群組選擇器 E1,E2,E3{CSS} t

Java Web開發(五) JavaScript庫jQuery學習(3) jQuery與Ajax的應用(1)

關於jQuery選擇器的知識這裡就先不介紹了，這裡向大家介紹一種比較厲害的技術，就是jQuery的Ajax應用，哈哈哈，我們當然先了解一些先進的技術啦，之後再為大家介紹jQuery選擇器和其他知識。現在讓我們進入強大的jQuery的Ajax應用學習中吧。

jQuery中的過濾選擇器

1.：first //第一個子元素 2.：last //最後一個子元素 3.：odd(index) //索引值為奇數的子元素 4.：even(index) //索引值為偶數的子元素 5.：lt(index) //索引值大於index的子元素 6.：gt(index) //索引值小於index

jQuery容易忽略的選擇器

選擇器：偽類選擇器（標籤+一個英文冒號） $("ul li:eq(3)") $("li:even") $("li:odd") 表單選擇器（一個英文冒號+表單屬性） $(":checkbox") $(":checked") $(":text") 3

jQuery學習(1)——jQuery選擇器

jQuery選擇器

下面這個demo，包含了以上鍊接的例項練習：

相關推薦