jQuery下载地址:http://jquery.com/download/
一、入口函数
入口函数的好处
- 保证页面中的元素可以获取到;
- 形成一个沙箱,不会造成全局污染;
- 不会出现覆盖问题
js中的入口函数:
window.onload = function() {}
jQuery中的入口函数:
写法一:
$(document).ready(function(){});
写法二:
$(function(){});
jQuery入口函数比js入口函数的优势
js中的入口函数要等待页面包括其他资源(图片等)加载完成才开始执行,而jQuery中的入口函数只等待页面加载完成就开始执行,因此,jQuery加载速度快。
二、jQuery对象与DOM对象
相关概念
jQuery对象:通过jQuery的方法获取到的元素,不能调用DOM对象。
DOM对象:使用JavaScript中的方法获取到的元素,不能调用jquery的方法。
两者联系:jQuery是伪数组,内部存放的是DOM对象,jQuery提供了很多的方法用于操作内部的DOM对象(show、css、text等)
相互转换
DOM --> jQuery:
$(dom对象)
jQuery --> DOM:
1、$li[0]
2、$li.get(0)
三、jQuery选择器
jQuery选择器是jQuery提供的一组方法,可以更加方便的获取到页面中的元素。
css选择器
jQuery完全兼容css选择器。
名称 | 用法 | 描述 |
---|---|---|
ID选择器 | $(“#id”); | 获取指定ID的元素 |
类选择器 | $(“.class”); | 获取同一类class的元素 |
标签选择器 | $(“div”); | 获取同一类标签的所有元素 |
并集选择器 | $(“div,p,li”); | 使用逗号分隔,只要符合条件之一就可 |
交集选择器 | $(“div.red”); | 获取class为red的div元素 |
子代选择器 | $(“ul>li”); | 使用>号,获取儿子层级的元素,不包括孙子层级的元素 |
后代选择器 | $(“ul li”); | 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等 |
过滤选择器
这类选择器都带冒号:
名称 | 用法 | 描述 |
---|---|---|
:eq(index) | $(“li:eq(2)”).css(“color”, ”red”); | 获取到的li元素中,选择索引号为2的元素,索引号index从0开始。 |
:odd | $(“li:odd”).css(“color”, ”red”); | 获取到的li元素中,选择索引号为奇数的元素 |
:even | $(“li:even”).css(“color”, ”red”); | 获取到的li元素中,选择索引号为偶数的元素 |
:first | $(“li:first”).css(“color”, ”red”); | 获取到的li元素中的第一个 |
:last | $(“li:last”).css(“color”, ”red”); | 获取到的li元素中的最后一个 |
筛选选择器
筛选选择器主要是方法。
名称 | 用法 | 描述 |
---|---|---|
children(selector) | children(selector) | 获取当前元素中的后代元素中的li元素 |
find(selector) | $(“ul”).find(“li”); | 获取当前元素中的后代元素中的li元素 |
siblings(selector) | $(“#first”).siblings(“li”); | 查找兄弟节点,不包括自己本身 |
parent() | $(“#first”).parent(); | 查找父亲 |
eq(index) | $(“li”).eq(2); | 相当于$(“li:eq(2)”),index从0开始 |
next() | $(“li”).next() | 找下一个兄弟 |
prev() | $(“li”).prev() | 找上一次兄弟 |
filter | $('#j_tb').filter(':checked') | 相当于$('#j_tb:checked') |
index() | $(this).index() | 获取当前元素在兄弟元素中的索引 |
四、jQuery操作样式
css操作
1、设置单个样式
//css(name, value);
//name:需要设置的样式名称 ;value:对应的样式值
$("#one").css("background","gray");//将背景色修改为灰色
2、设置多个样式
//css(obj);
//参数是一个对象,包含了需要设置的样式名和样式值
$("#one").css({
"background":"gray",
"width":"400px",
"height":"200px"
});
3、获取样式
//css(name);
//name:需要获取的样式名称
$("div").css("background-color");
//返回第一个元素对应的样式值。
class操作
1、添加类
//addClass(name)
//name:需要添加的样式类名
$("div").addClass("one);
2、移除类
//removeClass(name);
//name::需要移除的样式类名
$("div").removeClass("one);
3、判断类
//hasClass(name)
//name:用于判断的样式类名,返回值为true false
$("div").hasClass("one);
4、切换类
//addClass(name)
//name:需要切换的样式类名,有则移除该样式,无则添加该样式
$("div").toggleClass("one);
五、jQuery属性样式
attr操作
1、设置单个属性
//attr(name, value);
//name:需要设置的属性名 ;value:对应的属性值
$("img").attr("title","哎哟,不错哦");
2、设置多个属性
//attr(obj);
//参数是一个对象,包含了需要设置的属性名和属性值
$("img").attr({
title:"哎哟,不错哦",
alt:"哎哟,不错哦"
});
3、获取属性
//attr(name)
//name:需要获取的属性名称,返回对应的属性值
var oTitle = $("img").attr("title");
//返回第一个元素对应的样式值。
4、移除属性
//removeAttr(name);
//name:需要移除的属性名
$("img").removeAttr("title");
prop操作
在jQuery1.6之后,对于布尔类型的属性(checked、selected、disabled),不能用attr方法,只能用prop方法。
//设置属性
$(“:checked”).prop(“checked”,true);
//获取属性
$(“:checked”).prop(“checked”);//返回true或者false
六、jQuery动画操作
三组基本动画
显示 | 隐藏 | 切换 | |
---|---|---|---|
1 | show | hide | toggle |
2 | slideUp(滑入) | slideDown(滑出) | slideToggle |
3 | fadeIn(淡入) | fadeOut(淡出) | slideToggle |
使用形式:
show([speed], [callback]);
//speed(可选):动画的执行时间
//1.如果不传,就没有动画效果。如果是slide和fade系列,会默认为normal
//2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
//3.固定字符串,slow(200)、normal(400)、fast(600),如果传其他字符串,则默认为normal。
//callback(可选):执行完动画后执行的回调函数
自定义动画
animate
$(selector).animate({params},[speed],[easing],[callback]);
// {params}:要执行动画的CSS属性,带数字(必选)
// speed:执行动画时长(可选)
// easing:执行效果,默认为swing(缓动) 可以是linear(匀速)
// callback:动画执行完后立即执行的回调函数(可选)
动画队列与停止动画
stop
在同一个元素上执行多个动画,那么对于这个动画来说,后面的动画会被放到动画队列中,等前面的动画执行完成了才会执行。
stop(clearQueue, jumpToEnd);
//第一个参数:是否清除队列
//第二个参数:是否跳转到最终效果
七、jQuery节点操作
创建节点
$('<div></div>')
添加节点
h2标签添加到div中
- append
$('div').append($('h2'))
$('div').append('<h2></h2>')
- appendTo
$('h2').appendTo($('div))
$('h2').appendTo('div)
h2标签添加到div最前面
- prepend
$('div').prepend( $('h2') )
- prependTo
$('h2').prependTo('div')
h2标签添加到div之前,作为兄弟元素
- before
$('div').before( $('h2') )
h2标签添加到div之后
- after
$('div').after( $('h2') )
清空节点与删除节点
- empty:清空指定节点的所有元素,自身保留(清理门户)
$("div").empty();//清空div的所有内容(推荐使用,会清除子元素上绑定的内容,源码)
$("div").html("");//使用html方法来清空元素,不推荐使用,会造成内存泄漏,绑定的事件不会被清除。
- remove:相比于empty,自身也删除(自杀)
$("div").remove();
克隆节点
作用:复制匹配的元素
// 复制$(selector)所匹配到的元素(深度复制)
//cloneNode(true)
// 返回值为复制的新元素,和原来的元素没有任何关系了。即修改新元素,不会影响到原来的元素。
// 参数: true 或者 false
// 如果参数是false,也是深克隆, 也会克隆所有的内容
// 如果参数为true, 不仅是深克隆,把元素本身所有的事件也会克隆
$(selector).clone();
八、jQuery特殊属性操作
- val方法
val方法用于设置和获取表单元素的值,例如input、textarea的值
//获取值
$("#name").val();
//设置值
$("#name").val("张三");
- text方法
相当于innerText()
//获取内容
$("div").text()
//设置内容
$("div").text("<span>这是一段内容</span>")
- html方法
相当于innerHTML(),会识别html标签
//获取内容
$("div").html()
//设置内容
$("div").html("<span>这是一段内容</span>")
- width方法
设置或者获取宽度
//带参数表示设置高度
$("img").width(200);
//不带参数获取高度
$("img").width();
//获取网页的可视区宽高
//获取可视区宽度
$(window).width();
//获取可视区高度
$(window).height();
innerWidth()
:获取盒子的宽度 + paddingouterWidth()
:获取盒子的宽度 + padding + borderouterWidth(true)()
:获取盒子的宽度 + padding + border + marginHeight
方法与Width
用法相同。
- scrollTop
设置或者获取垂直滚动条的高度
//获取页面被卷曲的高度
$(window).scrollTop();
- scrollLeft
设置或者获取垂直滚动条的宽度
//获取页面被卷曲的宽度
$(window).scrollLeft();
- offset方法
获取元素距离document的位置
//获取元素距离document的位置,返回值为对象:{left:100, top:100}
$(selector).offset();
- position方法
获取元素距离有定位的父元素的位置
//获取相对于其最近的有定位的父元素的位置。
$(selector).position();
九、jQuery事件机制
发展历程:简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐)
事件注册
- 简单事件注册
click(handler)单击事件
mouseenter(handler)鼠标进入事件
mouseleave(handler)鼠标离开事件
缺点:不能同时注册多个事件
- bind方式注册事件
//第一个参数:事件类型
//第二个参数:事件处理程序
$("p").bind("click mouseenter", function(){
//事件响应方法
});
缺点:不支持动态事件绑定
- delegate注册委托事件
// 第一个参数:selector,要绑定事件的元素
// 第二个参数:事件类型
// 第三个参数:事件处理函数
$(".parentBox").delegate("p", "click", function(){
//为 .parentBox下面的所有的p标签绑定事件
});
缺点:只能注册委托事件,因此注册时间需要记得方法太多了
- on注册事件(重点)
- on注册简单事件
// 表示给$(selector)绑定事件,并且由自己触发,不支持动态绑定。
$(selector).on( "click", function() {});
- on注册委托事件
// 表示给$(selector)绑定代理事件,当必须是它的内部元素span才能触发这个事件,支持动态绑定
$(selector).on( "click",“span”, function() {});
- on注册事件的语法:
第一个参数:events,绑定事件的名称可以是由空格分隔的多个事件(标准事件或者自定义事件)
第二个参数:selector, 执行事件的后代元素(可选),如果没有后代元素,那么事件将有自己执行。
第三个参数:data,传递给处理函数的数据,事件触发的时候通过event.data来使用(不常使用)
第四个参数:handler,事件处理函数
$(selector).on(events[,selector][,data],handler);
事件解绑
- unbind方式
$(selector).unbind(); //解绑所有的事件
$(selector).unbind("click"); //解绑指定的事件
- undelegate方式
$( selector ).undelegate(); //解绑所有的delegate事件
$( selector).undelegate( “click” ); //解绑所有的click事件
- off方式(推荐)// 解绑匹配元素的所有事件
// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off("click");
触发事件trigger
$(selector).click(); //触发 click事件
$(selector).trigger("click");
jQuery事件对象
jQuery事件对象其实就是js事件对象的一个封装,处理了兼容性。
事件对象 | 形式 |
---|---|
获取鼠标位置 | clientX/clientY pageX/pageY |
获取键盘码 | e.keyCode |
阻止浏览器默认行为 | e.preventDefault() |
阻止事件冒泡 | e.stopPropagation() |
//screenX和screenY 对应屏幕最左上角的值
//clientX和clientY 距离页面左上角的位置(忽视滚动条)
//pageX和pageY 距离页面最顶部的左上角的位置(会计算滚动条的距离)
//event.keyCode 按下的键盘代码
//event.data 存储绑定事件时传递的附加数据
//event.stopPropagation() 阻止事件冒泡行为
//event.preventDefault() 阻止浏览器默认行为
//return false:既能阻止事件冒泡,又能阻止浏览器默认行为。
十、其他知识点
链式编程
原理:设置性操作会返回一个jQuery对象,因此可以继续调用jQuery的方法。
- 设置操作的时候,可以使用链式编程。
- 获取操作的时候,无法使用链式编程。
end()
:筛选选择器会改变jQuery对象的DOM对象,想要回复到上一次的状态,并且返回匹配元素之前的状态。
prevAll();//获取前面所有的兄弟元素
nextAll();//获取后面所有的兄弟元素
siblings();//获取所有的兄弟元素
prev();//获取前一个兄弟
next();//获取后一个兄弟。
多库共存
:jQuery使用$作为标示符,但是如果与其他框架中的$冲突时,jQuery可以释放$符的控制权.
var c = $.noConflict();//释放$的控制权,并且把$的能力给了c
隐式迭代
jQuery在设置属性时会自动的遍历,因此我们不需要再遍历。
- jQuery在执行设置性操作时,会给所有的元素都设置上相同的值。
- jQuery在执行获取性操作时,只会返回第一个元素对应的值。
- 如果想要给每一个元素都设置不同的值,需要手动进行遍历jQuery对象。
each()
:遍历jQuery对象集合,为每个匹配的元素执行一个函数
// 参数一表示当前元素在所有匹配元素中的索引号
// 参数二表示当前元素(DOM对象)
$(selector).each(function(index,element){});
jQuery插件
插件:jquery不可能包含所有的功能,我们可以通过插件扩展jquery的功能。
使用插件:
- 引入jQuery文件
- 引入插件(如果有用到css的话,需要引入css)
- 使用插件
常用插件的使用
- jquery.color.js的使用 https://github.com/jquery/jquery-color
- jquery.lazyload.js的使用 https://github.com/tuupola/jquery_lazyload
制作jQuery插件
核心思想:给jQuery的原型增加方法即可。
$.fn.pluginName = function(){}