06jQuery（笔记）

最新推荐文章于 2024-07-06 22:48:04 发布

笑中取栗

最新推荐文章于 2024-07-06 22:48:04 发布

阅读量191

点赞数

文章标签： jQuery

本文链接：https://blog.csdn.net/mxl00z/article/details/83028364

版权

WEB学习个人笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

day1

jQuery的官网 http://jquery.com/
jQuery就是一个js库，使用jQuery的话，会比使用JavaScript更简单。

1.x版本：能够兼容IE678浏览器
2.x版本：不兼容IE678浏览器
1.x和2.x版本jquery都不再更新版本了，现在只更新3.x版本。

3.x版本：不兼容IE678，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678）

jQuery入口函数

//第一种写法

$(document).ready(function(){

});

//第二种写法

$(function(){

});

jQuery的入口函数比window的入口函数先执行，且能有多个jQuery入口函数，顺序执行

jQuery对象和DOM对象

jQuery对象是伪数组，是DOM对象集合

两种对象方法不共用，但可以相互转换

DOM转jQuery $(DomObj);

jQuery转DOM $obj[index];//从jQuery对象中取出来即可

选择器

什么是jQuery选择器

jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQuery选择器返回的是jQuery对象。

jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器。【查看jQuery文档】

jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。

基本选择器

名称	用法	描述
ID选择器	$(“#id”);	获取指定ID的元素
类选择器	$(“.class”);	获取同一类class的元素
标签选择器	$(“div”);	获取同一类标签的所有元素
并集选择器	$(“div,p,li”);	使用逗号分隔，只要符合条件之一就可。
交集选择器	$(“div.redClass”);	获取class为redClass的div元素

总结：跟css的选择器用法一模一样。

层级选择器

名称	用法	描述
子代选择器	$(“ul>li”);	使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器	$(“ul li”);	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

跟CSS的选择器一模一样。

过滤选择器

这类选择器都带冒号:

名称	用法	描述
: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元素中，选择索引号为偶数的元素

【案例：隔行变色】

筛选选择器(方法)

筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。

名称	用法	描述
children(selector)	$(“ul”).children(“li”)	相当于$(“ul>li”)，子类选择器
find(selector)	$(“ul”).find(“li”);	相当于$(“ul 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()	找上一次兄弟

##jq使用

导入对应的jq包
写好入口函数

jQuery是链式的，可以有大部分方法返回值都是对象，可以一直调用下去

方法介绍：

在jq中方法可以传参数和不传参数，具体作用查看API文档

index（）方法返回的是当前元素在同辈中的角标

siblings()方法返回所有兄弟元素，但不包括自身（经常用来做排他功能）

鼠标进入离开事件的区别

mouseover----->mouseenter

mouseout---->mouseleave

区别：前者是进去当前对象和其中子元素会触发该事件，后者是进入该元素只触发一次该事件

$符号实质

$实际上和jQuery是同一个对象，根据参数的不同，会有不同的方法

jq调错

因为jq内部的原因，它不会报错，我们找错比较难，我们可以用浏览器的断点功能，可以看看选择器是否有元素，如果没有，则是选择器出错。（jq内部仍然返回一个没有元素的jq对象，所以还能执行后面的方法）

day2

jQuery操作样式

css操作

获取样式 $(ele).css(attr);

//注意，只会获取第一个元素的样式值

设置单个样式$(ele).css(attr,value);

设置多个样式$(ele).css(obj);
class操作

添加类：$(ele).addClass(className);

移除类：$(ele).removeClass(className);

判断类：$(ele).hasClass(className);

切换类：$(ele).toggleClass(className)

//隐式迭代

设置操作的时候：会给jq内部的所有对象都设置上相同的值。

//获取的时候，只会返回第一个元素对应的值

jQuery操作属性

获取属性：$(ele).attr(name);

设置单个属性 $(ele).attr(name,value);

设置多个属性$(ele).attr(obj);

注意

对于布尔类型的属性（例如checked,disable,selected），不要attr方法，应该用prop方法

三组基本动画函数

show()

不传参数就是显示
showUp()

滑入
slideDown()

滑出
sildeToggle();

滑入滑出切换
fadeIn()

淡入
fadeOut())

淡出
fadeToggle()

淡入淡出切换

参数

**speed[,fn]**Number/String,FunctionV1.0

speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

fn:在动画完成时执行的函数，每个元素执行一次。

**[speed],[easing],[fn]**Number/String,String,FunctionV1.4.3

speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn在动画完成时执行的函数，每个元素执行一次。

自定义动画

animate();

params:一组包含作为动画属性和终值的样式属性和及其值的集合

speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 “swing”.

fn:在动画完成时执行的函数，每个元素执行一次。

动画队列与停止动画

在同一个元素上执行多个动画，那么对于这个动画来说，后面的动画会被放到动画队列中，等前面的动画执行完成了才会执行

stop([clearQueue],[jumpToEnd])

概述

停止所有在指定元素上正在运行的动画。

如果队列中有等待执行的动画(并且clearQueue没有设为true)，他们将被马上执行

参数

[clearQueue],[gotoEnd] Boolean,BooleanV1.2

clearQueue:如果设置成true，则清空队列。可以立即结束动画。

gotoEnd:让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等。

**[queue],[clearQueue],[jumpToEnd]**BooleanV1.7

queue:用来停止动画的队列名称

clearQueue:如果设置成true，则清空队列。可以立即结束动画。

jumpToEnd:如果设置成true，则完成队列。可以立即完成动画。

jQuery操作节点

添加节点

内部插入

append();
appendTo();
prepend();
prependTo();

####外部插入

after();
before();
insertAfter();
insertBefore();

####参数：

参数可以是选择器，jq对象，标签字符串

节点创建

$("");
可写成字符串方式作为上面方法的参数使用

节点删除

empty();

//如果用html("");清空元素内容会发生内存泄露
remove();
detach();

节点替换

replaceWith();

概述

将所有匹配的元素替换成指定的HTML或DOM元素。

参数

contentString, Element, jQuery, FunctionV1.2

用于将匹配元素替换掉的内容。如果这里传递一个函数进来的话，函数返回值必须是HTML字符串。

fnFunctionV1.4

返回THML字符串，用来替换的内容。

####示例

描述:

把所有的段落标记替换成加粗的标记。

HTML 代码:
```
HellocruelWorld
```
jQuery 代码:
```
$("p").replaceWith("Paragraph. ");
```
结果:
```
Paragraph. Paragraph. Paragraph. 
```
replaceAll();

概述

用匹配的元素替换掉所有 selector匹配到的元素。

在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，要选择先前选中的元素，需要使用end()方法，参见 appendTo 方法的例二。

参数

selector选择器V1.2

用于查找所要被替换的元素

节点复制

clone();

概述

克隆匹配的DOM元素并且选中这些克隆的副本。

在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。

参数

EventsBooleanV1.0

一个布尔值（true 或者 false）指示事件处理函数是否会被复制。V1.5以上版本默认值是：false

**Events[,deepEvents]**Boolean,BooleanV1.5

1:一个布尔值（true 或者 false）指示事件处理函数是否会被复制。

2:一个布尔值，指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。

示例

描述:

克隆所有b元素（并选中这些克隆的副本），然后将它们前置到所有段落中。

HTML 代码:

<b>Hello</b><p>, how are you?</p>

jQuery 代码:

$("b").clone().prependTo("p");

结果:

<b>Hello</b><p><b>Hello</b>, how are you?</p>

小记

jQuery设置文本内容：text(); html();val();
jQuery对音频标签没有封装，对他的操作得用DOM对象。播放时play()

day3

jQuery特殊属性操作

val方法

val方法用于设置和获取表单元素的值，例如input、textarea的值

//设置值
$("#name").val(“张三”);
//获取值
$("#name").val();

【案例：京东搜索.html】

html方法与text方法

html方法相当于innerHTML text方法相当于innerText

//设置内容
$(“div”).html(“<span>这是一段内容</span>”);
//获取内容
$(“div”).html()

//设置内容
$(“div”).text(“<span>这是一段内容</span>”);
//获取内容
$(“div”).text()

区别：html方法会识别html标签，text方法会那内容直接当成字符串，并不会识别html标签。

width方法与height方法

设置或者获取高度

//带参数表示设置高度
$(“img”).height(200);
//不带参数获取高度
$(“img”).height();

获取网页的可视区宽高

//获取可视区宽度
$(window).width();
//获取可视区高度
$(window).height();

width();//width

innerWidth();padding+width

outerWidth();padding+width+border

outerWidth(true);padding+width+border+margin

scrollTop与scrollLeft

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

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

【案例：仿腾讯固定菜单栏案例】
【案例：小火箭返航案例】

offset方法与position方法

offset方法获取元素距离document的位置，position方法获取的是元素距离有定位的父元素的位置。

//获取元素距离document的位置,返回值为对象：{left:100, top:100}
$(selector).offset();
//获取相对于其最近的有定位的父元素的位置。
$(selector).position();

jQuery事件机制

简单事件注册

click(handler)			单击事件
mouseenter(handler)		鼠标进入事件
mouseleave(handler)		鼠标离开事件

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

bind方式注册事件

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

缺点：不支持动态事件绑定，不常用的方法

delegate注册委托事件

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

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

优点：可以为动态添加的元素添加事件

通过委托事件注册的事件响应在通过其他方法注册的事件之前

事件解绑

unbind方式（不用）

$(selector).unbind(); //解绑所有的事件
$(selector).unbind("click"); //解绑指定的事件

undelegate方式（不用）

$( selector ).undelegate(); //解绑所有的delegate事件
$( selector).undelegate( “click” ); //解绑所有的click事件

off方式（推荐）

// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off("click");

触发事件

$(selector).click(); //触发 click事件
$(selector).trigger("click");

jQuery事件对象

jQuery事件对象其实就是js事件对象的一个封装，处理了兼容性。

//screenX和screenY	对应屏幕最左上角的值
//clientX和clientY	距离页面左上角的位置（忽视滚动条）
//pageX和pageY	距离页面最顶部的左上角的位置（会计算滚动条的距离）

//event.keyCode	按下的键盘代码
//event.data	存储绑定事件时传递的附加数据

//event.stopPropagation()	阻止事件冒泡行为
//event.preventDefault()	阻止浏览器默认行为
//return false:既能阻止事件冒泡，又能阻止浏览器默认行为。

jQuery补充知识点

链式编程

通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 jQuery对象。

end(); // 筛选选择器会改变jQuery对象的DOM对象，想要回复到上一次的状态，并且返回匹配元素之前的状态。

【案例：五角星评分案例.html】

each方法

jQuery的隐式迭代会对所有的DOM对象设置相同的值，但是如果我们需要给每一个对象设置不同的值的时候，就需要自己进行迭代了。

作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数

// 参数一表示当前元素在所有匹配元素中的索引号
// 参数二表示当前元素（DOM对象）
$(selector).each(function(index,element){});

【案例：不同的透明度.html】

多库共存

jQuery使用 $作为标示符，但是如果与其他框架中的$ 冲突时，jQuery可以释放$符的控制权.

var c = $.noConflict();//释放$的控制权,并且把$的能力给了c

小记

$(window)有scrollTop()这个方法即文档的滚动距离，但window的DOM元素并没有scrollTop这个属性
如果要让页面的滚动有动画的效果，应该用$(“html,body”).animate({scrollTop:“0”});//因为不同浏览器会有兼容模式，所以要同时获得html和body
delay();动画延时执行

day4

插件

常用插件

插件：jquery不可能包含所有的功能，我们可以通过插件扩展jquery的功能。

jQuery有着丰富的插件，使用这些插件能给jQuery提供一些额外的功能。

jquery.color.js

animate不支持颜色的渐变，但是使用了jquery.color.js后，就可以支持颜色的渐变了。

使用插件的步骤

1. 引入jQuery文件
2. 引入插件（如果有用到css的话，需要引入css）
3. 使用插件

jquery.lazyload.js

懒加载插件

jquery.ui.js插件

jQueryUI专指由jQuery官方维护的UI方向的插件。

官方API：http://api.jqueryui.com/category/all/

其他教程：jQueryUI教程

基本使用:

2.	1.	引入jQueryUI的样式文件
2.	引入jQuery
3.	引入jQueryUI的js文件
4.	使用jQueryUI功能

使用jquery.ui.js实现新闻模块的案例

制作jquery插件

原理：jquery插件其实说白了就是给jquery对象增加一个新的方法，让jquery对象拥有某一个功能。

//通过给$.fn添加方法就能够扩展jquery对象
$.fn. pluginName = function() {};

笑中取栗

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
06jQuery（笔记）

day1jQuery的官网 http://jquery.com/jQuery就是一个js库，使用jQuery的话，会比使用JavaScript更简单。1.x版本：能够兼容IE678浏览器2.x版本：不兼容IE678浏览器1.x和2.x版本jquery都不再更新版本了，现在只更新3.x版本。3.x版本：不兼容IE678，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就...
复制链接

扫一扫