本文共 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()
例子:
床前明月光
疑是地上霜
运行结果:
阻止事件冒泡和阻止事件行为
阻止事件冒泡
方式一: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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!