前端基本功--js实战4 10.31

一、三种循环

  1. for(初始化; 条件; 增量){}
  2. while(条件) { 语句 } 可能会不执行
  3. do {} while() 至少执行一次
    二、多分支语句
    switch(参数)
    {
    case 参数1:
    语句;
    break; 退出的意思
    case 参数2:
    语句;
    break; 退出的意思
    ........
    default: 默认的
    语句;
    }
    效率比if else 更高
    三、onchange事件
    拉菜单的事件 onchange
    sele.onchange = function(){}
    当下拉内容改变的时候 事件发生
    四、数组

1.添加数组
用法例如 arr.push(1)
(1) push()
push() 方法可向数组的末尾添加一个或多个元素,返回新的长度。 push 推进去

var dom = [1,3,5];
console.log(dom.push(7));  // 返回的是 数组的长度  4

(2) unshift() 可向数组的开头添加一个或更多元素,并返回新的长度。

2.删除数组
(1) pop() 删除最后一个元素 返回值 是 返回最后一个值
(2) shift() 用于把数组的第一个元素从其中删除,并返回第一个元素的值

3.连接两个数组
contact () arr1.contact(arr2)

4.join() 把数组转换为字符串
作用是将数组各个元素是通过指定的分隔符进行连接成为一个字符串。
数组本身是不会改变的。
arr.join(符号);

var arr = [1,2,3];
console.log(arr.join(“-”))    结果就是:  1-2-3    //字符串

5.把字符串转换为数组 split()

stringObject.split(separator,howmany)
参数 separator 可选。指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符。
howmany 可选。该参数可指定返回的数组的最大长度

例:

var txt ="aa-bb-cc";
console.log(txt.split("-")) ;  
// 结果是  ["aa","bb","cc"]
// 两处的符号要保持一致 

五、DOM
1.我们js 有三部分组成的?

核心(ECMAScript)欧洲计算机制造商协会
描述了JS的语法和基本对象。 var aa var AA 不一样

文档对象模型(DOM) 学习的重点
处理网页内容的方法和接口

浏览器对象模型(BOM) 了解一下
与浏览器交互的方法和接口
window.alert() 有很大的的兼容问题

  1. DOM
    (1)定义:为文档提供结构化显示,定义了如何通过脚本访问文档结构,为了让js操作html而定义的规范。
    通过dom来访问的页面中的每一个标签,每个标签都是一个dom对象。
    (2)节点
    标签标记元素 都是节点
    由结构图中我们可以看到,整个文档就是一个文档节点。
    每一个HMTL标签都是一个元素节点。
    标签中的文字则是文字节点。
    标签的属性是属性节点。
    一切都是节点……
    (3)访问节点
    getElementById() id 访问节点
    getElementsByTagName() 标签访问节点
    getElementsByClassName() 类名 (有兼容性问题,主流浏览器支持 ie 67 8 不认识 解决:自己封装自己的类 。)
    3.封装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>

分割:

4.判断真假
数字类型 所有数字都是真,0是假
字符串 所有字符串都是真,’ ’串是假
对象 所有对象都是真,null是假
未定义 undefined是假,没有真

六、访问关系
1.

图片1.png

父节点:parentNode 亲的 一层

<script>
    window.onload = function(){
        var x = document.getElementById("x");
        x.onclick = function(){
            this.parentNode.style.display = "none";
            // 关掉的是他的 父亲
        }
    }
</script>

2.兄弟节点
nextSibiling 亲的 下一个兄弟 ie678认识。
nextElementSibling 其他浏览器认识。
previousSibling 亲的 上一个兄弟
previousElementSibling
可以合着写 用 || 必须先写正常浏览器 后写 ie678 。
3.子节点
基本上不用,容易出问题,因为空格也会被当作孩子。
firstChild 第一个孩子 ie678。
firstElementChild 第一个孩子 正常浏览器 。
lastChild
lastElementChild
4.孩子节点
childNodes:选出全部孩子
它是标准属性,它返回指定元素的子元素集合,包括HTML节点,所有属性,文本节点 (嫡出)火狐 谷歌等高本版会把换行也看做是子节点。
利用 nodeType == 1 来获取元素节点!!

   nodeType == 1    元素节点     
   nodeType == 2    属性节点
   nodeType == 3    文本节点 

children :(庶出)常用, 选取所有孩子,只包含元素节点!
在ie678里注释也是节点。
七、dom里的节点操作
1.新建节点

var demo = document.getElementById("demo");
var a = document.createElement("li"); //生成一个新的li标签

2.插入节点
(1) appendChild(); 意思: 添加孩子 放到盒子的最后面。

demo.appendChild("a"); //在demo后添加了一个li标签  

(2) insertBefore (插入的节点,参照节点)

demo.insertBefore(test,childrens[0]);
//放到第一个孩子的前面,在第一个孩子前面插入一个节点test
demo.insertBefore(test,null);//如果第二个参数为null  则默认这新生成的盒子放到最后面。

3.删除节点
removeChild() 孩子节点

var da = document.getElementById("xiongda");
demo.removeChild(da);

4.克隆节点
cloneNode();括号里放参数。
如果是true,深层复制:复制盒子和子节点。
如果是false只复制本节点。

var last = chidrens[0].cloneChild(true);
demo.appendChild(last);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,830评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,992评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,875评论 0 331
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,837评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,734评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,091评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,550评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,217评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,368评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,298评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,350评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,027评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,623评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,706评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,940评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,349评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,936评论 2 341

推荐阅读更多精彩内容

  • 变量命名、声明、赋值 1.必须以字母、下划线或美元符号开头,后面可以跟字母、下划线、美元符号和数字。2.变量名区分...
    wq04200阅读 615评论 0 1
  • 第1章 系好安全带,准备启航 1.1让你认识JS 1.1.1 JavaScript能做什么?增强页面动态效果(...
    张中华阅读 1,342评论 4 10
  • 昨天一天宝宝的体温都有点高,折腾了一夜早上起来才降了不少下来,苦苦闹闹的小然然终于又露出笑脸来了。下午在单位没有上...
    我叫小然然阅读 203评论 0 1
  • 周末还是以“推荐阅读”为主。今天要推荐的内容是从最近上映的一个大片引出的。那就是黑寡妇斯嘉丽·约翰逊主演的《攻壳机...
    北邮老土阅读 1,198评论 0 1
  • 内容来自:跟着永澄老师重建文件管理系统1——整理无能症也能治 Up_风雨阳光 作者 我按照步骤实践。 能不能我一次...
    晴空00阅读 1,559评论 0 2