首页 > 网站开发 > JavaScript教程 >
-
WEB前端第四十三课——jQuery框架(一)$()函数、添加事件监听
1.前端进阶之路
菜鸟级:设计图的还原,就是根据PSD文件写HTML和CSS;
入门级:加页面特效,轮播图、菜单、选项卡、无缝滚动等;
HTML5+CSS3炫酷页面、手机端页面;
Canvas游戏;
jQuery是页面特效的完美解决方案;
普通级:处理数据,拿到后台工程是的数据,组件页面,Ajax;
高端级:自己写服务,自己写后台,Node.js;
大神级:前端架构师,MVC,路由控制,后台协作,Angular,设计模式等。
2.jQuery简介
官网:https://jquery.com/
口号:write less, do more.
本质:是一个快速、简洁的JavaScript框架。
是继Prototype之后又一个优秀的JavaScript代码库。
产品线:
jQuery1.x.x:兼容IE6、7、8等低级版本浏览器
jQuery2.x.x:从1代中剔除了所有兼容代码,产品更轻量
jQuery3.x.x:全面支持HTML5和CSS3
文件引用:
本地存放,<script src="存放地址"></script>,官方下载jQuery文件
静态资源公共库(CDN),<script src="三方平台提供的url"></script>,
第三方类库很多,如节跳动(http://cdn.bytedance.com)、腾讯(https://libs.qq.com)等
在HTML头部(<head>内)添加引用链接。
3.jQuery基础
jQuery有非常便利的选择元素的能力,用一个“$()”函数就可以搜寻页面上的元素。
操作过程:
① jQuery操作页面元素一定是从一个“$()”开始的;
② $() 函数括号内使用引号,引号中写CSS选择器;
③ 然后加上jQuery自己的方法(不能使用 js原生的方法)。
4.$()函数
① $() 函数的执行结果(返回值)是“jq”对象,
“jq”对象是一个包含了满足选择器条件的元素节点的信息集合,可以像数组一样使用,
“jq”对象可以转换成为 js对象,调用 js方法、属性,
$()函数可以批量获取和操作元素节点,
jq 只能调用自己的属性和方法
代码示例:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<body> <div class = "divClass" ></div> <div id= "divLast" ></div> <div class = "divClass" ></div> <script> var $divs=$( 'div' ); //可以批量获取元素节点 $divs.css({width: "100px" ,height: "100px" ,border: "1px solid darkorange" , backgroundColor: "lightgreen" ,margin: "10px" }); //可以批量操作元素节点,但必须使用jQuery自己的方法 $divs[1].style.backgroundColor= "lightblue" ; //可以转换成 js的元素节点,使用 js原生方法操作 console.log($divs); //返回值为 jQuery对象 console.log($divs.get(2)); //jQuery获取对象集合中的节点,也可以使用jq自己的 get()方法 </script> </body> |
② size()方法和 length属性
是 jq对象所拥有的,用于访问 jq对象中元素节点的数量
两种方式都能够获取通过 $()函数得到的页面元素的个数
语法:var $count = $("div").size();
var $count = $("div").length;
③ jQuery全面支持CSS2.1的选择器
$("css选择器"),这里所说选择器可以是id选择器、类选择器、标签选择器、包含选择器等css2.1中提到的任意选择器组合。
语法示例:$("div .span #part") .animate({font-size:"40px"}, 600);
上述示例函数中传入了一个字符串,而$()函数在内部会采用正则表达式对其进行解析,然后在页面中搜索符合条件的所有元素节点。
④ jQuery全面支持CSS3的选择器
对于css3选择器的支持,简单来说就是支持对象属性选择器、关系选择器的等在css3中提出来的选择器,可以直接在$()中使用。
语法示例:$("div[id=divBox]").css("background-color","blue");
css3选择器最大的问题实际就是浏览器的兼容性问题,但是使用jQuery则不存在兼容性问题。
5.jQuery自己的伪类
作用:从指定的元素节点集合中“筛选”出想要的元素。
① 选择器:first,选择指定元素集合中的第一个元素
② 选择器:last,选择指定元素集合中的最后一个元素
③ 选择器:eq(n),选择指定元素集合中从 0 开始,第 n 个元素
④ 选择器:lt(n),选择指定元素集合中从 0 开始,第 n 个元素之前的所有元素(不包含n)
⑤ 选择器:gt(n),选择指定元素集合中从 0 开始,第 n 个元素之后的所有元素(不包含n)
⑥ 选择器:odd,选择指定元素集合中从 0 开始,所有奇数序号的元素
⑦ 选择器:even,选择指定元素集合中从 0 开始,所有偶数序号的元素
语法:$("选择器 :伪类") .方法/事件;
其中,“eq(n)” 可以从 $()函数中提出来作为方法使用,如 $("选择器") .eq(n) .方法/事件;,
但其他的伪类不可以这样使用。
语法示例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<html lang= "en" > <head> <meta charset= "UTF-8" > <title>Test</title> <script src= "jQueryFiles/jquery-1.8.3.js" ></script> </head> <body> <table border= "1" style= "color: orangered;text-align: center" cellspacing= "0" > <tr><td>第一列</td><td>第二列</td><td>第三列</td><td>第四列</td><td>第五列</td><td>第六列</td><td>第七列</td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> </table> <script> $( 'tr' ).css( 'height' , '40px' ); // :first $( 'tr:first td' ).css( 'width' , '100px' ); // :last $( 'tr:last' ).css( 'background-color' , 'lightpink' ); // :eq(n) $( 'tr:eq(5)' ).click( function () { $( this ).css( 'background-color' , 'skyblue' ); $( this ).animate({ 'height' : '60px' }, 'slow' ); //slow\/normal\/fast(字符串),也可以使用毫秒数值。 }); // lt(n)/gt(n) var backColor= '' ; backColor=$( 'tr:lt(5)' ).css( 'background-color' ); $( 'tr:lt(5)' ).mouseover( function () { $( this ).css( 'background-color' , 'yellowgreen' ); }); $( 'tr:lt(5)' ).mouseout( function () { $( this ).css( 'background-color' ,backColor); }); // table奇数列和偶数列选择 $( 'tr td:nth-child(even)' ).click( function () { $( this ).text( '偶数列' ); $( this ).css( 'color' , 'gray' ); }); $( 'tr td:nth-child(odd)' ).click( function () { $( this ).text( '奇数列' ); $( this ).css( 'color' , 'gold' ); }); </script> </body> </html> |
ps:上述“mouseover和mouseout”两个事件可以使用“hover”替代,示例如下:
$("选择器").hover(overFunction(){}, outFunction(){});
6.$()函数与 jQuery()函数等价
事实上在 jq中做出了一个声明,这个声明就是“$==jQuery”,即“$()和 jQuery()”两种写法是等价的。
ps:$() 函数并不是 jq所独有的,在很多其他框架(如prototype框架)中也对“$()”函数做出了声明,
根据 js语法,同名函数后声明的会覆盖前面的,
因此,在工程中如果引入了多个框架,那么使用 jQuery()这种写法是最保险的。
但是,仅对于jq框架来说,两种写法是等价的。
jq中规定 $()函数的返回值是一个 jq对象,其职能调用 jq设定的属性和方法。
jq对象转换为 js原生对象的方式:
① $("选择器")[n],使用中括号加索引的方式
② $("选择器").get(n),使用 get()方法加索引的方式
在使用$()函数选择元素节点的时候,括号中需要使用引号,但是下面三种例外:
$(window)
$(document)
$(this)
7.添加监听事件
jQuery对象采用打点调用方法,在jQuery中给元素添加监听的语法:
$("选择器").事件名(function(){ });
因为$()函数获取的是元素集合,所以是对集合中所有元素批量添加监听事件,无需使用for循环语句。
常用事件名:
① click(),单击事件
② dbclick(),双击事件
③ mouseenter(),鼠标进入
④ mouseleave(),鼠标离开
⑤ focus(),获取焦点
⑥ blur(),失去焦点
注意,jQuery中添加事件时一律不加“on”前缀;
同一个对象可以添加多个不同事件,互不影响;
同一个对象可以添加多个相同事件,不会覆盖,触发顺序与书写顺序一致。
另外,jQuery中对象绑定事件时还允许使用“链式声明”的方式,不需要重复获取 jq对象。
链式声明时除最后一个绑定的函数末尾加分号表示绑定结束以外,其余函数后不写任何内容。
语法示例:$("选择器").事件名1(function(){ })
.事件名2(function(){ })
…… ……;
8.jQuery事件监听的特点
jq中还提供了很对事件监听的方式:
① 通过“on()”方法添加事件监听,通过“off()”方法取消事件监听;
语法:$("选择器").on("事件名", function(){ }); //添加事件监听
$("选择器").off("事件名"); //去除事件监听
② 通过“bind()”方法添加事件监听
bind()方法的优点在于,它可以给一个jq对象添加多个不同的事件监听,事件名用“空格”隔开即可。
语法:$("选择器").bind("事件名1 事件名2 ……", function(){ });
另外,bind()方法还可以采用JSON形式的参数添加事件监听,添加多个不同事件监听,且拥有不同回调函数。
语法:$("选择器").bind({事件名1: function(){ }, 事件名2: function(){ }, ……});
③ 通过“one()”方法添加事件监听
one()方法添加的事件监听是“一次性”的,只能执行一次。
语法:$("选择器").one("事件名", function(){ });
90.大咖分享(弹性布局):
Flex布局详解(一):https://zhuanlan.zhihu.com/p/163217760
Flex布局详解(二):https://zhuanlan.zhihu.com/p/164590960
出处:https://www.cnblogs.com/husa/p/13670215.html