js 整理笔记 -1

取消链接的默认行为:
得到从一个html页面到另外一个html界面传递过来的参数
方式一:var Ohref=window.location.href;
alert(Ohref) //http://localhost:8080/route_list.html?cid=1
var arrhref=Ohref.split("?cid=");
var cid= arrhref [1];
alert(cid); // cid=1
方式二:var cid = getParameter(“cid”);

html里面的标签的属性值,可以用单引号,也可以用双引号,如果在js里面用来向界面输出HTML语句的时候
用单引号,里面拼接字符串。

JS中基本数据类型:undefined,null,boolean,string,number
定义一个变量用var i= 1; var j="开开心的"不用指明是什么数据类型的,
js中typeof是看数据是什么类型的
js 中的“=”全等号,表示的时值和类型都必须相等
“”只要值相等就可以的
js的输出:
alert()直接弹框输出
documen.write()是向页面输出,里面是一个字符串类型的数据,是进行拼接的。标签属性的值用单引号去写
consol.log()是向浏览器的控制台输出
获取页面上的元素:
documen.getElementById(id的名称)

JS声明函数:
var 函数的名称=function(){

}
或者:function 函数的名称(){

}
JS的开发步骤:
1.确定事件,比如:单击,双击事件。
2.通常事件后面会有一个函数,用来对事件进行处理。
3.函数体里面通常都会操作页面上的元素,进行相应的操作。

计时器:window.setInterval(要执行的代码块,时间间隔) 返回值为计时器的id 每间隔一定的时间就去执行一次代码块
window.setTimeout(要执行的代码块,时间间隔) 在时间间隔后执行一次代码块
清除定时器:clearInterval(计时器的id)

改变标签里面的内容:

//这个是根据Id得到div对象
var i=document.getElementById(“name”);
//这个是可以设置字体等属性的样式的
i.innerHTML=“已经改变了”
//这个只能改变文本的内容,其他的属性不能动。
i.innerText=“我第二次改变了”;

改变img标签里面的图片就是改变属性src的值

var a=document.getElementById(“image1”);
//根据标签的属性src重新指向另外一张图片
a.src=“img/4.jpg”;

其他的绑定事件:
onfocus事件:获得焦点事件
onblur事件:失去焦点事件
onkeyup事件:按键抬起事件

如果标签里面属性的时候用双引号括起来,
如果是函数里面的参数进行传递的时候,用的是单引号
对于方法的定义:
参数列表里面只有变量名,没有其类型
function showTips(spanId,spanContent){
var span=document.getElementById(spanId);
span.innerHTML= spanContent;
}

form 表单进行提交时,必须有个onsubmit事件,里面有个校验函数,并且这个函数必须由返回值
返回为true时,才能提交上去。返回为false,提交失败
例如

JavaScript是用来前端验证发往服务器的数据,基于对象和事件驱动的客户端脚本语言。只需要浏览器就可以进行。
面向对象继承机制是基于原型的。
一个完整的 JavaScript 应该由下列三个不同的部分组成。
1.核心(ECMAScript) 其实相当于javase部分的内容
2.文档对象模型(DOM) 是针对 XML 但经过扩展用于 HTML的应用程序编程接口(API,Application Programming Interface),就是我们所写的body里面的标签对象。
3.浏览器对象模型(BOM) 就是访问和操作浏览器窗口为我们提供的对象。

一般来说,JS 代码越来越庞大的时候,我们最好把他另存为一个.js 文件,通过 src引
入即可。它还具有维护性高、可缓存(加载一次,无需加载)、方便未来扩展的特点。
字面量: 就是程序中直接显示出来的数据值

数据类型:
ECMAScript 中有 5 种简单数据类型:Undefined、Null、Boolean、Number和String
一种复杂的数据类型:—Object
typeof 操作符是用来检测变量的数据类型。
Undefined:表示只定义了一个变量,而没有对其初始化赋值,例如:var a;这个变量的值就是undefined。
Null类型:Null 类型是一个只有一个值的数据类型,即特殊的值 null,它表示一个空对象引用(typeof 操作符检测 null 会返回 object)。
Boolean 类型:Boolean 类型有两个值(字面量):true 和 false
虽然Boolean 类型的字面量只有 true 和 false 两种,但ECMAScript 中所有类型的值
都有与这两个Boolean 值等价的值。
以下是其他类型转换成 Boolean 类型规则

Number类型:Number 类型包含两种数值:整型和浮点型。
Number类型数值的范围在:Number.MIN_VALUE - Number.MAX_VALUE 之间

NaN,即非数值(Not a Number)是一个特殊的值,这个数值用于表示一个本来要返回
数值的操作数未返回数值的情况。(这样就不会抛出错误了)。
var num = 0 / 0; //NaN
var num = 12 / 0; //Infinity
var num = 12 / 0 * 0; //NaN
任何与 NaN 进行运算的结果均为NaN,NaN 与自身不相等(NaN 不与任何值相等)。
isNaN()判断一个变量是不是一个数值,如果不是一个数,则返回true,是一个数值,则返回false.
其它类型的数据转换为number类型的数据
(重点掌握)有 3 个函数可以把非数值转换为数值:Number()、parseInt()和
parseFloat()。
Number()函数是转型函数,可以用于任何数据类型,而另外两个则专门用于把字符串
转成数值。

String 类型:String 类型用于表示由于零或多个字符组成的字符序列,即字符串。字符串可以由双引号(")或单引号(’)表示。在java中只能用双引号表示。
其它类型的数据转换字符串
toString()方法一般是不需要传参的,但在数值转成字符串的时候,可以传递
进制参数。
如果在转型之前不知道变量是否是 null 或者 undefined 的情况下,我们还可以使用转
型函数 String(),这个函数能够将任何类型的值转换为字符串。

Object类型:对象其实就是一组数据和功能(函数)的集合。对象可以通过执行new 操作符后跟要创建的对象类型的名称来创建。

var obj = new Object(); Object()是对象构造,里可以任意传参,可以传数值、字符串、布尔值等。

运算符:
如果在算术运算的值不是数值,那么后台会先使用Number()转型函数将其转换为数值(隐式转换)。
逻辑运算符
在这里插入图片描述
字符串运算符:
字符串运算符只有一个,即:"+"。它的作用是将两个字符串相加。
规则:至少一个操作数是字符串即可。
var box = ‘100’ + ‘100’; //100100
var box = ‘100’ + 100; //100100
var box = 100 + 100; //200

数组:
1.使用字面量方式创建数组
var arr = []; //创建一个空的数组
var arr = [‘韩腾飞’,21,‘洛阳’,‘体育’]; //创建包含元素的数组
2.使用 new 关键字创建数组
var arr = new Array(); //创建了一个数组
var arr = new Array(10); //创建一个包含10个元素的数组
var arr = new Array(‘韩腾飞’,21,‘洛阳’,‘体育’); //创建一个数组并分配好了元素
3.使用索引下标来读取数组的值
alert(arr[2]); //获取第三个元素
arr[2] = ‘学生’; //修改第三个元素
arr[4] = ‘计算机编程’; //增加第五个元素
4.使用length 属性获取数组元素量
alert(arr.length) //获取元素个数
arr.length = 10; //强制元素个数
arr[arr.length] = ‘JS 技术’; //通过 length 给数组增加一个元素

数组中的方法
join()方法:
如果使用 join()方法,则可以使用不同的分隔符来构建这个字符串。

字符串常用的方法和java中大部分相同
Math 对象
3.舍入方法
Math.ceil()执行向上舍入,即它总是将数值向上舍入为最接近的整数;
Math.floor()执行向下舍入,即它总是将数值向下舍入为最接近的整数;
Math.round()执行标准舍入,即它总是将数值四舍五入为最接近的整数;
4.random()方法
Math.random()方法返回介于 0 到 1 之间一个随机数,不包括 0 和 1。如果想大于这个
范围的话,可以套用一下公式:
值 = Math.floor(Math.random() * 总数 + 第一个值),包括下面的数

Date 对象
JavaScript 中的Date 类型是在早期 Java 中 java.util.Date 类基础上构建的。
var date = new Date(); 创建一个日期对象

function produce() {
// Math.floor(Math.random() * 总数 + 第一个值)
var number=Math.floor(Math.random()*900000+100000);
document.getElementById(“span01”).innerText=number;
}
function timer() {
setInterval(produce,1000);
}
必须在这里只传入函数名,不能加(),否则的话,只调用一次这个方法

由于html文档是从上往下进行的,但是没有事件的话,只能把javascript放到文档的下面,否则就没办法放到上面,这时候就需要事件响应,当事件触发,自动就会加载javascript.

这种模型是最传统简单的一种处理事件的方法。在内联模型中,事件处理函数是 HTML
标签的一个属性,用于处理指定事件。虽然内联在早期使用较多,但它是和 HTML 混写的,
并没有与HTML 分离。

事件处理:其实就是可以当做标签元素对象的一个属性,执行对应的事件处理(也就是执行函数)
通过标签对象名.属性=function(){
} 调用执行响应事件。

1.鼠标事件,页面所有元素都可触发
click:当用户单击鼠标按钮或按下回车键时触发。
input.onclick = function () { alert(‘Haha!’); };
dblclick:当用户双击主鼠标按钮时触发。
input.ondblclick = function () { alert(‘Haha!’); };
mouseover:当鼠标移到某个元素上方时触发。
input.onmouseover = function () { alert(‘Haha!’); };
mouseout:当鼠标移出某个元素上方时触发。
input.onmouseout = function () { alert(‘Haha!’); };
mousemove:当鼠标指针在元素上移动时触发。
input.onmousemove = function () { alert(‘Haha!’); };
2.键盘事件
keydown:当用户按下键盘上任意键触发,如果按住不放,会重复触发。
onkeydown = function () { alert(‘Haha!’); };
keypress:当用户按下键盘上的字符键触发,如果按住不放,会重复触发。
onkeypress = function () { alert(‘haha!’); };
keyup:当用户释放键盘上的键触发。
onkeyup = function () { alert(‘haha!’); };
3.HTML 事件
load:当HTML里面的document页面完全加载后在window上面触发,或当框架集加载完毕后在框架集上触发。 可以用于页面发送ajax请求数据的初始化

window.onload = function () { alert(‘Haha!’); };
select:当用户选择文本框(input或 textarea)中的一个或多个字符触发。
input.onselect = function () { alert(‘Haha!’); };
change:当文本框(input或 textarea)内容改变且失去焦点后触发。
input.onchange = function () { alert(‘Haha!’); };
focus:当页面或者元素获得焦点时在 window 及相关元素上面触发。
input.onfocus = function () { alert(‘Haha!’); };
blur:当页面或元素失去焦点时在 window 及相关元素上触发。
input.onblur = function () { alert(‘Haha!’); };
submit:当用户点击提交按钮在元素上触发。
form.onsubmit = function () {
必须要有返回值,返回true或者false

alert(‘Haha!’); };
reset:当用户点击重置按钮在元素上触发。
form.οnreset= function () { alert(‘Haha!’); };

对于输入框里面的checked,disabled,hidden等属性,只要里面有这个属性,就是true,不用管后面的属性值写的是什么,一般都是写成checked=“checked”,disabled=“disabled”在js里面判断的时候用属性值true/false判断。

节点的操作
一个元素节点包括属性节点,文本节点,这两个是元素节点的子节点。
1.1 查找节点的方法
获取元素的方法 作用
document.getElementById(“id”) 通过id得到唯一元素
document.getElementsByName(“name”) 通过name属性得到一组标签
document.getElementsByTagName (“标签名”) 通过标签名得到一组标签
document.getElementsByClassName(“类名”) 通过类名得到一组标签
1.2 DOM创建元素的方法
创建元素的方法 作用
document.createElement(“标签名”) 创建一个元素
元素对象.setAttribute(“属性名”, “属性值”) 设置元素的属性
document.createTextNode(“文本内容”) 创建一个文本节点

1.2.1 修改DOM树的方法
将元素挂到DOM树上的方法 作用
父元素.appendChild(子元素) 将子元素追加成父元素的最后一个元素
父元素.removeChild(子元素) 删除一个子元素
元素.remove() 删除自己

猜你喜欢

转载自blog.csdn.net/qq_45555960/article/details/100571892