「这是我参与2022首次更文挑战的第14天，活动详情查看：2022首次更文挑战」。

前言

大家好，我是程序猿小白 gw_Gw，很高兴能和大家一起学习进步。

以下内容部分来自于网络，如有侵权，请联系我删除，本文仅用于学习交流，不用作任何商业用途。

摘要

本文主要介绍Jquery的基本介绍和语法以及选择器的使用。

1. JQuery基本介绍

JQuery是JavaScript的框架也就是JavaScript的函数库，拥有对HTML元素和HTML事件，CSS元素和JavaScript动画等众多功能，极大的简化了我们对JavaScript的编程。

2. JQuery使用

要在项目种使用JQuery有以下两种方式：

下载到本地，引入到项目中。
通过CDN引入。

下载连接：jquery.com/download/

常用CDN链接：

Staticfile CDN：cdn.staticfile.org/jquery/1.12…

百度CDN：apps.bdimg.com/libs/jquery…

新浪CDN：lib.sinaapp.com/js/jquery/2…

谷歌CDN：ajax.googleapis.com/ajax/libs/j…

JQuery的每个版本都有两个压缩版(以.min.js结尾)和未压缩版(以.js结尾)供我们下载，两者功能完全相同，但是压缩版没有换行等格式，因此体积较小，方便我们开发时使用，未压缩版有良好的格式，方便我们与阅读源码，区别仅此而已。

引入Jquery语法如下：

<script src="本地目录或CDN链接"></script>

3. JQuery语法

JQuery语法是通过选取HTML元素来进行操作，格式如下：

$(selector).action()

参数说明：

$ 说明使用了JQuery，构造一个Jquery对象。

selector是对应的选择器的选择符。

action是对HTML元素的操作。

Jquery入口函数(文档就绪函数)：

$(document).ready(function(){
    Jquer代码
});

4. JQuery选择器

4.1 基本选择器

元素选择器：$("标签名") 获得所有相同标签名的元素
```
$("div"); //获取所有div标签
```
id选择器：$("#id") 获得此id名的元素
```
$("#id"); //获取id名为id的元素
```
类选择器：$(".类名") 获得指定类名的所有元素
```
$(".class1"); //获取使用了class1的元素
```

复合选择器：$("选择器1,选择器2...") 可以是以上三种选择器的组合。

$("span,#id,.class1"); //获取所有的span标签和id名为id的标签以及使用了class1的元素

4.2 层级选择器

后代选择器：$(" div p") 获取div下的所有p标签（包括子元素和孙子元素）
子选择器：$("div > p") 获取div下的儿子p标签 (只包括子元素，不包括孙子元素)
相邻元素选择器：$("div+p") 获取div后面得到第一个p元素，两者是兄弟元素且必须相邻，如果不相邻则为查找失败。

4.3 属性选择器

根据属性名称：$("input[name]") 获取包含name属性的input标签
根据属性名称和属性值：$("input[name='email']") 获取包含name属性且值为email的input标签
根据多个属性：$("input[name='email'] [value]") 获取包含name属性且值为email,并且包含value属性的input标签。

4.4 过滤选择器

选取第一个元素：$("div:first") 获得第一个div标签
选取最后一个元素：$("div:last") 获得最后一个div标签
选取指定元素之外的元素：$("div:not(.class1)") 获得所有class不为class1的div标签
选取偶数位置的元素：$("div:even") 获取偶数位置的div标签(从0开始)
选取奇数位置的元素：$("div:odd") 获得奇数位置的div标签(从0开始)
选取大于指定索引值的元素：$("div:gt(1)") 获得索引值大于1的div标签
选取小于指定索引值的元素：$("div:lt(2)") 获得索引值小于2的div标签
选取等于指定索引值的元素：$("div:eq(1)") 获得索引值等于1的div标签
选取所有标题：$(":header") 获得所有的标题

4.5 表单选择器

获取所有的input元素：$(":input")
获取所有的text元素：$(":text")
获取所有的radio元素：$(":radio")
获取所有的checkbox元素：$(":checkbox")
获取所有的button元素：$(":button")
获取所有的可用元素:$(":enable")
获取所有的不可用元素:$(":disabled")
获取所有的被选中的单选框或复选框:$(":checked")
获取所有的被选中的下拉框的元素:$(":selected")

小结

以上就是关于JQuery基础部分中JQuery简介，Jquery语法和JQuery各种选择器的基本介绍，希望对读者有所帮助，如有不正之处，欢迎留言指正。

JQuery入门——语法和选择器详解

前言

摘要