开篇引言
JQuery:JS框架库,直白的说就是将原生js进行了封装,使用JQ可以不用考虑兼容问题,这是其优势之一,其二便是轻量级,一个文件,大小不过几百k而已;其三就是链式编程,写的少,做的多;在这些不止于这些优势的情况下,有必要学习一下。
一、顶级对象
Dom中的顶级对象:document ---- 页面中的顶级对象
document点出来的是DOM中的属性和方法
Bom中的顶级对象:window—浏览器中的顶级对象
window点出来的是浏览器中的属性和方法
如:document.window
JQuery中的顶级对象:JQuery($)
$点出来的是jQuery中的方法。
二、初体验-onload事件
1.JS中的onload事件
JS中的onload只有一个生效,只能写一次,结果只能打印ssss
<script>
//页面加载的事件:
window.onload=function () {
console.log("hhhh");
}
//DOM中的页面加载事件只有一个生效,只能写一个。
window.onload=function () {
console.log("ssss");
}
</script>
2.JQ中的onload事件
JQ中的onload事件可以写多个,而下面的第二种方式加载更快,最常使用。
<script src="jquery-1.12.2.js"></script>
<script>
//Jquery的代码,window.onload,可以实现多个onload事件,
$(window).load(function () {
console.log("hhh");
});
$(window).load(function () {
console.log("sss");
});
//页面中所有的元素(标签、图片、文字、、、、)记载完毕才会触发。
//第二种页面加载事件的写法---都是方法
//页面中基本的标签加载完毕后,就可以触发了。所以会比前面那段代码先执行。
$(document).ready(function () {
console.log("cccc");
});
//页面中基本的标签加载后就触发执行。
jQuery(function () {
console.log("bbbb");
});
//页面中基本的标签加载后就触发执行。
//最常用
$(function () {
console.log("vvvv");
});
</script>
打印结果:
三、初体验-DOM与JQ互转
有些情况需要使用JQ有些时候JQ做不了就要使用原生的JS,所以涉及到互转的情况。
- DOM转JQ: $(DOM对象)
- JQ转DOM有两种方式:
2.1:$("dom").get(0);
2.2:$("dom")[0]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.12.2.js"></script>
<script>
//实现JQ与DOM互转
//dom实现按钮操作改背景颜色
window.onload= function () {
//dom操作
// var btn = document.getElementById('btn');
// btn.onclick = function () {
// this.style.backgroundColor = 'red';
// };
//dom转JQ对象,只需要吧DOM对象放在$(dom对象)---JQ对象
// $(btn).click(function () {
// $(this).css('backgroundColor','red')
// });
//把JQ对象转DOM对象有两种方式
// 1.$(btn).get(0);
// 2.$(btn)[0]
// var btn = document.getElementById('btn');//Dom对象
// var obj = $(btn).get(0);
// obj.onclick = function () {
// this.style.backgroundColor = 'green';
// }
// 方式2
// var btn = document.getElementById('btn');//Dom对象
// var obj = $(btn)[0];
// obj.onclick = function () {
// this.style.backgroundColor = 'green';
// }
};
$(function () {
$('#btn').click(function () {
$(this).css('backgroundColor', 'yellow');
});
});
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn">
</body>
</html>
四、初体验-开关灯demo
实现一个点击按钮页面开关灯效果,分别有原生JS实现和JQ实现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 点击按钮设置body的背景颜色,实现网页开光灯的效果
//DOM的方式:
// window.onload = function () {
// document.getElementById("btn").onclick = function () {
// //判断按钮的value值
// if(this.value === '关灯'){
// document.body.style.backgroundColor = 'black';
// this.value = '开灯';
// }else {
// document.body.style.backgroundColor = 'white';
// this.value = '关灯';
// }
// }
// };
</script>
<script src="jquery-1.12.2.js"></script>
<script>
$(function () {
//获取按钮,注册事件,修改样式
$("#btn").click(function () {
if ($(this).val() === '关灯') {
$('body').css('backgroundColor','black');
$(this).val('开灯');
}else {
$('body').css('backgroundColor','white');
$(this).val('关灯');
}
});
})
</script>
</head>
<body>
<input type="button" value="关灯" id="btn">
</body>
</html>
总结
本文大概介绍了JQ,小小使用了一下JQ,未完待续。。。。