jquery常用事件和ajax

1、第三讲 Jquery常用事件 和Ajax,目录,常用的添加事件的方式,1,jQuery中的事件,2,Jquery和Ajax,3,操作元素的属性和CSS样式,4,常用的添加事件的方式,document.getElementById(“testDiv2“).onclick = showMsg; 单击事件 1 这种方式的弊端是: 只能为一个事件绑定一个事件处理函数，单播绑定. 不同浏览器获取事件对象的方式在不同,jQuery中的事件,jQuery有处理对象事件的一系列函数 jQuery中最常使用的bind()方法 bind( type, data, fn )：为每一个匹配元素的特定事件 ，）绑定一个事件处理器函数。 type是特定事件，data可选的，传递数据，fn是事件处理器函数。 绑定多个事件，事件之间用空格隔开 如：绑定click事件 $(“#testDiv4”).bind(“click”, showMsg); 或 $(“#testDiv4“).bind(“click“, function(event) alert(“one“); );,jQuery中的事件,使用jQuery事件处理函

2、数的好处: 添加的是多播事件委托。 统一了事件名称。 可以将对象行为全部用脚本控制. 使HTML的行为, 内容与样式切分干净 。 快捷事件 $(“#testDiv”).click(function(event) alert(“test div clicked ! ”); ); 等效于 $(“#testDiv“).bind(“click“, function(event) alert(“test div clicked ! “); );,jQuery中的事件,jQuery的快捷方法列表: blur( fn ) change( fn ) click( fn ) mouseout( fn ) mouseover( fn ) 合成事件 Hover（enterfn，leavefn）：鼠标放在元素上时调用enterfn方法，鼠标离开时调用leavefn,jQuery中的事件,Toggle（fn1,fn2,fn3）：单击后，依次调用指定的函数，直到最后一个函数，然后重复对这些函数的调用 Trigger():自动触发指定事件，不用用户干预,jQuery事件对象,jQuery中统一了事件对象, even

3、t对象 jQuery事件对象可以在扩浏览器支持的属性: type ：事件类型. 如：$(“a“).click(function(event) alert(event.type); ); data ：事件调用时传入额外参数. 如$(“p“).bind(“click“, foo: “bar“, function (event) alert(event.data.foo); ),jQuery事件对象方法,Event.stopPropagation():终止冒泡 $(“tr”).click(function(e)alert(“tr被点击”);e. stopPropagation();) Event.preventDefault():阻止默认行为 $(“a”).click(function(e)alert(“超链接禁止点击”)；e. preventDefault();),其他,pageX pageY 事件发生时鼠标所在的位置 Target:事件源，导致冒泡的事件源 Which：如果是鼠标事件，获取鼠标按键（1.左，2.中，3.右） 键盘事件 keyCode：键盘码；charCode：ascii码

4、等 One（“eventName”,fn）:只执行一次事件,示例演示,表格隔行换色，高亮显示鼠标所在行 伪装部分重要的链接显示 跟着鼠标飞的图片 图片详细信息显示,表单事件,文本框事件： 验证邮政编码文本框的输入 功能：1.进入文本框时提示用户输入邮箱方法2.移出文本框时，检验内容是否为空，不为空检验邮箱地址是否正确，不正确，提示错误，正确显示对勾图片 Jquery和css结合（p100）,表单事件,下拉列表框事件 下拉列表框联动功能 三个下拉列表分别显示：厂商、名牌、型号 当厂商改变是，名牌和型号数据改变 当名牌改变时，型号改变 单击查询按钮，显示用户选择的数据 (p 104),列表应用,列表实现导航菜单 功能：页面显示某类产品全部子类项，鼠标移到某子类项时，所选子类型样式发生改变，并在该子类项右边浮动显示该类全部产品，当鼠标移走时子类型样式恢复，同时，隐藏显示全部子类产品(P109),列表应用,网页选项卡的应用 功能：页面有三个不同的选项卡，当单击某个选项卡时，下面对应的区域显示其内容，同时选项卡的背景与内容信息背景浑然一体，并且字体加粗，表示选中状态,练习： 搜索文本框效果 页面

5、显示时，文本框中“请输入关键字”，并处于选中状态， 获得焦点时，如果文本为“请输入关键字” ，则清空文本 失去焦点时，如果文本为空，则显示则显示“请输入关键字” 显示小图片的大图和详细信息 鼠标悬浮在小图上时，显示大图并显示该图详细信息 Checkbox全选，全不选和反选 注册页面： 页面中有文本框，显示相关协议，有个注册按钮 进入该页面时，10秒倒计时，并注册按钮不可用，注册按钮文本为“请阅读协议xx秒” 倒计时结束，注册按钮可用，并显示“同意”文本,简单动画,Show（）、hide（）显示、隐藏元素 Show（speed,callback）、hide（ speed,callback ）可以带时间参数，单位为毫秒，表示显示、隐藏的速度； 也可以设置内置的速度： Fast（200毫秒） Mormal（400毫秒） Slow（600毫秒） Toggle（） 在显示和隐藏之间切换 Toggle（switch）:true/false Toggle（ speed,callback ）,简单动画,fadeIn(speed,callback ) , fadeOut(speed,callback )

6、: 以动画效果，淡入淡出，只改变透明度 slideUp(speed,callback ), slideDown(speed,callback ) 以卷帘动画效果显示和隐藏元素，改变高度 slideToggle(speed,callback );替代slideUp(),slideDown() fadeTo(speed,opacity,callback );以指定透明度方式改变元素,自定义动画,自定义动画，可以实现以上所有效果 Animate(params,duration,easing,callback)： params:制作动画的样式和值的集合 Duration:速度 “slow|normal|fast”或自定义 Easing：控制动画的表现效果，通常linear和swing,综合示例,相册放大浏览 QQ风格界面,Jquery和Ajax,使用原始Ajax, 我们需要做较多的事情, 比如创建XmlHttpRequest对象, 判断请求状态, 编写回调函数等 现在只是用jQuery的Ajax函数 即可如：jQuery的Load方法, $(“#divResult“).load(“data/A

7、jaxGetCityInfo.aspx“, “resultType“: “html“ );,jQuery Ajax详解,load( url, data, callback ) Returns: jQuery包装集 说明: load方法能够载入远程 HTML 文件代码并插入至 DOM 中。 默认使用 GET 方式, 如果传递了data参数则使用Post方式. - 传递附加参数时自动转换为 POST 方式。,jQuery Ajax详解,jQuery.get( url, data, callback, type ) Returns: XMLHttpRequest 说明: 通过远程 HTTP GET 请求载入信息。 这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。 type参数是指data数据的类型, 可能是下面的值:“xml“, “html“, “script“, “json“, “jsonp“, “text“. 默认为“html“. jQuery.getJSON( url, data, callback

8、) 方法就相当于 jQuery.get(url, data,callback, “json“),jQuery Ajax详解,jQuery.getScript( url, callback ) Returns: XMLHttpRequest 相当于: jQuery.get(url, null, callback, “script“) jQuery.post( url, data, callback, type ) Returns: XMLHttpRequest 说明: 通过远程 HTTP POST 请求载入信息。 这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。 讲解: 具体用法和get相同, 只是提交方式由“GET“改为“POST“.,jQuery.post用法,$.post(“aa.aspx”,“name”:”Tom”,funtion(data,textStatus) 向服务器传递数据，用字典方式，jquery已经对数据进行了编码，传递中文也可以。 Data:是服务器返回的数据 textStatu

9、s：请求是否成功“success” 示例：输入学生学号后，带出姓名（年龄等信息）,Json数据,数据传输的标准 Json将复杂对象序列化为一个字符串，在浏览器中再将字符串反序列化为javascript可以读取的对象， Json数据几乎所有语言都支持 Json数据格式： C#中将.Net对象序列化为json字符串的方法为：JavaScriptSerializer().Serialize(p),在System.Web.Extensions.dll中，是。Net3.x新增类， Net2.x中需要用第三方组件 Jquer 得到json数据后，用$.parseJson(data)解析为javascript可以读取的对象,示例,输入学生学号后，带出姓名（年龄等信息）用json实现 用json实现评论加载，和无刷新评论 无刷新删除行,全局Ajax事件,全局Ajax事件是一系列伴随Ajax请求发生的事件.主要有如下事件: ajaxComplete( callback ) AJAX 请求完成时执行函数 ajaxError( callback ) AJAX 请求发生错误时执行函数 ajaxSend( callback ) AJAX 请求发送前执行函数 ajaxStart( callback ) AJAX 请求开始时执行函数 ajaxStop( callback ) AJAX 请求结束时执行函数 ajaxSuccess( callback ) AJAX 请求成功时执行函数,示例,用jQuery Ajax实现无刷新注册用户检测,Thank You !,

《jquery常用事件和ajax》由会员tian****1990分享，可在线阅读，更多相关《jquery常用事件和ajax》请在金锄头文库上搜索。