JavaScript笔记

JavaScript

数据类型概览

  1. number
  2. 字符串
  3. 布尔值
  4. 逻辑运算符
  5. 比较运算符（等于，类型不同值相同也会返回true；=绝对等于，类型和值都相同才会返回true）
  6. 尽量避免使用浮点数进行运算，存在精度问题！
/*使用Math的abs绝对值进行相近计算*/
<script>
Math.abs((1/3)-(1-2/3))<0.00000001
</script>
  1. null和undefined（未定义）
  2. 数组（可以放任何对象）
var arr = [1,5,"dd",null,true];
  1. 对象
var person = {
   name:"xxx",
   age:3,
   tage:['js','java']
}
//取值
person.name

严格检查模式


### 数据类型

#### 字符串

1. 正常字符串使用单引号或双引号包裹。

2. 注意转义字符\。

3. 多行字符串编写。

   ``` html
   var msg = `
              HELLO 
              你好
               `;

  1. 模板字符串

    let name = 'xxx';
let msg = '你好啊,${name}';

  2. 字符串长度

    str.length

  3. 字符串不可变

  4. 大小写转换

    //这里是方法
student.toUpperCase()
student.toLowerCase()

  5. 获取指定字符的下标

    student.indexOf('t')

  6. 获取指定位置的字符串

    //截取范围[)
student.substring(x,y)//[x,y)如果y不写就是x到最后

数组

Array可以包含任意的数据类型

var arr = [1,2,5,2,1]  //通过下标取值赋值
arr[0]=1

  1. 长度

    arr.length

    注意：假如给arr.length赋值，数组大小会变，赋值过小，元素会丢失。

  2. 获取指定字符的下标

    arr.indexOf(2)

  3. slice()截取Array的一部分，返回一个新的数组，类似substring

  4. push()、pop()往数组尾部压入弹出数据

    arr.push("1",2);//在数组最后添加元素
arr.pop();//弹出（删除）数组最后一个元素

  5. unshift()、shift() 头部

    arr.unshift("1",2);//在数组头部添加元素
arr.shift();//弹出（删除）数组头部一个元素

  6. 排序

    arr.short();

  7. 元素反转

    arr.reverse();

  8. 数组拼接

    arr.concat([1,54,9]);

    注意：该方法并没有修改数组，只是返回一个新的数组。

  9. 连接符打印拼接数组，使用特定的字符链接

    arr.join('-')

  10. 多维数组

    arr = [["a","b"],[1,2]];

对象

var person = {          //  var 对象名 = { 
   name:"xxx",          //     属性名:属性值,
   age:3,               //     属性名:属性值,
   tage:['js','java']   //     属性名:属性值
}                       //     }

Js对象用{...}表示一个对象，键值对描述xxx:xxx，多个属性之间用,隔开,最后不加,

  1. 对象赋值

    person.name = "yyy";  //赋值
person.name;          //取值

  2. 使用一个不存在的对象属性不会报错，显示未定义undefined

    person.xxx;
undefined

  3. 动态删减属性，通过delete删除对象属性

    delete person.name;

  4. 动态添加，直接给新的属性添加值即可

    person.haha = "haha";

  5. 判断属性值是否在这个对象中 xxx in xxx

    'age' in person;
//in也可以用来寻找父类的方法

  6. 判断属性是否是自身定义的（非父类继承）hasOwnProperty()

    'age' hasOwnProperty();

流程控制

  1. if判断

  2. while循环

  3. do while循环

  4. for循环

    //类似java forEach遍历数组 类型尽量选择let
//forIn打印数组下标
for(let num in age){
    console.log(num)
}
//forof遍历数组
for(let num of age){
    console.log(num)
}

  5. forEach循环

    //js的forEach和java不同，需要用函数进行遍历
var age = [1,,54,5,515,1,51,5]
age.forEach(function(value){
    console.log(value)
})

Map和Set

Map和Set是ES6新增功能

var map = new Map([['tom',100],['jack',90],['join',80]]);
var name = map.get('tom'); //通过key获得value
map.set('admin',666);  //添加
map.delete('tom');  //删除
console.log(name);

Set：无序不重复集合

var set = new Set([3,1,1,1])
console.log(set);
set.add(2);  //添加
set.delete(1);  //删除
set.log(set.has(3));  //是否包含某个元素
//输出结果只有3和1

遍历数组

//遍历map
var map = new Map([['tom',100],['jack',90],['join',80]]);
for(let x of map){
    console.log(x)
}

var set = new Set([3,2,6,1])
for(let x of set){
    console.log(x)
}

函数

定义函数

//绝对值函数，写法一
function abs(x){
  if(x>=0){
      return x;
  }else{
      return -x;
  }
}

一旦执行到return 代表函数结束，返回结果。

//绝对值函数，写法二
var abs = function (x){
  if(x>=0){
      return x;
  }else{
      return -x;
  }
}

调用函数

abs(10)

参数问题：js可传任意个参数，也可以不传参数。可在函数中加入判断手动抛出异常。

function abs(x){
    if(typeof x!=='number'){  //通过typeof判断传入的类型是否为想要的
        throw 'Not a Number';  //通过throw来抛出异常
    }
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

当传入函数的参数大于函数定义的参数时，js不会报错，而且也可以使用在函数括号的最后加入...rest就能在函数中使用其余参数了。

function zxc(a,b,...rest){
    console.log(rest);  //这里可以收到除a,b所有传入的参数
}

变量的作用域

在js中，var定义的变量是有作用域的。在函数体中声明的变量在函数体外是无法调用的。

function a(x){
    x = x + 1;
}
x = x + 2;  //这里js会主动报错

  • 两个函数使用了相同的变量名，只要变量在函数内部，就不冲突。

  • 内部函数可以访问外部定义的变量，反之不行。

  • 内外函数变量重名，优先使用自己函数内的变量。

  • js定义变量同一提到最前面。

<script>
    //函数外定义的变量，所有函数都可以调用
    var x = 1;
    function a(x){
    x;
    }
    function b(x){
    x;
    }
</script>

规范——由于所有全局变量都绑定在window上。如果不同的js文件使用了相同的全局变量，会发生冲突！

//定义唯一全局变量
var a = {};
a.name = 'xxx';
a.add = function(a,b){
    xxx
}

把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突问题。

作用域let

ES6新特性 let关键字，解决局部作用域冲突问题

function a(){
    for(let i=0;i<100;i++){
        console.log(i)
    }
    console.log(i)  //使用了let定义i，在循环外就无法访问到了
}

常量const

ES6之前，约定全部用大写字母定义的变量就是常量，建议不要修改（hhhh...

在ES6引入了常量关键字

const PI = '3.14';  //使用const定义就不会改变了

方法

写在对象中的函数

var sx = {
    name : 'aa',
    birth: 2000,
    age : function(){
        var now = new Date().getFullYear();
        return now-this.birth;
    }
}
//调用方法：sx.age()

内部对象

  • Date

    var now = new Date();
now.getFullYear();//年
now.getMonth();//月
now.getDate();//日
now.getTime;//时间戳

  • JSON

    • json是一种轻量级的数据交换格式。

    • 层次结构清晰。

    • 易于阅读和编写，也易于机器解析和生成，可有效提高网络传输效率。

    • 对象用 {}

    • 数组用 []

    • 键值对用 key:value

    • 对象转化为json

      var user = {
    name:'xxx',
    age:3,
    gender:'male'
}
var jsonUser JSON.stringify(user);
//jsonUser即为JSON字符串

    • json转化为对象

      var obj = JSON.parse('{"name":"xxx","age":3,"gender":"male"}')
//即可将json字符串转化为对象

      在JavaScript中一切皆为对象，任何js支持的类型都可以用JSON来表示。

      JSON和JS对象的区别

      var obj = {a:'hello',b:'hellob'};
var ison = '{"a":"hello","b":"hellob"}'

面向对象编程

class继承(ES6引入)

  1. 定义一个类，属性，方法

    class Student{
    //constructor代表构造器
    constructor(name){
        this.name = name;
    }
    hello(){
        alert('hello')
    }  
}
var xx = new Student('xxx');

  2. 继承

    class XiaoStudent extends Student{
    constructor(name,grade){  
        super(name); //实现父类
        this.grade;
    }
    mygrade(){
         alert('xiaoStu')
    }
}
//本质还是查看对象原型

操作BOM对象

location

location代表当前页面的URL信息

host
href
reload()
...

document

document代表当前的页面

<dl id="app">
    <dt>java</dt>
    <dt>web</dt>
    <dt>spring</dt>
</dl>
<script>
var dl = document.getElementById('app');
</script>

document可以获取本地cookie,服务器端可以设置cookie:httpOnly

操作DOM对象

DOM:文档对象模型。浏览器网页就是一个DOM树形结构！

  • 更新Dom节点
  • 遍历Dom节点（得到）
  • 删除一个Dom节点
  • 添加一个新的Dom节点

如果要操作一个Dom节点，首先要获得一个Dom节点。

  1. 获得DOM节点
<div id="father">
   <h1>标题</h1>
   <p id="p1">p1</p>
   <p class="p2">p2</p> 
</div>
<script>
var i = document.getElementsByTagName()  //标签选择器
var y = document.getElementsById()  //ID选择器
var z = document.getElementsByClassName()  //class选择器

var f = document.getElementsById('father');
var c = f.children;  //获取父节点下的所有子节点
</script>
  1. 更新节点
<div id="id1">
</div>
<script>
var id1 = document.getElementsById('id1');  //根据id获取节点
id1.innerText="xxx";  //可以修改文本值
id1.innerHTML="<strong>123</strong>";  //可以解析html文本标签
id1.style.color='red';  //改变样式
id1.style.fontSize='200px';  //驼峰命名
</script>

  1. 删除节点

    步骤：先删除父节点，再通过父节点删除自己

<div id="father">
   <h1>标题</h1>
   <p id="p1">p1</p>
   <p class="p2">p2</p> 
</div>
<script>
var s = document.getElementsById('father');//获取自己节点
var f = p1.parentElement;  //获取父节点
    f.removeChild(p1);  //通过父节点删除自己
</script>

  1. 插入节点

    ​ 我们获得了某个Dom节点，假设这个Dom节点是空的，可以通过innerText()添加元素，但如果这个Dom节点存在元素，就会产生覆盖。可以使用追加append()操作。

<p id="js">js</p>
<div id="list">
    <p id="se">java se</p>
    <p id="ee">java ee</p>
    <p id="me">java me</p>
</div>
<script>
var js = document.getElementById('js');
var list = document.getElementById('list');
list.appendChild(ks); //追加到后面
</script>
  1. 创建新节点
var newP = document.createElement('p'); //新建一个p标签
newP.id='np'; //为新的p标签添加id
newP.innerText = 'xxx'; //为新的p标签添加文本
  1. 创建一个标签节点
var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript');

操作表单

  • 表单：from，也是dom树的一个节点

  • 获取表单值

<form>
    <span>username:</span><input type="text" id="username">
    <p>
       <span>sex:</span>
    <input type="radio" name="sex" value="man" id="boy">man
    <input type="radio" name="sex" value="woman" id="boy">woman  
    </p>
</form>

<script>
var input_text = document.getElementById('username');//得到输入框的值
input_text.value = '123';//修改输入框的值
var boy = document.getElementById('boy');
    boy.checked; //判断选择框，如果被选中则返回true;
    boy.checked = true;  //使用js选中
</script>
  • 使用js验证表单
<form>
   <span>username:</span><input type="text" id="username">
   <span>username:</span><input type="password" id="password">
    <!--绑定onclick点击事件-->
    <button type="button" onclick="aaa()">提交</button>
</form>

<script>
function aaa(){
 var uname =  document.getElementById('username');
 var pwd =  document.getElementById('password');
}
</script>
  • 使用表单进行加密验证
<!--表单提交事件，加入return当aaa()返回false时不会提交-->
		<form id="f" method="post" onsubmit="return aaa()">
			<span>username:</span><input type="text" id="username" name="username">
			<!--用户输入的密码框-->
			<span>username:</span><input type="password" id="input_password" name="input_password">
			<!--提交请求的密码框-->
			<input type="hidden" id="md5_pass" name="password" />
			<!--绑定onclick点击事件-->
			<button type="button">提交</button>
		</form>

		<script>
			function aaa() {
				var uname = document.getElementById('username'); //获取表单用户名
				var pwd = document.getElementById('password');  //获取表单密码
				var md5pwd = document.getElementById('md5_pass');  //获取加密表单
				md5pwd.value = md5(pwd.value);  //内容添加至隐藏密码框（需引入md5文件）
				return true;
			}
		</script>

jQuery库

jQuery中存在大量的JavaScript函数

jQuery公式：$(selector).action() ：$符号(js同款选择器).事件

<a href="" id="test_jquery">test</a>
		<script>
			//选择器就是js的选择器
			$('#test_jquery').click(function() {
				alert('hello,jQuery')
			})
		</script>
  • jQuery选择器
       <script>
			$('p').click(这里写函数)  //标签选择器
			$('#id').click(这里写函数)  //id选择器
			$('.class').click(这里写函数)  //class选择器
		</script>

文档工具站：http://jquery.cuishifeng.cn/index.html

  • 操作DOM
$('#test_jquery').text();  //获取值
$('#test_jquery').text('XXXX');  //修改值为xxxx
$('#test_jquery').html();  //获取值
$('#test_jquery').html('<strong>123</strong>');  //设置值
$('#test_jquery').css("color","red");  //设置样式
posted @ 2020-05-19 15:53  yukinon  阅读(112)  评论(0)  编辑  收藏  举报