一:第一个JS代码
1.为什么是JavaScript
- JavaScript和Java毫无关系,初始为了蹭热度命名为JavaScript
- JavaScript运行在网页的客户端,能被用来设计和编程网页在事件发生时的行为。(一句话:可实现纯前端的动态交互)
- 即面向过程,又面向对象
- 用的人多,易于学习
2. 第一个JavaScript程序
既可以直接在html使用script标签写,也可以单独写一个js文件,在需要使用的前端页面中引入即可
<!--外部引入,注意别自闭和引入-->
<script src="js/qj.js"></script>
<!--script标签中,写js代码-->
<script>
alert("hello world");
</script>
<!--不用显式写js,也会默认js-->
<script type="text/javascript">
</script>
二:JS基本语法
1. 使用var定义变量,条件控制,多行注释,控制台输出
<script>
var num = 1;
alert(num)
if (2>1){
alert("true");
}
var score = 1;
if (score>60&&score<70){
alert("60-70");
}else if(score>70&&score<80){
alert("70-80")
}else {
alert("80+");
}
</script>
2. 数据类型介绍,对象的定义
<script>
123
123.1
1.123e3
-99
NaN
Infinity
"abc" / 'abc'
true / false
isNaN(NaN)
console.log((1/3)===(1-2/3))
Math.abs(1/3-(1-2/3))<0.000000000001
var arr = [1,2,3,4,"add",null]
new Array(1,2,3,4,5)
var person = {
name:"chelsea",
age:3,
tags:[1,2,3,"java"]
}
person.age
</script>
3. use strict严格检查模式
<!--
'use strict' 必须写在第一行
局部变量建议let定义(必须支持ES6)
-->
<script>
'use strict';
var i = 1;
let j = 1;
</script>
4. 字符串数据类型和方法详解
<!--字符串数据类型讲解-->
<script>
'use strict';
var msg = `
chelsea
chelsea
`;
let name = "chelsea";
let age = 3;
let msg = `你好呀,${name}`;
var student = "student";
student.length;
student[1];
student.toUpperCase();
student.toLowerCase();
student.indexOf("t");
student.substring(1,3);
student.substring(1);
</script>
5. 数组类型和方法详解
<!--数组类型详解-->
<script>
'use strict';
var arr = [1,2,3,4,5,6];
arr.length;
arr.length = 10;
arr.indexOf(2);
arr.slice(1,5);
arr.push("aaa","bbb");
arr.pop();
arr.unshift("aaaa","asdasd");
arr.shift();
arr.sort();
arr.reverse();
arr.concat([1,2,3,4,5]);
arr.join("-");
arr = [[1,2,3,4],[3,4,5]];
</script>
6. 对象类型及相关操作
<!--对象类型,若干个键值对形式-->
<script>
var person = {
name:"chelsea",
age:3,
prop:"yaoshi"
};
delete person.name;
person.email = "chelsea@foxmail.com";
"age" in person;
"tostring" in person;
person.hasOwnProperty("toString");
person.hasOwnProperty("age");
</script>
7. 流程控制
<!--流程控制-->
<script>
let age = 3;
if (age>3){
alert("haha");
}else {
alert("kua~");
}
while (age<100){
age += 1;
}
for (let i = 0; i < 10; i++) {
age += 1;
}
var age = [1,2,3,4,4,5,6];
age.forEach(function (value) {
console.log(value);
});
for (var num in age){
console.log(age[num]);
}
</script>
8. Map和Set集合
<!--Map和Set-->
<script>
var map = new Map([["tom",80],["chelsea",100]]);
console.log(map.get("chelsea"));
map.set("admin",99);
map.delete("tom");
var set = new Set([3,1,1,1,1]);
set.add(2);
set.delete(1);
set.has(3);
var arr = [1,2,3];
for (var value of arr){
console.log(value);
}
for (var x of map){
console.log(x);
}
for (var x of set){
console.log(x);
}
</script>
9. 函数的定义和使用
<!--函数-->
<script>
function abs(x) {
if(typeof x!=="number"){
throw "Not a Number!";
}
if(x>=0){
return x;
}else {
return -x;
}
}
var abs = function (x) {
if(x>=0){
return x;
}else {
return -x;
}
}
function aaa(a,b,...rest) {
console.log("a"+a);
console.log("b"+b);
console.log(rest);
}
</script>
10. 对象的作用域
<!--变量的作用域-->
<script>
function qj() {
var x = 1;
x = x+1;
}
x = x+2;
function f() {
var x = 1;
x = x+2;
}
function f1() {
var x = "x"+y;
console.log(x);
y = "y";
}
var z = "xxx";
alert(z);
alert(window.z);
</script>
11. 对象的行为
<!--对象行为-->
<script>
var person = {
name:"chelsea",
birth:"2020",
age:function () {
var now = new Data().getFullYear();
return now-this.birth;
}
};
person.age();
</script>
12. 常用对象(Data等)
<!--特殊对象-->
<script>
var now = new Data();
now.getFullYear();
now.getMonth();
now.getDate();
now.getDay();
now.getHours();
now.getMinutes();
now.getSeconds();
now.getTime();
now.toLocaleString();
console.log(new Data(12352342432))
</script>
13. ES6后的面向对象编程
<!--面向对象-->
<script>
var user = {
name:"chelsea",
age:10,
run:function () {
console.log(this.name+"run!");
}
};
var xiaomign = {
name:"xiaoming"
};
xiaomign.__proto__ = user;
class Student{
constructor(name) {
this.name = name;
}
hello(){
alert("hello");
}
}
var xiaoming = new Student("xiaoming");
class xiaoStudent extends Student{
constructor(name,grade) {
super(name);
this.grade = grade;
}
mygrade(){
alert("i am xiao student");
}
}
</script>
三:操作BOM和DOM
1. 操作Bom对象 (Browser Object Model)
<!--操作Bom对象 Browser Object Model-->
<script>
window.alert(111);
window.innerHeight;
window.innerWidth;
window.outerWidth;
window.outerHeight;
Navigator.appName;
Navigator.userAgent;
screen.width;
screen.height;
location.host;
location.href;
location.protocol;
location.reload();
location.assign("codelearing.life");
document.title;
document.getElementById("app");
document.cookie;
history.back();
history.forward();
</script>
2. 操作Dom对象 (Document Object Model)
<!--操作Dom对象 Document Object Model-->
<script>
var father1 = document.getElementsByTagName("h1");
var father2 = document.getElementById("p1");
var father3 = document.getElementsByClassName("myClass");
var childrens = father2.children;
var id1 = document.getElementById("id1");
id1.innerText = "123";
id1.innerHTML = "<a href='ww.baidu.com'>";
id1.style.color = "red";
id1.style.margin = "200px";
var father = document.getElementById("father");
father.removeChild(p1);
var father1 = document.getElementById("children").parentElement;
var js = document.getElementById("js");
var list = document.getElementById("list");
var newP = document.createElement("p");
newP.id = "newP";
newP.innerText = "newP";
newP.setAttribute("href","www.baidu.com");
list.appendChild(js);
list.appendChild(newP);
</script>
3. 获取表单值
<!--操作表单-->
<script>
var username = document.getElementById("username").value;
</script>
四:Jquery
Jquery本质上就是一个封装好的JS类库,可以直接调用人家写好的方法,因为直接使用JS开发部分代码冗余,操作不方便,就产生了Jquery。 Jquery官网下载地址:https://jquery.com/ JqueryApi介绍文档:http://jquery.cuishifeng.cn
<!--Jquery-->
<script>
$("#submit").click(function () {
alert("123");
})
$("span");
$(".myclass");
$("#myId");
$("#submit").mousedown(function () {
alert("点击了")
});
$(function () {
alert("网页加载完毕")
});
</script>
<!--操作Dom-->
<script>
$("#test-ul li[name=python]").text();
$("#test-ul li[name=python]").text("addtest");
$("#test-ul li[name=python]").html("addtest");
$("#test-ul li[name=python]").show();
$("#test-ul li[name=python]").hidden;
</script>
|