jquery选择器分为(jquery选择器的分类) 收藏 0

了解jquery这一篇够了

使用javascript开发过程中，有许多的缺点：

1. 查找元素的方法单一，麻烦。
2. 遍历数组很麻烦，通常要嵌套一大堆的for循环。
3. 有兼容性问题。
4. 想要实现简单的动画效果，也很麻烦
5. 代码冗余。

jQuery的官网 http://jquery.com/jQuery就是一个js库，使用jQuery的话，会比使用JavaScript更简单。

What is jQuery?

js库：把一些常用到的方法写到一个单独的js文件，使用的时候直接去引用这js文件就可以了。（animate.js、common.js）

我们知道了，jQuery其实就是一个js文件，里面封装了一大堆的方法方便我们的开发，其实就是一个加强版的common.js，因此我们学习jQuery，其实就是学习jQuery这个js文件中封装的一大堆方法。

官网下载地址：http://jquery.com/download/jQuery版本有很多，分为1.x 2.x 3.x1.x和2.x版本jquery都不再更新版本了，现在只更新3.x版本。

大版本分类：

• 1.x版本：能够兼容IE678浏览器
• 2.x版本：不能兼容IE678浏览器
• 3.x版本：不能兼容IE678浏览器，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678）

关于压缩版和未压缩版：

• jquery-1.12.4.min.js:压缩版本，适用于生产环境，因为文件比较小，去除了注释、换行、空格等东西，但是基本没有颗阅读性。
• jquery-1.12.4.js:未压缩版本，适用于学习与开发环境，源码清晰，易阅读。

使用jQuery的三个步骤：

1. 引入jQuery文件
2. 入口函数
3. 功能实现

关于jQuery的入口函数：

jQuery入口函数与js入口函数的对比：

1. JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。
2. jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。

1. DOM对象：使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。
2. jQuery对象：jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。
3. jQuery对象其实就是DOM对象的包装集包装了DOM对象的集合（伪数组）
4. DOM对象与jQuery对象的方法不能混用。

DOM对象转换成jQuery对象：【联想记忆：花钱】

jQuery对象转换成DOM对象：

• jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQuery选择器返回的是jQuery对象。
• jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多扩展性的选择器。【查看jQuery文档】
• jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。

总结：跟css的选择器用法一模一样。

总结：跟css的选择器用法一模一样。

总结：这类选择器都带冒号

总结：筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。

【案例：下拉菜单】【案例：突出展示】【案例：手风琴】【案例：淘宝精品】

对应案例：案例-《tab切换》

对应案例：案例-《美女相册》

对应案例：案例-《表格全选》

对应案例：案例-《下拉菜单》

对应案例：案例-《轮播图》

对应案例：案例-《手风琴菜单》

对应案例：案例-《音乐导航》对应案例：案例-《工具栏》

【案例-《弹幕》】

val方法用于设置和获取表单元素的值，例如input、textarea的值

html方法相当于innerHTML text方法相当于innerText

区别：html方法会识别html标签，text方法会那内容直接当成字符串，并不会识别html标签。

设置或者获取高度

获取网页的可视区宽高

设置或者获取垂直滚动条的位置

offset方法获取元素距离document的位置，position方法获取的是元素距离有定位的父元素的位置。

JavaScript中已经学习过了事件，但是jQuery对JavaScript事件进行了封装，增加并扩展了事件处理机制。jQuery不仅提供了更加优雅的事件处理语法，而且极大的增强了事件的处理能力。

简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐)

简单事件注册

缺点：不能同时注册多个事件

bind方式注册事件

缺点：不支持动态事件绑定

delegate注册委托事件

缺点：只能注册委托事件，因此注册时间需要记得方法太多了

on注册事件

jQuery1.7之后，jQuery用on统一了所有事件的处理方法。

最现代的方式，兼容zepto(移动端类似jQuery的一个库)，强烈建议使用。

on注册简单事件

on注册委托事件

on注册事件的语法：

unbind方式（不用）

undelegate方式（不用）

off方式（推荐）

jQuery事件对象其实就是js事件对象的一个封装，处理了兼容性。

通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 jQuery对象。

【案例：五角星评分案例.html】

jQuery的隐式迭代会对所有的DOM对象设置相同的值，但是如果我们需要给每一个对象设置不同的值的时候，就需要自己进行迭代了。

作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数

【案例：不同的透明度.html】

jQuery使用作为标示符，但是如果与其他框架中的作为标示符，但是如果与其他框架中的冲突时，jQuery可以释放$符的控制权.

插件：jquery不可能包含所有的功能，我们可以通过插件扩展jquery的功能。

jQuery有着丰富的插件，使用这些插件能给jQuery提供一些额外的功能。

1. jquery.color.js

animate不支持颜色的渐变，但是使用了jquery.color.js后，就可以支持颜色的渐变了。

使用插件的步骤

1. jquery.lazyload.js

懒加载插件

jQueryUI专指由jQuery官方维护的UI方向的插件。

官方API：http://api.jqueryui.com/category/all/

其他教程：jQueryUI教程

基本使用:

使用jquery.ui.js手风琴菜单

原理：jquery插件其实说白了就是给jquery对象增加一个新的方法，让jquery对象拥有某一个功能。

更多内容：

jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。JQuery封装了JavaScript常用的功能代码，提供了一套易于使用的API，可以跨多种浏览器工作，使HTML文档的遍历和操作、事件处理、动画设计和Ajax交互等操作变得更加简单。

现在的「新人」依然可以学习 jQuery 的思想，因为以「新人」的水平，直接理解 Vue / React 的思想难度较大，jQuery 是一个很不错的中间过渡

「融职培训」Web前端学习 第4章 jQuery 2 jQuery常用方法

事件的基本概念

上一章我们讲解了使用jQuery选择器获取元素，并通过一些方法来操作元素，本章我们讲解事件的概念，通过事件我们可以加强用户与浏览器的交互性，例如可以实现当用户点击某个元素的时候，对元素做一些操作，或是移动鼠标，对元素做一些操作。

事件的分类

事件主要可以分为以下几类：

• 鼠标事件
• 键盘事件
• 文档事件
• 表单事件
• 触摸事件
• 自定义事件

本章我们主要讲解鼠标事件。

我们先来将最常用的鼠标单击事件click，jQuery的基本语法如下所示：

我们先通过$(“selector”)选择器获取元素，然后通过click为元素定义事件，这样当我们用鼠标单击这个元素的时候，就会执行花括号中的代码。

输出文字

我们现在实现一个功能，当我们点击一个按钮的时候，在控制台输出\”hello world\”,代码如下所示。

切换图片

结合我们上一章的内容，来实现一个功能，当我们点击按钮的时候，将一张图片切换成另一张图片,代码如下所示。

在上面的代码中，$(this)对应的就是我们点击的这个元素，也就是img标签，当我们点击img标签的时候，使用attr方法将其src属性设置成另一张了图片的地址，这样就实现了图片的切换。

获取索引

接下来我们要实现一个更复杂的效果：点击一个数字列表来实现切换图片的功能，列表有三个数字，对应着三张不同的图片。

要实现这样的功能，很多同学会想到，给数字列表分别绑定事件，每一个事件都对应不同的图片就可以了，虽然这样可以实现我们要的功能，但是如果需求又增加了两张图片，那我们就又要多定义两个事件，所以这个方案是不合理的。

我们需要的是用一个选择器找到所有的数字列表，让后统一绑定一个事件，然后在点击数字列表的时候，让程序找到我们点击的是第几个，然后切换到对应的图片，就可以了。下面的代码可以让我们判断是第几个元素触发了事件,当点击时会输出对应的下角标。

• 在上面的代码中，index方法可以获取元素的索引，索引就是当前元素在其同级的元素中排第几个，从0开始计数。
• 我们将index获取到的索引值赋值给变量i，并输出i就看到了这个元素的索引。

切换图片

找到了列表的索引，我们下一步就要实现图片切换的功能了，首先我们需要了解数组的概念，数组是一个集合，我们将3章图片的路径放到了数组中，这样我们就可以通过数组的下标来获取到数组的元素了。

上面的代码可以了解到，我们可以通过数组的下标来获取数组中的元素。

接下来，我们结合之前学过的方法来实现一个图片切换的效果,代码如下所示。

这样，当我们点击数字列表的时候，就可以实现图片切换的功能了。

上一节我们说了鼠标单击事件，其实鼠标事件还有很多，这节我们讲解鼠标移入，移出和移动事件。

鼠标移入移出改变样式

鼠标的移入和一出事件分别是mouseenter和mouseleave。我们来实现一个功能，当我们的鼠标移入一个div的时候，让其变为红色，移出的时候，让其变为绿色，代码如下：

这里我们使用了链式操作，用一个选择器，绑定两个属性。

鼠标移入和移出事件可以简写成一个hover事件，上面的代码可以简写如下所示：

hover有方法有两个参数，都是函数，分别对应着mouseenter和mouseleave的事件，这样写的效果与上面完全相同。

鼠标移动获取坐标

鼠标在元素上移动的时候也会触发事件，下面我们来实现一个功能，当鼠标移动到一个div的时候，获取鼠标在网页页面上的坐标,代码如下所示：

• 在上面的代码中e是事件对象，我们可以通过它获取到x轴和y轴的坐标。
• 然后通过console.log()方法在控制台输出x坐标和y坐标。

1. 滑动显示和隐藏的右边栏，点击按钮弹出，电气其他位置隐藏。
2. 让图片跟随鼠标移动。
3. 返回顶部

【融职教育】在工作中学习，在学习中工作

月入35万大佬总结：web前端系统学习的内容（附全套前端教程）

优秀的WEB前端工程师具备编写任何一个互联网系统的前端页面、交互代码的能力。根据对100家互联网名企对Web开发工程师的招聘要求分析，企业要求主要有两部分，一个是核心要求，一个是辅助要求，核心要求包括：语言技术：JS基础和核心/HTML5/CSS3、框架技术：JQuery、AJAX、Bootstrap、AngularJS、通讯协议技术：HTTP协议、服务端开发技术、交互技术：UI交互设计、客户端技术：微信开发技术、html5、JS、SDK开发、Android、iOS、Web App开发技术。辅助要求有1-3年Web工作经验(近80%的企业)、学历及相关专业、文档规范写作能力、团队合作能力、责任心。

Web前端的学习路线

第一阶段——HTML的学习

超文本标记语言(HyperText Mark-up Language 简称HTML)是一个网页的骨架，无论是静态网页还是动态网页，最终返回到浏览器端的都是HTML代码，浏览器将HTML代码解释渲染后呈现给用户。因 此，我们必须掌握HTML的基本结构和常用标记及属性。

HTML 的学习是一个记忆和理解的过程，在学习过程中可以借助Dreamweaver的“拆分”视图辅助学习。在“设计”视图中看效果，在“代码”视图中学本质， 将各种视图的优势发挥到极致，这种对照学习的方法弥补了单纯识记HTML标签和属性的枯燥乏味，想必对各位初学的小盆友们来说必定是极好的!

在学习了HTML之后，我们只是掌握了各种“原材料”的制作方法，要想盖一幢楼房就还需要把这些“原材料”按照我们设计的方案组合布局在一起并进行一些样式的美化。

于是进入第二个阶段——CSS的学习

CSS是英文Cascading Style Sheets的缩写，叫做层叠样式表，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言其样式是可以复用的，这样就极大地提高了我们开发的速度，降低了维护的成本。

同时CSS中的盒子模型、相对布局、绝对布局等能够实现对网页中各对象的位置排版进行像素级的精确控制。通过此阶段的学习，我们就可以顺利完成“一幢楼房”的建设。

“楼房”建设完成之后，我们可以交给用户使用，但是如果想让用户获得更佳的体验，我们还可以对“楼房”进行更深一步的“装修”，让它看起来更“豪华”一些。

为了完成这个任务，我们进入第三个阶段——JavaScript的学习

JavaScript是一种在客户端广泛使用的脚步语言，在JavaScript当中为我们提供了一些内置函数、对象和DOM操作，借助这些内容我们可以来实现一些客户端的特效、验证、交互等，使我们的页面看起来不那么呆板，屌丝瞬间逆袭高富帅!有么有?

此时，也许你还沉浸在JavaScript给你带来的惊喜之中，但你的项目经理却突然对你大吼道

“这个效果在××浏览器下不兼容，重新搞……”

“不兼容?”瞬间石化了有木有?

“那可是花了我一个晚上写了几百行代码搞定的啊，吐血了都!”

JavaScript的兼容性和复杂性有时候的确让我们头疼，还好有“大神”帮我们做了封装。

接下来我们进入第四个阶段——jQUery的学习

jQuery 是一个免费、开源的轻量级的JavaScript库，并且兼容各种浏览器(jQuery2.0及后续版本放弃了对IE6/7/8浏览器的支持)，同时现在有很多基于jQuery的插件可供选择，这样在我们实现一些丰富的动态效果时更方便快捷，大大节省了我们开发的时间，提高了开发速度，这也充分体现了其 write less,do more的核心宗旨。这个Feel倍儿爽!有么有?

“豪华大楼”至此拔地而起，但是每天这样日复一日，年复一年的盖楼，好繁琐!能不能将大楼里面每一个单独部件模块化，当需要盖楼时就像堆积木一样组合在一起，这样岂不是爽歪歪?可以实现吗?答案是肯定的。

这种思想在Web前端开发中也是适合的，于是乎就出现了各种前端框架，在这里推荐给大家的是Bootstrap。

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包，是一个CSS/HTML框架，并且支持响应式布局。一经推出后颇受欢迎，一直是GitHub上的热门开源项目。

在项目开发过程中，我们可以借助Bootstrap提供的CSS样式、组件、JavaScript插件等快速的完成页面布局和样式设置，然后再有针对性的微调样式，这样基于框架进行开发大大缩短了开发周期。站在巨人的肩膀上就是爽!

Web前端的学习建议

最后给大家聊聊在学习Web前端中的一些建议和方法。零基础对于代码的学习记忆量很重要，正所谓读书破万卷，下笔如有神。写代码也是一样，多写、多练、多忆，好过再多的理论。知道了学习的方法，等于掌握了成功的秘诀，但这还不足以万事具备，新手学习，最重要的还需要制定一条完整的学习线路。这样学习起来效率是大大地好。

学习前端开发HTML5新手大致要分为6大阶段：

第一阶段 前端页面重构

第二阶段 JavaScript高级程序设计

第三阶段 PC端全栈项目开发

第四阶段 移动端项目开发

第五阶段 混合（Hybrid,ReactNative）开发

第六阶段 WebApp后端系统开发

懒人目录：

第一个阶段：HTML5+CSS3

第二个阶段：Web网页开发

第三个阶段：JavaScript 网页编程

第四个阶段：Node.js 与 AJAX

第一个阶段：HTML5+CSS3：最新版Html5+Css3由浅入深教程

HTML5：浏览器与浏览器内核、语法及使用、常用标签、语义化、表单元素、HTML5 新增标签

CSS3：基本语法规范、常用的基本选择器用法与技巧、复合选择器使用、数值与单位、文字文本样式、CSS盒子模型、CSS背景技巧、圆角、阴影、过渡等新属性、定位和浮动、伪类和伪元素、chrome调试工具、CSS高级技巧（精灵图、滑动门、CSS三角等）、CSS常见布局技巧大全、网页开发规范以及流程、CSS企业级网页开发、网页开发常见问题以及解决方案、CSS常见兼容性问题以及解决方案

电商项目：Photoshop 切图、cutterman插件一键切图、代码组织原则、项目开发实战流程、电商类复杂页面布局规范、CSS初始化技术选择、CSS字体图标使用、布局技巧大全、完整的多页面开发、网页语义化设计、CSS页面模块化开发、复合选择器的应用、复杂网页结构排版、基本变换特效、电商类常见布局问题解决方案

本阶段学习关键词：

HTML5、CSS3、语义化标签、CSS3新属性、盒子模型、定位与浮动、CSS 调试技巧、PS 切图、网页特效、静态页面开发、PSD文件还原网页文件。

本阶段需要掌握的能力：

了解常用浏览器和浏览器内核；

了解语义化的概念；

掌握 HTML 语法及使用技巧；

掌握 CSS 语法及使用技巧；

掌握 DIV+CSS 布局方式；

掌握常见网页布局模式；

掌握 HTML5 常用标签；

掌握 Photoshop 切图以及插件切图；

能够熟练使用开发人员工具进行页面调试；

能够完成基本的动画效果；

能够根据PSD文件独立完成静态页面的开发工作；

能够使用CSS3新属性美化修饰网页。

第二阶段：移动web网页开发：移动web开发6天完整

​

H5C3进阶：新布局标签、多媒体标签、新增表单标签、新增表单属性、2D、3D 变换、animation 动画、炫酷页面开发

Felx伸缩布局：传统布局的局限性、Flex布局优势、盒子父级常见属性设置、盒子子级常见属性设置、携程网 Flex 移动端页面开发

移动端开发：移动端屏幕介绍、移动端浏览器介绍、移动端操作系统介绍、真机调试、viewport 视口、rem 单位使用、移动端主流适配解决方案、常见移动端样式兼容方案、预处理器 less、媒体查询

本阶段学习关键词：

HTML5 标签、CSS3 动画、移动端适配、真机调试、rem、flex 布局、媒体查询、Bootstrap、Viewport、移动端调试

本阶段需要掌握的能力如下：

掌握 HTML5 新布局标签、多媒体标签；

掌握 CSS3 2D、3D 变换、动画效果；

了解移动端屏幕、移动端浏览器、操作系统的不同；

掌握常用移动端调试方法；

掌握常用移动端适配方法；

掌握 CSS 预处理器 less 的使用；

掌握常用移动端框架使用方法；

掌握常见移动端页面开发；

掌握响应式布局开发；

掌握 Bootstrap 开发响应式页面；

掌握适配不同终端的网页开发技术选型。

第三个阶段：JavaScript网页编程：前端-Javascript基础视频教程-video

​

JavaScript 基础：基本语法、常用数据结构、编码规范约定、内置对象常用方法、常见 JavaScript 算法大全、对象的创建方式和 this 讲解、构造函数

Web APIs编程：BOM 操作大全、DOM 操作大全、网页特效大全、事件处理流程、浏览器兼容性解决方案、封装动画函数

JavaScript高级：面向对象思想、JavaScript 中的对象深入理解、JSON 使用、闭包原理以及使用场景、原型以及原型链深入剖析、作用域链深入分析、函数的调用方式及 this 指向总结、正则表达式、面向对象理论与实践、ECMAScript 2015 (ES6) 新语法

jQuery快速开发：jQuery 的优势、jQuery 选择器、jQuery 中的动画、链式编程和隐式迭代、插件使用和制作、常见网页特效制作大全、团队协作开发流程

本阶段关键词如下：

网页编程、JavaScript 高级、面向对象、闭包、原型、原型链、ES6、正则表达式、DOM、BOM、动画函数、jQuery、jQuery 插件

本阶段所需掌握能力如下：

– 能够掌握 JavaScript 基本语法；

– 掌握常见 JavaScript 算法；

– 掌握 DOM 的各种操作；

– 熟练使用面向对象思想进行 DOM 编程；

– 掌握 JavaScript 的高级语法；

– 熟练使用 jQuery 操作 DOM；

– 熟练使用和编写 jQuery 插件；

– 独立完成电商网站的页面搭建（包括 HTML 结构、CSS 样式、JavaScript 特效）；

– 掌握应对业务编程的能力；

– 掌握 JavaScript 常见兼容性方案；

– 掌握团队合作开发流程。

第四个阶段：Node.js 与 AJAX：Nodejs教程精讲

Node.js基础：环境安装、REPL 运行环境、Node 中的 JavaScript、模块系统、模块加载机制、模块与包、NPM 常用命令、文件操作

异步编程：环境安装、REPL 运行环境、Node 中的 JavaScript、模块系统、模块加载机制、模块与包、NPM 常用命令、文件操作

Web开发：回调函数、Promise 对象、Generator 生成器函数、Async 函数、常用异步流程控制库

Express：静态网站与动态网站、使用 http 模块创建 Web 服务、请求响应原理、HTTP 协议、处理页面请求、处理表单提交、Cookie 与 Session、MySQL 数据库、常用 SQL 语句、使用 Node 操作 MySQL 数据库、博客项目

接口开发：安装与初始化、路由系统、静态资源处理、中间件使用及原理、常用第三方中间件、模板引擎、错误处理、调试 Express 应用、常用 API

前端模块化：前后端分离架构模式、RESTFul API 设计、接口测试工具

AJAX编程：模块化开发基本概念、模块化演变过程分析、设计规范、Require.js、同步与异步概念、原生 AJAX、jQuery 的 AJAX 相关 API 使用、底层原理分析、缓存问题及解决方案、跨域请求及解决方案、前端模板引擎

本阶段学习关键词：

Node.js、CommonJS、JavaScript 模块化、异步编程、服务端、MySQL、HTTP 协议、Express、Koa、Cookie、Session、中间件、分页、注册登录、模块化、CMS 系统开发、RESTful、Ajax、SQL

本阶段所需掌握技能：

– 能够建立客户端服务器交互模型，熟悉网络通信相关概念；

– 能够使用 Node.js 进行 Web 服务端开发；

– 能够掌握 JavaScript 异步编程模型；

– 能够掌握 JavaScript 模块化编程方式；

– 能够使用 Node.js 操作 MySQL 数据库；

– 能够理解 HTTP 协议；

– 熟悉原生 Ajax 请求流程与细节，并掌握常见跨域技巧；

– 能够基于 jQuery 的 Ajax 相关 API 熟练开发常见的前端功能；

– 能够独立开发基于后台接口的动态网站、Ajax 数据交互的项目；

– 能够独立完成企业网站从前台到后台的基本开发工作。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com