1.什么是javaScript库
javaScript框架库:就是一个普通的js文件,封装了很多的很多的函数,
封装了很多的兼容的代码;
常见的框架库
prototype,YUI,Dojo,ExtJS,jQuery等,这些库对javaScript进行了封装,
简化了开发,这些库都是对javaScript的封装,内部都是JavaScript实现的;
ps:有的需要花钱,有的做的并不是很好,选择不花钱的,免费的,做的又好的;
2.什么是jQuery
jQuery就是一个javaScript函数库;
3.为什么要学习jQuery?
DOM 中一个简单的功能需要大量的代码
DOM 中兼容的问题很多
DOM 中代码的兼容性很差
DOM 中window.onload也只能有一个...
特点:Write Less, Do More
1.很好的解决了不同浏览器的兼容问题
2.体积小,链式编程,隐式迭代
3.插件丰富,开源,免费(插件多,缺什么找什么,让编写javaScript程序更简单,
更强大!)
4.jQuery初体验
<div id="dv"></div>
<button id="btn">点击</button>
<script>
// 点击按钮,改变盒子的宽,高,背景颜色
$('#btn').click(function() {
$('#dv').css({
width: 300,
height: 500,
background: 'blue'
})
})
</script>
//原生
var dv = document.getElementById('dv');
var btn = document.getElementById('btn');
btn.onclick = function() {
dv.style.width = '300px';
dv.style.height = '300px';
dv.style.backgroundColor = 'green';
}
5.jQuery中的顶级对象 $
Dom 中的顶级对象:document ---页面中的顶级对象
document 点出来的是DOM中的属性和方法;
Bom 中的顶级对象:window ---浏览器中的顶级对象
window 点出来的是浏览器中的属性和方法
window.document
jQuery 中的顶级对象:jQuery ---$
$ 点出来的是jQuery中的方法
6.页面的加载事件
<!--javaScript 页面加载事件-->
window.onload 只能写一次,重复会被后面的干掉
页面所有的标签,图片,外部引入加载后触发
<!--jQuery 页面加载事件-->
$(function(){}) DOM基本标签加载就触发,可以写多个
7.为什么jQuery对象和DOM对象要互转
DOM对象转jQuery对象:操作方便,因为jQuery中方法都是封装好了的,
而且兼容问题解决的很好,代码少方便
jquery对象转DOM对象,因为jquery中文件一直在更新,很多东西都是随着使用
而进行封装和升级,不太可能把所有的dom中用到的进行封装,还有很多未知的
兼容问题没有封装进去,所有,有的时候jquery中不能解决的问题,还需要原生
js代码来解决,所以,jquery对象有时候需要转成dom对象来进行操作;
<!--把jquery对象转成DOM对象有两种方式:-->
1.$().get(0);
2.$()[0];
var btn = document.getElementById('btn');//DOM对象
var btn1 = $(btn).get(0);//转成DOM对象
8.再次体验jQuery代码的便捷
body背景开关灯效果
<button class="btn">关灯</button>
<script>
// 点击按钮,改变盒子的宽,高,背景颜色
$('.btn').click(function() {
console.log($('.btn').text())
if ($(this).text() == '关灯') {
$('body').css({
backgroundColor: 'black'
})
$(this).text('开灯')
} else if ($(this).text() == '开灯') {
$('body').css('backgroundColor', 'white')
$(this).text('关灯')
}
})
</script>