JQuery(一)---樣式篇

一:JQuery下載地址

       jQuery是一個JavaScript腳本庫,不需要特別的安裝,只需要我們在頁面 <head> 標籤內中,通過 script 標籤引入 jQuery 庫即可。

二:JQuery的各個樣式

     1. helloword初體驗

<html>
<head>
    <title>第一個簡單的jQuery程序</title>
    <style type="text/css">
        div {
            padding: 8px 0px;
            font-size: 12px;
            text-align: center;
            border: solid 1px #888;
        }
    </style>

    <!-- 你下載的JQuery地址-->
    <script src="E:\SC_informaion\Jquery\jquery-3.4.1\jquery-3.4.1.js"></script>
<script type="text/javascript">
        $(document).ready(function() {
            $("div").html("你好,歡迎第一次使用JQuery!!");
        });
  </script>

</head>
<body>
    <div>123421</div>
</body>
</html>

其中 $(document).ready 的作用是等頁面的文檔(document)中的節點都加載完畢後,再執行後續的代碼,因爲我們在執行代碼的時候,可能會依賴頁面的某一個元素,我們要確保這個元素真正的的被加載完畢後才能正確的使用。

2.JQuery和DOM對象的區別

普通處理,通過標準JavaScript處理,通過document.getElementById("")方法獲取的dom元素就是一個DOM對象,在通過innerHTML與style屬性處理文本與顏色。

JQuery處理(var $p=$('')),通過$('')的方法獲取一個$p的對象,然後$p是一個類數組對象,這個方法與上面的處理結果是一模一樣的。

3.JQuery對象轉化成DOM對象

利用數組下標的方式

var $div=$('div') //JQuery對象 

var div=$div[0]//轉化爲JSON對象

div.style.color="red"; //操作dom對象的屬性

通過JQuery自帶的get()方法

var $div=$('div')

var div=$div.get(0)

div.style.color='red';

<body>
    <div id="doc1">qwq</div>
    <div id="doc2">ewrw</div>
    <div id="doc3">wew</div>
    <script type="text/javascript">
        var $div = $('div'); //jQuery對象
        var div = $div.get(2);
        div.style.color = 'red'; //操作dom對象的屬性
    </script>
</body>

 DOM對象轉化爲JQuery對象

var div=document.getElementsByTagName('div');

var $div=$(div);

var $first=$div.first();      //找到第一個div元素
$first.css('color','red');    //給第一個元素設置顏色

三:JQuery選擇器

1. id選擇器--    $( "#id" )

注:id是唯一的,每個id值在一個頁面中只能使用一次。如果多個元素分配了相同的id,將只匹配該id選擇集合的第一個DOM元素。但這種行爲不應該發生;有超過一個元素的頁面使用相同的id是無效的

2. 類選擇器--    $(".class")

注: 獲取所有class名的dom

3. 元素選擇器--  $("element")

注://通過jQuery直接傳入標籤名p
    //標籤是可以多個的,所以得到的同樣也是一個合集
    $("div").css("border", "3px solid red");

4. 全選擇器--  $("*")

5. 層級選擇器

    $("parent>child")   子選擇器,選擇parent下的直接child子元素

    $("ancestor descendant")  後代選擇器,選擇ancestor裏面的所有後代

    $("prev +next")  相鄰兄弟選擇器,選擇緊跟在prev後面的元素

    $("prev ~sibling")  一般兄弟選擇器,匹配prev之後的所有sibling元素並且屬於同一個父親

6. 基本篩選選擇器

    $(':first')  --  匹配第一個元素

    $(':last')  --  匹配最後一個元素

    $(':not(selector)')  --  一個 用來過濾的選擇器,選擇所有元素取出不匹配給定的選擇器元素

    $(':eq(index)')  --  在匹配集中選擇索引值爲index的元素

7.內容文本選擇器

8. 可見性選擇篩選器

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章