JQuery的简述、使用方法和选择器

JQ简述1

1、 jQuery出现的背景(Javascript遇到的问题)

选择器功能弱 DOM操作繁琐之极 浏览器兼容性不好 动画效果弱

2、什么是 jQuery(概念)

jQuery （javaScriptQuery）JavaScript 代码库 官方网站：http://jquery.com/

3、目前 jQuery 有三个大版本：

1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)

2.x：不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)

3.x：不兼容 ie678，只支持最新的浏览器。除非特殊要求，一般不会使用 3.x 版本的，很多老的 jQuery 插件不支持这个版本。目前该版本是官方主要更新维护的版本。 注：推荐学习时使用1.x版本，功能更加完善，所学习到的东西更多。

jQuery 中$的含义

作用

1：$(function) 相当于 window.function(){}

2.功能比window.onload更强大 (1) window onload一个页面只能写一个,但是可以写多个$() 而不冲突 (2) window onload要等整个页面加载完后再执行（包括图片、超链接、音视频等）， 但是$的执行时间要早

3.完整形式是$(document).ready(…….); 作用 2：$(selector) 选择器 jQuery具有强大的选择器功能

使用前的准备

JQ中常用的选择器

一、基本选择器

1、id选择器

通过元素id获取相关元素

2、元素选择器

获得body内的相关元素，如div、input等

3、类选择器

通过元素类名获取相关元素，eq（）方法获取元素，下标从0开始

4、通用选择器

找到每一个元素

5、分组选择器

找到匹配任意一个类的元素。

二、层级选择器

1、ancestor descendant

在给定的祖先元素下匹配所有的后代元素

2、parent > child

在给定的父元素下匹配所有的子元素

3、prev + next 匹配所有紧接在 prev 元素后的 next 元素

4、prev ~ siblings

匹配 prev 元素之后的所有 siblings 元素（同级别/同辈）

三、子元素选择器

1、:nth-child

匹配其父元素下的第N个子或奇偶元素 ‘:eq(index)’ 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！可以使用: nth-child(even) :nth-child(odd) :nth-child(3n) :nth-child(2) :nth-child(3n+1) :nth-child(3n+2)

四、属性选择器

$(“input[type=属性名]”)。除了type属性，name、value等也可以

五、表单选择器

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

1. JQuery的相关API，相关jquery文件，测试源代码已分享之网盘。使用时直接将相关jquery文件放入JS目录下，在html代码中引入即可。 链接：https://pan.baidu.com/s/19SSKjR11eYBzHs2gjmwpqw 提取码：klrx