1.1、JQuery介绍
JavaScript库,一个封装号的特定的集合。封装了大量的预先定义好的函数在里面
1.2、JQuery的基本使用
jQuery 的下载
jQuery的官网地址:,官网即可下载最新版本。各个版本的下载网址:
体验JQuery
- 引入jQuery文件。
- 在文档最末尾插入 script 标签,书写体验代码。
jQuery的入口函数
jQuery中常见的两种入口函数:
// 第一种: 简单易用。$(function () {... // 此处是页面 DOM 加载完成的入口}) ;// 第二种: 繁琐,但是也可以实现$(document).ready(function(){... // 此处是页面DOM加载完成的入口});
jQuery中的顶级对象$
$
是 jQuery 的别称,在代码中可以使用 jQuery 代替,但一般为了方便,通常都直接使用
$
。
$
是jQuery的顶级对象,相当于原生JavaScript中的 window。把元素利用
$
包装成jQuery对象,就可以调用jQuery 的方法
jQuery 对象和 DOM 对象
用原生获取的就是DOM对象
原生获取元素:
var box = document.getElementById(\'box\')
用JQuery获取的就是JQuery对象
JQuery获取元素:
$(\'.div\')
jQuery 对象和 DOM 对象互换
因为JQuery对象不能使用DOM对象的方法,DOM对象也不能使用JQuery对象的方法,所有有的时候需要对象互换
// 1.DOM对象转换成jQuery对象,方法只有一种var box = document.getElementById(\'box\'); // 获取DOM对象var jQueryObject = $(box); // 把DOM对象转换为 jQuery 对象// 2.jQuery 对象转换为 DOM 对象有两种方法:// 2.1 jQuery对象[索引值]var domObject1 = $(\'div\')[0]// 2.2 jQuery对象.get(索引值)var domObject2 = $(\'div\')[0]
jQuery 优点
- 隐式迭代
获取的多个元素,JQuery已经内部帮我们遍历好了,我们直接对元素添加事件就可以作用于每个元素 - 链式编程
JQuery可以连续的通过.(点)来调用方法
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title><script src=\"./jquery.min.js\"></script></head><body><button>快速</button><button>快速</button><button>快速</button><button>快速</button><button>快速</button><button>快速</button><button>快速</button><button>快速</button><script>$(function () {//获取的多个button,JQuery隐式迭代,我们可以直接给多个元素注册事件$(\'button\').click( function () {//链式编程//当前这个button的背景颜色pink,他的其他兄弟背景颜色清空$(this).css(\'backgroundColor\', \'pink\').siblings().css(\'backgroundColor\', \'\');})})</script></body></html>
jQuery 选择器
- 基础选择器
- 层级选择器
- 筛选选择器
jQuery事件方法
传统事件去掉on,JQuery有hover事件,.hover(fn,fn),第一个函数代表移入发生的事件,移出代表移出发生的事件
jQuery样式修改
- .css(‘属性’,‘值’)
- .css(\’属性),返回这个属性的值
- .css({‘属性’:\’值’}),利用对象添加多个值,但是样式过多一般通过类样式操作来完成
jQuery类操作
- .addClass(‘类名’),添加类
- .removeClass(’\’类名),删除类
- .toggleClass(‘类名’),替换类
jQuery 效果
jQuery 给我们封装了很多动画效果,最为常见的如下:
- 显示隐藏:show() / hide() / toggle() ;
- 划入画出:slideDown() / slideUp() / slideToggle() ;
- 淡入淡出:fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
- 自定义动画:animate() ;
注意:
动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行。
jQuery为我们提供另一个方法,可以停止动画排队:stop() ;