Javascript学习
文章目录
- 1、js函数
- 1.1、定义函数
- 1.2、变量作用域
- 1.3、方法
- 2、内部对象
- Date
- 3、面向对象编程
- 4、操作BOM对象
- 5、操作DOM对象
- 6、操作表单
- 7、jQuery
1、js函数
1.1、定义函数
绝对值函数
定义方式1
function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}
一旦执行到 return 代表函数结束，返回结果！
如果没有执行 return，函数执行完也会返回结果，结果为 undefined
定义方式2
var abs = function(x){
if(x>=0){
return x;
}else{
return -x;
}
}
function(x){ … }这是一个匿名函数。但是可以把结果赋值给 abs，通过 abs 就可以调用函数！
方式一和方式二等价。
调用函数
abs(10) //10
abs(-10) //10
参数问题：js可以传任意个参数，也可以不传递参数~
假设不存在参数，规避方法：
var abs = function(x){
//手动抛出异常来判断
if(typeof x!== 'number'){
throw 'Not a Number';
}
if(x>=0){
return x;
}else{
return -x;
}
}
arguments代表传递进来的所有的参数，是一个数组！
var abs = function(x){
console.log("x=>"+x);
for (var i = 0; i<arguments.length; i++){
console.log(arguments[i]);
}
if(x>=0){
return x;
}else{
return -x;
}
}
rest
以前：
if (argumments.length>2){
for (var i=2; i<arguments.length; i++){
//。。。。
}
}
ES6 引入的新特性，获取除了已经定义的参数之外的所有参数~…
function aaa(a,b,...rest){
console.log("a=>"+a);
console.log("b=>"+b);
console.log(rest);
}
rest 参数只能写在最后面，必须用 … 标识。
1.2、变量作用域
在 JavaScript 中，var 定义变量实际是有作用域的。
假设在函数体中声明，则在函数体外不可以使用
function qj(){
var x = 1;
x = x+1;
}
x = x + 2; //报错：Uncaught ReferenceError: x is not defined
如果两个函数使用了相同的变量名，只要在函数内部，就不冲突
function qj(){
var x = 1;
x = x+1;
}
function qj2(){
var x = 'A';
x = x + 1;
}
内部函数可以访问外部函数的成员，反之则不行
function qj(){
var x = 1;
//内部函数可以访问外部函数的成员，反之则不行
function qj2(){
var y = x + 1; //2
}
var z = y + 1; // Uncaught ReferenceError: y is not defined
}
提升变量的作用域
function qj(){
var x = "x" + y;
console.log(x);
var y = 'y';
}
结果：xundefined
说明：js执行引擎，自动提升了 y 的声明，但是不会提升变量 y 的赋值；
js 中养成规范：所有的变量定义都放在函数的头部，不要乱放，便于代码维护；
全局函数
//全局变量
x = 1;
function f() {
console.log(x);
}
f();
console.log(x);
全局对象 window
var x = 'xxx';
alert(x);
alert(window.x); //默认所有的全局变量，都会自动绑定在 window 对象下；
alert() 这个函数本身也是一个window变量；
var x = 'xxx';
window.alert(x);
var old_alert = window.alert;
//old_alert(x);
window.alert = function(){
};
//发现 alert()失效了
window.alert(123);
//恢复
window.alert = old_alert;
window.alert(456);
JavaScript 实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找的，就会向外查找，如果在全局作用域都没有找到，报错RefrenceError
规范
由于所有的全局变量都会绑定到 window 上。如果不同的 js 文件，使用了相同的全局变量，会发生冲突，解决冲突：
//唯一全局变量
var kuangApp = {};
//定义全局变量
kuangApp.name = 'kuangshen';
kuangApp.add = function (a,b){
return a+b;
}
把自己的代码全部放到自己定义的唯一空间名字中，降低全局命名冲突的问题。
局部作用域 let
function aaa(){
for (var i = 0; i < 100; i++){
console.log(i);
}
console.log(i+1); //问题：i 出了这个作用域还可以使用
}
ES6 let 关键子，解决局部作用域冲突问题！
function aaa(){
for (let i = 0; i < 100; i++){
console.log(i);
}
console.log(i+1); //Uncaught ReferenceError: i is not defined
}
建议使用 let 去定义局部作用域的变量
常量 const
在ES6 之前，怎么定义常量：只有用全大写字母定义的变量就是常量；建议不要修改这样的值
var PI = '3.14';
console.log(PI);
PI = '213'; //可以改变这个值
console.log(PI);
在 ES6 引入了常量关键字const
const PI = '3.14'; //只读变量
console.log(PI);
PI = '123'; // TypeError:Assignment to constant variable.
console.log(PI);
1.3、方法
定义方法
var kuangshen = {
name: '秦疆',
bitrh: 2000,
//方法
age: function (){
//今年 - 出生的年
var now = new Date().getFullYear();
return now - this.bitrh;
}
}
//属性
kuangshen.name
//方法，一定要带 ()
kuangshen.age()
this代表什么？拆开写法：
function getAge(){
//今年 - 出生的年
var now = new Date().getFullYear();
return now - this.bitrh;
}
var kuangshen = {
name: '秦疆',
bitrh: 2000,
age: getAge
}
//kuangshen.age() 正常显示
//getAge() NaN （this指的是window）
this是无法指向的，是默认指向调用它的那个对象；
apply在 js 中可以控制 this 指向！
getAge.apply(kuangshen,[]); // this,指向了 kuangshen,参数为空
2、内部对象
标准对象
typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NAN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"
Date
基本使用
var now = new Date(); //时间
now.getFullYear(); //年
now.getMonth(); //月 0~11 代表月
now.getDate(); //日
now.getDay(); //星期几
now.getHours(); //时
now.getMinutes(); //分
now.getSeconds(); //秒
now.getTime(); //时间戳
console.log(new Date('时间戳')) //时间戳转时间
3、面向对象编程
- 类：模板
- 对象：具体的实例
原型对象
原型：
var Student = {
name: "qinjiang",
age: 3,
run: function () {
console.log(this.name + " run...");
}
};
var xiaoming = {
name: "xiaoming"
};
//原型对象 小明的原型对象时student
xiaoming._proto_ = Student;
function student(name) {
this.name = name;
}
//给student新增一个方法
student.prototype.hello = function () {
alert('Hello')
};
class关键字
class关键字，是在 ES6 引入
1、定义一个类，属性，方法
//定义一个学生的类
class Student{
constructor(name){
this.name = name;
}
hello(){
alert('hello')
}
}
var xiaoming = new student("xiaoming");
var xiaohong = new student("xiaohong");
xiaoming.hello();
2、继承
class XiaoStudent extends Student{
constructor(name,grade){
super(name);
this.grade = grade;
}
myGrade(){
alert('我是一名小学生');
}
}
var xiaohong = new XiaoStudent("xiaohong",1);
4、操作BOM对象
Javascript诞生就是为了能够在浏览器中运行！
BOM：浏览器对象模型
window
window 代表浏览器窗口
window.alert(1)
window.innerHeight //浏览器内部高度
window.innerWidth //浏览器内部宽度
window.outerHeight //浏览器外部高度
window.outerWidth //浏览器外部宽度
navigator
navigator 封装了浏览器的信息
navigator.appName
navigator.appVersion
navigator.userAgent
navigator.platform
大多数时候，不会使用navigator对象，因为会被人为修改！
不建议使用这些属性来判断和编写代码。
screen
屏幕
screen.width //屏幕宽度
screen.height //屏幕高度
location
location代表当前页面的URL信息
host: "www.baidu.com" //主机
href: "https://www.baidu.com/" //当前指向位置
protocol: "https:" //协议
reload: ƒ reload() //刷新网页
// 设置新地址
location.assign('新的url地址')
document
document代表当前的页面，HTML DOM文档树
document.title
"百度一下，你就知道"
document.title='狂神说'
"狂神说"
获取具体的文档树节点
<dl id="app">
<dt>Javadt>
<dd>JavaSEdd>
<dd>JavaEEdd>
dl>
<script>
var dl = document.getElementById('app');
script>
获取cookie
document.cookie
劫持cookie 原理
举例：淘宝和天猫之间
服务器端可以设置cookie：httpOnly
history
history 代表浏览器的历史记录
history.back() //前进
history.forward() //后退
5、操作DOM对象
DOM：文档对象模型，是HTML和XML文档的编程接口。
核心
浏览器网页就是一个Dom 树形结构！
- 更新：更新Dom节点
- 遍历dom节点：得到Dom节点
- 删除：删除一个Dom节点
- 添加：添加一个新的节点
要操作一个Dom节点，就必须要先获得这个Dom节点
获得dom节点
//对应 css 选择器
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementByClassName('p2');
var father = document.getElementById('father');
var childrens = father.children; //获取父节点下的所有子节点
// father.firstChild 父节点的第一个子节点
// father.lastChild 父节点的最后一个子节点
更新节点
div>
<script>
var id1 = document.getElementById('id1');
script>
操作文本
id1.innerText='456'修改文本的值id1.innerHTML='123'可以解析HTML文本标签
操作JS
id1.style.color = 'yellow'; //属性使用 字符串 包裹
id1.style.fontSize = '20px'; //驼峰命名问题
id1.style.padding = '2em'
删除节点
删除节点的步骤：先获取父节点，在通过父节点删除自己
<div id="father">
<h1>标题一h1>
<p id="p1">p1p>
<p class="p2">p2p>
div>
<script>
var self = document.getElementById('p1');
var father = self.parentElement;
father.removeChild(self)
//删除是一个动态的过程；
father.removeChild(father.children[0])
father.removeChild(father.children[1])
father.removeChild(father.children[2])
script>
注意：删除多个节点的时候，children 是在时刻变化的，删除节点的时候一定要注意~
插入节点
获得某个Dom节点，假设这个dom节点是空的，通过 innerHTML 就可以增加一个元素了，但是这个DOM节点已经存在元素，就不可以这么做，会产生覆盖
追加
<p id="js">JavaScriptp>
<div id="list">
<p id="se">JavaSEp>
<p id="ee">JavaEEp>
<p id="me">JavaMEp>
div>
<script>
var js = document.getElementById('js');// 已经存在的节点
var list = document.getElementById('list');
list.appendChild(js); // 追加到后面(默认是将前面js放到了后面)
script>
创建一个新的标签，实现插入
<script>
// 通过Js 创建一个新的节点
var newP = document.createElement('p'); // 创建一个p标签
newP.id = 'newP';
newP.innerText = 'Hello.Kuangshen';
// 创建一个标签节点 （通过这个属性，可以设置任意的值）
var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript');
// 可以创建一个style标签
var myStyle = document.createElement('style'); //创建一个空style标签
myStyle.setAttribute('type','text/css');
myStyle.innerHTML = 'body{backgroud-color: chartreuse;}'; //设置标签内容
document.getElementsByTagName('head')[0].appendChild(myStyle)
script>
6、操作表单
表单是什么 form DOM树
- 文本框 text
- 下拉框 < select>
- 单选框 radio
- 多选框 checkbox
- 隐藏域 hidden
- 密码框 password
- …
表单的目的：提交信息
获取要提交的信息
<form action="" method="">
<p>
<span>用户名：span> <input type="text" id="username">
p>
<p>
<span>性别：span>
<input type="radio" name="sex" value="man" id="boy"> 男
<input type="radio" name="sex" value="women" id="girl"> 女
p>
form>
<script>
var input_text = document.getElementById('username');
var boy_radio = document.getElementById('boy');
var girl_radio = document.getElementById('girl');
// 得到输入框的值
input_text.value
// 修改输入框的值
input_text.value = '123'
// 对于单选框，多选框等等固定的值，boy_radio.value只能取到当前的值
boy_radio.checked; //查看返回的结果，是否为true，如果为true，则被选中~
gitl_radio.checked = true; //赋值
script>
7、jQuery
jQuery 库，里面存在大量的 Javascript 函数
获取jQuery
可使用在线cdn引入
下载引入(分开发版，和压缩版)
使用公式
$(selector).action()
$(选择器).事件()
<html>
<head>
<meta charset="utf-8">
<title>Titletitle>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js">script>
head>
<body>
<a href="" id="test-jquery">点我a>
<script>
//选择器就是css的选择器
$('#test-jquery').click(function(){
alert('hello,jQuery');
})
script>
body>
html>
选择器
//原生js，选择器少，麻烦不好记
//标签
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();
//jQuery css 中的选择器它全部都能用！
$('p').click(); // 标签选择器
$('#id1').click(); // id选择器
$('.class1').click() // class选择器
文档工具站：https://jquery.cuishifeng.cn/
事件
<html>
<head>
<meta charset="utf-8">
<title>Titletitle>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js">script>
<style>
#divMove{
width: 500px;
height: 500px;
border: 1px solid red;
}
style>
head>
<body>
mouse : <span id="mouseMove">span>
<div id="divMove">
在这里移动鼠标试试
div>
<script>
//当网页元素加载完毕之后，响应事件
$(function(){
$('#divMove').mousemove(function (e){
$('#mouseMove').text('x:'+e.pageX + 'y:'+e.pageY)
})
})
script>
body>
html>
操作DOM
节点文本操作
//id为 test-ul 下的 name=python 的 li 标签
$('#test-ul li[name=python]').text(); //获得值
$('#test-ul li[name=python]').text('设置值'); //设置值
//id为 test-ul 标签下得html标签
$('#test-ul').html(); //获得值
$('#test-ul').html('123'); //设置值
css 的操作
$('#test-ul li[name=python]').css({"color","red"})
元素的显示和隐藏：本质为css属性设置display : none
$('#test-ul li[name=python]').show() //显示
$('#test-ul li[name=python]').hide() //隐藏