jquery(四:jquery的事件、Ajax)
Jquery事件
jQuery注册事件
1.利用原生的js来为对象注册事件,后面的会把前面的覆盖
2.用jQuery的$()来为对象注册事件,后面不会把前面的覆盖
简单事件绑定-----click()---不支持同时注册,也不支持动态注册,新创建的原来有的对象的事件没有动态生成对应的事件
bind事件绑定的方式注册----支持同时注册---但是不支持同时注册
$('#div').bind({
mouseenter:function(){
console.log('鼠标移入事件');
},
click:function(){
console.log('鼠标点击');
}
})
delegate注册事件---同时注册--动态注册(本质是:事件冒泡)
缺点是:只能注册委托事件,注册的事件太多了
$('body').delegate('div',{
mouseenter:function(){
console.log('鼠标移入事件');
},
click:function(){
console.log('鼠标点击');
}
});
on注册事件
1.简单注册
给selecor绑定事件,并且由自己触发---不支持动态注册
$(selsctor).on('click',function(){})
2.委托注册---支持动态注册 委托给父类
$(selector),on('click','span',function(){});
$('body').on('click','div,span',function(){
console.log('点击事件');
});
事件解绑
unbind()
$(selector).unbind();//解绑所有
$(selector).unbind('click')
undelegate()
$(selector).undelegate();//解绑所有
$(selector).undelegate('click')
off()
$(selector).off()//解绑所有的事件
$(selector).off('click')
事件触发
trigger():可以实现自定义事件
$('#one').on('click',function(){
console.log("点击事件");
});
$('#btn1').on('click',function(){
i++;
if(i==3){
// $('#one').click();
$('#one').trigger('click');
}
})
实现自定义事件
$('#one').on('hjz',function(){
console.log('我好帅');
});
$('#btn2').on('click',function(){
var a =confirm('请问我帅么?');
if(a){
$('#one').trigger('hjz');
}
});
案例
动态删除的事件注册
$('t_body').on('click','.get',function(){
//jQuery为了注册方便,把this指向.get
$(this).parent().parent().remove();
});
jQuery的事件对象:
注册一个事件就会生成一个事件对象:
- 记录这个事件对象的触发时候的一些信息
- 触发这个事件时候的一些坐标信息
- jQuery事件中用参数e来获取
- 是对原生js事件对象的封装,帮你解决了兼容性
- 常用的3个坐标:
- pageX:是页面的实际的距离左上角的值
- pageY
- ScreenX:屏幕左上角对可视区的距离
- ScreenY
- ClientX:屏幕的dom里面到可视区的距离
$('#one').on('click',function(e){
.....
});
阻止事件冒泡:
e.stopPropagation()
阻止默认行为,阻止a便签的跳转
e.preventDefault();
既能阻止事件冒泡,又能阻止事件行为
return false;
获得键盘按键
e.keycode
$(doucument).on('keydown',function(e){
console.log(e.keycode);
});
jQuery的链式编程
如果调用一个方法,这个方法的返回值是一个jQuery对象,然会就可以继续点出jQuery方法
如果想要的jQuery对象不是我们想要的,那就不要再继续使用链式编程了
end();回到上一个状态
$('#div').width().end().height(100);
这里的返回值是数值,就不能调用end()方法
each()
$(selector).each(function(index,element){})//给每个对象执行函数
- index:索引号
- element:jQuery对象
$(function(){
var lis =$('#ul').children();
lis.each(function(index,element){
$(element).css('opacity',index/10);
});
});
多库共存
1.查看jQuery文件的版本
jQuery.fn.jquery
jQuery.prototype.jquery
$.fn.jquery
$.prototype.jquery
多个jQuery文件,那个文件后引入会把前面的覆盖掉
- 谁在后面就是谁的$
var $_=$.noConflict();
写一个自制执行函数
(function($){
...写的函数
}($_))
(function(window){
window.$={
name:'黑马程序员'
};
}(window));
能释放$的控制权实现的多库共存
ready预加载事件
ready()类似于onload()事件
ready()可以写多个,按顺序执行
$(document).ready(function(){})等价于$(function(){})
案例
五角星
- prev():上一个兄弟
- prevAll():之前所有的兄弟
- next():下一个兄弟
- nextAll:()之后所有的兄弟
$(function(){
//记录实心五角星
var sw='★';
var ss='☆';
$('#ul1').on('mouseenter',function(){
//进入
$(this).text(sw).prevAll.text(sw);
$(this).nextAll().text(ss);
}).on('mouseleave',function(){
//离开
$('#ul>li').text(ss);
$('#ul>li[clickss]').text('sw').prevAll('sw');
}).on('click',function(){
//点击
$(this).attr('clickss','current').siblings().removeAttr('clickss');
});
});
jQuery的插件
<script>jquery.color.js</script>
$(function(){
//animate动画不能改变背景色
$('#btn').on('click',function(){
$('div').animate({
left:800,
width:100,
height:100,
backgrongdColor:'green'
},2000);
}) ;
});
jQuery插件库:
。。。。
jQueryUI
可以自己写jQuery的插件
jQuery的Ajax
$.ajax
jQuery的调用ajax方法:
1.$ajax({})
格式:$ajax({})
参数:
- type:请求方式GET/POST
- url:请求的url
- async:是否异步,默认是true异步
- data:发送到服务器的数据
- dataType:预期服务器返回的数据类型
- contentType:设置请求头
- success:请求成功时调用此函数
- error:请求失败时调用此函数
get请求
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8">
$(function(){
$.ajax({
type:"get",
url:"",
async:true,
data:{
uname:"郝泾钊"
},
dataType:"json",//如果是json格式,会自动封装成对象
success:function(data){
var obj=JSON.parse(data);//转换字符串成json
var a =$('<ul></ul>');
//遍历
for(var i= 0 ;i<data.length;i++){
var user=data[i];
var li ='<li>'+user.username+'</li>';
a.append(li);
}
},
});
});
</script>
2.$.get
这是一个简单的GET请求功能以及取代复杂的$.ajax
请求成功时可以调用回调函数,如果需要在出错时执行函数,请用$.ajax
//请求就送文件,忽略返回值
$.get('js/cuisine_area.json');
//请求json文件,传递参数,忽略返回值
$.get('js/cuisine_area.json',{name:"tom",age:100});
//请求json文件,拿到返回值,请求成功后可以拿到返回值
$.get('js/cuisine_area.json',function(data){
console.log(data);
});
//请求json文件,传递参数,拿到返回值
$.get('js/cuisine_area.json',{name:"tom",age:"100"},function(data){
console.log(data);
});
3.$.post
这是一个简单的POST请求功能以及取代复杂的$.ajax
请求成功时可以调用回调函数,如果需要在出错时执行函数,请用$.ajax
//请求就送文件,忽略返回值
$.post('js/cuisine_area.json');
//请求json文件,传递参数,忽略返回值
$.post('js/cuisine_area.json',{name:"tom",age:100});
//请求json文件,拿到返回值,请求成功后可以拿到返回值
$.post('js/cuisine_area.json',function(data){
console.log(data);
});
//请求json文件,传递参数,拿到返回值
$.post('js/cuisine_area.json',{name:"tom",age:"100"},function(data){
console.log(data);
});
4.getJSON
getJSON方式要求返回的数据格式是json格式(json)字符串只识别json
//请求json文件,传递参数,拿到返回值
$.getJSON('js/cuisine_area.json',{name:"tom",age:"100"},function(data){
console.log(data);
});
最新文章
- FlASK中的endpoint问题
- Linux 学习手记(6): 磁盘、分区、MBR与GPT
- python3实现简单爬虫功能
- 可以创建专业的客户端/服务器视频会议应用程序的音频和视频控件LEADTOOLS Video Conferencing SDK
- Arrays.equals()
- MyEclipse Hibernate 学习总结
- UI-动画
- 转:C# Autocad 关闭所有有色斑的图层
- Raphael绘制圆圈环绕方法
- C#语言的Image和byte数组的互相转换
- 部署SharePoint解决方式包时遇到的问题
- as3 与js相互通信
- 七种Prolog解释器/编译器
- win32多线程程序设计笔记(第四章下)
- cocos2dx 中触摸事件分发一些解读
- 【Monkey】Monkey稳定性测试常用命令
- (详细)华为荣耀8X JSN-AL00的usb调试模式在哪里开启的教程
- getObjectURL 上传图片预览
- iis 站点中文乱码 解决方案
- Django复习之ORM
热门文章
- Spring学习笔记 - 第一章 - IoC(控制反转)、IoC容器、Bean的实例化与生命周期、DI(依赖注入)
- qtcreator 报错error: You need to set an executable in the custom run configuration.
- 【Shell脚本案例】案例1:服务器系统配置初始化
- 上传文件到阿里云 oss,前端 browser.js 笔记
- Python 缩进语法的起源:上世纪 60-70 年代的大胆创意!
- C#多线程(四)并行编程篇之结构化
- vue项目 h5上拉加载(分页功能)
- kafka详解(03) - kafka JAVA API
- 一站式云原生体验|龙蜥云原生ACNS + Rainbond
- VMware-workstation软件安装和虚拟机创建