网站内容如何建设,html做分模块的网站,wordpress相册间距,360的网站排名怎么做UI框架
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yYMMLanm-1608952213820)(C:\Users\王东梁\AppData\Roaming\Typora\typora-user-images\image-20201225142522925.png)]
简介
javaScript是一门世界上最流行的脚本语言 Java#xff0c;Java…UI框架
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yYMMLanm-1608952213820)(C:\Users\王东梁\AppData\Roaming\Typora\typora-user-images\image-20201225142522925.png)]
简介
javaScript是一门世界上最流行的脚本语言 JavaJavaScript 10天
一个合格的后端人员必须精通JavaScript
ECMAScript它可以理解为JavaScript的一个标准 最新版本已经到es6版本~ 但是大部分浏览器还只停留在支持es5代码上 开发环境–线上环境版本不一致
快速入门
引入JavaScript
1、内部标签
script //....
script2、外部引入 hj.js
alert(hello,world);test.html !--外部引入注意script必须成对出现--script srcjs/hj.js/script!--不用显示定义type也默认就是javaScript--script typetext/javascript/script
1234567测试代码
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title!--script标签内写Javascript代码--!--scriptalert(hello,world);/script--!--外部引入注意script必须成对出现--script srcjs/hj.js/script!--不用显示定义type也默认就是javaScript--script typetext/javascript/script
/head
body!--这里也可以存放--
/body
/html基本语法入门
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title!--JavaScript严格区分大小写--script// 1. 定义变量 变量类型 变量名 变量值var score 1 ;//alert(num)// 2. 条件控制if (score 60 score 70){alert(60~70);}else if(score 70 score 80){alert(70~80);}else{alert(other)}/script
/head
body/body
/html浏览器必备调试须知
打断点调试
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Usq2K9CK-1608952213823)(C:\Users\王东梁\AppData\Roaming\Typora\typora-user-images\image-20201225151635829.png)]
数据类型
数值文本图形音频视频
变量
var anumber js不区分小数和整数Number
123//整数123
123.1//浮点数123.1
1.123e3//科学计数法
-99//负数
NaN //not a number
Infinity // 表示无限大字符串 ‘abc’ “abc”
布尔值 truefalse
逻辑运算 两个都为真结果为真|| 一个为真结果为真! 真即假假即真比较运算符 重要 11等于类型不一样值一样也会判断为true绝对等于类型一样值一样结果为true这是一个JS的缺陷坚持不要使用 比较 须知
NaN NaN这个与所有的数值都不相等包括自己只能通过isNaNNaN来判断这个数是否是NaN
浮点数问题
console.log((1/3) (1-2/3))尽量避免使用浮点数进行运算存在精度问题
Math.abs(1/3-(1-2/3))0.00000001null 和 undefined
null 空undefined 未定义
数组 Java的数组必须是相同类型的对象~JS中不需要这样
//保证代码的可读性尽量使用[]
var arr [1,2,3,4,5,hello,null,true];
//第二种定义方法
new Array(1,2,3,4,5,hello);
1234取数字下标如果越界了就会 报undefined
undefined对象 对象是大括号数组是中括号 每个属性之间使用逗号隔开最后一个属性不需要逗号 // Person person new Person(1,2,3,4,5);var person {name:Tom,age:3,tags:[js,java,web,...]
}取对象值
person.nameTom
person.age3
1234严格检查格式
use strict必须写在JavaScript的第一行 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title!--前提IDEA需要设置支持ES6语法use strict;严格检查模式预防JavaScript的随意性导致产生的一些问题必须写在JavaScript的第一行局部变量建议都使用let去定义~--scriptuse strict;//全局变量let i1//ES6 let/script
/head
body/body
/html数据类型
字符串
1、正常字符串我们使用 单引号或者双引号包裹 2、注意转义字符 \
\
\n
\t
\u4e2d \u##### Unicode字符\x41 Ascall字符3、多行字符串编写
//tab 上面 esc下面var msg helloworld你好呀nihao4、模板字符串·
//tab 上面 esc下面
let name Tom;
let age 3;
var msg 你好${name}5、字符串长度
str.length6、字符串的可变性不可变 7、大小写转换
//注意这里是方法不是属性了
student.toUpperCase();
student.toLowerCase();8、student.indexof(‘t’) 9、substring从0开始
[)
student.substring(1)//从第一个字符串截取到最后一个字符串
student.substring(1,3)//[1,3)数组
Array可以包含任意的数据类型
var arr [1,2,3,4,5,6];//通过下标取值和赋值1、长度
arr.length注意假如给arr.lennth赋值数组大小就会发生变化~如果赋值过小元素就会丢失
2、indexOf通过元素获得下标索引
arr.indexOf(2)字符串的1和数字 1 是不同的
**3、slice**截取Array的一部分返回的一个新数组类似于String中substring 4、push()pop()尾部
push压入到尾部
pop弹出尾部的一个元素5、unshift(),shift() 头部
unshift压入到头部
shift弹出头部的一个元素6、排序sort()
(3)[B,C,A]
arr.sort()
(3)[A,B,C]7、元素反转reverse()
(3)[A,B,C]
arr.reverse()
(3)[C,B,A]8、concat() 注意concat()并没有修改数组只是会返回一个新的数组
9、连接符join 打印拼接数组使用特定的字符串连接 10、多维数组
数组存储数据如何存如何取方法都可以自己实现
对象
最后一个属性不加逗号
若干个键值对
var 对象名 {属性名属性值属性名属性值属性名属性值
}
//定义了一个person对象它有四个属性
var person {name:Tom,age:3,email:123456798QQ.com,score:66
}Js中对象{…}表示一个对象建制对描述属性xxxxxx多个属性之间用逗号隔开最后一个属性不加逗号 JavaScript中的所有的键都是字符串值是任意对象 1、对象赋值 2、使用一个不存在的对象属性不会报错undefined 3、动态的删减属性通过delete删除对象的属性 4、动态的添加直接给新的属性添加值即可 5、判断属性值是否在这个对象中xxx in xxx 6、判断一个属性是否是这个对象自身拥有的 hasOwnProperty()
流程控制
if判断
while循环避免程序死循环 for循环 forEach循环 ES5.1特性 for …in-------下标
num就是一个索引 Map和Set ES6的新特性~ Map Set无序不重复的集合
iterator es6新特性 作业使用iterator来遍历迭代我们MapSet 遍历数组 遍历Map 遍历set
函数
定义函数 定义方式一 绝对值函数 一旦执行到return代表函数结束返回结果 如果没有执行return函数执行完也会返回结果结果就是undefined 定义方式二 function(x){…}这是一个匿名函数。但是可以吧结果赋值给abs通过abs就可以调用函数 方式一和方式二等价 调用函数 abs(10)//10
abs(-10) //10
12参数问题javaScript可以传任意个参数也可以不传递参数~ 参数进来是否存在问题 假设不存在参数如何规避
arguments
arguments是一个JS免费赠送的关键字 代表传递进来的所有参数是一个数组 问题arguments包含所有的参数我们有时候想使用多余的参数来进行附加操作。需要排除已有参数~
rest
以前
ES6引入的新特性获取除了已经定义的参数之外的所有参数~… rest参数只能写在最后面必须用…标识。
变量的作用域
在javascript中var定义变量实际是有作用于的。 假设在函数体重声明则在函数体外不可以使用~闭包 如果两个函数使用了相同的变量名只要在函数内部就不冲突 内部函数可以访问外部函数的成员反之则不行 假设内部函数变量和外部函数变量重名 假设在JavaScript中函数查找变量从自身函数开始~ 由“内”向“外”查找假设外部存在这个同名的函数变量则内部函数会屏蔽外部函数的变量。 提升变量的作用域 结果x undefined 说明js执行引擎自动提升了y的声明但是不会提升变量y的赋值 这个是在javascript建立之初就存在的特性。 养成规范所有 的变量定义都放在函数的头部不要乱放便于代码维护 全局变量 全局对象window
alert() 这个函数本身也是一个window的变量 javascript实际上只有一个全局作用域任何变量函数也可以视为变量假设没有在函数作用范围内找到就会向外查找如果在全局作用域都没有找到就会报错 Refrence 规范 由于我们的所有变量都会绑定到window上。如果不同的js文件使用了相同的全局变量就会产生冲突—如何减少这样的冲突 把自己的代码全部放入自己定义的唯一空间名字中降低全局命名冲突问题~ jQuery中就是使用的该方法jQuery.name简便写法$() 局部作用域 ES6的let关键字解决了局部作用域冲突的问题 建议大家都用let去定义局部作用域的变量 常量 在ES6之前怎么定义常量只有用全部大写字母命名的变量就是常量建议不要修改这样的值。 在ES6引入了常量关键字 const
方法 定义方法 方法就是把函数放在对象的里面对象只有两个东西属性和方法
this
代表什么拆开上main的代码看看 this是无法指向的是默认指向调用它的那个对象的
apply
在js中可以控制this指向
内部对象 标准对象 Date
基本使用 转换
JSON JSON是什么 在javascript中一切皆为对象任何js支持的类型都可以用JSON表示 格式
对象都用{}数组都用[]所有的键值对 都是用key:value
JSON字符串和js对象转化 很多人搞不清楚JSON和JS对象的区别 AJAX
原生的js写法 xhr异步请求jQuery封装好的方法$(#name).ajax()axios请求
面向对象编程 原型对象 javascript、java、c#------面向对象但是javascript有些区别 类模板对象具体实例
在javascript中需要大家转换一下思维方式 原型 class集继承 class关键字是在ES6引入的 1、定义一个类、属性、方法 2、继承
script//ES6之后//定义一个学生的类class Student{constructor(name){this.name name;}hello(){alert(hello);}
}class XiaoStudent extends Student{constructor(name,grade){super(name);this.grade grade;}myGrade(){alert(我是一名小学生);}}var xiaoming new Student(xiaoming);var xiaohong new XiaoStudent(xiaohong,1);
/script本质查看对象原型 原型链 proto:
操作BOM对象重点 浏览器介绍 javascript和浏览器关系 BOM浏览器对象模型
IE6~11ChromeSafariFireFoxOpera
三方
QQ浏览器360浏览器 window window代表浏览器窗口 Navigator不建议使用 Navigator封装了浏览器的信息 大多数时候我们不会使用navigator对象因为会被人为修改! 不建议使用这些属性来判断和编写代码 screen 代表屏幕尺寸 location(重要) location代表当前页面的URL信息 document内容DOM document代表当前的页面HTML DOM文档树 获取具体的文档树节点 获取cookie 劫持cookie原理 www.taobao.com 服务器端可以设置cookie为httpOnly history不建议使用 history代表浏览器的历史记录
操作DOM对象重点
DOM文档对象模型 核心 浏览器网页就是一个Dom树形结构
更新更新Dom节点遍历Dom节点得到Dom节点删除删除一个Dom节点添加添加一个新的节点
要操作一个Dom节点就必须要先获得这个Dom节点
获得Dom节点 这是原生代码之后我们尽量都使用jQuery();
更新节点 操作文本 操作css
删除节点
删除节点的步骤先获取父节点再通过父节点删除自己 注意删除多个节点的时候children是在时刻变化的删除节点的时候一定要注意。
插入节点
我们获得了某个Dom节点假设这个dom节点是空的我们通过innerHTML就可以增加一个元素了但是这个Dom节点已经存在元素了我们就不能这么干了会产生覆盖
追加 创建一个新的标签 scriptvar js document.getElementById(js);//已经存在的节点var list document.getElementById(list);//通过JS创建一个新的节点var newP document.creatElement(p);//创建一个p标签newP.id newP;newP.innerText Hello,Kuangshen;//创建一个标签节点var myScript document.creatElement(script);myScript.setAttribute(type,text/javascript);//可以创建一个style标签var myStyle document.creatElement(style);//创建了一个空style标签myStyle.setAttribute(type,text/css);myStyle.innerHTML body{background-color:chartreuse;};//设置标签内容document.getElementByTagName(head)[0].appendChild(myStyle);
/scriptinsertBefore var ee document.getElementById(ee);
var js document.getElementById(js);
var list document.getElementById(list);
//要包含的节点.insertBefore(newNode,targetNode)
list.insertBefore(js,ee);jQueryhttps://jquery.cuishifeng.cn/
操作表单 表单是什么form-----DOM树 文本框----text下拉框----select单选框----radio多选框----checkbox隐藏域----hidden密码框----password…
表单的目的提交信息
获得要提交的信息
bodyform action postpspan用户名/spaninput typetext id username //p!--多选框的值就是定义好的value--pspan性别/spaninput type radio name sex value man id boy/男input type radio name sex value woman id girl/女/p/formscriptvar input_text document.getElementById(username);var boy_radio document.getElementById(boy);var girl_radio document.getElementById(girl);//得到输入框的值input_text.value //修改输入框的值input_text.value value;//对于单选框多选框等等固定的值boy_radio.value只能取到当前的值boy_radio.checked;//查看返回的结果是否为true如果为true则被选中。girl_radio.checked true;//赋值/script
/body提交表单
md5加密密码表单优化
!DOCTYPE html
html lang enheadmeta charset UTF-8titleTitle/title!--MD5加密工具类--script src https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js/script/headbody!--表达绑定提交事件οnsubmit 绑定一个提交检测的函数truefalse将这个结果返回给表单使用onsubmit接收--form action https://www.baidu.com method post onsubmit return aaa()pspan用户名/spaninput typetext id username name username//ppspan密码/spaninput typepassword id password //pinput type hidden id md5-password name password !--绑定事件 onclick 被点击--button type submit提交/button/formscriptfunction aaa(){alert(1);var username document.getElementById(username);var pwd document.getElementById(password);var md5pwd document.getElementById(md5-password);//pwd.value md5(pwd.value);md5pwd.value md5(pwd.value);//可以校验判断表单内容true就是通过提交false就是阻止提交return true;}/script/body
/htmljQuery
javaScript和jQuery的关系
jQuery库里面存在大量的JavaScript函数 获取jQuery jQuery官网
Ctrl加shift加减号
可以折成一行
公式$(selector).action()
!DOCTYPE html
html lang enheadmeta charset UTF-8titleTitle/titlescript srclib/jquery-3.4.1.js/script/headbodya href id test-jquery点我/ascript//选择器就是css选择器$(#test-jquery).click(function(){alert(hello,jQuery!);});/script/body
/html选择器
//原生js选择器少麻烦不好记
//标签
document.getElementByTagName();
//id
document.getElementById();
//class
document.getElementByClassName();//jQuery css中的选择器它全部都能用
$(p).click();//标签选择器
$(#id1).click();//id选择器
$(.class1).click();//class选择器文档工具站http://jquery.cuishifeng.cn/
事件
鼠标事件、键盘事件其他事件
mousedown()(jQuery)----按下
mouseenter()(jQuery)
mouseleave()(jQuery)
mousemove()(jQuery)----移动
mouseout()(jQuery)
mouseover()(jQuery)
mouseup()(jQuery)
!DOCTYPE html
html lang enheadmeta charset UTF-8titleTitle/titlescript srclib/jquery-3.4.1.js/scriptstyle#divMove{width:500px;height:500px;border:1px solid red;}/style/headbody!--要求获取鼠标当前的一个坐标--mousespan id mouseMove/spandiv id divMove在这里移动鼠标试试/divscript//当网页元素加载完毕之后响应事件//$(document).ready(function(){})$(function(){$(#divMove).mousemove(function(e){$(#mouseMove).text(x:e.pageXy:e.pageY)})});/script/body
/html操作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});元素的显示和隐藏本质display:none
$(#test-ul li[namepython]).show();
$(#test-ul li[namepython]).hide();娱乐测试
$(window).width()
$(window).height()
$(#test-ul li[namepython]).toggle();//进行状态切换未来ajax()
$(#form).ajax()$.ajax({url:test.html,context:document.body,success:function(){$(this).addClass(done);
}})小技巧 1、如何巩固JS看jQuery源码看游戏源码
2、巩固HTML、CSS扒网站全部down下来然后对应修改看效果~
