jQuery编程(基础知识)

导读:本篇文章讲解 jQuery编程(基础知识),希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

目录

一、jQuery 介绍

(一)JavaScript库

(二)jQuery的概念

(三)jQuery的优点

二、jQuery 的基本使用

(一)jQuery 的下载

(二)jQuery的入口函数

(三)jQuery中的顶级对象$

(四)jQuery 对象和 DOM 对象

(五)jQuery 对象和 DOM 对象转换

三、jQuery 选择器

基础选择器

层级选择器

筛选选择器

四、 jQuery 样式操作

方法1: 操作 css 方法

方法2: 设置类样式方法

 五、jQuery 效果

(一)显示隐藏

(二)滑入滑出

(三)淡入淡出

(四)自定义动画

(五)停止动画排队

(六)事件切换

六、jQuery属性操作

(一)元素固有属性

(二)元素自定义属性

(三)数据缓存

七、jQuery文本属性值

八、jQuery元素操作

(一)遍历元素

(二)创建、添加、删除

创建元素

添加元素

删除元素 

 九、jQuery尺寸、位置操作

(一)jQuery尺寸操作

(二)jQuery位置操作

 十、jQuery事件注册

十一、jQuery事件处理

(一)事件处理on()绑定事件

(二)事件处理off()解绑事件

(三)事件处理trigger()自动触发事件

 十二、事件对象

 十三、jQuery拷贝对象

 十四、jQuery多库共存

 十五、jQuery插件

十六、本地存储


jQuery编程(基础知识)

一、jQuery 介绍

(一)JavaScript库

JavaScript库:即 library,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate、hide、show,比如获取元素等。

简单理解: 就是一个JS 文件,里面对我们原生js代码进行了封装,存放到里面。这样我们可以快速高效的使用这些封装好的功能了。
比如 jQuery,就是为了快速方便的操作DOM,里面基本都是函数(方法)。

常见的JavaScript 库:jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto等,这些库都是对原生 JavaScript 的封装,内部都是用 JavaScript 实现的,我们主要学习的是 jQuery。

(二)jQuery的概念

  • jQuery 是一个快速、简洁的 JavaScript 库,其设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。
  • j 就是 JavaScript;Query 查询; 意思就是查询js,把js中的DOM操作做了封装,我们可以快速的查询使用里面的功能。
  • jQuery 封装了 JavaScript 常用的功能代码,优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。
  • 学习jQuery本质: 就是学习调用这些函数(方法)。
  • jQuery 出现的目的是加快前端人员的开发速度,我们可以非常方便的调用和使用它,从而提高开发效率。

(三)jQuery的优点

  1. 轻量级。核心文件才几十kb,不会影响页面加载速度。
  2. 跨浏览器兼容,基本兼容了现在主流的浏览器。
  3. 链式编程、隐式迭代。
  4. 对事件、样式、动画支持,大大简化了DOM操作。
  5. 支持插件扩展开发。有着丰富的第三方的插件,例如:树形菜单、日期控件、轮播图等。
  6. 免费、开源。

二、jQuery 的基本使用

(一)jQuery 的下载

jQuery的官网地址:https://jquery.com/,官网即可下载最新版本。

各个版本的下载:https://code.jquery.com/

​版本介绍:

  • 1x :兼容 IE 678 等低版本浏览器, 官网不再更新
  • 2x :不兼容 IE 678 等低版本浏览器, 官网不再更新
  • 3x :不兼容 IE 678 等低版本浏览器, 是官方主要更新维护的版本

(二)jQuery的入口函数

第一种: 简单易用。
$(function () {   
    …  // 此处是页面 DOM 加载完成的入口
}) ; 

第二种: 繁琐,但是也可以实现
$(document).ready(function(){
   …  //  此处是页面DOM加载完成的入口
});

总结:
1. 等着 DOM 结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完成,jQuery 帮我们完成了封装。
2. 相当于原生 js 中的 DOMContentLoaded。
3. 不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。
4. 更推荐使用第一种方式。

(三)jQuery中的顶级对象$

  •  $是 jQuery 的别称,在代码中可以使用 jQuery 代替,但一般为了方便,通常都直接使用 $ 。
  •  $是jQuery的顶级对象,相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象,就可以调用jQuery 的方法。

(四)jQuery 对象和 DOM 对象

使用 jQuery 方法和原生JS获取的元素是不一样的,总结如下 : 

  1. 用原生 JS 获取来的对象就是 DOM 对象
  2. jQuery 方法获取的元素就是 jQuery 对象。
  3. jQuery 对象本质是: 利用$对DOM 对象包装后产生的对象(伪数组形式存储)。

注意:
只有 jQuery 对象才能使用 jQuery 方法,DOM 对象则使用原生的 JavaScirpt 方法。

(五)jQuery 对象和 DOM 对象转换

DOM 对象与 jQuery 对象之间是可以相互转换的。因为原生js 比 jQuery 更大,原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。

1.DOM对象转换成jQuery对象($(DOM对象)),方法只有一种
var box = document.getElementById(‘box’);  // 获取DOM对象
$(box);  // 把DOM对象转换为 jQuery 对象

2.jQuery 对象转换为 DOM 对象有两种方法:
2.1 jQuery对象[索引值]
var domObject1 = $(‘div’)[0]

2.2 jQuery对象.get(索引值)
var domObject2 = $(‘div’).get(0)

总结:实际开发比较常用的是把DOM对象转换为jQuery对象,这样能够调用功能更加强大的jQuery中的方法。

三、jQuery 选择器

基础选择器

$(“选择器”)   //  里面选择器直接写 CSS 选择器即可,但是要加引号。

jQuery编程(基础知识)

层级选择器

层级选择器最常用的两个分别为:后代选择器和子代选择器。

jQuery编程(基础知识)

筛选选择器

筛选选择器,顾名思义就是在所有的选项中选择满足条件的进行筛选选择。

jQuery编程(基础知识)

另:  jQuery中还有一些筛选方法,类似DOM中的通过一个节点找另外一个节点,父、子、兄以外有所加强。偏重于记忆。

jQuery编程(基础知识)

四、 jQuery 样式操作

方法1: 操作 css 方法

 常用以下三种形式 :

// 1.参数只写属性名,则是返回属性值
var strColor = $(this).css(‘color’);

// 2.  参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号
$(this).css(”color”, ”red”);

// 3.  参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开, 属性可以不用加引号
$(this).css({ “color”:”white”,”font-size”:”20px”});

注意:css() 多用于样式少时操作,多了则不太方便。

方法2: 设置类样式方法

作用等同于以前的 classList,可以操作类样式, 注意操作类里面的参数不要加点。

    常用的三种设置类样式方法:
// 1.添加类
$(“div”).addClass(“current”);

// 2.删除类
$(“div”).removeClass(“current”);

// 3.切换类
$(“div”).toggleClass(“current”);

注意:
1. 设置类样式方法比较适合样式多时操作,可以弥补css()的不足。
2. 原生 JS 中 className 会覆盖元素原先里面的类名,jQuery 里面类操作只是对指定类进行操作,不影响原先的类名。

 五、jQuery 效果

jQuery 给我们封装了很多动画效果,最为常见的如下:
– 显示隐藏:show() / hide() / toggle() ;
– 划入画出:slideDown() / slideUp() / slideToggle() ; 
– 淡入淡出:fadeIn() / fadeOut() / fadeToggle() / fadeTo() ; 
– 自定义动画:animate() ;

注意:
动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行。

jQuery为我们提供另一个方法,可以停止动画排队:stop() ;

(一)显示隐藏

显示隐藏动画,常见有三个方法:show() / hide() / toggle() ;

语法规范如下:

  1. 显示:show([speed,[easing],[fn]])
  2. 隐藏:hide([speed,[eaasing],[fn]])
  3. 显示隐藏切换:toggle([speed,[easing],[fn]])

显示隐藏参数如下:

  • 参数都可以省略,无动画直接显示。
  • speed:三种预定速度之一的字符串(“slow”,“normal”,or “fast”)或表示动画时长的毫秒数值(如:1000)。
  • easing:(Optional)用来指定切换效果,默认是“swing”,可用参数“linear”。
  • fn:回调函数,在动画完成时执行的函数,每个元素执行一次。

建议:平时一般不带参数,直接显示隐藏即可。

(二)滑入滑出

滑入滑出动画,常见有三个方法:slideDown() / slideUp() / slideToggle() ; 

语法规范如下:

  1. 下滑效果:slideDown([speed,[easing],[fn]])
  2. 上滑效果:slideUp([speed,[easing],[fn]])
  3. 滑动切换效果:slideToggle([speed,[easing],[fn]])

滑动切换效果参数如下:

  • 参数都可以省略。
  • speed:三种预定速度之一的字符串(“slow”,“normal”,or “fast”)或表示动画时长的毫秒数值(如:1000)。
  • easing:(Optional)用来指定切换效果,默认是“swing”,可用参数“linear”。
  • fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
     

(三)淡入淡出

淡入淡出动画,常见有四个方法:fadeIn() / fadeOut() / fadeToggle() / fadeTo() ; 

语法规范如下:

  1. 淡入效果:fadeIn([speed,[easing],[fn]])
  2. 淡出效果:fadeOut([speed,[easing],[fn]])
  3. 淡入淡出切换效果:fadeToggle([speed,[easing],[fn]])
  4. 渐进方式调整到指定的不透明度:fadeTo([[speed],opacity,[easing],[fn]])

淡入淡出切换效果参数如下:

  • 参数都可以省略。
  • speed:三种预定速度之一的字符串(“slow”,“normal”,or “fast”)或表示动画时长的毫秒数值(如:1000)。
  • easing:(Optional)用来指定切换效果,默认是“swing”,可用参数“linear”。
  • fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
  • opacity透明度必须写,取值0~1之间。

(四)自定义动画

自定义动画非常强大,通过参数的传递可以模拟以上所有动画,方法为:animate() ;

语法规范如下:
animate(params,[speed],[easing],[fn])

参数如下:

  • params:想要更改的样式属性,以对象形式传递,必须写。属性名可以不用带引号,如果是复合属性则需要采取驼峰命名法borderLeft。其余参数都可以省略。
  • speed:三种预定速度之一的字符串(“slow”,“normal”,or “fast”)或表示动画时长的毫秒数值(如:1000)。
  • easing:(Optional)用来指定切换效果,默认是“swing”,可用参数“linear”。
  • fn:回调函数,在动画完成时执行的函数,每个元素执行一次。

(五)停止动画排队

动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行。

停止动画排队的方法为:stop() ; 

  • stop() 方法用于停止动画或效果。
  • stop() 写到动画或者效果的前面, 相当于停止结束上一次的动画。

总结: 每次使用动画之前,先调用 stop() ,在调用动画。

(六)事件切换

jQuery中为我们添加了一个新事件 hover() ; 功能类似 css 中的伪类 :hover 

语法:
hover([over,]out)     // 其中over和out为两个函数

  • over:鼠标移到元素上要触发的函数(相当于mouseenter)
  • out:鼠标移出元素要触发的函数(相当于mouseleave)
  • 如果只写一个函数,则鼠标经过和离开都会触发它

六、jQuery属性操作

(一)元素固有属性

所谓元素固有属性就是元素本身自带的属性,比如 <a> 元素里面的 href ,比如 <input> 元素里面的 type。 

jQuery编程(基础知识)

 注意:prop() 除了普通属性操作,更适合操作表单属性:disabled / checked / selected 等。

(二)元素自定义属性

用户自己给元素添加的属性,我们称为自定义属性。 比如给 div 添加 index =“1”。

jQuery编程(基础知识)

注意:attr() 除了普通属性操作,更适合操作自定义属性。

(三)数据缓存

data() 方法可以在指定的元素上存取数据,并不会修改 DOM 元素结构。一旦页面刷新,之前存放的数据都将被移除。

jQuery编程(基础知识)

 注意:同时,还可以读取 HTML5 自定义属性  data-index ,得到的是数字型。

七、jQuery文本属性值

常见操作有三种:html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性,主要针对元素的内容还有表单的值操作。

jQuery编程(基础知识)

 注意:html() 可识别标签,text() 不识别标签。

八、jQuery元素操作

jQuery 元素操作主要讲的是用jQuery方法,操作标签的遍历、创建、添加、删除等操作。

(一)遍历元素

jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作,就需要用到遍历。

jQuery编程(基础知识)

 jQuery编程(基础知识)

 注意:此方法用于遍历 jQuery 对象中的每一项,回调函数中元素为 DOM 对象,想要使用 jQuery 方法需要转换。

(二)创建、添加、删除

创建元素

jQuery编程(基础知识)

添加元素

jQuery编程(基础知识)

 jQuery编程(基础知识)

删除元素 

jQuery编程(基础知识)

 九、jQuery尺寸、位置操作

(一)jQuery尺寸操作

jQuery 尺寸操作包括元素宽高的获取和设置,且不一样的API对应不一样的盒子模型。

jQuery编程(基础知识)
注意:有了这套 API 我们将可以快速获取和子的宽高,至于其他属性想要获取和设置,还要使用 css() 等方法配合。

(二)jQuery位置操作

jQuery的位置操作主要有三个: offset()、position()、scrollTop()/scrollLeft() , 具体介绍如下: 

jQuery编程(基础知识)

 jQuery编程(基础知识)

 jQuery编程(基础知识)

 十、jQuery事件注册

jQuery 为我们提供了方便的事件注册机制,是开发人员易于操作优缺点如下:

  • 优点: 操作简单,且不用担心事件覆盖等问题。
  • 缺点: 普通的事件注册不能做事件委托,且无法实现事件解绑,需要借助其他方法。

jQuery编程(基础知识)

十一、jQuery事件处理

因为普通注册事件方法的不足,jQuery又开发了多个处理方法。

  • on(): 用于事件绑定,目前最好用的事件绑定方法
  • off(): 事件解绑
  • trigger() / triggerHandler(): 事件触发

(一)事件处理on()绑定事件

因为普通注册事件方法的不足,jQuery又创建了多个新的事件绑定方法bind() / live() / delegate() / on()等,其中最好用的是: on()

语法:element.on(events,[selector],fn)

  • events:一个或多个用空格分隔的事件类型。如“click”或“keydown”。
  • selector:元素的子元素选择器。
  • fn:回调函数,即绑定在元素身上的侦听函数。

优势:

  1. 可以绑定多个事件,多个处理事件处理程序。
  2. 可以事件委派操作。事件委派定义是,把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素。
  3. 动态创建的元素,click()没有办法绑定事件,on()可以给动态生成的元素绑定事件。 

(二)事件处理off()解绑事件

当某个事件上面的逻辑,在特定需求下不需要的时候,可以把该事件上的逻辑移除,这个过程我们称为事件解绑。jQuery 为我们提供 了多种事件解绑方法:die() / undelegate() / off() 等,甚至还有只触发一次的事件绑定方法 one(),在这里我们重点讲解一下 off() 

jQuery编程(基础知识)

(三)事件处理trigger()自动触发事件

有些时候,在某些特定的条件下,我们希望某些事件能够自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件,不必鼠标点击触发。由此 jQuery 为我们提供了两个自动触发事件 trigger() 和 triggerHandler() ; 

jQuery编程(基础知识)

jQuery编程(基础知识) 

 十二、事件对象

jQuery 对DOM中的事件对象 event 进行了封装,兼容性更好,获取更方便,使用变化不大。事件被触发,就会有事件对象的产生。

jQuery编程(基础知识)

 十三、jQuery拷贝对象

如果想要把某个对象拷贝(合并)给另外一个对象使用,此时可以使用$.extend()方法。

jQuery编程(基础知识)

 十四、jQuery多库共存

实际开发中,很多项目连续开发十多年,jQuery版本不断更新,最初的 jQuery 版本无法满足需求,这时就需要保证在旧有版本正常运行的情况下,新的功能使用新的jQuery版本实现,这种情况被称为,jQuery 多库共存。

jQuery编程(基础知识)

 十五、jQuery插件

jQuery 功能比较有限,想要更复杂的特效效果,可以借助于 jQuery 插件完成。这些插件也是依赖于jQuery来完成的,所以必须要先引入jQuery文件,因此也称为 jQuery 插件。

jQuery 插件常用的网站:

1. jQuery 插件库  http://www.jq22.com/     

2. jQuery 之家(更推荐使用)http://www.htmleaf.com/ 

 jQuery 插件使用步骤:

  1. 引入相关文件。(jQuery 文件 和 插件文件)    
  2. 复制相关html、css、js (调用插件)。

十六、本地存储

刷新页面不会丢失数据,需要用到本地存储localStorage。

存储数据格式:var todolist=[{title:’xxx’,done:false}]。

注意:

  1. 本地存储localStorage里面只能存储字符串格式,因此需要把对象转化为字符串JSON.stringify(data)。
  2. 获取本地存储数据,需要把里面的字符串转换为对象格式JSON.parse()我们才能使用里面的数据。

到这里就结束了所有的内容,如有错误,请指正!

jQuery编程(基础知识)

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之家整理,本文链接:https://www.bmabk.com/index.php/post/6268.html

(0)
小半的头像小半

相关推荐

极客之家——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!