day03

A我今天学了什么

1.拓展DOM

1.1父节点parentNode(亲爹)
<ul>
    <li>苹果<a href="#">隐藏</a></li>
    <li>梨子<a href="#">隐藏</a></li>
    <li>香蕉<a href="#">隐藏</a></li>
    <li>菠萝<a href="#">隐藏</a></li>
</ul>
//JS
var aTags = document.getElementsByTagName("a");
for(var i =0;i<aTags.length;i++){
      aTags[i].onclick=function () {
          this.parentNode.style.display="none";
          return false;
      }
}

1.2子节点childNodes和children的区别


//HTML
<ul id="test">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
//JS
var test = document.getElementById("test");
alert(test.childNodes.length);  //chrome下结果为7,IE9以下结果为3
//在chrome下将空的文本节点,也算在内容


var test = document.getElementById("test");
var childs =test.childNodes;
for(key in childs){
   if(childs[key].nodeType==1){
        childs[key].style.background="red";
    }
}


firstChild  //包含所有类型的节点
firstElementChild  //IE9以下不兼容
lastChild  //所有类型的节点
lastElementChild  //IE9以下不支持

//可用document.all解决浏览器兼容性问题
if(document.all){
    //IE下
}else{
    //其他浏览器下

1.3兄弟节点

nextSibling
nextElementSibling  //IE9以下不支持
previousSibling
previousElementSibling  //IE9以下不支持

1.4

offsetParent  //获取给了定位元素的父级
offsetLeft      //返回元素的水平偏移位置。
offsetTop      //返回元素的垂直偏移位置。
offsetWidth  //返回元素的宽度
offsetHeight //返回元素的高度

1.5操作元素的属性

oDiv.style.display = "none";
oDiv.style["display"]="none";
oDiv.setAttribute("style","display:none");


<input type="text" id="input"/>
<button id="btn">改变</button>
<script>
    var input = document.getElementById("input");
    var btn = document.getElementById("btn");
    btn.onclick=function () {
        //input.value="hello world"
        input.setAttribute("value","hello world")
    }
</script>

1.5.1获取,设置,删除

getAttribute();
setAttribute();
removeAttribute();

<div id="test">
good
</div>
<script>
    var test = document.getElementById("test");
    test.setAttribute("title","good")
</script>


例子:tab页切换
http://www.jianshu.com/p/4a392f45d594

2.控制语句

2.1break  //中断循环
for(var i=0;i<6;i++){
        console.log(i);
        if(i==5){
            break;
        }
    }

2.2 continue  //跳过继续循环
for(var i=0;i<6;i++){
        if(i==2){
            continue
        }
        console.log(i);
    }

3.function

函数的返回值
a.什么是函数的返回值
定义:函数的执行结果
函数可以没有return

function show(){
  return "hello world" //return的作用:把结果返回到函数外部
}
var b = show(); // 在哪调用返回到哪里；


函数的传参
可变参(不定参)arguments
参数的个数可变,参数数组
//对传入的参数求和
function sum(){
        var result=0;
        for(var i = 0;i<arguments.length;i++){
            result+=arguments[i];
        }
        return result;
}
alert(sum(2,3))

4.基本类型和引用类型的区别

var a = 10;
var b = a;
b = 20;
console.log(a); // 10值
image.png
var obj1 = {age:19}
var obj2 = obj1;
obj2.name = "我有名字了";
console.log(obj1.name); // 我有名字了
image.png
总结:
1.基本类型的值在内存中占据固定大小的空间,因此被保存在栈内存中。
2.引用类型的值是对象,保存在堆内存中。
3.包含引用类型值得变量实际上包含的并不是对象本身,而是一个指向该对象的指针。
4.从一个变量向另一个变量复制引用类型的值，复制的其实是指针,因此两个变量最终都指向同一个对象。

B我掌握了什么

1.拓展DOM

1.1父节点parentNode(亲爹)
<ul>
    <li>苹果<a href="#">隐藏</a></li>
    <li>梨子<a href="#">隐藏</a></li>
    <li>香蕉<a href="#">隐藏</a></li>
    <li>菠萝<a href="#">隐藏</a></li>
</ul>
//JS
var aTags = document.getElementsByTagName("a");
for(var i =0;i<aTags.length;i++){
      aTags[i].onclick=function () {
          this.parentNode.style.display="none";
          return false;
      }
}

1.2子节点childNodes和children的区别


//HTML
<ul id="test">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
//JS
var test = document.getElementById("test");
alert(test.childNodes.length);  //chrome下结果为7,IE9以下结果为3
//在chrome下将空的文本节点,也算在内容


var test = document.getElementById("test");
var childs =test.childNodes;
for(key in childs){
   if(childs[key].nodeType==1){
        childs[key].style.background="red";
    }
}


firstChild  //包含所有类型的节点
firstElementChild  //IE9以下不兼容
lastChild  //所有类型的节点
lastElementChild  //IE9以下不支持

//可用document.all解决浏览器兼容性问题
if(document.all){
    //IE下
}else{
    //其他浏览器下

1.3兄弟节点

nextSibling
nextElementSibling  //IE9以下不支持
previousSibling
previousElementSibling  //IE9以下不支持

1.4

offsetParent  //获取给了定位元素的父级
offsetLeft      //返回元素的水平偏移位置。
offsetTop      //返回元素的垂直偏移位置。
offsetWidth  //返回元素的宽度
offsetHeight //返回元素的高度

1.5操作元素的属性

oDiv.style.display = "none";
oDiv.style["display"]="none";
oDiv.setAttribute("style","display:none");


<input type="text" id="input"/>
<button id="btn">改变</button>
<script>
    var input = document.getElementById("input");
    var btn = document.getElementById("btn");
    btn.onclick=function () {
        //input.value="hello world"
        input.setAttribute("value","hello world")
    }
</script>

2.控制语句

2.1break  //中断循环
for(var i=0;i<6;i++){
        console.log(i);
        if(i==5){
            break;
        }
    }

2.2 continue  //跳过继续循环
for(var i=0;i<6;i++){
        if(i==2){
            continue
        }
        console.log(i);
    }

3.function

函数的返回值
a.什么是函数的返回值
定义:函数的执行结果
函数可以没有return

function show(){
  return "hello world" //return的作用:把结果返回到函数外部
}
var b = show(); // 在哪调用返回到哪里；


函数的传参
可变参(不定参)arguments
参数的个数可变,参数数组
//对传入的参数求和
function sum(){
        var result=0;
        for(var i = 0;i<arguments.length;i++){
            result+=arguments[i];
        }
        return result;
}
alert(sum(2,3))

C我没掌握好什么

1.5.1获取,设置,删除

getAttribute();
setAttribute();
removeAttribute();

<div id="test">
good
</div>
<script>
    var test = document.getElementById("test");
    test.setAttribute("title","good")
</script>

4.基本类型和引用类型的区别

var a = 10;
var b = a;
b = 20;
console.log(a); // 10值
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • javaSE（day03）
    1 顺序语句 语句：使用分号分隔的代码称作为一个语句。 注意：没有写任何代码只是一个分号的时候，也是一条语句，...
    哈哈哎呦喂阅读 3,060评论 0赞 0
  • Lua学习笔记-Day03
    1、loadstring、dofile和loadfile的用法和区别： （1）对loadstring，程序示例如下...
    陈振拥阅读 3,421评论 0赞 2
  • JS： day03
    一、DOM（文档对象模型） 1、nodeValue 属性（规定节点的值） ①元素节点的 nodeValue 是 u...
    AnnQi阅读 1,526评论 0赞 0
  • day03数据库及listview
    经验：1.sqlite表中的类型限定并不起作用，底层所有的数据都是String，为了节约手机内存 2.4.0版本以...
    123yuan123阅读 2,895评论 0赞 1
  • 沉迷于哒宰不可自拔的我
    近来终于挤出了时间把文豪给看了然后太喜欢哒宰了^(ﾟ∀ﾟ)ﾉ 于是就画了一下同人？？（完全没有画出哒宰的帅气otz...
    田木米酒阅读 4,357评论 0赞 0

友情链接更多精彩内容