本文共 3380 字，大约阅读时间需要 11 分钟。

目录

---

jQuery中的事件处理（页面加载响应事件）

$( document). ready()方法代替传统的window. onload( )方法，不过两者之间还是有些细微的区别的

•       1、在一个页而上n以无限制地使用$(document).ready()方法，各个方法间并不冲突。会按照在代码中的顺序依次执行；而 window. onload( ) 方法在一个页而中只能使用一次。
•       2、在一个文档完全下载到浏览器时(包括所有关联的文件，例如图片、横幅等)就会响应window. onload( )方法。而$ (document ).ready()方法是在所有的DOM元索完全就绪以后就可以调用，不包括关联的文件。例如在页而上还有图片没有加载完毕但是DOM元素已经完全就绪，这样就会执行$( document) . ready()方法，在相同条件下window. onload()方法是不会执行的，它会继续等待图片加载，直到图片及其他的关联文件都下载完毕时才执行。显然，把网页解析为DOM元索的速度要比把页而中的所有关联文件加载完毕的速度快得多。

  使用$(document). ready()方法时要注意一点，因为只要DOM元素就绪就可以执行该方法， 所以可能出现元素的关联文件尚未下载完全的情况。例如与图片有关的DOM元素已经就绪，但是图片还没有加载完，若此时要获取图片的高度或宽度属性是未必会有效的。要解决这个问题，可以使用jQuery中的另一个关于页而加载的方法: load()方法。load()方法会在元素的onload事件中绑定一个处理函数，如果这个处理丽数绑定到window对象上，则会在所有内容加载完毕后触发，如果绑定在元素上，则会在元素的内容加载完毕后触发。

 

事件委托，也叫事件代理。利用事件冒泡给父元素添加事件处理程序，从而使所有子元素都可以处理该事件。优点:

      1.减少DOM操作，提高交互效率

      2.新添加的子元素同样可以响应事件

      适用场景:如果所有的子元素都要求实现同样的效果，这个时候可以考虑把事件添加到父元素，让父元素代理子元素去响应事件。

      适用的事件(必须是冒泡的事件)

• click
• mousedown
• mouseup
• keydown
• keypress
• keymove
   

总结：

1、选择器匹配到的元素比较多时，不要用bind()迭代绑定

2、用id选择器时，可以使用bind()

3、需要给动态添加的元素绑定时，用delegate()或者on()

4、用delegate()或者on()方法，dom树不要太深

5、尽量使用on()

例子：

	绑定事件，添加一个p标签	
   
		
    
床前明月光
		
    
疑是地上霜
	
   
	

运行结果：

 

阻止事件冒泡和阻止事件行为

阻止事件冒泡

方式一：event.stopPropagation();

1  $("#div1").mousedown(function(event){2      event.stopPropagation();3  });

方式二：return false;

1   $("#div1").mousedown(function(event){2   　　return false;3   });

但是这两种方式是有区别的。return false 不仅阻止了事件往上冒泡，而且阻止了事件本身。event.stopPropagation() 则只阻止事件往上冒泡，不阻止事件本身。

 

阻止事件行为

默认行为，常见的是点击超链接时的跳转，表单的提交，鼠标右击的系统菜单等等。 

preventDefault()：阻止默认行为

 

jQuery动画效果

例子：动画出现和隐藏效果

	
   
	
   
	隐藏	显示	切换状态	

运行结果：

滑动显示和隐藏

例子：

	
   
	
   
	隐藏	显示	切换状态	

运行结果：

 

自定义动画

注意:

1、在使用animate()方法时，必须设置元索的定位属性position为relative或absolute,元素才能动起来。如果没有明确定义元素的定位属性，并试图使用animate()方法移动元素时，它们只会静止不动

2、在animate( )方法中可以使用属性opacity来设置元素的透明度

3、如果在{left:“400px”}中的400px之前加上.“+=”就表示在当前位置索加，“-=”就表示在当前位置累减

 

例子：红块从左往右移动

运行结果：

可以在之后继续使用animate，方块会在右移动之后往下移动

$("#box1").animate({left:"200px"},1000).animate({top:"200px"},1000)

停止动画

stop()方法也属于自定义动画两数，它会停止匹配元素正在运行的动画，并立即执行动画队列中的下一个动画

stop(clearQueue , gotoEnd )

clearQueue:表示是否清空尚未执行完的动画队列( 值为true时表示清空动画队列)

gotoEnd:表示是否让正在执行的动画直接到达动面结束时的状态(值为true时表示直接到达动画结束时状态)

注意:参数gotoEnd设置为true时， 只能直接到达正在执行的动画的最终状态，并不能到达动画序列所设置的动画的最终状态。

例子：增加结束和暂停按钮

   
	
   
	暂停	结束	

判断是否在动画状态

.is(":animated")

 

URL：统一资源定位符 是互联网上的资源地址

 

同源策略

要求动态内容（如JavaScript）只能阅读与之同源的那些HTTP应答和cookie，而不能阅读来自非同源的内容

同源三大要素：http://22.19.89.989:8080/script

1、同协议        http    https

2、同域名/同IP    www.baidu.com     22.19.89.989

3、同端口         8080     http默认使用80端口

 

 

我们是如何通过浏览器访问页面的?

了解内容B/S模式 当我们打开浏览器，在浏览器的地址栏中输入URL地址 "http://www.gacl.cn:8080/WebDemo1/1html”去访问服务器上的1.html这个web资源的过程中，浏览器和服务器都做了神马操作呢，我们是怎么在浏览器里面看到1.html这个web资源里面的内容的呢? 浏览器和服务器做了以下几个操作: 

 

•       1、浏览器根据主机名"www.gacl.cn"去操作系统的Hosts文件中查找主机名对应的IP地址。
•       2、浏览器如果在操作系统的Hosts文件中没有找到对应的IP地址，就去互联网上的DNS服务器上查找"www.gacl.cn"这台主机对应的IP地址。
•       3、浏览器查找到"www.gacl.cn'这台主机对应的IP地址后，就使用IP地址连接到Web服务器。
• 4、 浏览器连接到web服务器后，就使用http协议向服务器发送请求，发送请求的过程中，浏览器会向Web服务器以Stream(流)的形式传输数据，告诉Web服务器要访问服务器里面的哪个Web应用下的Web资源
•       5、浏览器做完上面4步工作后，就开始等待，等待Web服务器把自己想要访问的1.html这个Web资源传输给它。
•       6、服务器接收到浏览器传输的数据后，开始解析接收到的数据，服务器解析"GET/WebDemo1/1.html里面的内容时知道客户端浏览器要访问的是WebDemo1应用里面的1html这个Web资源，然后服务器就去读取1.html这个Web资源里面的内容，将读到的内容再以Stream(流)的形式传输给浏览器,
•       7、浏览器拿到服务器传输给它的数据之后，就可以把数据展现给用户看了

 

 同步交互与异步交互

 

同步交互:提交请求--》等待服务器处理--》服务器返回数据，在此期间页面不能进行任何操作(B/S模式)

异步交互:请求通过事件触发--》服务器处理(然后可以做其他的事情) --》服务器进行响应。(ajax)

举例子:

异步:你传输吧，我去忙其他事情了，传完之后告诉我。 同步:你传输，我就静静的看你传完之后我在去做其他的事情。

 

 

 

 

 

 

 

 

一起学习，一起进步 -.- ，如有错误，可以发评论 

转载地址：https://kongchengji.blog.csdn.net/article/details/97910069 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！