jQuery介绍与基本语法，选择器

浅浅的花香味﹌ 2022-05-13 07:18 363阅读 0赞

**1.jQuery介绍**

**1.1JS类库**  
JavaScript 库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互客户端页面, 并且兼容各大浏览器。

**1.2当前流行的 JavaScript 库有：**

*  jQuery ，最流行
 *  EXT\_JS，2.0开始收费
 *  Dojo ，很多js单独文件，优化：打包。（常见：开发小图标，一张图片）
 *  Prototype，对js扩展，框架开发。
 *  YUI(Yahoo! User Interface) ，taobao之前使用。
 *  淘宝UI：[http://docs.kissyui.com/][http_docs.kissyui.com]
 *  Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。基于jQuery 一个UI工具

**1.3jQuery介绍**

*  JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。
 *  轻量级：依赖程序少，占用的资源的少
 *  特点：js代码和html代码分离
 *  jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。
 *  由美国人John Resig在2006年1月发布
 *  jQuery是免费、开源的
 *  jQuery分类：  
    WEB版本：我们主要学习研究  
    UI版本：集成了UI组件  
    mobile版本：针对移动端开发  
    qunit版本：用于js测试的

**1.4版本介绍**  
![这里写图片描述][70]  
![这里写图片描述][70 1]

**1.5优点**

*  核心理念是write less,do more(写得更少,做得更多)  
    ![这里写图片描述][70 2]
 *  轻量级：源码1.11.js大小是286kb，压缩班1.11.min.js大小是94.1k。如果使用GZIP压缩更小。
 *  兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）
 *  jQuery的语法设计可以使开发者更加便捷
 *  例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能
 *  jQuery能够使用户的html页面保持代码和html内容分离
 *  不用再在html里面插入一堆js来调用命令了，只需要定义id即可
 *  jQuery提供API让开发者编写插件，有许多成熟的插件可供选择
 *  文档说明很全
    
    **2.基本语法**

**2.1jQuery语法**

**2.2jQuery对象和dom对象转换**

**3.选择器**

**3.1基本【掌握】**  
![这里写图片描述][70 3]  
\#id ， id选择器，`<xxx id="">` 通过id值获得元素  
element，标签选择器，`<xxx>` 通过标签名获得元素  
.class ，类选择器，`<xxx class="">` 通过class值获得元素。注意：使用点开头  
s1,s2,… 多选择器，将多个选择器的结果添加一个数组中。  
\* 所有

**3.2层级**  
![这里写图片描述][70 4]  
A B ，获得A元素内部所有的B后代元素。（爷孙）  
A > B ，获得A元素内部所有的B子元素。（父子）  
A + B ，获得A元素后面的第一个兄弟B。（兄弟）  
A ~ B ，获得A元素后面的所有的兄弟B。（兄弟）

**3.3基本过滤**

过滤选择器格式 “：关键字”  
![这里写图片描述][70 5]  
:first , 第一个  
:last ,最后一个  
:eq(index) ，获得指定索引  
:gt(index) 大于  
:lt(index) 小于  
:even 偶数，从 0 开始计数。例如：查找表格的1、3、5…行（即索引值0、2、4…）  
:odd 奇数  
:not(selector) 去除所有与给定选择器匹配的元素  
:header 获得所有标题元素。例如：`<h1>...<h6>`  
:animated 获得所有动画  
:focus 获得焦点

**3.4内容过滤**  
![这里写图片描述][70 6]  
:empty 当前元素是否为空（是否有标签体–子元素、文本）  
:has(…) 当前元素，是否含有指定的子元素  
:parent 当前元素是否是父元素  
:contains( text ) 标签体是否含有指定的文本

**3.5可见性过滤\[掌握\]**  
![这里写图片描述][70 7]  
:hidden 隐藏。特指 `<xxx style="display:none;">` ，获得 `<input type="hidden">`  
:visible 可见（默认）

**3.6属性【掌握】**  
![这里写图片描述][70 8]  
\[属性名\] 获得指定的属性名的元素  
\[属性名=值\] 获得属性名 等于 指定值的 的元素【1】  
\[属性名!=值\] 获得属性名 不等于 指定值的 的元素  
\[as1\]\[as2\]\[as3\]…. 复合选择器，多个条件同时成立。类似 where …and…and【2】  
\[属性名^=值\] 获得以属性值 开头 的元素  
\[属性名$=值\] 获得以属性值 结尾 的元素  
\[属性名\*=值\] 获得 含有属性值 的元素

**3.7子元素过滤**  
![这里写图片描述][70 9]

:nth-child(index) ，获得第几个孩子，从1开始。  
:first-child ， 获得第一个孩子  
:last-child ， 获得最后孩子  
:only-child ， 获得独生子

**3.8表单过滤**  
![这里写图片描述][70 10]  
:input 所有的表单元素。（`<input> / <select> / <textarea> / <button>`）  
:text 文本框`<input type="text"`>  
:password 密码框`<input type=" password ">`  
:radio 单选`<input type="radio">`  
:checkbox 复选框`<input type="checkbox">`  
:submit 提交按钮`<input type="submit">`  
:image 图片按钮`<input type="image" src="">`  
:reset 重置按钮`<input type="reset">`  
:file 文件上传`<input type="file">`  
:hidden 隐藏域`<input type="hidden">` ,还可以获得`<xxx style="display:none">`  
其他值：`<br> <option>` ,存在浏览器兼容问题  
:button 所有普通按钮。 `<button >` 或 `<input type="button">`

**3.9表单对象属性过滤【掌握】**  
![这里写图片描述][70 11]  
:enabled 可用  
:disabled 不可用。`<xxx disabled="disabled">` 或`<xxx disabled="">` 或 `<xxx disabled>`  
:checked 选中（单选框radio、复选框 checkbox）  
:selected 选择（下拉列表 select option）

[http_docs.kissyui.com]: http://docs.kissyui.com/
[70]: /images/20220513/460da8111799409fb97013cf226ccff5.png
[70 1]: /images/20220513/d3f61e7e5b1b4c499894dfd4217104e0.png
[70 2]: /images/20220513/a750d6c1817d4cf7af9360b1687a3c00.png
[70 3]: /images/20220513/14b5c8f9160a4c9ba7d4b67066487d6c.png
[70 4]: /images/20220513/4a03df520813473ab2268c9930f18c2c.png
[70 5]: /images/20220513/944a5ac030ff4fa1af653b096d760d48.png
[70 6]: /images/20220513/3afaf1fc31774ba09478f433d04634b6.png
[70 7]: /images/20220513/2fc7450aa95944489f49625a30d24e30.png
[70 8]: /images/20220513/5888718265e942668f6d0a2eb63fd873.png
[70 9]: /images/20220513/154671c0e5484742b15518ee4a3fb4fc.png
[70 10]: /images/20220513/1fe6a65b1f5b426383280b331dfe5742.png
[70 11]: /images/20220513/da4d2e8623044db6b6464a7d01f3a86e.png