jQuery快速入门-优快云博客

本文介绍jQuery的基本概念、安装方法及常用的选择器。通过实例演示如何利用jQuery简化DOM操作、事件处理等任务，帮助初学者快速掌握jQuery的核心功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、简介

jQuery是一个javascript函数库，强调的理念是“写的少，做的多”。它概括起来，有以下优势：

1.轻量级；2.强大的选择器；3.出色的DOM操作的封装；4.可靠的事件处理机制；5.完善的Ajax；6.不污染顶级变量；7.出色的浏览器兼容性；8.链式操作方式；9.隐式迭代；10.行为层与结构层的分离；11.丰富的插件支持；12.完善的文档；13.开源

二、jQuery安装

下载jQuery库，然后按照路径引用
直接从网上引用

<!--百度CDN-->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!--新浪CDN-->
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>

三、文档就绪事件

可以直接将jQuery代码写在dom元素初始化之后
写文档就绪事件

$(document).ready(function(){
 
   // 开始写 jQuery 代码...
 
});

//上面代码的简洁写法
$(function(){
 
   // 开始写 jQuery 代码...
 
});

四、jQuery对象和DOM对象的相互转换

jQuery对象-->DOM对象：$("#id")[0]或者$("#id").get(0)
DOM对象-->jQuery对象：$(id)($()函数就是一个jQuery对象制造工厂)

五、jQuery选择器

<button class="btn">按钮</button>
<button id="btninfo" class="btn">按钮</button>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<h3>jquery</h3>

<ul class="menu">
    <h3>选择器0</h3>
    <li>选择器1</li>
    <li>选择器2
        <h3>h3测试</h3>
        <ul>
            <li>2-1</li>
            <li>2-2</li>
        </ul>
    </li>
    <li class="three">选择器3</li>
    <li>选择器4</li>
    <li>选择器5</li>
</ul>
<ul>
    <li>测试</li>
</ul>

<input type="text" disabled/>
<input type="radio" checked/>
<input type="password"/>
<input type="checkbox" checked/>
<input type="file"/>
<input type="button"/>
<input type="submit"/>
<input type="reset"/>
<select></select>
<textarea></textarea>

1.基本

#id

element

.class

*

selector1,selector2,selectorN

    console.log($("#btninfo"));
    console.log($("h3"));
    console.log($(".btn"));
    console.log($("*"));
    console.log($("#btninfo, h3"));

2.层级

ancestor descendant

parent > child

prev + next

prev ~ siblings

    console.log($('.menu li'));
    console.log($('.menu>li'));
    console.log($('.menu+ul'));
    console.log($('.three + li'));
    console.log($('.three~li'));

3.基本筛选器

:first

:last

:not(selector) 除了此选择器

:even 匹配所有索引值为偶数的元素，从 0 开始计数

:odd 匹配所有索引值为奇数的元素，从 0 开始计数

:eq(index) 根据索引匹配

:gt(index) 匹配索引大于此索引的元素

:lt(index) 匹配索引小于此索引的元素

:header 匹配h标签

:animated 获取正在执行动画的元素

:focus 获取获得焦点元素

    console.log($('.menu>li:first'));
    console.log($('.menu>li:last'));
    console.log($('li:first'));
    console.log($('li:not(.three)'));

    //$('.menu>li:even').css('color', 'red');
    //$('.menu>li:odd').css('color', 'blue');
    console.log($('.menu>li:even'));
    console.log($('.menu>li:odd'));

    //$('.menu>li:eq(1)').css('color', 'red');
    //根据索引匹配
    console.log($('.menu>li:eq(1)'));
    //匹配小于索引  大于
    //$('.menu>li:lt(2)').css('color', 'red');
    //$('.menu>li:gt(2)').css('color', 'blue')
    console.log($('.menu>li:lt(2)'));
    console.log($('.menu>li:gt(2)'));

    //匹配h标签
    console.log($('body :header'));
    //获取正在执行动画的元素
    console.log($(':animated'));

    //这个是获取获得焦点元素
    console.log($(':focus'));

4.内容

:contains(text) 匹配包含此文本的元素

:empty 匹配空元素即不包含子元素或者文本的元素

:has(selector) 匹配包含selector所选择元素的元素

:parent 匹配含有子元素或者文本的元素

    //$("li:contains(2)").css('color', 'red');
    //内容选择器
    console.log($("li:contains(2)"));
    console.log($(":empty"));
    //$('ul:has(.three)').css('color', 'blue');
    console.log($('ul:has(.three)'));
    //匹配的元素具有的子元素或者文本内容
    console.log($(':parent'));
    //$(':parent').css('color', 'red');

5.可见性

:hidden 匹配所有不可见元素，或者type为hidden的元素

:visible 匹配所有的可见元素

    console.log($('body :visible'));
    console.log($('body :hidden'));

6.属性

[attribute] 匹配包含给定属性的元素

[attribute=value] 匹配给定的属性是某个特定值的元素

[attribute!=value] 此选择器等价于 :not([attribute=value]) 要匹配含有特定属性但不等于特定值的元素，请使用[attr]:not([attr=value])

[attribute^=value] 匹配给定的属性是以某些值开始的元素

[attribute$=value] 匹配给定的属性是以某些值结尾的元素

[attribute*=value] 匹配给定的属性包含某些值的元素

[attrSel1][attrSel2][attrSelN] 复合属性选择器

    console.log($('input[type][value]'));
    console.log($('input[type=text]'));
    console.log($('input[type!=text]'));
    console.log($('input[type^=t]'));
    console.log($('input[type$=o]'));
    console.log($('input[type*=e]'));

7.子元素

:first-child 第一个必须是某元素才会选取

:first-of-type1.9+ 同类别中的第一个（可含多个）

:last-child

:last-of-type1.9+

:nth-child

:nth-last-child()1.9+

:nth-last-of-type()1.9+

:nth-of-type()1.9+

:only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配

:only-of-type1.9+

    //子元素选择器
    //$('li:first-child').css('color', 'red');
    console.log($('li:first-child'));
    console.log($('li:last-child'));
    $('li:first-of-type').css('color', 'red');
    //同类别里面去找最后一个和第一个
    console.log($('.menu>li:first-of-type'));
    console.log($('.menu>li:last-of-type'));


    console.log($('.menu>li:nth-child(2)'));
    console.log($('.menu>li:nth-of-type(2)'));
    //匹配的元素必须是父元素的唯一子集
    console.log($('ul:only-child'));
    console.log($('ul:only-of-type'));

8.表单

:input 匹配所有 input, textarea, select 和 button 元素

:text

:password

:radio

:checkbox

:submit

:image

:reset

:button

:file

    //$(':input').css('color', 'red');
    console.log($(':input'))
    console.log($(':checkbox'))
    console.log($(':radio'))
    console.log($(':submit'))
    console.log($(':reset'))
    console.log($(':checked'));
    console.log($(':disabled'));
    console.log($(':enabled'));

9.表单对象属性

:enabled

:disabled

:checked

:selected

    console.log($("input:disabled"));
    console.log($("input:enabled"));
    console.log($("input:checked"));
    console.log($("select option:selected"));

10.混淆选择器

$.escapeSelector(selector)3.0+ 这个方法通常被用在类选择器或者ID选择器中包含一些CSS特殊字符的时候

<div class=".box"></div>

此时用$("..box")选择会报错，所以有

    var c = $.escapeSelector('.box');//先将名字中的符号转义  再匹配
    //$('.' + c).css('color', 'red');
    console.log($('.' + c));