2. 程式人生 > >jQuery-樣式（jQuery選擇器）

jQuery-樣式（jQuery選擇器）

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

ID選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery選擇器之id選擇器</title>
    <style>
        div {
            width:100px;
            height:90px;
            float:left;
            padding:5px;
            margin:10px;
            background-color
 
: #838685;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div id="js">
    <p>div id="js"</p>
    <p>got you!</p>
</div>
<div id="jq">
    <p>div id="jq"</p>
    <p
 
>got you!</p>
</div>
<div id="no">
    <p>div id="no"</p>
    <p>got you!</p>
</div>
    <script type="text/javascript">
        var js = document.getElementById('js');
        js.style.border = '3px solid blue';
    </script>

    <script type
 
="text/javascript">
        $('#jq').css('border','3px solid red');
    </script>

</body>
</html>

類選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery類選擇器</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            float: left;
            padding: 5px;
            margin: 10px;
            background-color: #cccccc;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div class="js">
    <p>div id="js"</p>
    <p>got you!</p>
</div>
<div class ="jq">
    <p>div id="jq"</p>
    <p>got you!</p>
</div>
<div id="no">
    <p>div id="no"</p>
    <p>got you!</p>
</div>

<script type="text/javascript">
    <!--原生js處理-->
    var oDiv = document.getElementsByClassName('js');
    for(var i=0; i<oDiv.length; i++){
        oDiv[i].style.border = '3px solid green';
    }
</script>

<script type="text/javascript">
    <!--通過jQuery直接傳入類-->
    $('.jq').css('border','3px solid red');
</script>

</body>
</html>

元素選擇器

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        div {
            width: 100px;
            height: 90px;
            float: left;
            padding: 5px;
            margin: 5px;
            background-color: #EEEEEE;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div class="aaron">
    <p>class="aaron"</p>
    <p>選中</p>
</div>
<div class="aaron">
    <p>class="aaron"</p>
    <p>選中</p>
</div>
<div class="imooc">
    <p>class="imooc"</p>
    <p>jQuery選中</p>
</div>
<div class="imooc">
    <p>class="imooc"</p>
    <p>jQuery選中</p>
</div>

<script type="text/javascript">
    //通過原生方法處理
    //獲取到所有的節點標記名為div的元素
    //給每一個div加上綠色的邊框
    var divs = document.getElementsByTagName('div');
    for (var i = 0; i < divs.length; i++) {
        divs[i].style.border = "5px solid green";
    }
</script>
<script type="text/javascript">
    //通過jQuery直接傳入標籤名p
    //可以多個標籤，所以得到的同樣也是一個合集
    $('p').css("border", "5px solid red");
</script>

</body>

</html>

全選擇器

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>jQuery全選擇器</title>
    <style>
        div {
            width: 100px;
            height: 90px;
            float: left;
            padding: 5px;
            margin: 5px;
            background-color: #EEEEEE;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div class="aaron">
    <p>class="aaron"</p>
    <p>選中</p>
</div>
<div class="aaron">
    <p>class="aaron"</p>
    <p>選中</p>
</div>
<div class="imooc">
    <p>class="imooc"</p>
    <p>jQuery選中</p>
</div>
<div class="imooc">
    <p>class="imooc"</p>
    <p>jQuery選中</p>
</div>

<script type="text/javascript">
    <!--js原生方式-->
    //獲取頁面中所有的元素
    var elements1 = document.getElementsByTagName('*');
</script>
<script type="text/javascript">
    <!--jQuery方式-->
    //獲取頁面中所有的元素
    var elements2 = $('*');
    //原生與jQuery方法比較
    //===表示資料和型別都相等
    if(elements2.length === elements1.length){
        elements2.css("border","3px solid red");
    }
</script>
</body>

</html>

層級選擇器

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>jQuery層級選擇器</title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>

<!--
$( "parent > child" )
子選擇器：選擇所有指定“parent”元素中指定的"child"的直接子元素。

$("ancestor descendant")
後代選擇器：選擇給定的祖先元素的所有後代元素, 一個元素的後代可能是該元素的一個孩子，孫子，曾孫等

$("prev + next")
相鄰兄弟選擇器：選擇所有緊接在“prev”元素後的“next”元素

$("prev ~ siblings")
一般兄弟選擇器：匹配“prev”元素之後的所有 兄弟元素。具有相同的父元素，並匹配過濾“siblings”選擇器

相鄰兄弟選擇器和一般兄弟選擇器所選擇到的元素，必須在同一個父元素下!同一個父元素下!同一個父元素下!

層級選擇器都有一個參考節點！

-->

<h2>子選擇器與後代選擇器</h2>
<div class="left">
    <div class="aaron">
        <p>div下的第一個p元素</p>
    </div>
    <div class="aaron">
        <p>div下的第一個p元素</p>
    </div>
</div>
<div class="right">
    <div class="imooc">
        <article>
            <p>div下的article下的p元素</p>
        </article>
    </div>
    <div class="imooc">
        <article>
            <p>div下的article下的p元素</p>
        </article>
    </div>
</div>

<script type="text/javascript">
    //子選擇器
    //$('div > p') 選擇所有div元素裡面的子元素P
    $('div>p').css("border", "5px solid green");
</script>

<script type="text/javascript">
    //後代選擇器
    //$('div  p') 選擇所有div元素裡面的p元素
    $('div article').css("border", "5px solid red");
</script>


<h2>相鄰兄弟選擇器與一般兄弟選擇器</h2>
<div class="bottom">
    <div>兄弟節點div, +~選擇器不能向前選擇</div>
    <span class="prev">選擇器span元素</span>
    <div>span後第一個兄弟節點div</div>
    <div>兄弟節點div
        <div class="small">子元素div</div>
    </div>
    <span>兄弟節點span,不可選</span>
    <div>兄弟節點div</div>
</div>

<script type="text/javascript">
    //相鄰兄弟選擇器
    //選取prev後面的第一個的div兄弟節點
    $('.prev+div').css("border", "3px solid blue");
</script>

<script type="text/javascript">
    //一般相鄰選擇器
    //選取prev後面的所有的div兄弟節點
    $('.prev~span').css("border", "3px solid red");
</script>

</body>

</html>

這裡寫圖片描述

基本篩選選擇器

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>jQuery基本篩選選擇器</title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
<h2>基本篩選器</h2>
<h3>:first/:last/:even/:odd</h3>
<div class="left">
    <div class="div">
        <p>div:first</p>
        <p>:even</p>
    </div>
    <div class="div">
        <p>:odd</p>
    </div>
    <div class="div">
        <p>:even</p>
    </div>
    很多時候我們不能直接通過基本選擇器與層級選擇器找到我們想要的元素，
    為此jQuery提供了一系列的篩選選擇器用來更快捷的找到所需的DOM元素。
    篩選選擇器很多都不是CSS的規範，而是jQuery自己為了開發者的便利延展出來的選擇器

    <div class="div">
        <p>:odd</p>
    </div>
    <div class="div">
        <p>:even</p>
    </div>
    <div class="div">
        <p>div:last</p>
        <p>:odd</p>
    </div>
</div>
<script type="text/javascript">
    //找到第一個div
    $('.div:first').css("color", "#CD00CD");
</script>

<script type="text/javascript">
    //找到最後一個div
    $('.div:last').css("color", "#CD00CD");
</script>

<script type="text/javascript">
    //:even 選擇所引值為偶數的元素，從 0 開始計數
    $('.div:even').css("border", "3px groove red");
</script>

<script type="text/javascript">
    //:odd 選擇所引值為奇數的元素，從 0 開始計數
    $('.div:odd').css("border", "3px groove blue");
</script>


<h3>:eq/:gt/:lt</h3>
<div class="left">
    <div class="choose">
        <p>:lt(3)</p>
    </div>
    <div class="choose">
        <p>:lt(3)</p>
    </div>
    <div class="choose">
        <p>:eq(2)</p>
    </div>
    <div class="choose">
    </div>
    <div class="choose">
        <p>:gt(3)</p>
    </div>
    <div class="choose">
        <p>:gt(3)</p>
    </div>
</div>
<script type="text/javascript">
    //:eq
    //選擇單個
    $('.choose:eq(2)').css("border", "3px groove blue");
</script>

<script type="text/javascript">
    //:gt 選擇匹配集合中所有索引值大於給定index引數的元素
    $('.choose:gt(3)').css("border", "3px groove blue");
</script>

<script type="text/javascript">
    //:lt 選擇匹配集合中所有索引值小於給定index引數的元素
    //與:gt相反
    $('.choose:lt(2)').css("color", "#CD00CD");
</script>

<h3>:not</h3>
<div class="left">
    <div>
        <input type="checkbox" name="a" />
        <p>choose</p>
    </div>
    <div>
        <input type="checkbox" name="b" />
        <p>world</p>
    </div>
    <div>
        <input type="checkbox" name="c" checked="checked" />
        <p>others</p>
    </div>
</div>
<script type="text/javascript">
    //:not 選擇所有元素去除不匹配給定的選擇器的元素
    //選中所有緊接著沒有checked屬性的input元素後的p元素，賦予顏色
    $('input:not(:checked)+p').css("background-color", "#CD00CD");
</script>
</body>

</html>

內容篩選選擇器

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>jQuery內容篩選選擇器</title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>

<!--注意！-->

<!--1，:contains與:has都有查詢的意思，但是contains查詢包含“指定文字”的元素，has查詢包含“指定元素”的元素。-->

<!--2，如果:contains匹配的文字包含在元素的子元素中，同樣認為是符合條件的。-->

<!--3，:parent與:empty是相反的，兩者所涉及的子元素，包括文字節點-->

<!--<h2>內容篩選器</h2>-->
<h3>:contains/:has</h3>
<div class="left">
    <div class="div">
        <p>content</p>
    </div>
    <div class="div">
        <p>content</p>
    </div>
    <div class="div">
        <p>
            <span>:has</span>
        </p>
    </div>
    <div class="div">
        <p>content</p>
    </div>
</div>

<script type="text/javascript">
    //查詢所有class='div'中DOM元素中包含"contains"的元素節點
    //並且設定顏色
    $('.div:contains("content")').css("color", "#CD00CD");
</script>

<script type="text/javascript">
    //查詢所有class='div'中DOM元素中包含"span"的元素節點
    //並且設定顏色
    $('.div:has(span)').css("color", "blue");
</script>


<h3>:parent/:empty</h3>
<div class="left">
    <div class="aaron">
        <a>:parent</a>
    </div>
    <div class="aaron">
        <a>:parent</a>
    </div>
    <div class="aaron">
        <a>:parent</a>
    </div>
    <div class="aaron">
        <a></a>
    </div>
</div>
<script type="text/javascript">
    //選擇所有包含子元素或者文字的a元素
    //增加一個藍色的邊框
    $('a:parent').css("border", "3px groove blue");
</script>

<script type="text/javascript">
    //找到a元素下面的所有空節點(沒有子元素)
    //增加一段文字與邊框
    $('a:empty').text(":empty").css("border", "3px groove red");
</script>

</body>

</html>

可見性篩選選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery可見性篩選選擇器</title>
    <link rel="stylesheet" href="2-9.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>

隱藏一個元素的方式：
1，CSS display屬性的值為none。
2，type="hidden"的表單元素。
3，寬度和高度都顯式設定為0。
4，一個祖先元素是隱藏的，該元素是不會在頁面上顯示的。
5，CSS visibility的值是hidden。
6，CSS opacity的值是0。

<h2>可見性篩選選擇器</h2>
<h3>:visible/:hidden</h3>
<div class="left">
    <div class="div">
        <a>display</a>
        <p id="div1" style="display:none;">display</p>
    </div>
    <div class="div">
        <a>width</a>
        <a>height</a>
        <p id="div2" style="width:0;height:0">width/height</p>
    </div>
    <div class="div">
        <a>visibility</a>
        <a>opacity</a>
        <p id="div3" style="visibility:hidden;opacity:0">visibility</p>
    </div>
    <p id="show"></p>

    <script type="text/javascript">
        function show(ele){
            if(ele instanceof jQuery){
                $('#show').html('元素的長度：'+ ele.length)
            }else{
                alert(ele+' 不是jQuery物件')
            }
        }
    </script>


    <script type="text/javascript">
        show($('#div1:visible'));
    </script>

    <script type="text/javascript">
        show($('#div2:visible'));

    </script>
    <script type="text/javascript">
        show($('#div3:visible'));

    </script>

    <script type="text/javascript">
        show($('#div1:hidden'));

    </script>

    <script type="text/javascript">
        show($('#div2:hidden'));

    </script>

    <script type="text/javascript">
        show($('#div3:hidden'));

    </script>



</div>


</body>
</html>

屬性篩選選擇器

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>jQuery子元素篩選選擇器</title>
    <link rel="stylesheet" href="2-9.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

相關推薦

jQuery-樣式（jQuery選擇器）

ID選擇器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

jQuery基礎教程之強大的選擇器（層次選擇器）

無論何時，我們都要記住的一點就是通過jQuery選擇器獲取的jQuery物件任何時候都是一組元素。 而JQuery選擇器又具有這樣的特點：隱式迭代 $(“選擇器”).css(“background-color”,”red”)則是為這組元素中每個元素的樣式都加上紅色背景。j

html+css樣式來源及優先順序（包括選擇器）

一個頁面編寫過程中可能有多個樣式作用到同一元素身上，那麼，究竟採用哪種樣式，瀏覽器分析渲染時有自己的規則，以下提供常用的比較方法（數字越大，優先順序越小）： 一、樣式來源及優先順序 程式編寫： 1、！important（非樣式來源，編寫過程中提高優先順序方法，慎用） 2、行內 3、內部

html css層疊樣式基礎（常用選擇器）（三）

1.常用選擇器： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title

HTML5基礎加強css樣式篇（多媒體選擇器）（十七）

1印表機： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

PickerView的使用（時間選擇器）

前段時間，因業務整合，有個需求是把原來可以選擇年月日的彈窗改為僅選擇年月。 前期思路 重寫原生的DatePickerDialog，設定DatePickerDialog的樣式為年月日為滑動選擇，隱藏日的選擇，實現功能。 程式碼如下： import android.app

【Java學習】使用JColorChooser（顏色選擇器）

一、概述。 java.swing.JColorChooser(顏色選擇器)用於顏色的選擇、編輯等操作。 二、常用方法。 1.public JColorChooser() : 構造器，建立一個預設初始顏色為白色的顏色選擇器。 2.public JColorChooser( Color

前端筆記-04（CSS3選擇器）

E F 選擇E的所有後代為F的元素 E > F 選擇E的所有子代為F的元素 E + F 選擇和E相鄰的為F的兄弟元素 ，父元素必須相同 ** E ~ F** 選擇和E的所有的為F的兄弟元素 ，父元素必須相同 E[Alt] 選擇E的屬性中含有Alt的的元素

CSS之派生選擇器（上下文選擇器）

選擇器（selector）是CSS裡面非常重要地一部分知識。根據我暫時淺薄地理解，CSS就是對一份HTML程式碼裡面的元素進行運用各種樣式。所以，第一步就是要準確地定位你想要運用樣式的元素。CSS裡面通過各種選擇器來定位元素。 CSS裡面選擇器有很多種，今天就只想說說 “派生

css2.08_並集選擇器（分組選擇器）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css">

+和~（兄弟選擇器）

　1. + 選擇器 　　如果需要選擇緊接在另一個元素後的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器。  　　  　　比如： <style type="text/css"> h1 + p { margin-top:50px;

Android自定義DataTimePicker（日期選擇器）

package com.wwj.datetimepicker; import java.text.SimpleDateFormat; import java.util.Calendar; import android.app.Activity; import android.app.AlertDialog

微信小程式----picker選擇器（picker、省市區選擇器）（MUI選擇器）

效果圖 實現原理 利用微信小程式的picker元件，其中： 1，普通選擇器：mode = selector實現一級選擇例項； 2，省市區選擇器：mode = region實現省市區三級聯動； 3， 多列選擇器：mode

Java程序猿的JavaScript學習筆記（12——jQuery-擴展選擇器）

type write number article mat 我們 content ace val 計劃按例如以下順序完畢這篇筆記： Java程序猿的JavaScript學習筆記（1——理念） Java程序猿的JavaScript學習筆記（2——屬性復制和繼承） Jav

jquery過濾選擇器-----------（表單對象屬性過濾選擇器 與 表單選擇器）

images alt 分享 wid image logs jquery query 器） 1.表單對象屬性選擇器 　　 2.程序 3.表單選擇器 　　 jquery過濾選擇器-----------（表單對象屬性過濾選擇器 與 表單選擇器）

jQuery 學習筆記（3）（內容選擇器、attr方法、prop方法，類的操作）

節點 lec ddc 方法 pty 全部 如果 一個 所有 內容選擇器： 1、$("div:empty"): 空的div元素 2、$("div:parent"): 非空div元素 3、$("div:contains(text)"): 包含 text 文本（指定文本）的div

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

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

Jquery | 基礎 | 慕課網 | （*選擇器）

器） com lib meta margin jquer text nbsp itl 原生JS var elements1 = document.getElementsByTagName(‘*‘); JQ var elements2 = $("*"); 　　

jquery應用—— 查詢元素相關（選擇器）；

子元素選擇器： // 大前提： 所選的 都是 修飾div的... div 是它父元素（沒有限定）的第一個孩子嗎？是最後一個孩子嗎？是第index個孩子嗎？是唯一的孩子嗎？ $('div:first-child') // 匹配所有為第一個元素的div

Jquery簡單過濾選擇器（應用最廣泛的選擇器）

（1）Jquery中簡單過濾選擇器 jquery根據某一類過濾規則進行元素匹配，書寫時以：開頭，是Jquery中應用最為廣泛的選擇器 （2）簡單過濾選擇器的基本語法 ①first()或者：first 獲取第一個元素 ②last()或者：last