一、jQuery好处:
①写得少,做的多
②链式编程
③隐式迭代
④解决兼容性问题
二、*对象
Dom中的*对象:document------>页面中的*对象
document.点出来的是Dom中的属性和方法
Bom中的*对象:window-------->浏览器中的*对象
window.点出来的是浏览器的属性和方法,window.document也可以点出来,document也属于window
jQuery中的*对象:jQuery------>$
$点出来的是jQuery中的方法
三、加载事件
页面加载事件有如下几种写法:
A.window.onload=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)
六、开关灯示例
示例要求:点击按钮开关,网页实现开灯关灯效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页开关灯</title>
<!-- JS效果 -->
<script type="text/javascript">
// window.onload=function(){
// var btn=document.getElementById('btn');
// btn.onclick=function(){
// //首先判断按钮是开灯还是关灯
// if(this.value=="开灯"){
// this.value="关灯";
// document.getElementsByTagName("body")[0].style.backgroundColor="white";
// }else{
// this.value="开灯";
// document.getElementsByTagName("body")[0].style.backgroundColor="black";
// }
// }
// }
</script> <!-- Jquery效果 -->
<script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
if($(this).val()=="关灯"){
//.val()方法---->获取按钮的value属性的值
//.val("内容");---->设置按钮的value属性的值
$(this).val("开灯");
$("body").css("backgroundColor","black");
}else{
$(this).val("关灯");
$("body").css("backgroundColor","white");
}
});
})
</script>
</head>
<body>
<input type="button" id="btn" value="关灯" />
</body>
</html>