前端（五）

前端（五）

js函数

<script>
      function index(){  /*定义函数*/
        console.log('你好');
      }
      index();  /*调用函数*/
</script>

function sum(a,b){  /*带参函数，js只有位置参数，没有关键字参数*/
          console.log(arguments);  /*arguments是数组类型，所有的参数都会存在这里*/
          return a+b;  /*如果有不传的参数就是undefined,数字加undefined为NaN*/
      }
var res = sum(1,2);  /*少传，多传并不报错*/
console.log(res);

"""js中一般不会报错，因为是和用户打交道的，错了会没有效果"""

var sum = function(a,b) {  //匿名函数
          return a+b;
      }
console.log(sum(1,2));  // 调用匿名函数，直接变量名加括号传参

(function(a,b){
          return a+b;
})(1,2)  // 直接调用匿名函数,不推荐使用

函数是全局变量和局部变量

var x = 100;  // 全局变量
function f(){
    var x = 50;  // 局部变量
    function z(){
        var x = 25;  // 就近原则，没有定义则报错
        console.log(x);  // 局部变量
    }
    z();
}
f();

自定义对象

// 就是python中的字典

var obj={}; // 空对象
console.log(typeof obj);
console.log(obj);

var obj = {'name':'keiven', 'age':20};
console.log(obj);
console.log(obj.name);
console.log(obj.age);
obj.salary = 2000;  // 增加一个值
obj['a']= 1;  // 增加一个值
obj['name'] = 'zangsan';  // key存在就是改值，不存在就是增加
delete obj.name;  // 删除name
var obj1 = new Object();  //定义一个空对象

Date对象

// 在js中操作时间
var d1 = new Date();  // 定义一个Date对象
console.log(d1.toLocaleString());  // 获取当前时间
console.log(d1.toUTCString());  // 获取UTC时间
console.log(d1.getDate());  //获取日期
console.log(d1.getMinutes());  // 获取月
console.log(d1.getFullYear());  //获取年
console.log(d1.getYear());  //获取从1900至今过了多少年，不用这个了
console.log(d1.getHours());  //获取小时
console.log(d1.getMinutes());  //获取分
console.log(d1.getSeconds());  //获取秒
console.log(d1.getMilliseconds());  //获取毫秒
console.log(d1.getTime());  //获取时间戳

json对象

// 在JavaScript中的json对象，必须掌握
var str = '{"name":"zhangsan", "age": 18}';
var ovj = JSON.parse(str);  // 反序列化
console.log(ovj);

var s = JSON.stringify(ovj);  // 序列化
console.log(s);

RegExp对象

// 正则对象，正则表达式是一门独立的语言

var res = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");  // 定义正则对象
console.log(res.test('xhjkch123'));  // test方法只给结果，只会返回true或者false

var res = 'zhangsan goubi';  // 第二种定义方式
s = res.match(/s/);  // 默认情况只匹配一次
console.log(s);
s1 = res.match(/s/g);  // 全部匹配
// 默认区分大小写，加i 就可以忽略大小写
console.log(s1);

Math对象

abs(x)  // 返回绝对值
exp(x)  // 返回e的指数
floor(x)  // 向下取整
log(x)  // 返回对数
max(x,y)  // 最大值
min(x,y)  // 最小值
pow(x,y)  // 次方
random()  // 0~1的随机数
round(x)  // 四舍五入
sin(x)  // 正弦
sqrt(x)  // 平方根
tan(x)  // 正切

// 用法：Math.abs(-10);

BOM和DOM

// BOM 了解 DOM 掌握
// js 分为核心语法，BOM(浏览器对象模型，用js操作浏览器)，DOM(文档对象模型，用js操作html标签)
// window.document.write()可以简写成document.write()

BOM对象

● window.innerHeight - 浏览器窗口的内部高度
● window.innerWidth - 浏览器窗口的内部宽度
● window.open() - 打开新窗口
● window.close() - 关闭当前窗口

# navigator对象
navigator.appName　　// Web浏览器全称
navigator.appVersion　　// Web浏览器厂商和版本的详细字符串
navigator.userAgent　　// 客户端绝大部分信息 # 需要掌握，它代表了是不是浏览器(爬虫)
navigator.platform　　　// 浏览器运行所在的操作系统

# history对象
history.forward()  // 前进一页
history.back()  // 后退一页

# location对象（务必掌握）
# URL：统一资源定位符，网址
location.href  获取当前页面URL
location.href="URL" // 跳转到指定页面
location.reload() // 重新加载页面, 刷新页面

# 弹出框
1. alert(123);  // 纯弹框加写在括号里的提示语
2. confirm(123);  // 自带确定取消并且返回true和false加写在括号里的提示语
3. prompt(123，22);  // 给出一个输入框，供用户输入，并且返回输入值，括号中第一个是提示语，第二个是默认值

计时相关

1. setTimeout  // 定时器
	clearTimeout  // 清除定时器
2. setInterval  // 每隔一段时间执行一次
	clearInterval  // 清除上面那个

DOM相关的

DOM标准规定HTML文档中的每个成分都是一个节点(node) ##   每一个html标签都可以称作是一个节点(node)

# 我们称标签可以这样称为：a标签  a元素  a节点

JavaScript 可以通过DOM创建动态的 HTML # 直接在body中写自带的标签，我们可以通过dom来动态创建标签

● JavaScript 能够改变页面中的所有 HTML 元素
● JavaScript 能够改变页面中的所有 HTML 属性
● JavaScript 能够改变页面中的所有 CSS 样式
● JavaScript 能够对页面中的所有事件做出反应

"""
	如何学习dom
		1. 先学会查找标签--------->选择器
		2. 找到标签之后，再操作标签
"""

直接查找(务必掌握)

1. id
2. class
3. 标签选择器
document.getElementById           根据ID获取一个标签
document.getElementsByClassName   根据class属性获取
document.getElementsByTagName     根据标签名获取标签合集

间接查找

parentElement            父节点标签元素
children                 所有子标签
firstElementChild        第一个子标签元素

节点操作

# 节点操作是动态操作html标签
1. 动态创建img标签
  var img = document.createElement('img');  // <img />
  var div = document.getElementById('d1');

// 2. 如何给标签添加属性
img.src = '123.png';
// img.width = '100px';
// 添加属性的时候，点语法只能添加标签自带的属性
img.alt = 'aaaa';
// img.username = 'kevin';

// 设置标签不自带的属性
img.setAttribute('username', 'kevin')  //
img.setAttribute('width', '100px')  //

// 获取属性
console.log(img.getAttribute('username'));

// 删除属性
img.removeAttribute('username');


// appendChild------------->末尾追加元素

2. 创建一个a标签
    var a = document.createElement('a');
    var div = document.getElementById('d1');
    // 设置属性
    a.href = 'http://www.baidu.com';  // <a href=''></a>
    a.target = '_blank';
    a.title = '_blank';
    // 给a标签添加文本属性
    // a.innerText = '<h1>点击我</h1>';// <a href=''>点击我</a>  它不能识别html标签
    a.innerHTML = '<h1>点击我</h1>'  // 它可以识别html标签
    console.log(a);

获取值操作(掌握)

# 针对的是form表单里面的值操作
var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);

class的操作

# 用js来动态操作class属性

classList.remove(cls)  删除指定类
classList.add(cls)  添加类
classList.contains(cls)  存在返回true，否则返回false
classList.toggle(cls)  存在就删除，否则添加

指定CSS操作

obj.style.backgroundColor="red"

obj.style.margin
obj.style.width
obj.style.left
obj.style.position