《jQuery权威指南》学习笔记之第4章 jQuery中的事件与应用

4.1 事件机制
事件触发后的两个阶段:捕获(capture)(不支持) 冒泡(bubbling):事件执行的顺序
示例4-1     事件中的冒泡现象

说明:阻止冒泡现象 stopPropagtion() 和return false

 

4.2 页面载入事件

4.2.1 ready()方法的工作原理
 1.   jQuery的ready()方法与javascript的OnLoad()方法的区别
  ready() DOM模型加载完毕执行
  OnLoad() 页面元素全部加载完毕后执行
 2.   ready()的工作原理
  jQuery脚本加载到页面时,设置一个isReady标记,监听页面加载进度
  遇到执行ready()方法时,isReady值是否被设置
  未被设置,页面没有加载完成
  未完成部分用一个数组缓存起来
  当加载完成时,在将完成的部分通过缓存一一执行
4.2.2 ready()方法的几种相同写法
 1.   $(document.ready(function() {
       //代码部分
      )}
 2.   $(function() {
       //代码部分
      )}
 3.   jQuery(document.ready(function() {
       //代码部分
      )}
 4.   jQuery(function() {
       //代码部分
      )}

 

4.3 绑定事件
 bind(type, [data], fn)
 type:blur, focus, load, resize, scroll, unload, click,dblclick,mousedown,mouseup,mousemove,mouseover,mouseout,mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup,error
 data:作为event.data属性值传递给事件对象的额外数据对象
 fn:绑定到每个选择元素的事件中的处理函数
 示例4-2     用bind方法绑定事件

 

 示例4-3     用映射方式绑定不同的事件(4-3-1 [data]参数应用)

	
		
		
		
		
	
	
		
姓名: 
		

	

 

 

4.4 切换事件 hover()和toggle()

4.4.1 hover()方法
 1.   鼠标悬浮与移出事件
  $("a").hover(function() { 
  },function(){
  });
  $("a").mouseenter(function() {
  });
  $("a").mouseleave(function() {
  });
 2.   示例4-4     用hover方法绑定事件

	
		
		
		
		
	
	
		

			
jQuery简介
			
  jQuery是由美国人John Resig于2006年创建的一个开源项目，他的主旨是:以更少的代码，实现更多的功能(Write less, Do more).
		
	

4.4.2 toggle()方法: toggle(fn, fn2, [fn3, fn4,...]) 
 示例4-5     用toggle方法绑定事件(出错)

 

 

4.5 移除事件: unbind([type], [fn])
示例4-6     用unbind方法移除事件

 

 

4.6 其他事件:one()和trigger()
4.6.1 方法one()
 示例4-7     用one方法绑定事件

4.6.3 方法trigger()
 示例4-8     用trigger()方法绑定事件(jQuery显示有问题)

	
		
		
		
		
	
	
		姓名: 

 trigger()和triggerHandler()方法

 

4.7 表单应用

4.7.1 文本框的事件应用
示例4-9     文本框中的事件应用

	
		
		
		
		
	
	
		

			

				邮箱:
				
			
		
	

4.7.2 下拉列表框中的事件应用
示例4-10    下拉列表框中的事件应用

	
		
		
		
		
	
	
		

			厂商: 请选择
			品牌: 请选择
			型号: 请选择
			
		
		

		

 

有关each()方法的使用:http://www.cnblogs.com/xiaojinhe2/archive/2011/10/12/2208740.html
json数据中的-和_区别，坑爹呀，调了两天的程序

4.8 列表应用
示例4-11    列表中的导航菜单应用

	
		
		
		
		
	
	
		

			

				

					
					电脑数码类产品
				

				

					
笔记本
					

						
笔记本1
						
笔记本2
						
笔记本3
						
笔记本4
						
笔记本5
					

					
移动硬盘
					

						
移动硬盘1
						
移动硬盘2
						
移动硬盘3
						
移动硬盘4
						
移动硬盘5
					

					
电脑软件
					

						
电脑软件1
						
电脑软件2
						
电脑软件3
						
电脑软件4
						
电脑软件5
					

					
数码产品
					

						
数码产品1
						
数码产品2
						
数码产品3
						
数码产品4
						
数码产品5
					
				
				
			
		
	

 

4.9 网页选项卡的应用
示例4-12    网页选项卡的应用

	
		
		
		
		
	
	
		

			
家居
			
电器
			
二手
		

		

			
我是家居的内容!
			
欢迎您来到电器城
			
二手市场,产品丰富多彩!
		
	

4.10    综合案例分析---删除数据时的提示效果
4.10.1 需求分析
4.10.2 效果界面
4.10.3 功能实现
示例4-13   删除记录时的提示效果

    
    
     
    


     

         
         这是一条可删除的记录
         
               
         
     
     

     

          

               删除时提示
          
          

               您真的要删除该条记录吗？
          
          

                
              
          
     

4.10.4 代码分析

 

 

代码下载：点击打开链接