JS的常用语法

位置

• haeder内
• body内
• 页外
  <script src="js/index.js">

一.输出

<script type="text/javascript"> 
    console.log('你好,调试'); 
</script>

二.声明变量

• 自动推导类型

 var age = 18; // number
 var money = 100.88; // number
 var name = 'jack'; // string
 var result = true; // boolean false
 var number = null; // object
 var number2 = undefined; // undefined

三.输出变量的真实类型:typeof

console.log(typeof age);

四.字符串的拼接

• 从左往右进行运算，任意类型的变量与string类型变量拼接都会变为string类型

 var str1 = 10 + 10 + '10'; //2010
 var str2 = '10' + 10 + 10; // 101010
 var str3 = (10 + '10') + 10; // 101010

五.数组

• 创建数组

 var numbers = [-10, 'san', name, result, number, ['哈哈', '呵呵']];

• 遍历数组

for(var i=0; i<numbers.length; i++){
     console.log(numbers[i]);
}
for(var i in numbers){
     console.log(i, numbers[i]);
}

• 删除数组中最后一个数据项

numbers.pop();

• 添加数据项在最后一个索引的后面

numbers.push('小燕子');

六.JS常用的类库 Math

// 选出其中最大值
var maxNum = Math.max(10,21,21);
// 选出数组中最小值
var numsArr = [10, 212, 3223, 32];
var NewMaxNum = Math.min.apply(this, numsArr);

七.函数

• 声明函数

// 加法函数
function sum(num1, num2) {
    return num1 + num2;
}

• 调用函数

var result = sum(12, 323);

• 匿名函数

// 必须有变量接收
var res = function () {
    console.log('我是匿名函数');
}
res();

八.对象

• this所在的函数属于哪个对象, this就代表这个对象
• 创建对象

var dog = {
    name: 'ahuang',
    age: 18,
    height: 1.55,
    dogFriends: ['lili', 'wangcai'],
    eat: function (someThing) {
        console.log(this.name + '吃' + someThing);
    },
    run: function (someWhere) {
        console.log(this.name +'跑' + someWhere);
    }
}; 

• 获取对象属性和行为

// 2.输出狗对象的属性和行为
console.log(dog.name, dog.age);
dog.eat('五花肉');
dog.run('操场');

九.构造函数

• 普通函数的不同用法就是构造函数了

// 普通函数 -> 构造函数
var Dog = function () {
    console.log('这个一个普通函数');
}
// 普通调用
Dog();
// 构造调用
var dog1 = new Dog();
var dog2 = new Dog();
console.log(dog1, dog2);

十.内置对象

10.1.WINDOW

• 所有全局的变量都是window的属性
• 所有的全局函数都是window的方法

// 全局的变量
var age = 17;
console.log(window.age);
// 全局的函数
function Dog() {
    var name = '张三';
         console.log(name);
}
Dog();
window.Dog();
window.alert('哈哈');
window.console.log('全局的');

• 动态的跳转

window.location.href = 'http://www.baibu.com';

10.2.DOCUMENT ：对获取到的标签进行CRUD

• 动态写入标签(增)

document.write('你好,世界!');
document.write('<input type="file">');

var img = document.createElement('img');
img.src = 'image/img_01.jpg';
main.appendChild(img);

• 对获取到的标签进行删除(删)

img.remove();

• 对获取到的标签进行修改（改）

btn.innerText == '隐藏';
p.style.display = 'none';
icon.style.display = 'none';

• 动态获取网页中所有的标签（查）

// getElementBy..四种方式（）
var icon = document.getElementsByClassName('icon')[0];
var p = document.getElementById('word');
var btn = document.getElementsByTagName('button')[0];
// childNodes查找子节点的方式
console.log(main.childNodes);

十一.定时器

• 设置定时器

var timer = setInterval(function () {
   // 改变倒计时的数字
   number.innerText -= 1;
   if (number.innerText == 0){
        // 清除定时器
        clearInterval(timer);
   }
}, 1000);

十二.常见事件

页面加载完毕

window.onload = function() {}

输入框获得焦点

input.onfocus = function () {
    input.style.width = '500px';
    input.style.height = '60px';
}

鼠标操作

// 鼠标进入图片
img.onmouseover = function() {
     console.log('进入图片');
}

// 鼠标在图片上移动
img.onmousemove = function () {
     console.log('在图片上移动');
}

// 鼠标离开图片
img.onmouseout = function () {
     console.log('离开图片');
}

十三.Bootstrap

• Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，有很多写好的组件，CSS样式，JS插件
• Bootstrap中文网 中下载框架
• 点击 Bootstrap3中文文档 查看使用代码

十四.实战举例：

• 如果是字符串，根据字符串取出元素。不是字符串返回原值。

function $(id) {
    return typeof id === 'string' ? document.getElementById(id) : id;   
}

• 求出盒子的宽度

var boxWidth = allBox[0].offsetWidth;

• 求出浏览器的宽度

var screenWidth = document.body.offsetWidth;

• 父标签居中

//先设置宽度，再设置margin
$(parent).style.width = boxWidth * cols + 'px';
$(parent).style.margin = '0 auto';

• 求出单独盒子的高度

var boxHeight = allBox[i].offsetHeight;

• 头部偏离位置

.offsetTop

• 求出浏览器的高度 标准模式 和 混杂模式

var screenHeight = document.body.clientHeight || document.documentElement.clientHeight;

• 页面偏离屏幕的高度

var scrollTopHeight = document.body.scrollTop;

• 给父标签添加子标签

$('main').appendChild(newBox);

• CSS3实现瀑布流布局

/*多栏布局: 设置栏宽度*/
-webkit-column-width: 202px;
-moz-column-width:202px;
column-width:202px;