无事来学学--JQuery详细讲解(上)

简介: jQuery详细讲解(上)

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的顶级对象,相当于原生js中的window。把元素用jQueryjswindow包装成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操作类只是对指定的类进行操作,不影响元素原有的类

目录
相关文章
|
存储 JavaScript API
无事来学学--JQuery详细讲解(下)
jQuery事件 jQuery事件注册
81 0
|
JavaScript
|
7月前
|
JavaScript
Jquery插件知识之Jquery.cookie实现页面传值
Jquery插件知识之Jquery.cookie实现页面传值
38 0
|
8月前
|
JavaScript
jQuery 插件自用列表
jQuery 插件自用列表
29 0
|
4月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
4月前
|
JavaScript 数据可视化 前端开发
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业
19 0
|
4月前
|
JavaScript 前端开发
开发jQuery插件这些就够了
开发jQuery插件这些就够了
30 0
|
9月前
|
JavaScript
jQuery编写插件的两种方法
jQuery编写插件的两种方法
57 0
|
5月前
|
JavaScript 前端开发 安全
jQuery 第十一章(表单验证插件推荐)
jQuery 第十一章(表单验证插件推荐)
60 1
|
6月前
|
JavaScript
jQuery年月日(年龄)选择插件
jQuery年月日(年龄)选择插件
31 0