jQuery 基础
jQuery
引入 jQuery 的原因:
window.onload
有覆盖问题,只能写一个事件- 代码容错性差
- 浏览器兼容性问题
- 代码量多
- 代码杂乱
- 动画实现繁琐
jQuery 是 JS 的一个库,封装了一些常用的功能,方便调用,提高效率。
1 |
|
1 | $(document).ready(function () { |
jQuery 特点
- 链式编程,可以把
div.show(300)
和div.html('233')
连写成div.show(300).html('233')
- 隐式迭代,在方法的内部为匹配到的所有元素进行循环遍历。
jQuery 使用步骤
- 引包:
<script src='jqery-1.*.min.js></script>'
- 入口函数:
$(document).ready(function(){})
- 事件处理
开发版本一般用 1.10 以上
入口函数
原生 JS 的入口函数为 window.onload = function() {}
,作用是等页面上的所有内容加载完毕才执行函数。
jQuery 的入口函数写法:
1 | // 1. 文档加载完毕,图片不加载的时候就会执行 |
jQuery 的入口函数和原生的区别:
- 原生的入口函数只能出现一次,jQuery 的入口函数可以出现任意多次
- JS 的入口函数只能在页面所有文件资源加载完成后执行,jQuery 的入口函数是在文档,即 DOM 树加载完成。
$
符号
jQuery 中使用的两个变量 $
和 jQuery
,两者等价,都相当于一个函数。
1 | $(document).ready(function(){}); // 调用入口函数 |
假设当前 DOM 树如下
1 | <div></div> |
原生 JS 获取元素结点(数组)
1 | var box = document.getElementById('box'); // 通过id获取单个元素 |
jQuery 获取元素结点数组
1 | var box1 = $("#box"); // 通过id获取 |
二者转换
JS 对象转 jQuery 对象:
$(JS对象)
jQuery 对象转 JS 对象
1
2jQuery对象[index]; // 1
jQuery对象.get(index); // 2
jQuery 选择器
- 基本选择器
- 层级选择器
- 基本过滤选择器
- 属性选择器
- 筛选选择器
jQuery 动画
类似 PPT
显示动画
$('div').show()
:直接显示$('div').show(2000)
:2000ms 渐变显示$('div').show('slow')
:slow: 600ms, normal: 400ms, fast: 200ms$('div').show(2000, function(){})
:动画执行完之后运行回调函数
隐藏动画
$('div').hide()
$('div').show(2000)
$('div').show('fast')
$('div').show(2000, function(){})
$("div").toggle(speed, callback)
:显示和隐藏的切换
滑入和滑出
$('div').slideDown(speed, callback)
:下滑显示$('div').slideUp(speed, callback)
:上滑隐藏$('div').slideToggle(speed, callback)
:上滑和下滑切换
淡入和淡出
$('div').fadeIn(speed, callback)
:淡入$('div').fadeOut(speed, callback)
:淡出$('div').fadeToggle(speed, callback)
:淡入和淡出的切换
自定义动画
1 | $('div').animate({params}, speed, callback); |
参数1:执行动画的 CSS 属性
参数2:动画时长
参数3:回调函数
停止动画
1 | $('div').stop(true, false); |
- 参数1:
true=>
后续动画不执行,false=>
后续动画执行 - 参数2:
true=>
立即执行完成当前动画,false=>
立即停止当前动画
不写参数默认为
false
,实际开发中,直接用stop()
比较多
jQuery 操作 DOM
样式操作
$('div').css('background-color', 'red')
:设置单个样式$('div').css({'width':100, 'height': 200})
:设置多个样式(json格式)$('div').css('width')
:获取样式
类操作
$('div').addClass('nav')
:为指定元素添加className
$('div').removeClass('nav')
:为指定元素删除className
,不指定参数直接移除所有类$('div').hasClass('nav')
:判断元素是否包含类$('div').toggleClass('nav')
:有类就移除,无类就添加
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Ethanloo's!
评论