程序调试,chrome开发人员工具,DOM操作,节点和节点间的关系,节点信息,操作节点,获取元素

一.单词部分

①alert警告②prompt提示③parentNode父节点④childNode子节点⑤firstChild第一个子节点

⑥lastChild最后一个子节点⑦nextSibling下一个同级⑧previousSibling上一个同级

⑨createElement创建节点元素    appendChild附加节点    insertBefore在。。之前添加

cloneNode复制 节点    removeNode 删除节点    replaceNode替换节点

二.预习部分

1.常见的JavaScript程序调试

Chrome调试工具和alert()方法

2.简述DOM的分类和节点间关系

DOM-CORE(核心),HTML-DOM 和CSS-DOM

有子父关系同级关系

3.简述如何按层次关系访问节点

通过节点的属性:

parentNode,childNode,firstChild等......

4.简述style属性和className在改变样式有什么区别

style通过应用样式的文档元素访问style对象,classname属性可设置或返回元素的class样式

三.练习部分(原文http://www.cnblogs.com/a782126844/需要资源或源码的可私聊可扣扣)

上传不了文件  只能上传js代码了

1.访问当当购物车页面节点

//点击结算的时候给下面添加详情

//结算
function accounts(){
var titleH1=document.createElement("p");
var price0=document.getElementById("price0").innerHTML;

var price1=document.getElementById("price1").innerHTML;
var sum=document.getElementById("totalPrice").innerHTML;

titleH1="您本次购买的商品信息如下:"+"<br>"+"白岩松:白说:"+price0+"<br>岛上书店:"+price1+"<br>商品总计:"+sum;
var zon=titleH1;
var div=document.getElementById("ins");//这里我给它的div设置了一个id方便拿到
div.innerHTML=zon;
}
total();

2.操作当当网删除节点

//js文件

function del(){
var flag=confirm("您确定要删除商品吗?");
if(flag==true){
var parent=document.getElementById("cartList"); 

var one=document.getElementById("price0").parentNode;
one.parentNode.removeChild(one);
total();
alert("删除成功!");

}

}

3.制作课工场论坛发帖

//页面就不发了 发js实现原理

// JavaScript Document
//发帖显示
function sub(){
var po=document.getElementById("post");
po.style.display="block";
}
//帖子提交
function subTi(){
var num=Math.floor(Math.random()*4+1);  //输出1~4之间的随机整数
var po=document.getElementById("post");
po.style.display="none";
var img=document.createElement("img");
var titleH1=document.createElement("h1");
var titMu=document.createElement("span");
var qy=document.getElementById("qq");
var title=document.getElementById("title").value;
var mu=document.getElementById("muk").value;
var now = new Date();
var year = now.getFullYear(); //年
var month = now.getMonth() + 1; //月
var day = now.getDate(); //ri
var time=year+"-"+month+"-"+day;
titleH1.innerHTML=title;
titMu.innerHTML="<br><br>"+"板块:"+mu+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;发表时间:"+time;
if(num==1){
img.setAttribute("src","images/tou01.jpg");
}else if(num==2){
img.setAttribute("src","images/tou02.jpg");
}else if(num==3){
img.setAttribute("src","images/tou03.jpg");
}else if(num==4){
img.setAttribute("src","images/tou04.jpg");
}

var aa=document.getElementById("ull");
//添加li
    var li = document.createElement("li");
    //设置 li 属性
    li.setAttribute("id", "newli");
li.appendChild(img);
    li.appendChild(titleH1);
li.appendChild(titMu);
    aa.appendChild(li);
//li.insertBefore(qy,li);

}

4.制作带关闭按钮的广告

<script src="js/jquery-1.8.3.min.js"></script>
  <script type="text/javascript">
  function adv_close(){
  var fl=document.getElementById("float");
  var fl1=document.getElementById("close");
  fl.style.display="none";
  fl1.style.display="none";
  };
  //js太麻烦。。。。。。。
  //还是jq简单
  $(function($){
  //随滚动条滚动
  $(window).scroll(function(){
  var st = $(this).scrollTop()+50;
  $("#float").css("top",st);
  $("#close").css("top",st);
  });
   
  });
  </script>

四.总结部分

1.在HTML DOM中查找节点的标准方法是getElement系列方法,也可以使用parentNode,firstChild,nextSibling等...

2.在Core DOM中访问和设置节点属性值的标准方法是getAttribute()和setAttribute()

3.改变样式的两种方法style属性和className属性

欢迎提问,欢迎指错,欢迎讨论学习信息 有需要的私聊 发布评论即可 都能回复的

原文在博客园http://www.cnblogs.com/a782126844/有需要可以联系扣扣:2265682997

accp8.0转换教材第7章JavaScript操作DOM对象理解与练习的更多相关文章

  1. accp8.0转换教材第8章JavaScript对象及初识面向对象理解与练习

    JavaScript数据类型,对象,构造函数,原型对象,初识原型链,对象继承 一.单词部分 ①object父类②constructor构造函数③instance实例④call调用 ⑤apply应用⑥c ...

  2. accp8.0转换教材第4章MySQL高级查询(二)理解与练习

    知识点:EXISTS子查询.NOT EXISTS子查询.分页查询.UNION联合查询 一.单词部分 ①exist存在②temp临时的③district区域 ④content内容⑤temporary暂时 ...

  3. accp8.0转换教材第3章MySQL高级查询(一)理解与练习

    一.单词部分 ①constraint约束②foreign外键③references参考 ④subquery子查询⑤inner内部的⑥join连接 二.预习部分 1.修改表SQL语句的关键字是什么 RE ...

  4. accp8.0转换教材第10章Ajax和jQuery理解与练习

    C/S (Client/Server)结构,即大家熟知的客户机和服务器结构. B/S(Browser/Server)结构即浏览器和服务器结构. 认识ajax .XMLHttpRequest.使用jqu ...

  5. 第四章 JavaScript操作DOM对象

    第四章   JavaScript操作DOM对象 一.DOM操作 DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API接口,1988年,W3C发布了第一级 ...

  6. JQuery制作网页—— 第三章 JavaScript操作DOM对象

    1. DOM:Document Object Model(文档对象模型):          DOM操作:                   ●DOM是Document Object Model的缩 ...

  7. accp8.0转换教材第11章JAjax加护扩展理解与练习

    ①杂记:前面有原生态JavaScript实现ajax这里又多了更简单的方法实现ajax ②$.get()方法的常用参数 参数 类型 说明 url String 必选,规定发送地址 data Plain ...

  8. accp8.0转换教材第9章JQuery相关知识理解与练习

    自定义动画 一.单词部分: ①animate动画②remove移除③validity有效性 ④required匹配⑤pattern模式 二.预习部分 1.简述JavaScript事件和jquery事件 ...

  9. accp8.0转换教材第6章连接MySQL理解与练习

    JDBC_ODBC,纯java方式连接mysql 1.单词部分 ①JDBCjava连接数据库②driver manager驱动③connection连接④statement声明 ⑤execute执行⑥ ...

随机推荐

  1. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

  2. 18、面向对象基本原则及UML类图简介

    18.1.面向对象基本原则 18.1.1.面向抽象原则 抽象类特点: a.抽象类中可以有abstract方法,也可以有非abstract方法. b.抽象类不能用new运算符创建对象. c.如果一个非抽 ...

  3. cassandra.yaml 配置 (非原创,侵删)

    Copy from: http://blog.csdn.net/y_h_t/article/details/11917531 Cassandra中所有的运行配置都是在配置文件cassandra.yam ...

  4. 025 hibernate悲观锁、乐观锁

    Hibernate谈到悲观锁.乐观锁,就要谈到数据库的并发问题,数据库的隔离级别越高它的并发性就越差 并发性:当前系统进行了序列化后,当前读取数据后,别人查询不了,看不了.称为并发性不好 数据库隔离级 ...

  5. Swift 入门之简单语法(六)

    KVC 字典转模型构造函数 /// `重写`构造函数 /// /// - parameter dict: 字典 /// /// - returns: Person 对象 init(dict: [Str ...

  6. MySQL主从同步报错故障处理集锦

    前言 在发生故障切换后,经常遇到的问题就是同步报错,下面是最近收集的报错信息. 记录删除失败 在master上删除一条记录,而slave上找不到 Last_SQL_Error: Could not e ...

  7. php优化代码技巧

    1. 如果一个方法可静态化,就对它做静态声明.速率可提升至 4 倍. 2. echo 比 print 快. 3. 使用 echo 的多重参数(译注:指用逗号而不是句点)代替字符串连接. 4. 在执行 ...

  8. [转]tomcat部署(1)

      阅读目录 1 目录结构 2 部署 3 发布 4 测试 本篇参考Tomcat官方文档:<First Webapp>翻译,并结合自己的开发经验介绍关于tomcat部署以及发布的相关内容. ...

  9. java音视频编解码问题:16/24/32位位音频byte[]转换为小端序short[],int[],以byte[]转short[]为例

    前言:Java默认采用大端序存储方式,实际编码的音频数据是小端序,如果处理单8bit的音频当然不需要做转换,但是如果是16bit或者以上的就需要处理成小端序字节顺序. 注:大.小端序指的是字节的存储顺 ...

  10. 做电子商务的七个SEO技巧

    随着电子商务网站的迅速增加,为了适应不断增长的网络客户多样化需求.越来越多的人注意到,从网站上购买既节省了时间和金钱,因此电子商务社区越来越激烈.网站需要具有独特的设计风格和功能,而不是网站内容的不断 ...