3-Jquery常用事 件 和Ajax.pptVIP

第三讲 Jquery常用事件 和Ajax 目录 常用的添加事件的方式 1 jQuery中的事件 2 Jquery和Ajax 3 操作元素的属性和CSS样式 4 常用的添加事件的方式 document.getElementById(testDiv2).onclick = showMsg; div id=testDiv1 onclick=alert(!!!);单击事件 1/div 这种方式的弊端是: 只能为一个事件绑定一个事件处理函数，单播绑定.? 不同浏览器获取事件对象的方式在不同 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事件处理函数的好处: 添加的是多播事件委托。 统一了事件名称。 可以将对象行为全部用脚本控制. 使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中统一了事件对象,? event对象 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码等 One（“eventName”,fn）:只执行一次事件 示例演示 表格隔行换色，高亮显示鼠标所在行 伪装部分重要的链接显示 跟着鼠标飞的图片 图片详细信息显示 表单事件 文本框事件： 验证邮政编码文本框的输入 功能：1.进入文本框时提示用户输入邮箱方法2.移出文本框时，检验内容是否为空，不为空检验邮箱地址是否正确，不正确，提示错误，正确显示对勾图片 Jquery和css结合（p100） 表单事件 下拉列表框事件 下拉列表框联动功能 三个下拉列表分别显示：厂商、名牌、型号 当厂商改变是，名牌和型号数据改变 当名牌改变时，型号改变 单击查询按钮，显示用户选择的数据 (p 104) 列表应用 列表实现导航菜单 功能：页面显示某类产品全部子类项，鼠标移到某子类项时，所选子类型样式发生改变，并在该子类项右边浮动显示该类全部产品，当鼠标移走时子类型样式恢复，同时，隐藏显示全部子类产品(P109) 列表应用 网页选项卡的应用 功能：页面有