博主信息
小人物的博客
博文
40
粉絲
0
評論
0
訪問量
3295
積分:0
P豆:83

体彩新疆十一选五开奖走势图:jQuery基本語法--2019-05-21

2019年05月21日 18:42:33閱讀數:316博客 / 小人物的博客 / php

實例

 新疆十一选五预测号码今天 www.envkt.com <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery語法基礎 0520作業</title>
</head>
<body>
<ul>
    <li id="li1">item1</li>
    <li id="li2">item2</li>
    <li class="lis">item3</li>
    <li class="lis">item4</li>
    <li id="li3">item5</li>
</ul>


<script src="static/js/jquery-3.4.1.js"> </script>
<script>
    // DOM對象與jQuery對象之間的互相轉換
    // 1. $(): 將DOM對象轉為jQuery對象
    $('ul li:nth-of-type(3)')
        .css('color','red');


    // 2.將jQuery對象轉為DOM對象
    var lis = $('li');
    console.log(lis);
    lis[4].innerHTML='選擇了item5';

    //常用選擇器
    //id選擇器
    $('#li1').css('background','lightgreen');
    //類選擇器
    $('.lis').css('background','lightblue');
    //全部選擇
    $('*').css('font-size','120%')
    //獲取第一個元素
    $('li:first').css('color','yellow')
</script>

</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

jQuery基本語法:

  1. $() 基本用法

    * 選擇元素
    * 創建元素
    * 包裝元素
    * 執行回調

  2. DOM對象與jQuery對象的相互轉換

    * DOM轉jQuery: $()
    * jQuery轉DOM: $()[], $().get()

  3. 常用選擇器

    ### 3.1 基本選擇器

    * `#id`: ID選擇器
    * `element`: 元素/標簽選擇器
    * `.class`: 類/class選擇器
    * `*`: 通配選擇器
    * `selector1,selector2,selectorN`: 群組選擇器

    ### 3.2 層級選擇器

    * `ancestor descendant`: 后代選擇器, 中間用空格分隔
    * `parent > child`: 子選擇器
    * `prev + next`: 相鄰下一個兄弟元素
    * `prev ~ siblings`: 相鄰后面的所有兄弟元素

    ### 3.3 基本篩選器

    * `:first`: 獲取第一個元素
    * `:not(selector)`: 從集合中去掉指定的元素
    * `:even`: 匹配集合中索引為偶數的元素(從0開始)
    * `:odd`: 匹配集合中索引為奇數的元素(從0開始)
    * `:eq(index)`: 匹配指定索引的元素
    * `:gt(index)`: 匹配所有大于指定索引的元素
    * `:lang`: 匹配指定語言的元素
    * `:last`: 匹配最后一個元素
    * `:lt(index)`: 匹配所有小于指定索引的元素
    * `:header`: 匹配類似`<h1>,<h2>,<h3>...`標題元素
    * `:animated`: 匹配所有正在執行動畫的元素
    * `:focus`: 匹配當前獲取焦點的元素
    * `:root`: 獲取當前文檔根元素,html文檔永遠是`<html>`

    ### 3.4 內容篩選器

    * `:contains(text)`: 返回包含指定文本的元素
    * `:empty`: 返回不包含任何子元素或文本的元素
    * `:has(selector)`: 返回包含有指定元素(由選擇器設置)的元素
    * `:parent`: 匹配含有子元素或文本的元素(非空元素)

    ### 3.5 可見性選擇器

    * `:hidden`: 獲取所有不見的元素或`type="hidden"`的元素
    * `:visible`: 匹配所有可見元素

    ### 3.6 屬性選擇器

    * `[attribute]`: 匹配包含指定屬性的元素,如`$('p[id]')`
    * `[attribute=value]`: 匹配屬性等于指定值的元素,`$('p[id="news"]')`
    * `[attribute!=value]`:匹配屬性不等于指定值的元素,`$('p[id!="news"]')`
    * `[attribute^=value]`: 匹配屬性以指定文本開始的元素,`$('p[id^="pre"]')`
    * `[attribute$=value]`: 匹配屬性以指定文本結束的元素,`$('p[id$="pre"]')`
    * `[attribute*=value]`: 匹配屬性包含指定文本的元素,`$('p[id*="pre"]')`
    * `[attrSel1][attrSel2][attrSelN]`:匹配同時滿足多個屬性選擇器的元素,是前面的復合

    ### 3.7 子元素選擇器

    * `:first-child`: 匹配指定元素的第一個子元素, 如`$('ul :first-child')`
     * 注: 與`:first`不同, 可能會匹配到多個父級的第一個子元素,類似`:nth-child(1)`
    * `:first-of-type`: 與上面的類似,但多個元素的類型限制,`$('div p:first-of-type')`
    * `:last-child`: 匹配指定元素的最后一個子元素, 如`$('ul :last-child')`
    * `:last-of-type`:與上面的類似,但多個元素的類型限制,`$('div p:last-of-type')`
    * `:nth-child()`: 匹配父元素下指定索引的元素(從1開始),`$('ul :nth-child(2)')`
    * `:nth-last-child()`: 匹配父元素下倒數索引的元素, `$('ul :nth-last-child(3)')`
    * `:nth-last-of-type()`: 與前一個相比,多了元素類型限制
    * `:nth-of-type()`: 功能與`:nth-child()`類似,但多了元素類型限制,`:`前加選擇器名
    * `:only-child`: 匹配父元素下唯一子元素, `$('div :only-child')`
    * `only-of-type`: 匹配父元素下唯一指定類型的子元素,`$('div p:only-of-type')`

    ### 3.7 表單選擇器

    #### 3.7.1 控件類型選擇器

    > 選擇器名稱與控件中的`type`屬性值對應, 如`type="text"`,就用`:text`表示

    * `:input`: 匹配`<input>, <textarea>, <select>, <button>`元素
    * `:text`: 匹配`<input type="text">`的元素, 即所有單行文本框
    * `:password`: 匹配所有密碼框元素,`<input type="password">`
    * `:radio`:  匹配所有單選按鈕元素,`<input type="radio">`
    * `:checkbox`: 匹配所有復選框元素, `<input type="checkbox">`
    * `:submit`: 匹配提交按鈕,因為`<button>`默認`type="submit"`,所以總會匹配
    * `:image`: 匹配所有圖像域控件`<input type="image">`
    * `:reset`: 返回重置按鈕控件`<input type="reset">`
    * `:button`: 返回所有按鈕控件`<input type="button">`
    * `:file`: 返回所有的文件上傳域控件`<input type="file">`
    * `:hidden`: 返回隱藏域控制`<input type="hidden">`

    > **特別提示:**

    * 該選擇器是jQuery獨有,非CSS規范,無法利用原生DOM的性能優勢
    * 屬于過時的選擇器, 推薦使用`[type="類型"]`替代
    * 如果仍想使用該選擇器, 推薦使用`.filter(':input/:text...')`代替

    ### 3.7.2 控件狀態選擇器

    * `:enabled`: 匹配表單中所有有效的元素(無`disabled`屬性)
    * `:disabled`: 匹配所有禁用的元素
    * `:checked`: 匹配復選框,單選框中的被選中的元素(具有`checked`屬性的元素)
    * `:selected`: 匹配下拉列表中被選中的元素(具有`selected`屬性的元素)

批改狀態:未批改

老師批語:

全部評論

文明上網理性發言,請遵守新聞評論服務協議

條評論
暫無評論暫無評論!