JQuery : (java Script Query),其是一个JS的框架,实质也是一个js
、优点:支持各种主流浏览器;使用比较简单,有很多丰富的插件和扩展机制
基本学习内容:
引入jQuery文件:
jQuery的选择框
jQuery的
jQuery操作元素属性
jQuery操作元素的样式和内容
jQuery操作元素的文档结合
jQuery中的事件
jQuery的动画效果
附带:jQuery的封装原理:
<html>
<head>
<title>jQuery封装原理</title>
<meta charset="UTF-8"/>
<script type="text/javascript">
function test(){
alert("内部显示");
}
// function test1(){
// var a=getClannad(); //获取了其外部的对象
// a.test(); //利用对象的属性进行调用
// }
function testTop(){
function test1(){
alert("双重的函---闭包")
}
return test1;
}
</script>
<!--涉及到变量的覆盖问题,当同名变量出现再次赋值的时候会出现新值把就值覆盖的现象,变量的原则是就近原则-->
<!--覆盖现象是出现在变量是全局变量,对应的全局变量只能有一个,所以会出现覆盖现象-->
<script src="jQuery附件.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h3>jQuery封装原理</h3>
<input type="button" name="" id="" value="测试1" onclick="test()"/>
<!--通过外部引用的对象进行调用,我们需要获得其外部的对象名,也会产生覆盖,毕竟是全局变量-->
<input type="button" name="" id="" value="测试2" onclick="clannad.test()"/>
<!--我们通过函数获得外部的函数获得对象再利用其内部的函数来进行调用,不仅有了局部变量的不会覆盖而且也可以接收变量,但是其还是一个函数还是会重名-->
<input type="button" name="" id="" value="测试3" onclick="test1()"/>
<input type="button" name="" id="" value="测试4" onclick="testTop()()"/>
<!--调用testTop只能获得test1的对象,但是其并不会执行alert,这是test1执行产生的结果,所以要加两个()()-->
<input type="button" name="" id="" value="测试5" onclick="window。test()"/>
</body>
</html>
//function test(){
// alert("我是外部引用");
//}
//声明对象
//var clannad={};
//clannad.test=function(){
// alert("我是通过对象进行的外部调用");
//}
//
利用函数返回含有一定元素的对象,工厂模式
//function getClannad(){
// var clannad={};
// clannad.test=function(){
// alert("我是通过函数返回对象来进行的外部调用");
// }
// return clannad; //当调用这个函数时,我们可以在js中用一个变量来接受变量,来达到保留其内部变量值的目的,而且函数调用完后其内部量就消失(局部变量)
//}
匿名自调用
//(function (){ //直接去掉函数名就不会产生重名覆盖的现象了,但是我们没法调用了
// var clannad={};
// clannad.test=function(){
// alert("外部的匿名自调用");
// }
// alert("硬性匿名自调用");
// return clannad;
//})() //相当于一个函数直接调用了(定义并且执行)//所以这就会出现代码执行时就会执行(执行不受控制),而且只能调用一次
//使函数附属于一个对象
(function (obj){ //obj是形参
obj.test=function(){ //页面加载的时候调用了
alert("外部闭包调用");
}
alert("闭包调用");
})(window) //把整个函数封装进window对象,window是实参