js引入方式
1.内部/内嵌js
定义
2.外部式
3.行内式 js事件
注释方式// 单行
/**/ 多行
3.数据类型number
boolean
string
undefined
null
4.变量定义变量的方式 var 变量名=初始化变量值
5.字符串拼接只要字符串和其他类型相拼接 最终的结果都是字符串类型 使用＋
6.输出方式1.alert() 2.console.log() 3.prompt()
7.typeof运算符获取变量的类型
null得到的类型是object
算数运算符1.算数运算符
+ - / * %
2.赋值运算符
= += -= * = / =
3.自增自减
++ - -
4.比较运算符> < >= <= == != ===(全等于) 比较运算符 结果为true 或 false 比较方式 1.类型相同的话直接比较 字符串:字符串是按照字典顺序比较的 按位逐一比较 直到得出大小位置 2.类型不相同 类型转换在比较 === 全等于 在比较之前 先判断数据类型 如果类型不一致就返回false
5.逻辑预算符
&& 逻辑与 两边都为true 结果才为true
|| 逻辑或 只要有一个为true 结果就为true
! 逻辑非 结果取反
逻辑与的短路运算 如果表达式一结果为真 则返回表达式二 如果1的结果为假 返回表达式一
逻辑或单短路运算 如果表达式一结果为真 则返回表达式一 如果表达式一为假 则返回表达式二
6.三元表达式(三目运算)
? :表达式 表达式?值1:值2 var a=3; var b=4; a>b ? 10 : 20 取值20 判断表达式的值 如果为true 则返回值1 如果为false返回值2条件分支语句
if else 双分支语句
if(条件表达式){
执行语句1;
}else {
执行语句2;
}
执行思路 先判断条件表达式 如果为true 就执行语句1 如果为false 就执行语句2
回顾
1.运算符 + - * / %
2.赋值运算符= += -= *= /=
a=a+1 a+=1
++ -- (自增减运算符)
1.++在前 先自身加一 之后再参与运算
2.++在后 先参与运算 在自身加一
var a=5;
var a1=a++ + ++a
3.比较运算符
> < >= <= == === ==:只关注值是否相等 不看数据类型 === : 数据类型一致 值也要相等
4.逻辑运算符
&& 两边都为true 返回true
|| 只要一边为true 返回true 都为false 返回false
! 结果取反 !true=false
5.三元表达式
表达式 ? 值1 : 值2;
var a=10;
var b=20;
var c=a>b?a : b;
if(a>b){
a
}else {
b
}
6.流程控制语句
多条件控制语句
if(条件控制语句){
执行结果1
}else if(条件控制表达式) {
执行结果2
}else if(表达式){
执行结果3
} else {
}
switchswitch(变量(表达式)){
case 1:
执行语句1;break;
case 2:
执行语句2;break;
case 3:
执行语句3;break;
default:
执行最后的语句;
}
在Java中 变量或者表达式可以接收byte int short char 枚举(1.5) string(1.7)
在js当中可以接收任意原始数据类型
循环
for循环
for循环主要用于把某些代码循环若干次 通常和计数有关系
语法结构
for(初始化变量;条件表达式; *** 作表达式(计数器增加)){
//循环体
}
初始化变量:用var 来声明一个计数器
条件表达式:true 继续执行进行循环 false则退出循环
*** 作表达式:每次循环结束之后 计数器递增 递减
双重循环
1.双重for循环 语法结构
for(初始化变量;条件表达式; *** 作表达式(计数器增加)){
for(初始化变量;条件表达式; *** 作表达式(计数器增加)){
//循环体
}
}
我们可以吧里面的循环看做是外层循环的语句
外层循环一次 里面就要循环所有
while循环
while(条件表达式){
//循环体
}
当...的时候
执行思路
如果条件表达式为true 则执行循环体 否则退出循环体
do{}while();
1.do{} while;
语法结构
do{
循环体
}while(条件表达式);
2.执行的思路 do while 循环先执行一次循环体 之后再判断条件 如果结果为真 表达式继续执行 否则退出
do while 至少会执行一次
1.打印一个n行 n列的星星 n的意思是可以自己输入 输入行数 输入列数 双重for
2.九九乘法表 双重for
3.d出一个提示框 显示你爱我么? 如果输入我爱你 就提示结束 我也爱你啊 否则一直循环问 while循环
数组1.创建数组的方式 1.var arr=new Array(元素列表); 2.var arr=new Array(默认长度); 3.var arr=[元素列表];
访问数组元素 遍历的方式 通过下标索引来实现
结合for循环
//遍历数组 把数组从头到尾访问一边
var arr=['red','green','pink','black'];
console.log(arr);
//循环遍历
for(var i=0;i
函数(方法)对象
1.function (函数,方法)
1.创建方式
var fun=new Function(参数,方法体);
2.function 方法名(参数列表){
方法体;
}
3.var fun= function (参数列表){
方法体
}
1.声明函数 (1)function函数的关键字全部小写 (2)函数是做某一件事 ,函数名一般的动词 (3)函数不调用 不会执行 2.调用函数 格式 函数名(); (1)调用函数的时候千万不要忘记写小括号
1.我们可以利用函数的参数 来实现函数重复不同的代码 语法 function 方法名(形参1,形参2){}声明在函数的小括号里面
function cook(menu) {//menu 就是一个形参 是接收实际参数的
console.log(menu);
}
cook('鱼香肉丝');//鱼香肉丝 就是 实参
cook('大肘子');
//函数的参数 可以有 也可以没有
continue 关键字 退出本次循环 继续执行剩余的循环次数 for(var i=1;i<=5;i++){ if(i==3){ continue; } console.log(i); } //break 退出整个循环 for(var i=1;i<=5;i++){ if(i==3){ break; } console.log(i); }
confirm 确定 取消
基本对象
1.function:函数(方法)
1.var fun=new Function(参数)
2.function 方法名称(参数){方法体}
3.var 方法名=function(参数)
2.Array数组对象
1.var arr=new Array(数组元素)
2.var arr=[数组元素]
3.var arr=new Array(数组长度)
3.Date:日期对象
1.创建日期对象
var date = new Date();
toLocaleString() 返回当前date对象对应的时间本地字符串格式
getTime() 获取毫秒值 返回当前的日期对象从1970年1月1日零点的毫秒值
document.write()输出到页面
4.Math:数学对象
1.创建
特点:不需要创建直接使用 Math.方法名();
2.random():在0-1之间产生随机数 [0,1) 包含0不包含1
3.ceil():对数字进行上舍入
4.floor():对数字进行下舍入
5.round():对数字四舍五入
6.Math.PI 圆周率
5.RegExp:正则表达式
1.正则表达式定义的规则
1.单个字符
例如[a] [abc] [a-zA-Z0-9_]
\d:单个数字字符[0-9]
\w:单个单词字符 [a-zA-Z0-9]
2.量词符号
?:表示出现0次或者1次;
*:表示出现0次或者多次;
+:表示出现1次或者多次;
{m,n} m<=数量<=n
{,n} 最多n次
{m,} 最少m次
3.^开始
$结束
正则对象
1.创建对象
var reg=new RegExp("正则表达式")
var reg=/^正则表达式$/
var reg=/^[a]{1,2}$/
2.test(参数) 验证字符串是否符合正则表达式
DOM入门
1.功能:控制HTML里面的内容
2.获取页面标签(元素对象):Element
document.write()
document.getElementById("id值"):通过id值获取元素对象
3.innerHTML修改标签的内容
1.修改属性值
明确获取的对象是哪一个
查看API 看看都能修改哪些属性
2.修改标签体的内容
属性:innerHTML
使用innerHTML来修改标签体的内容
事件的简单学习
1.功能:某些组件被执行了某些 *** 作之后,触发某些代码的执行
造句:XXX被XXX,我就XXX
我方水晶被摧毁之后,我就骂队友
敌方水晶被摧毁之后,我就发gg
如何绑定事件
1.直接在HTML标签上 指定事件的属性 属性值就是js代码
1.事件 onclick---单击事件
2.通过js代码获取元素对象 指定事件的属性 设置一个函数
BOM
1.概念;Browser Object Model 浏览器对象模型
将浏览器各个部分封装成了对象
2.组成:
window:窗口对象
navigator:浏览器对象
screen:屏幕
history:历史记录
location:地址栏对象
3.windows:窗口对象
1.与d出框 有关的方法
alert()
prompt()
confirm() 带有确认按钮和取消按钮 如果用户点击确定 true 反之 false
2.与打开关闭有关的方法
close() 关闭浏览器窗口
open() 打开一个新的浏览器窗口
3.与定时器有关的方法
setTimeout() 在指定的毫秒后调用函数表达式
参数
1.js代码或者方法对象
2.毫秒值
返回值 唯一标识 , 用于取消定时器
clearTimeout取消有setTimeout设置的定时器
setInterval() 按照指定的周期 来调用函数表达式
clearInterval 取消由setInterval设置的 timeout
回顾
DOM
1.事件----单击事件
οnclick="函数名";
获取页面元素var ele=document.getElementById("id名");
ele.οnclick=fun...
BOM
close() open()
定时器
一次性定时器
setTimeout
参数:要执行的函数 毫秒
clearTimeout(); 取消定时器
周期性
setInterval()
参数: 要执行的函数 毫秒
clearInterval() 清楚定时器
1.location:地址栏对象
1.创建地址栏对象
1.window.location
2.location
2.reload() 重新加载当前的文档
3.属性
href 设置返回的URL
2.History 历史记录对象
1.创建
1.window.history
2.history
2.back() 返回 加载前一个history中的URL
forward() 前进 加载后一个history中的URL
go(参数为数字) 数字如果为正数:前进几个历史记录
数字为负数:后退几个历史记录
属性: length 返回当前窗口历史列表当中URL的数量
DOM
概念:Document Object Model 文档对象模型
将标记语言文档的各个部分 封装为对象 可以使用这些对象进行crud的动态 *** 作
create创建 read读取 update更新 delete删除
Document:文档对象
Element:元素对象
Attribute:属性对象
Text:文本对象
Comment:注释对象
Node:节点对象
1.Document:文档对象
1.创建
window.document
document
2.方法
1.获取Element对象
1.getElementById() 根据id值获取元素对象 id值唯一
2.getElementsByClassName() 根据class属性值获取元素的对象 返回的是一个数组
3.getElementsByTagName() 根据元素名称获取元素对象 返回值也是一个数组
4.getElementsByName() 根据name的属性值获取元素 返回是一个数组
2.Element:元素对象
1.创建/获取:通过document 来获取或者创建
1.removeAttribute():删除属性
2.setAttribute():设置属性
3.node:节点对象
每一个DOM对象都可以被认为是一个节点
方法
dom 数 crud
appendChild():向节点的子节点列表的结尾 添加新的子节点
removeChild():删除并返回当前节点的指定子节点
replace(): 用新节点替换一个子节点
属性 parentNode 返回节点的父节点
document.createElement
1.标签体的设置和获取:innerHTML
2.使用HTML元素对象的属性
3.可以控制元素样式
使用元素style 属性来进行设置
div1.style.border="1px solid black";
1.点击事件 onclick:点击事件 ondblclick:双击事件 2.焦点事件
onblur: 失去焦点,
onfocus: 元素获得焦点 3.鼠标事件 onmousedown 鼠标按钮被按下 onmouseover 鼠标移动到元素上 event 参数 4.键盘事件 onkeydown 某个键盘按键被按下 onkeyup 某个键盘按键被松开 onkeypress 某个按键被按下并松开
5.加载事件 onload
vertical-align:middle;
上下垂直居中
/* Global 1.特点:全局对象 Golbal里面封装的方法不需要调用 直接使用 方法名() 2.方法 url编码:encodeURI(); url解码:decodeURI();
encodeURIComponent();url编码 能编码的字符更多
decodeURIComponent();url解码
*/
var str = "https://www.baidu.com?text=是否放假?";
var encode=encodeURI(str);
document.write(encode+"
");
var s = decodeURI(encode);
document.write(s);欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）