#博学谷IT学习技术支持#
目录
1 - 变量
2 - 数组
3 - 函数
3.1 函数的作用
3.2 声明方式
3.3 函数的调用
3.4 return为函数的返回值
3.5 arguments的使用
4 -对象
4.1 概念
4.2 使用对象字面量创建对象
4.3 利用 new Object 创建对象
4.4 构造函数创建对象
4.5 对象的使用
4.6 遍历对象
5 - JQurey实例分享
1 变量
变量的概念是一小块存储数据的内存空间
声明变量: var 变量名
var 变量名 = 赋予的值
2 数组
数组的作用: 存放多个类型的元素
创建数组
var 数组名 = new Array();
var 数组名 = [ ]
用数组名 与索引查询数组元素
3 函数
3.1函数的作用: 封装一段可被重复调用执行的代码块
3.2声明方式: 命名函数与匿名函数
命名函数: function 函数名(a) {a}
匿名函数:var fn = function() {}
3.3函数的调用
function 函数名(a) {a}
调用函数: 函数名(b)
a为形参 b为实参
a的值为b
3.4 return为函数的返回值
在使用 return 语句时，函数会停止执行，并返回指定的值
如果函数没有 return ，返回的值是 undefined
3.5arguments的使用
当不确定有多少个参数传递的时候，可以用 arguments 来获取
arguments 是当前函数的一个内置对象，存储了传递的所有实参
arguments 是一个伪数组，可以进行遍历
具有 length 属性
4 对象
4.1 概念
对象是一组无序的相关属性和方法的集合，所有的事物都是对象
对象是由属性和方法组成的。
属性：事物的特征，在对象中用属性来表示（常用名词）
方法：事物的行为，在对象中用方法来表示（常用动词）
4.2 使用对象字面量创建对象
{属性名：属性值，方法名：方法体}
var star = {
name : 'pink',
age : 18,
sex : '男',
sayHi : function(){
alert('大家好啊~');
}
};
4.3利用 new Object 创建对象
var andy = new Object();
Object() ：第一个字母大写
4.4 构造函数创建对象
是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 运算符一起使用
function 构造函数名(形参1,形参2,形参3) {
this.属性名1 = 参数1;
this.属性名2 = 参数2;
this.属性名3 = 参数3;
this.方法名 = 函数体;
}
构造函数的调用格式 : var obj = new 构造函数名(实参1，实参2，实参3)
构造函数中 不需要 return 返回结果
必须用 new 来调用构造函数
new关键字的作用
（1. 在构造函数代码开始执行之前，创建一个空对象；
（2. 修改this的指向，把this指向创建出来的空对象；
（3. 执行函数的代码
（4. 在函数完成之后，返回this---即创建出来的对象
4.5 对象的使用
对象中存储 “具体数据" 的 "键值对"中的 "键"称为对象的属性，即对象中存储具体数据的项
对象中存储 函数 的 "键值对"中的 "键"称为对象的方法，即对象中存储函数的项
对象里面的属性调用 : 对象.属性名
对象里面属性的另一种调用方式 : 对象[‘属性名’]，注意方括号里面的属性必须加引号
对象里面的方法调用：对象.方法名()
4.6 遍历对象
for...in 语句用于对数组或者对象的属性进行循环操作。
for (变量 in 对象名字) {
// 在此执行代码
}
5 JQurey实例分享
html:
<div class="wrapper">
<ul>
<li>
<a href="###">
<img src="images/01.jpg" alt="" />
</a>
<p>百度一下，你就知道</p>
</li>
<li>
<a href="###">
<img src="images/02.jpg" alt="" />
</a>
<p>百度一下，你就知道</p>
</li>
<li>
<a href="###">
<img src="images/03.jpg" alt="" />
</a>
<p>百度一下，你就知道</p>
</li>
<li>
<a href="###">
<img src="images/04.jpg" alt="" />
</a>
<p>百度一下，你就知道</p>
</li>
<li>
<a href="###">
<img src="images/05.jpg" alt="" />
</a>
<p>百度一下，你就知道</p>
</li>
<li>
<a href="###">
<img src="images/06.jpg" alt="" />
</a>
<p>百度一下，你就知道</p>
</li>
<li>
<a href="###">
<img src="images/07.jpg" alt="" />
</a>
<p>百度一下，你就知道</p>
</li>
<li>
<a href="###">
<img src="images/08.jpg" alt="" />
</a>
<p>百度一下，你就知道</p>
</li>
</ul>
</div>
css:
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
img {
display: block;
border: 0;
}
.wrapper {
width: 752px;
border: 1px solid #ccc;
padding: 10px 0 0 10px;
font-family: arial;
overflow: hidden;
margin: 100px auto;
}
.wrapper li {
float: left;
margin: 0 10px 10px 0;
width: 178px;
height: 125px;
overflow: hidden;
position: relative;
}
.wrapper li div,
.wrapper li p {
width: 178px;
height: 25px;
position: absolute;
font-size: 14px;
text-align: center;
line-height: 25px;
color: white;
left: 0;
bottom: -25px;
_bottom: -26px;
}
.wrapper li div {
background-color: #000;
}
.wrapper li p {
background: url(images/bg.png) no-repeat 5px 0;
}
</style>
JavaScript:
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript">
$(function () {
var div = $("<div></div>"), speed = 388, $p = $(".wrapper p");
$p.before(div);
$(".wrapper div").fadeTo(0, 0.5);//设置透明度0.5
$p.each(function (index, ele) {//each()是遍历意思 遍历CSS小图标
var y = index * 25;
$(ele).css("background-position", "5px -" + y + "px");//自动化设计精灵图
});
$(".wrapper li").hover(function () {
$(this).children("div,p").stop().animate({ "bottom": 0 }, speed);
}, function () {
$(this).children("div,p").stop().animate({ "bottom": -26 }, speed);
});
});
</script>
