无事来学学--JQuery详细讲解（上）#yyds干货盘点#

PHP小丑

jQuery详细讲解（上）

1、JavaScript库(library)
●   是一个封装好的特定的集合(方法和函数)
●   简单理解就是一个js文件，里面对我们的原生js代码进行了封装，我们可以快速的调用这些封装好的功能。比如jQuery，就是为了快速方便的操作DOM。jQuery就是一个js文件，里面封装了许多函数(DOM操作)

2、jQuery的使用步骤
1、下载jQuery文件
●   复制jQuery官网的代码，粘贴在一个新的js文件里面(一般是使用压缩版的代码，并将这个js文件命名为jquery.min.js)
2、引入jQuery文件
3、jQuery代码书写
●   jQuery 入口函数，等着页面DOM加载完毕再执行代码，相当于BOM里面的DOMContentLoaded事件  (有了入口函数就可以把jQuery代码写在任意位置)
●   1、$(document).ready(function( ){ })
●   2 、$(function( ){ })
●   等DOM结构渲染完毕即可执行function里面的代码，不必等所有外部资源加载完成
●   不同于Load事件，load事件是等页面文档，外部js文件、css文件、图片加载完毕才执行代码

3、jQuery顶级对象$
1、$是jQuery的别称，写代码时可以替换
2、$是jQuery的顶级对象，相当于原生js中的window。把元素用$包装成jQuery对象，就可以调用jQuery方法。如: $('div').hide( );

4、jQuery对象与DOM对象
●   用原生js获取的对元素是DOM对象( document.querySelector(' ') )
●   jQuery方法获取的元素就是jQuery对象( $(' ') )
●   jQuery 对象的本质  是利用$对DOM对象 进行包装后产生的对象，并且以伪数组的形式存储
●   jQuery 对象只能使用jQuery的方法；DOM对象则只能使用原生js的属性和方法
●   DOM 对象与jQuery对象可以互相转换
●   DOM对象转换为jQuery对象--> $(DOM**对象)**

●   jQuery 对象转化为DOM对象----> 通过伪数组的索引号来获取  ---->   $(' ')[index]   或者  $(' ').get(index)
●   jQuery方法直接获取的是jQuery对象，它不能使用原生js中的视频自动播放play( )方法。将其转换为DOM对象即可使用 (通过伪数组的索引号获取)

5、常用API
●   1、获取元素 --> jQuery选择器
●   $('选择器')    // 引号里面直接写css选择器
●   $('选择器1,选择器2, 选择器3')    // 获取多个元素

基础选择器

层级选择器

筛选选择器

●   注意索引号index是从0开始的，而在结构伪类选择器E:nth-child(n)中，匹配的是第n个元素E

jQuery 筛选方法(重要)

●   重点记：parent( ),children( ),find( ),siblings( ),eq(index)
●   注意：使用parents("选择器")可以返回指定的祖先元素

jQuery 隐式迭代
●   就是把匹配到的所有元素，在内部进行遍历循环，执行相应的方法，而不用我们再进行循环

●   jQuery 链式编程

●   获取元素时，对于前缀一样的操作，可以连起来写

2、jQuery设置样式
●   css 方法  -->   $(' 选择器').css('属性','值')
●   $('选择器').css('属性','值');  对于这种写法，属性名一定要加引号；而属性值在 数字型 的情况下可以不加单位， 也可不加引号
●   若只写了属性而没有写值( $(' 选择器').css('属性') )，则返回该属性当前的值，而不是修改
●   css方法中的参数也可以是对象的形式，方便设置多组样式。要用花括号{}包裹写的css样式，属性名和属性值用冒号隔开，且这里的属性名可以不加引号，数字型的属性值也不加引号

jQuery操作类(作用等同于classList)

●   1 、添加类-->  $('选择器').addClass('类名');
●   注意：这里的类名不加点.
●   2 、删除类--> $('选择器').removeClass('类名');
●   3 、切换类--> $('选择器').toggleClass('类名');
●   切换类：有则删除，无则添加

与原生js中的className的区别

●   className会覆盖掉元素原有的类

●   jQuery 操作类只是对指定的类进行操作，不影响元素原有的类