javaScript(贰)

javaScript学习笔记第二部

javaScript(二)

1. 内置对象

JavaScript中的对象分为4种：内置对象、自定义对象、浏览器对象、DOM对象。

1.1 Math

Math.PI 圆周率

常用方法

Math.random() //生成随机数Math.floor() //向下取整Math.ceil() //向上取整Math.round() //取整，四舍五入Math.abs()  //绝对值Math.max()  //最大值Math.min()  //最小值Math.sin()  //正弦Math.cos()  //余弦Math.pow()  //求指数次幂Math.sqrt() //求平方根

1.2 Date

Date()是构造函数；想要使用Date的方法，必须实例化new一个日期对象

var date = new Date();date.getTime() // 获取1970年1月1日至今的毫秒数 (没什么用)date.getMilliseconds() //返回毫秒date.getSeconds() // 返回0-59date.getMinutes() // 返回0-59date.getHours() // 返回0-23date.getDay()  // 返回星期几 0周日 6周6date.getDate()  // 返回当前月的第几天date.getMonth()+1 // 返回月份，从0-11date.getFullYear() // 返回4位的年份

1.3 Array

var arr = [1, 3, 4, 6, 8];// 基本方法Array.isArray(arr) //判断是否为数组arr.valueOf()  //返回数组对象本身arr.reverse()  //翻转数组// 数组增删方法arr2.push(60, 70, 80); //从最后添加一个或多个值arr2.pop();    //从最后删除一个值arr2.unshift(11, 22, 33); //从开始添加一个或多个值arr2.shift();    //从开头删除一个值// 位置方法arr.indexOf(3);  //返回数组中指定元素的第一个值的索引，不存在返回-1arr.lastIndexOf(7) //从后向前找指定元素的第一个值的索引，不存在返回-1 // 数组转化字符串arr.join("")  //数组转化为字符串，以参数分割；无参数时输出结果为 1,2,3,4,6,8

1.3.1 排序方法

sort()

• 没有指定参数

var arr = [1, 3, 4, 6, 8];arr.sort() // 默认排序顺序是在将元素转换为字符串，然后按照UTF-16代码单元值序列排序

• 指定参数

如果 compareFunction(a, b) 小于 0 ，那么 a 会被排列到 b 之前；

如果 compareFunction(a, b) 等于 0 ， a 和 b 的相对位置不变。!不兼容所有浏览器

如果 compareFunction(a, b) 大于 0 ， b 会被排列到 a 之前。

arr.sort(function compare(a, b) { if (a < b ) {   // 按某种排序标准进行比较, a 小于 b return -1; } if (a > b ) { return 1; } return 0;})

要比较数字而非字符串，比较函数可以简单的以 a 减 b，如下的函数将会将数组升序排列

arr.sort(compareFunction)function compareFunction(a, b) { return a - b;}

1.3.2 拼接与截取

concat()

把参数拼接到当前数组、 或者用于连接两个或多个数组

var arr1 = ["zx", "aq"]arr1.concat("asd")arr1.concat(arr)

slice(start,end)

• 从start开始截取元素，到end结束，包括start,不包括end,返回新数组，start,end是索引;

• 不会改变原数组

var arr2 = [1,2,3,4,5];arr2.slice(0,3) //取[1,2,3]

splice(start,length)

• 从start开始截取元素，截取length个，返回新数组，start是索引,length是个数

• 会改变元素的数组

var arr2 = [1,2,3,4,5];arr2.splice(0,3) //取[1,2,3]

1.3.4 迭代方法

forEach()

用于调用数组的每个元素，并将元素传递给回调函数；传一个参数 value是数组值，两个参数 index是索引号

 var arr3 = [1, 2, 3, 4, 5] arr3.forEach(function (value,index) {  console.log(value);  console.log(index); });

every(): 判断回调函数中的表达式是否全部满足，如果满足，返回值就是true,只要有一个不满足就是false

arr3.every(function (value) { return value<3; //返回false});

some(): 判断回调函数中的表达式是否有一个满足，如果至少一个满足，返回值就是true

arr3.some(function (value) { return value<3; //返回 true});

filter(): 根据指定条件过滤元素,返回新数组

arr3.filter(function (value) { return value>3; //返回新数组[4,5]});

map(): 根据数学运算，返回新数组

arr3.map(function (value) { return Math.pow(value,2); //返回新数组[1,4,9,16.25]});

1.3.5 清空数组

1. 推荐 arr = []
2. arr.length = 0
3. arr.splice(0, arr.length)

1.4 基本包装类型

当基本数据类型String/Number/Boolean直接调用方法的时候，javaScript会把String/Number/Boolean类型的变量

包装成对应的临时对象，再调用内置对象String/Number/Boolean方法，最后销毁临时对象

Number/Boolean的基本包装类型基本不用，容易引起歧义

1.5 String

var str = 'abc';str = 'hello';

当重新给str赋值的时候，常量'abc'不会被修改，依然在内存中

重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变

由于字符串的不可变，在大量拼接字符串的时候会有效率问题

1.5.1 取值方法

charAt(0)  //获取指定位置处字符str[0]   //HTML5，IE8+支持 和charAt()等效

1.5.2 操作方法

// 拼接与截取concat()  //拼接字符串(不常用);一般用+//截取字符串 不会改变原字符串slice(start, end)   //从start位置开始，截取到end位置，end取不到substring(start, end)  //从start位置开始，截取到end位置，end取不到substr(start, length)  // 从start位置开始，截取length个字符// 位置方法indexOf()   //返回指定内容在元字符串中的位置,如果没有，返回-1；(从前往后，检索到第一个就结束)lastIndexOf()  //返回指定内容在元字符串中的位置,如果没有，返回-1；(从后往前，检索到第一个就结束)// 字符串操作trim()   //去除字符串前后的空格toUpperCase()  //转换大写toLowerCase()  //转换小写search()   //方法用于检索字符串中指定的子字符串，返回子字符串的起始位置replace(old, new) //替换字符串 new替换old; 只能替换找到的第一个// 字符串转数组split("")   //数组的元素就是以参数的分割的; 无参时整个字符串变成只有一个元素的数组

2. DOM操作

api 对象暴露给外界的一些操作方法的集合

2.1 获取DOM元素

1. 通过id获取DOM元素;获取的是一个具体的DOM元素

var div1 = document.getElementById("div1")

2. 通过选择器获取单个元素;获取的是同选择器的第一个元素

var div3 = document.querySelector(".div1")

!!以下方法获取的都是由元素构成的伪数组，使用时要加上[索引号]; 例:[0]

伪数组有length属性，可以遍历；伪数组没有普通数组的内置方法

3. 通过类名获取元素

var div2 = document.getElementsByClassName("div2")[0]

4. 通过标签名获取元素

var h1 = document.getElementsByTagName("h1")[0]

5. 通过name名获取元素

var input1 = document.getElementsByName("input1")[0]

6. 通过选择器获取所有元素

var div4 = document.querySelectorAll(".div2")[0]

2.2 事件触发

事件三要素: 事件源、事件类型(触发方式)、事件处理程序

触发方式的写法

1. 内部书写所有

<button onclick="alert(999)">点击弹框</button>

2. 行内触发方法: 写一个js方法，行内调用

<button onclick=fn1()>点击弹框</button><script> function fn1() { alert(888) }</script>

3. html外书写

<button >点击弹框</button><script> var btn1 = document.getElementsByClassName("btn1")[0] btn1.onclick = function () {  alert(666) }</script>

2.3 获取/修改元素的属性

<style> .div1 {  width: 200px;  height: 100px; } .div2 {  width: 350px;  height: 250px; } </style><div >222</div><script> var div1 = document.getElementsByClassName("div1")[0] div1.onclick = function () {  document.getElementsByClassName("div1")[0].style.width = "300px"  this.style.height = "200px"  // 也可以修改类名  this.className = "div2" }</script>

表单默认属性也可以修改

• value 用于大部分表单元素的内容获取(option除外)
• type 可以获取input标签的类型(输入框或复选框等)
• disabled 禁用属性checked 复选框选中属性
• selected 下拉菜单选中属性
• checked

3. DOM属性操作与事件

3.1 阻止a链跳转

三种方法，与事件触发的三种写法相同，不同的是方法最后加上return false

3.2 新事件

1. 鼠标事件

获取/失去焦点 onfocus/onblur

鼠标双击 ondblclick

鼠标移入/移出 onmouseover/onmouseout

鼠标进入/离开 onmouseenter/onmouseleave

区别: onmouseenter/onmouseleave强调进入；不支持冒泡

冒泡:子元素事件执行，会递归执行所有父元素的触发事件

2. 键盘事件

键盘按下/抬起 onkeydown/onkeyup

3. 浏览器事件

页面加载完成后执行 window.onload

滚浏览器滚动条执行 window.onscroll

3.3 文本内容属性

// 只获取文本内容;修改时不会解析标签document.getElementsByTagName("div")[0].innerText// 会获取标签内容;修改时会解析标签document.getElementsByTagName("div")[0].innerHTML

3.4 元素的属性操作

以下方法均可对自定义属性和原始属性操作

1. 获取元素属性

document.getElementById("box1").getAttribute("mytest")

2. 设置属性

document.getElementById("box1").setAttribute("id", "box2")

2. 移除属性

document.getElementsByTagName("div")[1].removeAttribute("id")

3.5 元素的样式设置

• 对象.style
• 对象.className
• 对象.setAttribute("class","class名")

<style> .box2 {  color: violet; }</style><div id="b1">2222</div><script> document.getElementById("b1").setAttribute("class", "box2")</script>

• 对象.setAttribute("style","样式")

document.getElementById("b1").setAttribute("style", "color: red")

• 对象.style.setProperty("CSS属性","CSS属性值")

document.getElementById("box1").style.setProperty("background-color","red")

• 对象.style.cssText

document.getElementById("box1").style.cssText = "background-color:red; width:80px"

下一篇下一篇，js内容真多啊

原文转载：http://www.shaoqun.com/a/756805.html

跨境电商：https://www.ikjzd.com/

二类电商：https://www.ikjzd.com/w/1457

拍怕：https://www.ikjzd.com/w/2205

javaScript学习笔记第二部javaScript(二)1.内置对象JavaScript中的对象分为4种：内置对象、自定义对象、浏览器对象、DOM对象。1.1MathMath.PI圆周率常用方法Math.random()//生成随机数Math.floor()//向下取整Math.ceil()//向上取整Math.round()//取整，四舍五入Math.abs()//绝对值Math.max()
rakuten：https://www.ikjzd.com/w/2718
淘粉吧首页：https://www.ikjzd.com/w/1725.html
mail.ru：https://www.ikjzd.com/w/2232
实操详解：亚马逊FBA自提服务是什么？怎么操作？：https://www.ikjzd.com/articles/59638
前男友在我的婚礼上摸我：http://lady.shaoqun.com/m/a/271475.html
阿姨真的让我感受到了温暖 口述我和阿姨相处的那段日子：http://lady.shaoqun.com/m/a/269683.html