JS简介-基本数据类型
1.1 JS中的常见语法
js
- 所有变量的返回类型都是var
- number类型
- string类型
- boolean类型
- object类型
//基本数据类型
var age=18; //number
var money=100.9; //number
var name='jack'; //string
name2='marry'; //string
var number=undefined; //undefined
var result=true; //boolean
//输出基本数据
console.log(age, money, name, number, result);
//输出基本数据类型
console.log(typeof age, typeof money, typeof name, typeof number, typeof result);
基本数据类型
1.2 变量的拼接
- 变量的拼接都是从左往右
- 任何类型的变量和string类型的变量拼接,都会被转换为string类型
//基本数据类型运算
//规律：运算从左往右，任何类型的变量与string拼接都会被强制转化为string类型
//例子1：
var newName= name+'_'+name2;
console.log(newName);
//例子2：
var str1=10+10+'10';
var str2='10'+10+10;
var str3=10+'10'+10;
console.log(str1, str2, str3);
变量拼接
1.3 数组
- 遍历数组
//数组，内容可以为任何变量或对象
var array=[10, name, result,['哈哈', '喝喝']];
//遍历数组
for(var index= 0; index
遍历数组
- 增加/删除元素
//删除数组元素
array.pop();
删除数组元素
//添加数组元素
array.push('ljc');
for (var i in array) {
console.log(i, array[i]);
}
添加数组元素
- 取出最小值和最大值
//js常用类库 math
var nums=[10, 20, 40];
var maxNum=Math.max(10,200,30);
var newMax=Math.max.apply(this, nums);
console.log(maxNum, newMax);
取出最小值和最大值
1.4 JS中的函数
- 普通函数的类型:函数的调用: 函数名();
- 函数中的内置数组(arguments):用于存放外部传入的参数
- 匿名函数:格式---匿名函数的调用:变量名();
js函数结构
function 函数名() {
函数体
}
例子
function sum(num1, num2) {
return num1 + num2;
}
var rel=sum(10,20);
console.log(rel);
function sum2(nums1) {
var rel=0;
for (var i in nums1){
rel+=nums1[i];
}
return rel;
}
var newRel=sum2([10, 20, 30, 40, 50]);
console.log(newRel);
函数
//匿名函数
var res=function (nums1) {
var rel=0;
for (var i in nums1){
rel+=nums1[i];
}
return rel;
}
var newRel1=res([10, 20, 30, 40, 50]);
console.log(newRel1);
匿名函数
JS语法-对象语法
2.1 产生单个对象
- 格式:var dog = {};
- 设置对象的属性
- 设置对象的方法
- 调用对象的属性和方法
- this:this所在函数在哪个对象中,this就代表该对象
//创建对象
var dog={
//属性
name :'jack',
age : 18,
height:1.60,
dogFriend:['wangcai', 'lili'],
// 方法
run: function () {
console.log(this.name + ' run');
},
//带参数方法
eat : function (something) {
console.log(this.name +' eat' + something);
}
};//object
//获取函数属性
console.log(typeof dog.name);
//调用函数方法
dog.run();
dog.eat(' 骨头');
创建对象
2.2 产生多个对象
- 构造函数
- 产生新对象:new
//普通函数--> 构造函数（对象）
var Dog=function () {
this.name = null;
this.age = null;
this.height = null;
console.log('一般函数');
// 方法
this.run=function () {
console.log(this.name + ' run');
};
//带参数方法
this.eat= function (something) {
console.log(this.name +' eat' + something);
}
};
//普通调用
Dog();
//生成构造对象
var dog1=new Dog();
dog1.name='11111';
dog1.height=2222;
dog1.age=3333;
var dog2=new Dog();
dog2.name='aaaa';
dog2.height=444;
dog2.age=555;
console.log(dog1, dog2);
dog1.eat('iiiii');
dog2.eat('ttttt');
构造对象
2.3 JS语法的灵活性
JS语法-内置对象window
功能1:获取所有全局变量和属性
所有的全局变量都是window的属性
所有的全局函数都是window的函数
功能2:动态跳转
window.location.href = 'http://baidu.com';
Title
JS语法-内置对象document
功能
Title
1.可以动态的获取网页中的任意一个节点(标签)
2.可以对获取到的节点进行DOM操作(CRUD)
Title
- DOM操作01-常用事件:
当前页面加载完毕:window.onload
鼠标进入标签:onmouseover
鼠标在标签上移动:onmousemove
鼠标离开标签:onmouseout
鼠标在标签上按下:onmousedown
鼠标在标签上抬起:onmouseup
Title
图片名字：[email protected]
- DOM操作02-显示和隐藏元素
Title
这里风景很美
- DOM操作03-上下切换图片
上下切换图片
- DOM操作04-倒计时
定时器
二狗最美,最爱媛娃
3
- DOM操作05-节点操作
增(C)
删(D)
改(U)
查(R)
js
/**
* Created by ljh on 2017/6/9.
*/
document.write('meihao');
//增
var mainView = document.getElementById('main');
var image = document.createElement('img');
image.src='image/img_01.jpg';
mainView.appendChild(image);
//删
// image.remove();
//查
console.log( mainView.childNodes);
html
Title
mainView
//引进外部JS
增删改除
JS综合demo-选项卡切换
- 作用:用最小的空间放最多的内容
- 难点
相对定位
标签及对应内容之间的切换
标题和内容的显示和隐藏
- JS核心代码
/**
* Created by xiaomage on 16/5/9.
*/
function $(id) {
// 类型的比较
return typeof id === 'string' ? document.getElementById(id): id;
}
// 当网页加载完毕是调用
window.onload = function () {
// 拿到所有的li标签和对应的内容
var lis = $('tab-header').getElementsByTagName('li');
var contents = $('tab-content').getElementsByClassName('dom');
// console.log(lis, contents);
// 验证
if(lis.length !== contents.length) return;
// 遍历
for(var i=0; i- CSS核心代码
a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var{
margin:0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: black;
}
body{
margin: 100px;
}
#tab{
border:1px solid #dddddd;
width: 498px;
height: 120px;
/*裁剪超出部分*/
overflow: hidden;
}
#tab-header{
height: 38px;
line-height: 38px;
background-color: #F7F7F7;
text-align: center;
position: relative;
}
#tab-header ul{
width: 501px;
position: absolute;
left:-1px;
}
#tab-header ul li{
float: left;
/*background-color: red;*/
width: 98px;
/*内填充*/
padding: 0 1px;
/*下线*/
border-bottom: 1px solid #dddddd;
}
#tab-header ul li.selected{
background-color: white;
/*下线*/
border-bottom: 0;
/*内填充*/
padding: 0;
/*设置左右线条*/
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
}
#tab-content .dom{
display: none;
}
#tab-content .dom a{
/*background-color: red;*/
width: 220px;
/*左浮动*/
float: left;
margin:8px;
}
- html 核心代码
Title
tabbar