jQuery
① 概念
jQuery是一个javascript的框架,是对javascript的一种封装。
使用前一定要引入外部的jquery. js文件
< script src= "./js/jquery3.4.1.js" type= "text/javascript" charset= "utf-8" > < / script>
注意:路径问题
② 理解 $(function(){})
$ ( function ( ) { } ) ; 表示文档加载。
其实是由下面两种构成:
$ ( ) ; 和 function ( ) { } 合并在一起就是: $ ( function ( ) { } ) ;
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。换句话说,
写在这里面的JQuery代码都是文档加载好之后的。
就不会有获取一个还没有加载好的图片这种问题了。一样功能,
还有另一个写法
$ ( document) . ready ( function ( ) { } ) ;
它也是由两部分组成
$ ( document) . ready ( ) ; 和 function ( ) { }
③ 通过选择器获取元素
与javascript通过id获取元素节点的方式 ( document. getElementById ) 不同
JQuery通过 $ ( "#id" ) 就可以获取了
需要注意的是,通过 document. getElementById 获取到的是 DOM 里的 元素节点
而通过$ ( "#id" ) 获取到的是一个 JQuery 对象
1> 取值
通过JQuery对象的val ( ) 方法获取值, 相当于 document. getElementById ( "input1" ) . value;
通过html ( ) 获取元素内容, 如果有子元素,保留标签
通过text ( ) 获取元素内容, 如果有子元素,不包含标签
var val1= $ ( "选择器" ) . val ( ) ;
var content= $ ( "选择器" ) . html ( ) ;
2> 设置值
$ ( "选择器" ) . val ( "值" ) ;
$ ( "选择器" ) . html ( "内容" ) ;
④ JQuery转DOM
通过get ( 0 ) 或者[ 0 ] 把JQuery对象转为DOM 对象
⑤ DOM转jQuery
通过$ ( ) 把DOM 对象转为JQuery对象
⑥ JQuery属性
1> 通过attr()获取一个元素的属性
$ ( "选择器" ) . attr ( "属性名" )
2>通过attr(attr,value)修改属性
$ ( "选择器" ) . attr ( "属性名" , "属性值" ) ;
3>通过removeAttr(attr)删除属性
$ ( "选择器" ) . removeAttr ( "属性名" ) ;
4>prop与attr的区别
与prop一样attr也可以用来获取与设置元素的属性。
区别在于,对于自定义属性和选中属性的处理。
选中属性指的是 checked, selected 这2 种属性
1. 对于自定义属性 attr能够获取,prop不能获取
2. 对于选中属性
attr 只能获取初始值, 无论是否变化
prop 能够访问变化后的值,并且以true | false 的布尔型返回。
所以在访问表单对象属性的时候,应该采用prop而非attr
⑦ JQuery效果
1> 显示 隐藏 切换
显示 隐藏 切换 分别通过show ( ) , hide ( ) , toggle ( ) 实现
也可以加上毫秒数,表示延时操作, 比如show ( 2000 )
2> 向上滑动 向下滑动 滑动切换
向上滑动 向下滑动 滑动切换 分别通过slideUp ( ) , slideDown ( ) , slideToggle ( ) 实现
也可以加上毫秒数,表示延时操作,比如slideUp ( 2000 )
3> 淡入 淡出 淡入淡出切换 指定淡入程度
淡入 淡出 淡入淡出切换 指定淡入程度 分别通过fadeIn ( ) , fadeOut ( ) , fadeToggle ( ) fadeTo ( ) 实现
也可以加上毫秒数,表示延时操作,比如fadeIn ( 2000 )
fadeTo跟的参数是0 - 1 之间的小数。 0 表示不淡入,1 表示全部淡入
4>自定义动画效果
通过animate 可以实现更为丰富的动画效果
animate ( ) 第一个参数为css样式
animate ( ) 第二个参数为延时毫秒
注: 默认情况下,html中的元素都是固定,并且无法改变的位置的。 为了使用animate ( ) 自定义动画效果,需要通过css把元素的position设置为relative、absolute或者fixed。
$ ( function ( ) {
var div = $ ( "#d" ) ;
$ ( "#b1" ) . click ( function ( ) {
div. animate ( { left: '100px' } , 2000 ) ;
div. animate ( { left: '0px' , top: '50px' , height: '50px' } , 2000 ) ;
} ) ;
} ) ;
5>回调函数
效果一般需要一定的时间,并且这个时间可长可短,所以就无法精确的确定该效果何时结束。
好在,效果方法都提供对回调函数callback ( ) 的支持。
只需要在调用效果方法的最后一个参数传入一个function ,当效果结束的时候,就会自动调用该function 了。
$ ( function ( ) {
var div = $ ( "#d" ) ;
$ ( "#b1" ) . click ( function ( ) {
div. animate ( { left: '100px' } , 2000 ) ;
div. animate ( { left: '0px' , top: '50px' , height: '50px' } , 2000 , function ( ) {
alert ( "动画演示结束" ) ;
} ) ;
} ) ;
} ) ;
⑧ 事件
1> 加载
页面加载有两种方式表示
1. $ ( document) . ready ( function ( ) { } ) ;
2. $ ( function ( ) { } ) ; 这种比较常用
图片加载用load ( ) 函数
3. $ ( "#img" ) . load ( function ( ) {
$ ( "#msg" ) . html ( "图片加载成功" ) ;
} ) ;
2>点击
click ( ) 表示单击
dblclick ( ) 表示双击
注: 空白键和回车键也可以造成click事件,但是只有双击鼠标才能造成dblclick事件
示例:
$ ( "#b" ) . click ( function ( ) {
$ ( "#msg" ) . html ( "单击按钮" ) ;
} ) ;
$ ( "#b" ) . dblclick ( function ( ) {
$ ( "#msg" ) . html ( "双击按钮" ) ;
} ) ;
3>键盘
keydown 表示按下键盘
keypress 表示按住键盘
keyup 表示键盘弹起
这三者的区别分别表现在发生的 先后顺序,获取到的键盘按钮值,已经对输入框的文本取值这三方面
先后顺序: 按照 keydown keypress keyup 顺序发生
键盘按钮值:
通过event对象的which属性获取键盘的值
keydown和keyup 能获取所有按键,不能识别大小写
keypress 不能获取功能键,如F1 SHIFT 等,能够识别大小写
文本取值:
keydown和keypress:不能获取最后一个字符
keyup: 获取所有字符
如图所例,敲入ab
发生的先后顺序是 keydown, keypress, keyup
keydown和keyup取到大写B 的ASCII 码表 66 , keypress取到小写b的ASCII 码表 98.
keydown和keypress只能取到文本值a, keyup可以取到ab
4>鼠标
mousedown 表示鼠标按下
mouseup表示鼠标弹起
mousemove表示鼠标进入
mouseenter表示鼠标进入
mouseover表示鼠标进入
mouseleave表示鼠标离开
mouseout表示鼠标离开
进入事件有3 个 mousemove mouseenter mouseover
mousemove :当鼠标进入元素,每移动一下都会被调用
mouseenter :当鼠标进入元素,调用一下,在其中移动,不调用
mouseover:当鼠标进入元素,调用一下,在其中移动,不调用
mouseenter 和 mouseover的区别
mouseenter: 当鼠标经过其子元素不会被调用
mouseover:当鼠标经过其子元素会被调用
mouseleave 和 mouseout的区别
mouseleave: 当鼠标经过其子元素不会被调用
mouseout:当鼠标经过其子元素会被调用
5>焦点
focus ( ) 获取焦点
blur ( ) 失去焦点
6>改变
change ( ) 内容改变
注: 对于文本框,只有当该文本失去焦点的时候,才会触发change事件。
7>绑定事件
以上所有的事件处理,都可以通过on ( ) 绑定事件来处理
$ ( "selector" ) . on ( "event" , function ) ;
$ ( "#b" ) . on ( "click" , function ( ) {
$ ( "#message" ) . html ( "单击按钮" ) ;
} ) ;
8>触发事件
$ ( "#b" ) . on ( "click" , function ( ) {
$ ( "#msg" ) . html ( "单击按钮" ) ;
} ) ;
$ ( "#b" ) . on ( "dblclick" , function ( ) {
$ ( "#msg" ) . html ( "双击按钮" ) ;
} ) ;
$ ( "#b" ) . trigger ( "dblclick" ) ;
⑨ Ajax
1>提交AJAX请求
参考 使用AJAX 通过无刷新验证账号是否存在 这个例子, 服务端使用JSP 进行验证,当用户输入值的时候提示"已经存在"
完整的 $. ajax 参数 比较复杂,这里采用了常见的调用方式。
$. ajax ( {
url: page,
data: { "name" : value} ,
success: function ( result) {
$ ( "#选择器" ) . html ( result) ;
}
} ) ;
$. ajax采用参数集的方式 { param1, param2, param3} 不同的参数之间用, 隔开
第一个参数 url: page 表示访问的是page页面
第二个参数 data: { name: value} 表示提交的参数
第三个参数 success: function ( ) { } 表示服务器成功返回后对应的响应函数
2> get
$. get 是 $. ajax的简化版,专门用于发送GET 请求
$. get (
page,
{ "name" : value} ,
function ( result) {
$ ( "#checkResult" ) . html ( result) ;
}
) ;
$. get 使用3 个参数
第一个参数: page 访问的页面
第二个参数: { name: value} 提交的数据
第三个参数: function ( ) { } 响应函数
只有第一个参数是必须的,其他参数都是可选
3> post
$. post 是 $. ajax的简化版,专门用于发送POST 请求
$. post (
page,
{ "name" : value} ,
function ( result) {
$ ( "#checkResult" ) . html ( result) ;
}
) ;
$. post 使用3 个参数
第一个参数: page 访问的页面
第二个参数: { name: value} 提交的数据
第三个参数: function ( ) { } 响应函数
只有第一个参数是必须的,其他参数都是可选
4> load
$ ( "#id" ) . load ( page, [ data] ) ;
id: 用于显示AJAX 服务端文本的元素Id
page: 服务端页面
data: 提交的数据,可选。 在本例中,直接在page里加上了参数列表
5> 表单格式化
serialize ( ) : 格式化form下的输入数据
有的时候form下的输入内容比较多,一个一个的取比较麻烦,就可以使用serialize ( ) 把输入数据格式化成字符串
$ ( function ( ) {
$ ( "input" ) . keyup ( function ( ) {
var data = $ ( "#form" ) . serialize ( ) ;
var url = "请求地址" ;
var link = url+ "?" + data;
$ ( "a" ) . html ( link) ;
$ ( "a" ) . attr ( "href" , link) ;
} ) ;
} ) ;
⑩ Json转换字符串
将JSON 格式的字符串,转换为JSON 对象
$. parseJSON 将JSON 格式的字符串,转换为JSON 对象
var json对象 = $. parseJSON ( 'json格式字符串' ) ;
数组的操作
1> 遍历
$. each 遍历一个数组
第一个参数是数组
第二个参数是回调函数 i是下标,n是内容
$. each ( 数组, function ( i, n) {
} ) ;
2>去除重复
$. unique ( ) 去掉重复的元素
注意 : 执行unique之前,要先调用sort对数组的内容进行排序。
var a = new Array ( 5 , 2 , 4 , 2 , 3 , 3 , 1 , 4 , 2 , 5 ) ;
a. sort ( ) ;
$. unique ( a) ;
$. each ( a, function ( i, n) {
document. write ( "元素[" + i + "] : " + n + "<br>" ) ;
} )
3> 是否存在$.inArray
$. inArray 返回元素在数组中的位置 ,如果不存在返回- 1
var a = new Array ( 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 ) ;
document. write ( $. inArray ( 9 , a) ) ;
阻止事件传播
<!DOCTYPE html>
< html>
< head>
< meta charset = " utf-8" >
< title> 阻止事件传播</ title>
< style type = " text/css" >
.big {
width : 150px;
height : 150px;
background-color : lightblue;
}
.small {
width : 100px;
height : 100px;
background-color : lightgreen;
}
</ style>
</ head>
< body>
< div class = " big" >
< div class = " small" >
</ div>
</ div>
< script src = " ./js/jquery-3.3.1.min.js"
type = " text/javascript" charset = " utf-8" > </ script>
< script type = " text/javascript" >
$ ( function ( ) {
$ ( ".small" ) . click ( function ( event) {
alert ( "点击了小块" ) ;
return false ;
} ) ;
$ ( ".big" ) . click ( function ( ) {
alert ( "点击了大块" ) ;
} ) ;
} ) ;
</ script>
</ body>
</ html>