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动画操作

三组基本动画

显示隐藏切换
1showhidetoggle
2slideUp(滑入)slideDown(滑出)slideToggle
3fadeIn(淡入)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():获取盒子的宽度 + padding
outerWidth():获取盒子的宽度 + padding + border
outerWidth(true)():获取盒子的宽度 + padding + border + margin
Height方法与Width用法相同。

  • scrollTop

设置或者获取垂直滚动条的高度

//获取页面被卷曲的高度
$(window).scrollTop();
  • scrollLeft

设置或者获取垂直滚动条的宽度

//获取页面被卷曲的宽度
$(window).scrollLeft();
  • offset方法

获取元素距离document的位置

//获取元素距离document的位置,返回值为对象:{left:100, top:100}
$(selector).offset();
  • position方法

获取元素距离有定位的父元素的位置

//获取相对于其最近的有定位的父元素的位置。
$(selector).position();

九、jQuery事件机制

发展历程:简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐)

事件注册

  1. 简单事件注册
click(handler)单击事件
mouseenter(handler)鼠标进入事件
mouseleave(handler)鼠标离开事件

缺点:不能同时注册多个事件

  1. bind方式注册事件
//第一个参数:事件类型
//第二个参数:事件处理程序
$("p").bind("click mouseenter", function(){
    //事件响应方法
});

缺点:不支持动态事件绑定

  1. delegate注册委托事件
// 第一个参数:selector,要绑定事件的元素
// 第二个参数:事件类型
// 第三个参数:事件处理函数
$(".parentBox").delegate("p", "click", function(){
    //为 .parentBox下面的所有的p标签绑定事件
});

缺点:只能注册委托事件,因此注册时间需要记得方法太多了

  1. 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);

事件解绑

  1. unbind方式
$(selector).unbind(); //解绑所有的事件
$(selector).unbind("click"); //解绑指定的事件
  1. undelegate方式
$( selector ).undelegate(); //解绑所有的delegate事件
$( selector).undelegate( “click” ); //解绑所有的click事件
  1. 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插件
核心思想:给jQuery的原型增加方法即可。

$.fn.pluginName = function(){}
最后修改:2023 年 05 月 23 日
如果觉得我的文章对你有用,请随意赞赏