js基本知识4
1. 数组 看电影 电影院 座位
大的变量 里面可以放很多的值
var arr = [1,3,57];
var ar = new Array(); new object(); new Date()
var txt = [“宋江”,”张飞”] ;
使用数组: 数组名[索引号] txt[1] == 张飞
txt.length; 属性
遍历数组:
for(var i=0;i<txt.length;i++){ console.log( txt[i] )}
txt[i] txt 数组
1.2 两个小循环
循环 for(初始化; 条件; 增量){}
while() 当 do {} while()
while(条件) { 语句 }
var j = 1;
while(j<=100)
{
sum1+=j;
j++;
}
console.log(sum1);
do while 至少执行一次 while 不一定
1.3 多分支语句 switch
switch 跟 if else if else if else 几乎一样的 但是switch效率更好。
作用其实就是 : 多选1 从多个里面选1个 。
语法格式:
switch(参数)
{
case 参数1:
语句;
break; 退出的意思
case 参数2:
语句;
break; 退出的意思
........
default: 默认的
语句;
}
<script>
window.onload = function(){ //获取元素
var txt = document.getElementById("txt");
var btn = document.getElementById("btn");
btn.onclick = function(){
var val = txt.value;
switch(val)
{
case "苹果":
alert("苹果的价格是: 5元");
break;
case "香蕉":
alert("香蕉的价格是: 2元");
break;
case "梨":
alert("梨的价格是: 1.5元");
break;
case "大白菜":
alert("大白菜的价格是: 9毛");
break;
default:
alert("今天没进货");
}
}
}
</script> 1.4 下拉菜单的事件 onchange
sele.onchange = function(){}
当改变的时候 事件
<script>
window.onload = function(){
var sele = document.getElementById("sele");
sele.onchange = function(){
// alert(this.value);
switch(this.value)
{
case "1":
document.body.style.backgroundImage = "url(images/chun1.jpg)";
break;
case "2":
document.body.style.backgroundImage = "url(images/xia1.jpg)";
break;
case "3":
document.body.style.backgroundImage = "url(images/qiu1.jpg)";
break;
case "4":
document.body.style.backgroundImage = "url(images/dong1.jpg)";
break;
}
} }
</script>
效果 :
1.5 数组常用方法
我们经常要对数组进行操作,可能追加,也可能删除 等等,何如?
1.5.1 添加 数组
var arr = [1,3,5];
我们想要 吧 7 这个数字 放到 这个数组的后面
我想要 [1,3,5,7];
1. push() ★★★★★ 后面推进去
push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。
push 推进去 放
var arr =[1,3,5] → arr.push(7) → 结果变成 : [1,3,5,7];
2. unshift() 从数组的前面放入
unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度
var arr = [1,3,5] → arr.unshift(0) → 结果变成 [0,1,3,5]
注意:
var dom = [1,3,5];
console.log(dom.push(7)); // 返回的是 数组的长度 4
1.5.2 删除数组内容
1. pop() 删除最后一个元素
pop() 移除最后一个元素
返回值 是 返回最后一个值
var arr = [1,3,5] → arr.pop() → 结果 [1,3]
2. shift() 删除第一个元素
shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值
var arr = [1,3,5] → arr.shift() → 结果 [3,5]
1.5.3 连接两个数组
concat()
该方法用于连接两个或多个数组。它不会改变现有的数组,而仅仅会返回被连接数组的一个副本
var aa = [1,3,5]; var bb = [“a”,”b”,”c”];
aa.concat(bb); 结果: [1,3,5,“a”,”b”,”c”];
1.5.4 join() 把数组转换为字符串
join()
作用是将数组各个元素是通过指定的分隔符进行连接成为一个字符串。
语法
arrayObject.join(separator)
数组名.join(符号)
数组转换为字符串
参数 separator 可选。指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符。
var arr = [1,2,3];
console.log(arr.join(“-”)) 结果就是: 1-2-3 字符串
1.5.5 把字符串转换为数组 split()
join <=> split
split() 方法用于把一个字符串分割成字符串数组
语法
stringObject.split(separator,howmany)
参数 separator 可选。指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符。
howmany 可选。该参数可指定返回的数组的最大长度
1.6 DOM (重点)
我们js 有三部分组成的?
ECMAscript DOM BOM
核心(ECMAScript)欧洲计算机制造商协会
描述了JS的语法和基本对象。 var aa var AA 不一样
文档对象模型(DOM) 学习的重点
处理网页内容的方法和接口
浏览器对象模型(BOM) 了解一下
与浏览器交互的方法和接口
window.alert() 很大的兼容问题
1.6.1 DOM 定义
DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构。
目的其实就是为了能让js操作html元素而制定的一个规范。
DOM 树 1.6.2 节点
标签 标记 元素 节点
由结构图中我们可以看到,整个文档就是一个文档节点。
而每一个HMTL标签都是一个元素节点。
标签中的文字则是文字节点。
标签的属性是属性节点。
一切都是节点……
1.6.3 访问节点
我们学过几个访问节点 :
getElementById() id 访问节点
getElementsByTagName() 标签访问节点
getElementsByClassName() 类名 有兼容性问题
主流浏览器支持 ie 67 8 不认识
怎么办? 我们自己封装自己的 类 。
1.6.4 封装自己class类
原理: (核心)
我们要取出所有的盒子, 利用遍历的方法 , 通过每一个盒子的className 来判断。 如果相等就留下。
<script>
window.onload = function(){
//封装自己class类名
function getClass(classname){
//如果浏览器支持,则直接返回
if(document.getElementsByClassName)
{
return document.getElementsByClassName(classname);
}
// 不支持的 浏览器
var arr = []; // 用于存放满足的数组
var dom = document.getElementsByTagName("*");
//alert(dom.length);
for(var i=0;i<dom.length;i++)
{
if(dom[i].className == classname)
{
arr.push(dom[i]);
}
}
return arr;
}
console.log(getClass("demo").length);
}
</script>
结束,分割版本
1.7 判断真假
我们用条件语句来判断5大数据类型中的真假;
数据 结论
数字类型 所有数字都是真,0是假
字符串 所有字符串都是真,’ ’串是假
对象 所有对象都是真,null是假
未定义 undefined是假,没有真
1.8 访问关系
各个节点的相互关系
1.8.1 父节点
父 : parentNode 亲的 一层 <script>
window.onload = function(){
var x = document.getElementById("x");
x.onclick = function(){
this.parentNode.style.display = "none";
// 关掉的是他的 父亲
}
}
</script>
1.8.2 兄弟节点
nextSibling 下一个兄弟 亲的 ie 678 认识
nextElementSibling 其他浏览器认识的
previousSibling 同理 上一个兄弟
previousElementSibling
我们想要兼容 我们可以合写 || 或者
var div = one.nextElementSibling || one.nextSibling;
div.style.backgroundColor = "red";
必须先写 正常浏览器 后写 ie678
1.8.3 子节点
firstChild 第一个孩子 ie678
firstElementChild 第一个孩子 正常浏览器
var one.firstElementChild || one.firstChild;
lastChild
lastElementChild
1.8.4 孩子节点
childNodes 选出全部的孩子
childNodes:它是标准属性,它返回指定元素的子元素集合,包括HTML节点,所有属性,文本节点 (嫡出)
火狐 谷歌等高本版会把换行也看做是子节点
利用 nodeType == 1 时才是元素节点 来获取元素节点
标签 元素
children 重要 选取所有的孩子 (只有元素节点)
这个更好 跟喜欢它 。 (庶出)
ie 678 包含 注释节点 这个要避免开。
1.9 dom 的节点操作
新建节点 插入节点 删除节点 克隆节点 等等
1.9.1 创建节点
var div = document.creatElement(“li”);
上面的意思就是 生成一个新的 li 标签
1.9.2 插入节点
1. appendChild(); 添加孩子 append 添加的意思
意思: 添加孩子 放到盒子的 最后面。
2. insertBefore(插入的节点,参照节点) 子节点 添加孩子
写满两个参数
demo.insertBefore(test,childrens[0]);
放到了第一个孩子的前面
如果第二个参数 为 null 则 默认这新生成的盒子放到最后面。
demo.insertBefore(test,null);
1.9.3 移除节点
removeChild() 孩子节点
var da = document.getElementById("xiongda");
demo.removeChild(da);
1.9.4 克隆节点
cloneNode();
复制节点
括号里面可以跟参数 , 如果 里面是 true 深层复制, 除了复制本盒子,还复制子节点
如果为 false 浅层复制 只复制 本节点 不复制 子节点。
js基本知识4的更多相关文章
- [JS复习] JS 基础知识
项目结尾,空闲时间,又把<JS 基础知识> 这本书过了一遍,温故知新后,很多知其然不知其所以然的内容 豁然开朗. [1. 用于范围的标签] display :inline or bloc ...
- HTML+CSS+JS基础知识
HTML+CSS+JS基础知识 目录 对HTML+CSS+JS的理解 基础知识 对HTML+CSS+JS的理解 基础知识 插入样式表的三种方式 外部样式表:<link rel="sty ...
- Node.js基础知识
Node.js入门 Node.js Node.js是一套用来编写高性能网络服务器的JavaScript工具包,一系列的变化由此开始.比较独特的是,Node.js会假设在POSIX环境下运行 ...
- 网站开发进阶(十五)JS基础知识充电站
JS基础知识充电站 1.javascript alert弹出对话框时确定和取消两个按钮返回值? 用的不是alert对话框,是confirm confirm(str); 参数str:你要说的话或问题: ...
- NodeJs>------->>第三章:Node.js基础知识
第三章:Node.js基础知识 一:Node.js中的控制台 1:console.log.console.info 方法 console.log(" node app1.js 1> ...
- JS底层知识理解之执行上下文篇
JS底层知识理解之执行上下文篇 一.什么是执行上下文(Execution Context) 执行上下文可以理解为当前代码的执行环境,它会形成一个作用域. 二.JavaScript引擎会以什么方式去处理 ...
- 零散的JS和node.js小知识
JS的连续赋值和曾经出现的怪异情况 let a=1; let b=a=3; 如上的真实赋值过程 => a=1 => a=3 => b=3 => 一般来说,等号是从右向左赋值的 ...
- 前端学习:JS面向对象知识学习(图解)
前端学习:JS面向对象知识学习(图解) 前端学习:JS(面向对象)代码笔记 JS面向对象图解知识全览 创建类和对象 方式1:使用Object()函数 方式2:使用自变量 方式3:使用工厂函数 创建多个 ...
- JS基础知识二
JS控制语句 switch 语句用于基于不同的条件来执行不同的动作 <script> function myFunction(){ var x; var d=new Date().getD ...
- JS基础知识笔记
2020-04-15 JS基础知识笔记 // new Boolean()传入的值与if判断一样 var test=new Boolean(); console.log(test); // false ...
随机推荐
- react组件引用时的default常见错误
1.下面使用方法是正确的: export class StepLoad extends React.Component {} 引用上面插件的方法,重命名 import {StepLoad as Ste ...
- 织梦(Dedecms) 5.1 feedback_js.php 注入漏洞
漏洞版本: DEDECMS 5.1 漏洞描述: 同样是在magic_quotes_gpc=off的情况下可用 此漏洞可拿到后台管理员的帐号和加密HASH,漏洞存在文件plus/feedback_js. ...
- 10723 Cyborg Genes (LCS + 记忆化搜索)
Problem F Cyborg Genes Time Limit 1 Second September 11, 2132. This is the day that marks the beginn ...
- Easyui 判断某个Div 里的表单项是否验证通过.
var isValid = $("#divId").Form("validate"); if( isValid ){ alert("验证通过" ...
- C# 解决无法识别的属性 configProtectionProvider
在使用.Net自身提供的加密本配置文件后再用System.Configuration.ConfigurationManager.AppSettings["key"]获取值时会出现“ ...
- NET Framework安装失败的麻烦
本人机子环境是安装了VS2012,即安装了 .NET Framework4.5,现在要安装AutoCAD2013,而安装CAD2013需要安装4.0的Framework,由于本机已有高版本的Frame ...
- Unity Game Starter Kit for Windows Store and Windows Phone Store games
原地址:http://digitalerr0r.wordpress.com/2013/09/30/unity-game-starter-kit-for-windows-store-and-window ...
- Jquery重新学习之七[Ajax运用总结A]
Jquery中Ajax的运用是另外一个重点,平时项目经常会用它进行一些异步操作:其核心是通过XMLHttpRequest对象以一种异步的方式,向服务器发送数据请求,并通过该对象接收请求返回的数据,从而 ...
- Autodesk FBX SDK Program 中文 (一)
这是我的FBX SDK学习笔记.如文有错误.麻烦各位大大指出 为什么要使用FBX SDK? 由于3D建模软件都被AutoDesk收购了.FBX能够在各个建模软件之间互相导入导出,在非常多游戏引擎中也用 ...
- java线程同步: synchronized详解(转)
Java语言的关键字,当它用来修饰一个方法或者一个代码块的时候,能够保证在同一时刻最多只有一个线程执行该段代码. 一.当两个并发线程访问同一个对象object中的这个synchronized(this ...