实例

<!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`属性的元素)