JavaScript
基本的内部标签引入-->
<!-- <script>-->
<!-- alert("hello world!");-->
<!-- </script>-->
外部引入
<!--script标签内,写javascript代码
<!-- 外部引入 注意别删封装的</script>-->
<script src="js/1.基本使用.js"></script>
1.一般java里是 定义变量 变量类型 变量名 = 变量值
javascript直接使用 var 定义变量
2.javascript 严格区分大小写
<!-- 作用域不一样,var是函数作用域,而let是块作用域,-->
<!-- 也就是说,在函数内声明了var,整个函数内都是有效的,-->
<!-- 比如说在for循环内定义了一个var变量,实际上其在for循环以外也是可以访问的,-->
<!-- 而let由于是块作用域,所以如果在块作用域内(比如说for循环内)定义的变量,-->
<!-- 在其外面是不可被访问的,所以let用在for (let i; i < n; i++)是一种很推荐的写法-->
1.数据类型
1.1 字符串
1.正常字符串使用 ‘ ’ “ ”包裹表示
'aaa' "aaa"
2.注意转义字符
1. \
2. \n 换行
3. \t
4. \u4e2d == \u#### Unicode字符
5. \x41 Ascll字符
3.多行字符串编写 用 ` tab键上面的
var msg=`
hello
world
`
4.模板字符串 ${…}
let name = "a"; let age = 10;
let msg = `你好,${name}` //使用 ${..}调用
5.字符串长度 xx.length
var student = "student"
console.log(student.length) -->输出 7
6.字符串的可变性:不可变
var student = "student"; student[0]=1;
console.log(student) -->赋值后输出的字符串不变 student
7.大小写转换 toUpperCase()
var student = "student";
console.log(student.toUpperCase()) -->输出 STUDENT
8.获取指定的下标 xx.indexOf(‘x’)
var student = "student";
console.log(student.indexOf("u")) -->输出 2
9.字符串截取 substring() : […)
var student = "student";
console.log(student.substring(1,3)) -->输出 tu (取1,2)
1.2 数组
1.长度 注意:加入给arr.length赋值,数组大小会发生变化。如果赋值过小 元素会丢失
2.indexOf 通过元素获得下标索引
*3.slice() 截取Array的一部分,返回一个新数组。类似string的substring
4.push() 压入到数组的尾部
pop() 弹出数组尾部的一个元素
5.unshift() 压入到头部
shift() 弹出头部的一个元素
6.sort() 排序
7.reverse() 元素反转
8.concat() 数组拼接 并未修改数组,只会返回一个新数组
9.jion() 连接符join 打印出来的数组自定义用各种符号连接起来
10.多维数组 直接嵌套 arr[[1,2],[3,4],[5,6]] ->arr[1][1] = 4
1.3 对象
就是若干个键值对
js对象中,{…}表示一个对象,键值对描述属性xxx:xxx, 多个属性用逗号隔开 最后一个不加逗号
js中所有的键都是字符串,值是任意对象
判断一个属性是否是这个对象自身拥有的 hasOwnproprety()
'use strict'
var person = {
name:"qingxing",
age : 23,
emile : "veddd@qq.com",
score : 100
}
if (person.hasOwnProperty(name)){
console.log(alert(1));
}
1.4 流程控制
if…else / while / do…while / for(){…} /forEach /for…of
forEach:遍历数组
age.forEach
(function (value){
console.log(value)
})
**for…of:**遍历数组
for (let x of age) {
console.log(x);
}
1.5 Map和Set
map:集合写出来 更快
Set:无序不重复的集合
Map:
var map = new Map([['qingxing',100],['yangzheng',90]])
var name = map.get('qingxing'); //通过key获得value
map.set('admin',123)
console.log(name);
Set:
var set = new Set([1,2,1,2]);
set.add(4);
set.delete(1);
console.log(set.has(4)); //判断包含某个元素
1.6 lterator
<!--
for(var x in arr){x..} 打印下标
for(var x of arr){x..} 打印具体的值
-->
<script>
'use strict'
//遍历数组
var arr = [1,2,3];
for (var x of arr){
console.log(x)
}
//遍历Map ([[],[],[]])
var map = new Map([['aa',100],['bb',90],['cc',80],['dd',70]]);
for (let y of map) {
console.log(y);
}
//遍历Set ([...])
var set = new Set([1,41685,132,123,123]);
for (let z of set) {
console.log(z);
}
2.函数与面向对象
2.1函数定义及变量作用域
函数的写法
1.
function abs(){
...
}
2.
var abs = function(){
...
}
作用域
1.假设在函数体中声明,则在函数体外不可使用
function abs(){
var x =1;
x = x+1;
}
x=x+2 //报错
2.不同函数内有相同的变量名是不冲突的
function abs1(){
var x =1;
x=x+1;
}
function abs2(){
var x='A';
x = x+2;
}
3.内部函数可访问外部函数成员 ,反之不行(内鬼)
function abs() {
var x=1;
var abs2 =function() {
var y;
y=x+1;
}
}
4.假设内部函数变量和外部函数变量重名, 由 ‘内’ 向 ‘外’ 查找。内部函数会屏蔽外部函数的变量
function abs() {
var x=1;
function abs2() {
var x ='A';
console.log('输出的是里面的'+x);
}
console.log('输出的是外面的'+x);
abs2();
}
abs()
5.变量的作用域自动提升:js执行引擎,自动提升了y的声明 但不会提升变量y的赋值
所以一般 直接先把需要的变量在最前面就定义好了
function abs() {
var x = "x" + y;
console.log(x);
var y='y';
}
===========================上下等同的
function abs() {
var y;
var x = "x" + y;
console.log(x);
y='y';
}
=======================所有的变量定义在函数的头部
function abs() {
var x,y,z.....;
...;
}
全局函数 var
var x=1;
function f() {
console.log(x);
}
f();
console.log(x);
var x = 'xxx';
alert(x);
alert(window.x);
javascript实际只有一个全局作用域,任何变量(函数也可视为变量)。
假设没有在函数作用范围内找到,就会向外查找,如果在全局作用域都没找到,报错 RefrenceError
由于我们所有的全局变量都会绑定到我们的window(例如windows.alert)下,如果不同的js文件使用相同的全局变量会 —》冲突 ————引申出规范解决
// 唯一全局变量 (自己定义)
var XitriOa = {};
//定义全局变量
XitriOa.name = 'Xitri_OA';
//定义方法的使用(把自己的代码放入自己定义的唯一空间名字中,降低全局命名的冲突)
XitriOa.add = function(a,b){
return a+b;
}
局部作用域 let
问题:i 出了这个作用域还能使用
function aaa() {
for (var i = 0; i < 100; i++) {
console.log(i);
}
console.log(i+1); //i 出了这个作用域还能使用
}
ES6 let关键字解决局部作用域冲突问题
建议使用let去定义局部作用域
常量 const
ES6之前:只有用全部大写的字母命名的变量就是常量 ,建议不要修改这样的值
ES6:const
const OA = '3.14';
console.log(OA);
OA = '123'; //报错
2.2 方法
回顾对象:就是若干个键值对
js对象中,{…}表示一个对象,键值对描述属性xxx:xxx, 多个属性用逗号隔开 最后一个不加逗号
js中所有的键都是字符串,值是任意对象
判断一个属性是否是这个对象自身拥有的 hasOwnproprety()
定义方法:
就是把函数放在对象里
对象只有两个东西:属性(键对),方法
qx是一个对象,有名字,生日,年龄。
var qx = {
name:'卿兴',
birth:1999,
age:function () {
//今年 - 出生的年birth
var now = new Date().getFullYear();
return now - this.birth;
}
}
//属性
qx.name
//方法 一定带括号
qx.age()
this. 代表什么?
function getAge() {
var now = new Date().getFullYear();
return now - this.birth;
}
var qx = {
name: '卿兴',
birth: 1999,
age:getAge()
}
//结果
qx.age() //ok
getAge() //NaN 不在window对象里
因为this. 无法指向的。默认指向调用它的那个对象。
apply
在js中可以控制this的指向
function getAge() {
var now = new Date().getFullYear();
return now - this.birth;
}
var qx = {
name:'qingxing',
birth:1999,
age:getAge
}
getAge.apply(qx,[]);//this. 指向了qx,参数为空
3.面向对象编程
标准对象
typeof 123
'number'
typeof '123'
'string'
typeof true
'boolean'
typeof NaN
'number'
typeof {}
'object'
typeof Math.abs
'function'
typeof undefined
'undefined'
3.1 Date
基本使用
now.getFullYear()
2022
now.getMonth();
1
now.getDate();
17
now.getDay();
4
now.getHours();
23
now.getMinutes();
8
now.getSeconds();
17
now.getTime();
1645110497874
new Date(1645110497874)
Thu Feb 17 2022 23:08:17 GMT+0800 (中国标准时间)
转换
now Date(时间戳)
now.toLocaleString() 本机时间 注意这是一个方法
now.toGMTSting() GMT标准
3.2 JSON
-
JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式
-
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
-
易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。
JSON字符串和JS对象的转换
var user = {
name:'qx',
age:3,
sex:'男'
}
//对象转化为JSON字符串JSON.stringify {"name":"qx","age":3,"sex":"男"}
var jsonUser = JSON.stringify(user);
//JSON字符串转换为对象JSON.parse {name: 'qx', age: 3, sex: '男'}
var obj = JSON.parse('{"name":"qx","age":3,"sex":"男"}')
JSON和JS对象的区别
var js = {"name":"qx","age":3,"sex":"男"}
var json = '{"name":"qx","age":3,"sex":"男"}'
3.3什么是面向对象
一般的
- 类:模板
- 对象:具体的实例
类是对象的抽象 对象是类的实例
而在JavaScript中 有些不同
原型:
var Student = {
name:'xiaohong',
age:23,
run:function () {
console.log(this.name + "running...")
}
}
var xiaoming = {
name: "xiaoming",
}
//小明的原型 是 Student
xiaoming.__proto__= Student;
//输出
console.log(xiaoming)
name: "xiaoming"
[[Prototype]]: Object
age: 23
name: "xiaohong"
run: ƒ ()
class继承
对象:对象是一个整体,对外提供一些操作。
面向对象是一种对现实世界理解和抽象的方法,是计算机编程技术发展到一定阶段后的产物。
- 对象是对客观事务的抽象,类是对对象的的抽象
- 类是一种抽象的数据类型
- 对象是类的实例,类是对象的模板
// 对象包含 属性和方法
属性:name:"qx"
方法:alter();
函数也是一种对象
/*对象的写法*/
这里定义一个qx对象 包含属性name,age 方法 showName
var qx={
name:"qx",
age:23,
showName: function () {
alert("年龄:"+this.age);
}
}
qx.showName() //这里是调用了qx这个对象中的一个方法
//函数定义:
function abs(x) {
if (x>3){
return alert("x>0");
}
}
//对象
var qingxing = {
name:"卿兴",
age:10,
birth:1999};
工厂模式写法
/**
通过构造函数来生成对象,将重复的代码提取到一个函数里面
避免像第一种方式写大量重复的代码。
这样我们在需要这个对象的时候,就可以简单地创建出来了。
* */
function Student(name,age) {
var student = new Object();
student.name = name;
student.age = age;
peoson.showname = function () {
alter("姓名"+this,name);
}
peoson.showage = function () {
alter("年龄"+this.age);
}
return person;
}
var p1 = creatPeason("xiaohong",22);
var p2 = creatPeason("xiaoming",23);
p1.showname();
p2.showage();
类写法
//定义类
class person {
constructor(name,age){ //构造类里的属性
this.name = name;
this.age = age;
}
hello(){ //定义类里的方法
alert("hello");
}
}
//新建对象调用定义的类
var qingxing = new person("qx",23);
var songchao = new person("songc",35);
//调用对象
qingxing.hello();
//继承 extend
class student extends person{
constructor(name,grade){
super(name);
}
grade(){
if(this.grade>100){
alert("优秀");
}else{
alert("差");
}
}
}
var xiaoming = new student("huang",95);
4.操作Bom元素*
1.浏览器介绍
javascript诞生就是为了能够让她在浏览器中运行
BOM:浏览器对象模型
IE chrome Safari FireFox
2.window
window代表浏览器窗口 获取窗口的属性
window.alert("qqq")
undefined
window.innerHeight
620
window.innerWidth
1278
window.outerHeight
1399
window.outerWidth
1294
3.navigator
代表浏览器信息
4.screen
代表屏幕尺寸 获取屏幕大小
screen.width
2560
screen.height
1440
5.location*
代表当前页面的URL信息
host: "www.baidu,com"
href: "http://localhost:63342/%E5%89%8D%E7%AB%AF/3.javascript/4.BOM/19.Bom"
protocol:"https:"
reload:f reload() //方法 刷新网页 写法:location.reload()
location.assign("https://想去网页.com") //设置当前页面需要跳转到的页面 设置新的地址
6.document(内容;DOM)*
代表当前的页面 ,HTML DOM文档树
document.title
"百度一下 你就知道"
//使用的话
document。title="自定义当前页面的title"
获取具体的文档树节点
<dl id="web">
<dt>java</dt>
<dd>javaSE</dd>
<dd>javaEE</dd>
</dl>
<script>
var dl = document.getElementById('web')
</script>
获取cookie
document.cookie 就会输出网页的cookie
劫持cookie原理
<script src="恶意文件.js"> </script>
服务端可设置cookie:httpOnly
7.history
代表浏览器的历史纪录 可操作前进后退之前的页面
history.back() //会退前一个页面
history.forward() //前进到之前的一个页面
5.操作DOM元素
DOM:文档对象模型
浏览器网页就是一个Dom树形结构!
相当于前端版的增删改查
要操作一个Dom节点,就必须要先获得这个Dom节点
<div id="father">
<h1 id="h1">这是标题</h1>
<p class="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var father = document.getElementById('father'); //获取father节点
var h1 = document.getElementById('h1'); //获取h1的节点
var p1 = document.getElementsByClassName('p1'); //获取p1的节点
var chlidrens = father.children; //获取父节点下的所有子节点
var first = father.firstChild; // 父节点下的第一个子节点
father.lastChild; //父节点下最后一个子节点
</script>
更新Dom节点
操作文本
- id1.innerText=‘想修改文本的值’
- id1.innerHtml=""
操作JS
- 注意驼峰命名
- 属性使用字符串包裹
<div id="id1">
</div>
<script>
//获取id1的节点 document.getElementById('id1');
var id1 = document.getElementById('id1');
</script>
操作文本
id1.innerText='增加一段文字';
'增加一段文字'
id1.innerHTML='<strong>123</strong>'
'<strong>123</strong>'
操作JS
id1.style.padding='20px'
'20px'
id1.style.color='red';
'red'
id1.style.fontSize='20px'
'20px'
删除Dom节点
无法删除自己 So先获取父节点 再通过父节点删除
注意 删除是一个动态的过程
<div id="father">
<h1 id="h1">这是标题</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
//获取父节点
var father = document.getElementById('father');
//删除父节点下的子节点
document.removeChild(h1)
============================另一种删除子节点方式推荐 (数组)
//father.children[0] 定位到父节点下第一个子节点
document.removeChild(father.children[0])
document.removeChild(father.children[1])
//注意!!!!!!!!!!
删除多个节点时,children是时刻变化的。删除【0】 下面的【1】节点会动态成为【0】
</script>
创建和插入Dom节点
html:
<p id="js">javaScript</p>
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="er">JavaER</p>
</div>
append: 插入节点(放在最后)
//通过js创建一个新节点
var newp = document.createElement('p'); // <p></>p>
newp.id = 'newP'; // <p id=newP></>p>
list.appendChild(newp); //放入一个父类里*
newp.innerText = '这是通过JS新建的节点内新建的字符';
newp.style.color='red';
insert: 插入指定的节点前面
//===================insert(父类下 放入旧节点前面)========================================
//insertBefore(新节点,旧节点) : 新节点插入的位置在旧节点的前面 注意在父类下操作
list.insertBefore(js,ee);
创建一个标签节点: setAttribute
var myScript = document.createElement('script'); //<script><script>
myScript.setAttribute('type','text/javascript'); //<script type=text/javascript><script>
list.appendChild(myScript); //放入一个父类里*
创建style标签节点 : setAttribute
var mystyle = document.createElement('style'); //<style></style>
mystyle.setAttribute('type','text/css'); //<style type="text/css"></style>
mystyle.innerHTML = 'body{background-color:red}'; //设置style标签内的内容
list.appendChild(mystyle); // 放入一个父类里*
6.表单
复习: xxx
- 文本框 用户名
- 单选框 男女性别
- 下拉框 … 紧急程度
- 多选框 国家地区
- 隐藏域 hidden
- 密码框 password
…
获取和设置表单的值 xx.value // xx.checked
<form method="post">
<p>
<span>用户名:</span><input type="text" id="username">
</p>
<p>
<span>性别:</span>
<input type="radio" value="boy" name="sex" id="man">男
<input type="radio" value="girl" name="sex" id="woman">女
</p>
</form>
xx.value: 得到表单的值
xx.value = ’ ’ 设置表单的值
var input_text = document.getElementById('username');
input_text.value; //得到输入框的值
input_text.value = '修改输入框的值' //修改输入框的值
对于value固定的(单选,多选) 使用checked来获取选框的值
查看返回的结果,是否为true,如果为true,则被选中~
//抓取男女的单选框 document.getElementsByTagName('input')[1] 。为了省事直接定义ID来获取
var boy_radio = document.getElementById('man'); //1
document.getElementsByTagName('input')[1] //2 *
表单验证(MD5加密)
一般在html里验证:required
<!--MD5工具类-->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<!--
表单绑定提交事件 onsubmit= 绑定一个提交检测的函数, true, false
将这个结果返回给表单,使用 onsubmit 接收!
onsubmit="return aaa()"
-->
<form action="https://www.baidu.com/" method="post" onsubmit="return aaa()">
<p>
<span>用户名:</span> <input type="text" id="username" name="username">
</p>
<p>
<button type="submit">提交</button>
<span>密码:</span> <input type="password" id="input-password">
</p>
<input type="hidden" id="md5-password" name="password">
</form>
<script>
function aaa() {
var uname = document.getElementById('username');
var pwd = document.getElementById('input-password');
var md5pwd = document.getElementById('md5-password');
// pwd.value = md5(pwd.value);
md5pwd.value = md5(pwd.value);
// 可以校验判断表单内容,true就是通过提交,false,阻止提交
return true;
}
7.JQuery
公式: $(选择器).事件(事件函数) --------》选中元素进行操作
<a href="#" id="test-jquary">点我</a>
<script>
document.getElementById('id');
//css的选择器 如ID就是# 别忘了加#
$('#test-jquary').click(function () {
alert('hello,jquary');
})
</script>
选择器
mouse:鼠标事件
<p class="class1">鼠标事件:</p>
<script>
$('.class1').mousedown(function () {
alert("鼠标按下去了")
})
</script>
mousemove 事件:当鼠标指针在指定的元素中移动时发生的时间
mousemove事件处理函数会被传递一个变量——事件对象,clientX 和 .clientY 属性代表鼠标的坐标
<style>
#divMove{
height: 500px;
width: 500px;
border: 5px solid coral;
}
</style>
<!--要求:获取鼠标当前的一个坐标-->
mouse:<span id="mouseMove"></span>
<div id="divMove">
在这里移动鼠标试试
</div>
<script>
//当网页元素加载完后,响应事件
$(document).ready(function () {...})
//======================可省略为 $( function(){...} )
$(function () {
$('#divMove').mousemove(function (e) {
$('#mouseMove').text('x:'+e.pageX + 'y'+e.pageY);
})
});
常用JQ操作Dom元素的方法
- 显示:$(选择器).show()
- 隐藏:$(选择器).hide()
- 更新Dom元素:$(选择器).text(‘自定义数值’);
- $(选择器).html(’’);
- css写法:$(选择器).css(…) css里写入键值对
<ul id="ul">
<li class="java">java</li>
<li class="php">php</li>
</ul>
<script>
// ======原生写法=======
// document.getElementById('ul'); //获得
// document.getElementById('ul').innerText='xxxxx' //更新
// document.removeChild(document.getElementById('ul').children[0])//删除
// var new1 = document.createElement('script')
// new1.setAttribute('type','text/javascript');
// document.getElementById('ul').append(new1); //创建并插入节点
//====JQuary写法=====
$('#ul li[class=php]').text(); //定位到父元素下的子元素进行更新
// $('#ul').removeChild(); //删除
$('#ul li[class=java]').css("color","red"); //css写法
// $('#ul li[class=php]').show("display","none");
$('#ul li[class=java]').hide(); //隐藏
</script>
节点文本操作
css操作
元素的显示和隐藏
前端技巧
1.巩固方法:(看JQ源码,看游戏源码)
2.巩固H5,CSS: (扒网站,全部down下来 对应看效果)