JQuery
1,使用步骤
引包 -> 入口函数 -> 功能实现代码(事件处理)
2,JQuery 和JS的入口函数区别
区别一:书写个数不同
Js入口函数只能出现一次,出现多次会存在事件覆盖的问题。
jQuery的入口函数,可以出现任意多次,并不会存在事件覆盖问题。
区别二:执行时机不同
Js入口函数是在所有的文件资源加载完成后,才执行。这些文件资源包括:页面文档、外部的js文件、外部的css文件、图片等。
jQuery的入口函数,是在文档加载完成后,就执行。文档加载完成指的是:DOM树加载完成后,就可以操作DOM了,不用等到所有的外部资源都加载完成。
文档加载的顺序:从上往下,边解析边执行。
3,DOM对象和JQuery对象的相互转换
DOM对象此处指的是:使用js操作DOM返回的结果。
jQuery对象此处指的是:使用jQuery提供的操作DOM的方法返回的结果。
4,jQuery选择器
图中的序号是从0开始,即索引值。
5,样式属性操作
6,属性操作
7,jQuery动画
隐藏显示动画:show() 或 hide()
滑入滑出动画:
淡入淡出动画:
改变透明度
自定义动画
注意:所有能够执行动画的属性必须只有一个数字类型的值。
比如:要改变字体大小,要使用:fontSize(font-size),不要使用:font
停止动画
当调用stop()方法后,队列里面的下一个动画将会立即开始。但是,如果参数clearQueue被设置为true,那么队列面剩余的动画就被删除了,并且永远也不会执行。
如果参数jumpToEnd被设置为true,那么当前动画会停止,但是参与动画的每一个CSS属性将被立即设置为它们的目标值。比如:slideUp()方法,那么元素会立即隐藏掉。如果存在回调函数,那么回调函数也会立即执行。
注意:如果元素动画还没有执行完,此时调用sotp()方法,那么动画将会停止。并且动画没有执行完成,那么回调函数也不会被执行。
8,节点操作
动态创建元素:
// $()函数的另外一个作用:动态创建元素
var $spanNode = $(“<span>我是一个span元素”);
var node = $(“#box”).html(“<li>我是li</li>”);
添加元素:
常用append()作用:在被选元素内部的最后一个子元素(或内容)后面插入内容(存在或者创建出来的元素都可以)
不常用操作:(用法跟append()方法基本一致)
appendTo()作用:同append(),区别是:把$(selector)追加到node中去
$(selector).appendTo(node);
prepend()作用:在元素的第一个子元素前面追加内容或节点
$(selector).prepend(node);
after()作用:在被选元素之后,作为兄弟元素插入内容或节点
$(selector).after(node);
before()作用:在被选元素之前,作为兄弟元素插入内容或节点
$(selector).before(node);
html创建元素
作用:设置或返回所选元素的html内容(包括 HTML 标记)
设置内容的时候,如果是html标记,会动态创建元素,此时作用跟js里面的 innerHTML属性相同
清空元素
复制元素
9,操作form表单
属性操作
值和内容
10,尺寸位置操作
宽度和高度操作:
css()获取高度和height获取高度的区别?
11,坐标值操作
12,事件机制
事件绑定:
bind方式: $("p").bind("click mouseenter",function(e){ //事件响应方法 });
可以同时绑定多个事件,缺点:要绑定事件的元素必须存在文档中。
delegate方式:(特点:减少事件绑定次数提高效率,性能高,支持动态创建的元素)
$(".parentBox").delegate("p","click", function(){ //为 .parentBox下面的所有的p标签绑定事件});
on方式:兼容zepto(移动端类似jQuery的一个库),jQuery1.7版本后,jQuery用on统一了所有的事件处理的方法
作用:给匹配的元素绑定事件,包括了上面所有绑定事件方式的优点
事件解绑:
unbind() 方式 作用:解绑 bind方式绑定的事件
$(selector).unbind(); //解绑所有的事件
$(selector).unbind(“click”); //解绑指定的事件
undelegate() 方式 作用:解绑delegate方式绑定的事件
$( selector ).undelegate(); //解绑所有的delegate事件
$( selector).undelegate( “click” ); //解绑所有的click事件
off解绑on方式绑定的事件
事件触发:
13,jQuery事件对象介绍
event.data 传递给事件处理程序的额外数据
event.currentTarget 等同于this,当前DOM对象
event.pageX 鼠标相对于文档左部边缘的位置
event.target 触发事件源,不一定===this
event.stopPropagation(); 阻止事件冒泡
event.preventDefault(); 阻止默认行为
event.type 事件类型:click,dbclick…
event.which 鼠标的按键类型:左1 中2 右3
event.keyCode 键盘按键代码
14,链式编程
链式编程原理:return this;
通常情况下,只有设置操作才能把链式编程延续下去。因为获取操作的时候,会返回获取到的相应的值,无法返回 this。
end(); // 结束当前链最近的一次过滤操作,并且返回匹配元素之前的状态。
15,隐式迭代
隐式迭代的意思是:在方法的内部会为匹配到的所有元素进行循环遍历,执行相应的方法;而不用我们再进行循环,简化我们的操作,方便我们调用。
如果获取的是多元素的值,大部分情况下返回的是第一个元素的值。
16,each方法
大部分情况下是不需要使用each方法的,因为jQuery的隐式迭代特性。
如果要对每个元素做不同的处理,这时候就用到了each方法
17,多库共存
此处多库共存指的是:jQuery占用了$ 和jQuery这两个变量。当在同一个页面中引用了jQuery这个js库,并且引用的其他库(或者其他版本的jQuery库)中也用到了$或者jQuery这两个变量,那么,要保证每个库都能正常使用,这时候就有了多库共存的问题。
18,jQuery插件机制
jQuery这个js库,虽然功能强大,但也不是面面俱到包含所有的功能。
jQuery是通过插件的方式,来扩展它的功能:
当你需要某个插件的时候,你可以“安装”到jQuery上面,然后,使用。
当你不再需要这个插件,那你就可以从jQuery上“卸载”它。
jQuery.color.js
animate()自定义动画:不支持背景的动画效果
jQuery.lazyload.js
使用步骤:引入jQuery文件 -> 引入插件 -> 使用插件
19,jQueryUI
jQueryUI专指由jQuery官方维护的UI方向的插件。
官方API:http://api.jqueryui.com/category/all/
其他教程:https://www.runoob.com/jqueryui/jqueryui-intro.html