局域网建设网站如何访问,外链平台有哪些,类似wordpress的应用,青岛网站公司1.什么是Javascript Javascript是一门世界上最流行的脚本语言 一个合格的后端人员#xff0c;必须要精通Javascript
2.快速入门
2.1引入Javascript
2.1.1内部标签
!--script标签内#xff0c;写Javascript--scriptalert(hello world);/script…1.什么是Javascript Javascript是一门世界上最流行的脚本语言 一个合格的后端人员必须要精通Javascript
2.快速入门
2.1引入Javascript
2.1.1内部标签
!--script标签内写Javascript--scriptalert(hello world);/script
2.1.2外部引入
!--外部引入--script srcHelloWorld.js/script 2.2基本语法
scriptvar num1;alert(num);
/script 2.3数据类型 数值 字符串 布尔值 逻辑运算 比较运算符(这个和Java不太一样)
1.
2. 等于(类型不一样值一样也会判断为true)
3. 绝对等于(类型一样值一样才会判断为true,Javascript中推荐使用这个)
注意
1.NaNNaN这个与所有的数值都不相等包括自己
2.只能通过isNaN(NaN)来判断这个数是否是NaN 浮点数问题 null和undefined(这个和Java不太一样)
1.null 空
2.undefined 未定义 数组(Java的数组必须是相同类型的对象Js中不需要这样可以是不同类型的对象)
var arr[1,2,3,hello,null,true]
//取数组下标如果越界了就会报undefined 对象(对象是大括号数组是中括号)
每个属性之间使用逗号隔开最后一个不需要添加 3.数据类型
3.1字符串 正常字符串使用单引号、双引号进行包裹 注意转义字符
1.\n
2.\t
3.\u4e2d \u#### Unicode字符
4.\x41 Ascll字符 多行字符串编写
//tab上面Esc的下面var msghelloworld你好 模板字符串
let namesxc;
let age22;
let msg${name}最帅 字符串长度
str.length 字符串不可变 大小写转换
//这里是方法不是属性
student.toUpperCase()
student.toLowerCase() 查找字符串中字母所在位置
student.indexOF(u) 字符串的截取
student.substring() 3.2数组
Array可以包含任意的数据类型
var arr[1,2,3,hello,null,true] 长度
arr.length
注意加入给arr.length赋值数组大小会发生变化如果赋值过小元素就会丢失 下标索引
arr.indexOf() slice():截取Array的一部分返回一个新数组类似于String中的substring push和pop/unshift和shift
1.push:加入到尾部
2.pop弹出尾部的一个元素
3.unshift:加入到头部
4.shift弹出头部的一个元素 排序sort() 元素反转reverse() concat()
注意concat()并没有修改数组只是会返回一个新的数组 连接符join打印拼接数组使用特定的字符串连接 多维数组 3.3对象 对象赋值
var person{name:sxc,age:22,score:100
} 使用一个不存在的对象不会报错(undefined) 动态的删减属性通过delete删除对象的属性 动态的添加直接给新的属性添加值即可 判断属性是否在这个对象中
age in person 判断一个属性是否是这个对象自身拥有的hasOwnProperty()
person.hasOwnProperty(age)
true 3.4流程控制 if判断
if(){}else if(){}else{} while循环/do while循环
while(){}
do{}while() for循环
for(let i0;i100;i){} forEach循环
age.forEach(function(value)) for...in
//for(var index in object){for(var num in age){if(age.hasOwnProperty(num)){console.log(存在)console.log(age[num])}}
} 3.5 Map和Set
Map:
var mapnew Map([[tom,100],[jack,90],[Rose,80]]);
var namemap.get(tom);
map.set(admin,123456);
Set:无序不重复的集合
set.add(2);
set.delete(1);
console.log(set.has(3)); 3.6 Iterator
使用Iterator来遍历迭代MapSet 遍历数组
//通过for of/for in 下标
var arr[3,4,5]
for (var x of arr){console.log(x)
} 遍历map
var mapnew Map([[tom,100],[jack,90],[Rose,80]]);
for (var x of map){console.log(x)
} 遍历set
var setnew set([5,6,7])
for (let x of set){console.log(x)
} 4.函数
4.1定义函数 定义方式一 function abs(x){if(x0){return x;}else{return -x;}
} 定义方式二 var absfunction(x){if(x0){return x;}else{return -x;}
} arguments参数:可以拿到传递进来的所有参数 var abs function(x){console.log(xx);
for (var i 0; iarguments.length; i){console.log(arguments[i]);}
if(x0){return x;}else{return -x;}
} rest:获取除了已经定义的参数之外的所有参数rest参数必须放在最后面用...标识 function aaa(a,b, ... rest) {console.log(aa);console.log(bb);console.log(rest);
} 4.2变量的作用域
在JavaScript中var定义变量实际是有作用域的 假设在函数体中声明则在函数体外不可以使用 假设在JavaScript中函数查找变量从自身函数开始~,由“内”向“外”查找.假设外部存在这个同名的函数变量,则内部函数会屏蔽外部函数的变量。 养成规范所有的变量定义都放在函数的头部不要乱放便于代码维护 局部作用域:用let去定义局部作用域的变量 function aaa(){for (let i0;i100;i){comsole.log(i)}comsole.log(i1);
} 全局作用域:JavaScript实际只有一个全局作用域任何变量(函数页可以视为变量)假设没有在函数作用范围内找到就会向外查找如果在全局作用域都没有找到就会报错 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); 常量const const PI3.14;
console.log(PI); 4.3方法 定义方法 方法就是把函数放在对象里面对象只有两个东西属性和方法
var sunshen {name:sxc’,bitrh: 2000,//方法age: function () {// 今年 - 出生的年var now new Date().getFullYear();return now-this.bitrh;}
}
//属性
sunshen.name
//方法,一定要带()
sunshen.age () apply:在JS中可以控制this指向 function getAge() {
// 今年 - 出生的年
var now new Date().getFullYear();
return now-this.bitrh;
}
var sunshen {
name:sxc,
bitrh: 2000,
age: getAge
};
// sunshen. age() ok
getAge.apply(sunshen,[]);// this,指向了 sunshen,参数为空 5.内部对象
5.1 Date
var now new Date(); //Sat Jan 04 2020 10:47:06 GMT0800(中国标准时间)
now.getFullYear();//年
now.getMonth();//月 0~11代表月
now.getDate(); // 日
now.getDay();// 星期几
now.getHours();//时
now.getMinutes();// 分
now.getSeconds(); // 秒
now.getTime();// 时间戳 全世界统一 1970 1.1 0:00:00 毫秒数
console.log(new Date(1578106175991))//时间戳转为时间
转换
now new Date(1578106175991)
Sat Jan 04 2020 10:49:35 GMT0800(中国标准时间)
now.toLocalestring //注意,调用是一个方式,不是一个属性!
f toLocalestring() { [native code] }
now. toLocalestring()
2020/1/4 上午10:49:35
now. toGMTString()
Sat, 04 Jan 2020 02:49:35 GMT 5.2 JSON
在JavaScript一切皆为对象、任何js支持的类型都可以用JSON来表示;number,string ...
格式: 对象都用{} 数组都用[] 所有的键值对 都是用 key:value JSON字符串和JS对象的转化 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
scriptvar person{name:sxc,age:22,sex:男}//对象转化为json字符串 {name:sxc,age:22,sex:男}var jsonpersonJSON.stringify(person);
//json字符串转化为对象参数为json字符串var objJSON.parse({name:sxc,age:22,sex:男});
/script
/body
/html JSON与JS对象的区别 var obj {a: hello,b:hellob};
var json {a: hello,b:hellob} 6.面向对象编程 class继承 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
scriptclass Student{constructor(name) {this.namename;}
hello(){alert(hello)}}
var sxcnew Student(sxc);
/script
/body
/html 7.操作BOM对象(重点) window:代表浏览器窗口 window.alert(1)
undefined
window. innerHeight
258
window. innerwidth
919
window.outerHeight
994
window. outerwidth
919 screen:代表屏幕尺寸 screen.width
1920px
screen.height
1080px location重要代表当前页面的URL信息 host:www.baidu.com
href:https://www.baidu.com/
protocol:https:
reload:f reload() // 刷新网页
// 设置新的地址
location.assign(https://blog. kuangstudy.com/) document:代表当前页面 document.title
“百度一下,你就知道”
获取具体的文档树节点
d1 idapp
dtJava/dt
ddJavaSE/dd
ddJavaEE/dd
/d1
script
var dl document. getElementById(app);
/script
获取cookie
document.cookie
_xsrf2|8c7b1902|458eb5a7fa1c45676be1cfe9e19cb67e|1700048275 history history.back() //后退
history.forward()//前进 8.操作DOM对象(重点) 核心 浏览器的网页就是一个DOM的树形结构 更新更新DOM节点 遍历dom节点:得到DOM节点 删除:删除一个DOM节点 添加:添加一个新的节点 要操作一个DOM节点,就必须要先获得这个DOM节点 获取DOM节点 //对应 css 选择器
var h1 document.getElementsByTagName(h1);
var p1 document.getElementById(p1);
var p2 document.getElementsByclassName(p2);
var father document.getElementById(father);
var childrens father.children; //获取父节点下的所有子节点
// father.firstchild
// father. lastchild
这是原生代码之后尽量用jQuery() 更新节点 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
div idid1
/div
scriptvar id1document.getElementById(id1)
/script
/body
/html
操作文本 id1. innerText456 修改文本的值 id1.innerHTMLsxc
操作JS
id1.style.color yellow;
id1.style.fontsize20px;
id1.style.padding 2em 删除节点 删除节点步骤先获取父节点在通过父节点删除自己
div idfatherh1标题一/h1p idp1p1/pp classp2p2/p
/div
scriptvar self document.getElementById(p1);var father p1.parentElement;father.removechild(self)
/script 插入节点 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
p idjsJavaScript/p
div idlistp idseJavaSE/pp ideeJavaEE/pp idmeJavaME/p
/div
scriptvar jsdocument.getElementById(js);var listdocument.getElementById(list);list.appendChild(js);//追加到后面
/script
/body
/html 创建一个新的标签实现插入 script
var js document.getElementById(js);//已经存在的节点
var list document.getElementById(list);
//通过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.innerHTMLbody{background-color: chartreuse;};//设置标签内容
document.getElementsByTagName(head)[0].appendchild(mystyle)
/script insert var ee document.getElementById(ee);
var js document.getElementById(js);
var list document.getElementById(list);
// 要包含的节点.insertBefore(newNode,targetNode)
list.insertBefore(js,ee); 9.操作表单(验证) 获取要提交的信息 form actionpostp
span用户名 : /span input typetext idusername
/p
!-- 多选框的值,就是定义好的value -- p
span性别 : /spaninput typeradio namesex valueman idboy男input typeradio namesex valuewomen idgirl女
/p
/form
scriptvar 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,则被选中~girl_radio.checked true; //赋值
/script 提交表单 !--
表单绑定提交事件
οnsubmit 绑定一个提交检测的函数,true, false
将这个结果返回给表单,使用 onsubmit 接收!
οnsubmitreturn aaa()
--
form actionhttps://www.baidu.com/ methodpost οnsubmitreturn I
aaa ()
pspan用户名 : /span input typetext idusernamenameusername/ppspan密码 : /span input typepassword idinput-password/p
input typehidden idmd5-password namepassword
!-- 绑定事件 onclick 被点击 -- button typesubmit提交/button
/form
script
function aaa() {alert(1);var uname document.getElementById(username);var pwd document.getElementById(input-password);var md5pwd document.getElementById(md5-password);
md5pwd.value md5(pwd.value);// 可以校验判断表单内容,true就是通过提交,false,阻止提交return true;}
/script 10.jQuery
! DOCTYPE html
html langen
head
meta charset[UTF-8
titleTitle/title
!-- cdn引入 --
script srchttps://cdn.bootcss.com/jquery/3.4.1/core.js/script
/head
body
/body
/htm1
! DOCTYPE html
html langen
head
meta charsetUTF-8
titleTitle/title
!-- script srchttps://cdn.bootcss.com/jquery/3.4.1/core.js/script --
script srclib/jquery-3.4.1.js/script
/head
body
a href idtest-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选择器
文档工具站jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm 事件 !-- 要求:获取鼠标当前的一个坐标 --
mouse : span idmouseMove/span
div iddivMove
在这里移动鼠标试试
div
script//当网页元素加载完毕之后,响应事件$(function () {$(#divMove) .mousemove(function (e) {$(#mouseMove).text(x:e.pageX y:e.pageY)})});
/script 操作DOM 节点文本操作
$(#test-ul li[namepython]).text();//获得值
$(#test-ul li[namepython]).text(设置值’);//设置值
$(#test-ul).html();//获得值
$(#test-ul).html(strong123/strong);//设置值
css的操作
$ (#test-ul li [namepython]). css(color, red)
元素的显示和隐藏
$(#test-ul li [namepython]).show()
$(#test-ul li [namepython]).hide()
