1、$(function(){ })的使用
JQuery 的代码我们通常会包裹在一个 ( f u n c t i o n ( ) ) 函 数 中 , j q 的 (function(){})函数中,jq 的 (function())函数中,jq的(function(){})也就是$(document).ready(function(){})的简写,与之对应的原生 js 的window.onload事件。
( f u n c t i o n ( ) ) 在 w i n d o w . o n l o a d 执 行 前 执 行 的 , (function(){})在window.onload执行前执行的, (function())在window.onload执行前执行的,(function(){})类似于原生 js 中的DOMContentLoaded事件,在 DOM 加载完毕后,页面全部内容(如图片等)完全加载完毕前被执行。而window.onload会在页面资源全部加载完毕后才会执行。
DOM 文档加载步骤:
- 解析 HTML 结构
- 加载外部的脚本和样式文件
- 解析并执行脚本代码
- 执行 $(function(){}) 内对应代码
- 加载图片等二进制资源
- 页面加载完毕,执行 window.onload
2、$(document).on(‘click’,‘要选择的元素’,function(){})
功能类似$(选择器).click(fn)方法。只不过存在一些区别,如下:
- $(选择器).click(fn) 当选中的选择器被点击时触发回调函数fn。只针对与页面已存在的选择器(非动态添加的dom)。
- ( d o c u m e n t ) . o n ( ′ c l i c k ′ , ′ 要 选 择 的 元 素 ′ , f u n c t i o n ( ) ) 和 (document).on('click','要选择的元素',function(){}) 和 (document).on(′click′,′要选择的元素′,function())和().click()的用法一样,最大的区别即优点是如果动态创建的元素在该选择器选中范围内是能触发回调函数
3、event.preventDefault()
取消事件的默认动作。该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作)。例如,如果 type 属性是 “submit”,在事件传播的任意阶段可以调用任意的事件句柄,通过调用该方法,可以阻止提交表单。注意,如果 Event 对象的 cancelable 属性是 fasle,那么就没有默认动作,或者不能阻止默认动作。无论哪种情况,调用该方法都没有作用。
4、$.extend()使用
1、 jquery.extend(), 为jQuery类添加类方法
2、jquery.extend(), 将两个或更多对象的内容合并到第一个对象