位置
- 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;
网友评论