一、jQuery好处:
①写得少,做的多
②链式编程
③隐式迭代
④解决兼容性问题
二、顶级对象
Dom中的顶级对象:document------>页面中的顶级对象
document.点出来的是Dom中的属性和方法
Bom中的顶级对象:window-------->浏览器中的顶级对象
window.点出来的是浏览器的属性和方法,window.document也可以点出来,document也属于window
jQuery中的顶级对象:jQuery------>$
$点出来的是jQuery中的方法
三、加载事件
页面加载事件有如下几种写法:
A.window.οnlοad=function(){ } ------>JS中页面加载事件,只能写一次,如果写多个,后面的会把前面的覆盖
B.$(window).load( function(){ } )------>jQuery页面的加载事件,与A中代码作用相同,可以写多个
上述A和B两种页面加载方式,是页面中所有内容加载完毕后才触发,加载内容指的是:标签、文本内容、图片......等
C.$( document ).ready( function(){ });------>jQuery页面的加载事件
C方法比A和B方法的执行速度快很多,因为C的执行逻辑是把页面的基本标签加载完毕后就可以触发了。
C也可以写作 $( function(){ })
四、jQuery中引入文件注意问题
先引入文件,然后再使用,开发的时候引入正常的jQuery文件和压缩版的文件都没有问题
建议:开发引入普通版文件,上线后使用压缩版。
五、jQuery元素与DOM元素的互换
(一)为什么Jquery对象和DOM对象要互转?
DOM对象转Jquery对象操作方便,毕竟Jquery中方法都是封装好了的,而且兼容问题解决的很好,代码少,方便.
Jquery对象转DOM对象,因为Jquery中文件一直在更新,很多东西都是随着使用而进行封装和升级,不太可能把所有dom中用到的进行封装,还有很多未知的兼容问题没有封装进去,所以,有的时候jquery中不能解决的问题,还需要原生的js代码来解决,所以,jquery对象有的时候需要转成dom对象来进行。
(二)Jquery对象和DOM对象怎么转换?
dom对象---------->Jquery对象
$(dom对象)
Jquery对象---------->dom对象
$(“#btn“)[0]
$(“#btn“).get(0)
六、开关灯示例
示例要求:点击按钮开关,网页实现开灯关灯效果
1 2 3 4 5网页开关灯 6 7 22 23 24 25 40 41 42 43 44