JavaScript

时间：2021-04-25 18:44:26 阅读：19 评论：0 收藏：0 [点我收藏+]

JavaScript

JavaScript是一种运行在浏览器中的解释型编程语言，<script></script>包含的代码就是JavaScript代码，能直接被浏览器执行

数据类型和变量

JavsScript定义了以下几种数据类型

Number：不区分整数和浮点数，NaN表示Not a Number，Infinity表示无限大（超出Number最大值范围）
字符串
布尔值
null和undefined：null表示空，undefined表示未定义
数组：一组按顺序排序的集合，可以包含任意数据类型，用[]表示，或可以使用new Array()函数实现
对象：一组有键-值组成的无序集合，对象的键都是字符串类型，值可以是任意数据

==和===

==比较会自动转换数据类型再比较
===不会自动转换数据类型，如果数据不一致，直接返回false，尽量使用===比较

不用var声明的变量被视为全局变量，为了避免该缺陷，JavaScript的所有代码都使用strict模式，语句：‘use strict’

字符串

ES6标准的多行字符串表示方法用反引号(``)来表示

模板字符串：多个字符串可以用+连接，可以用${}来连接变量

可以通过索引来访问指定位置的字符

JavaScript里的字符串任然是不不可变的，对字符串的某个索引赋值不会报错，但是没有任何效果

JavaScript对数组的索引进行赋值会直接修改数组，如果索引超过了数组的范围，会改变数组大小。

对象

可以使用‘属性名‘ in 对象名判断对象是否拥有该属性，不过该属性不一定是这个对象的，而可能是这个对象继承得到的

所有对象的原型都指向object，如果要判断对象自身是否拥有该属性可以使用hasOwnProperty()。

Iterable

遍历数组可以使用下标循环，遍历map和set就无法使用下标

ES6标准引入了iterable类型，具有iterable类型的集合可以通过for of来遍历，还内置了forEach方法，接收一个函数，每次迭代会自动调用该函数

函数

关键字arguments可以获取函数调用者传入的所有参数，arguments.length获取传入参数个数

rest参数也可以获取全部参数

function foo(a, b, ...rest) {
console.log(‘a = ‘ + a);
console.log(‘b = ‘ + b);
console.log(rest);
}
foo(1, 2, 3, 4, 5);
// 结果:
// a = 1
// b = 2
// Array [ 3, 4, 5 ]

JavaScript会先扫描整个函数体语句，把所有变量的声明提升到函数的顶部，但不会提升函数的赋值

全局变量

不在任何函数内定义的变量就具有全局作用域，实际上，javascript有一个全局对象window，全局作用域的变量实际被绑定到了window的属性上

var course = ‘Learn JavaScript‘;
alert(course); // ‘Learn JavaScript‘
alert(window.course); // ‘Learn JavaScript

ES6使用let来声明会计作用域变量，使用const来定义常量

方法

在一个对线中绑定一个函数，就称为该对象的方法

JavaScript的this关键字，如果以对象方法形式调用方法，this指向被调用对象，如果单独调用函数，this执行window。可以使用apply()方法指定this指向那个对象

JSON

格式：{"name":"dwx","sex":"man"}

JSON和JavaScript对象相互转化

//JSON to OBJ
JSON.parse(‘{"name":"dwx","sex":"man"}‘)
//OBJ to JSON
JSON.stringify({name:"dwx",sex:"man"})

面向对象

var Student = {
name: ‘Robot‘,
height: 1.2,
run: function () {
console.log(this.name + ‘ is running...‘);
}
};
var xiaoming = {
name: ‘小明‘
};
xiaoming.__proto__ = Student;

把对象xiaoming的原型指向对象Student，xiaoming就继承了Student属性

ES6标准引入了class

class Student {
    constructor(name) {
         this.name = name;
    }
    hello() {
          alert(‘Hello, ‘ + this.name + ‘!‘);
    }
}

可以定义构造器，创键对象更简便

并且可以通过extends实现继承

class PrimaryStudent extends Student {
           constructor(name, grade) {
                super(name); // 记得用super调用父类的构造方法!
                this.grade = grade;
           }
           myGrade() {
                alert(‘I am at grade ‘ + this.grade);
           }
}

DOM

HTML被浏览器解析后就是一颗DOM数，要改变HTML的结构，可以通过JavaScript来操作DOM，增删查改

获取DOM节点方法：

使用document.getElementByXxx()

// 返回ID为‘test‘的节点：
var test = document.getElementById(‘test‘);
// 先定位ID为‘test-table‘的节点，再返回其内部所有tr节点：
var trs = document.getElementById(‘test-table‘).getElementsByTagName(‘tr‘);
// 先定位ID为‘test-div‘的节点，再返回其内部所有class包含red的节点：
var reds = document.getElementById(‘testdiv‘).getElementsByClassName(‘red‘);
// 获取节点test下的所有直属子节点:
var cs = test.children;
// 获取节点test下第一个、最后一个子节点：
var first = test.firstElementChild;
var last = test.lastElementChild;

使用querySelector()和querySelectorAll()

// 通过querySelector获取ID为q1的节点：
var q1 = document.querySelector(‘#q1‘);
// 通过querySelectorAll获取q1节点内的符合条件的所有节点：
var ps = q1.querySelectorAll(‘div.highlighted > p‘);

更新DOM

修改innerHTML属性，修改innerText属性，修改Style属性

插入DOM

要在DOM节点内插入新的DOM，使用appendChild()方法吧子节点添加到父节点的最后一个子节点

var
    js = document.getElementById(‘js‘),
    list = document.getElementById(‘list‘);
list.appendChild(js);

会先从原DOM树中删除js，然后再插入

如果要把节点插入到指定位置使用insertBefore()实现

var
   list = document.getElementById(‘list‘),//父节点
   ref = document.getElementById(‘python‘),//子节点
   haskell = document.createElement(‘p‘);//插入节点
haskell.id = ‘haskell‘;
haskell.innerText = ‘Haskell‘;
list.insertBefore(haskell, ref);

删除DOM

删除DOM节点，首先要获取到要该节点的父节点，调用removerChild()把他删除

// 拿到待删除节点:
var self = document.getElementById(‘to-be-removed‘);
// 拿到父节点:
var parent = self.parentElement;
// 删除:
var removed = parent.removeChild(self);

遍历一个父节点来删除子节点是不可以的，一位children属性是实时更新的，删除一个子节点后，其索引会发生变化

操作表单

获取值

// <input type="text" id="email">
var input = document.getElementById(‘email‘);
input.value; // ‘用户输入的值‘

设置值

// <input type="text" id="email">
var input = document.getElementById(‘email‘);
input.value = ‘test@example.com‘; // 文本框的内容已更新

提交表单

添加绑定事件来提交表单

<!-- HTML -->
<form id="test-form" onsubmit="return checkForm()">
   <input type="text" name="test">
   <button type="submit">Submit</button>
</form>
<script>
function checkForm() {
    var form = document.getElementById(‘test-form‘);
    // 可以在此修改form的input...
   // 继续下一步:
   return true;
}
</script>

return true来告诉浏览器继续提交，return false浏览器不会提交

JQuery

只需要在页面引入jquery-xxx.js即可使用

公式$(selector).action()

$来定义jquery
(selector),查找HTML元素
action()对查询到的元素执行的操作

选择器

$(‘#id‘);//按id查找
$(‘.class‘);//按class查找
$(‘tag‘);//按标签查找
$(‘[type=password]‘);//按属性查找type=password
$(‘[name^=icon]‘); //按属性前缀找出所有name属性值以icon开头的DOM
// 例如: name="icon-1", name="icon-2"
$(‘[name$=with]‘); //按属性后缀找出所有name属性值以with结尾的DOM
// 例如: name="startswith", name="endswith"

操作DOM

修改Text和Html

jquery对象的text()和html()方法分别获取节点的文本和原始HTML文本

$(‘#test-ul li[name=book]‘).text(); // ‘Java & JavaScript‘
$(‘#test-ul li[name=book]‘).html(); // ‘Java &amp; JavaScript‘

往里传值就变成设置文本

修改css

调用jquery对象的css(‘name‘,‘value‘)就可以设置css

$(‘#test-css li.dy>span‘).css(‘background-color‘, ‘#ffd351‘).css(‘color‘,
‘red‘);

显示隐藏dom

jquery对象的show()和hide()方法

var a = $(‘a[target=_blank]‘);
a.hide(); // 隐藏
a.show(); // 显示

获取DOM的信息

attr()和removerattr()来操作DOM节点的属性

$(window).width(); //获取DOM的宽
$(window).height(); // 获取DOM的高
// <div id="test-div" name="Test" start="1">...</div>
var div = $(‘#test-div‘);
div.attr(‘data‘); // undefined, 属性不存在
div.attr(‘name‘); // ‘Test‘
div.attr(‘name‘, ‘Hello‘); // div的name属性变为‘Hello‘
div.removeAttr(‘name‘); // 删除name属性
div.attr(‘name‘); // undefined

操作表单

对于表单元素，jquery提供val()方法获取和设置对应的value属性

var input=$(‘#test-input‘);
input.val();

添加DOM

可以使用append(),prepend()将DOM添加到最后或最前，使用after(),before()把新节点插入到指定节点前后

var ul = $(‘#test-div>ul‘);
ul.append(‘<li><span>Haskell</span></li>‘);
var js = $(‘#test-div>ul>li:first-child‘);
js.after(‘<li><span>Lua</span></li>‘);

删除节点

使用remove()方法

var li = $(‘#test-div>ul>li‘);
li.remove(); // 所有<li>全被删除

事件

页面被载入，DOM树初始化后触发

$(function () {
// init...
});

JavaScript

原文：https://www.cnblogs.com/python-road/p/14700307.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)