无事来学学--JQuery详细讲解（上）#yyds干货盘点#
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对象----> 通过伪数组的索引号来获取 ----> $(' ') 或者 $(' ').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 操作类只是对指定的类进行操作，不影响元素原有的类
https://blog.51cto.com/u_15463696/4820523
页:
[1]