accp8.0转换教材第7章JavaScript操作DOM对象理解与练习
程序调试,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+" 发表时间:"+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对象理解与练习的更多相关文章
- accp8.0转换教材第8章JavaScript对象及初识面向对象理解与练习
JavaScript数据类型,对象,构造函数,原型对象,初识原型链,对象继承 一.单词部分 ①object父类②constructor构造函数③instance实例④call调用 ⑤apply应用⑥c ...
- accp8.0转换教材第4章MySQL高级查询(二)理解与练习
知识点:EXISTS子查询.NOT EXISTS子查询.分页查询.UNION联合查询 一.单词部分 ①exist存在②temp临时的③district区域 ④content内容⑤temporary暂时 ...
- accp8.0转换教材第3章MySQL高级查询(一)理解与练习
一.单词部分 ①constraint约束②foreign外键③references参考 ④subquery子查询⑤inner内部的⑥join连接 二.预习部分 1.修改表SQL语句的关键字是什么 RE ...
- accp8.0转换教材第10章Ajax和jQuery理解与练习
C/S (Client/Server)结构,即大家熟知的客户机和服务器结构. B/S(Browser/Server)结构即浏览器和服务器结构. 认识ajax .XMLHttpRequest.使用jqu ...
- 第四章 JavaScript操作DOM对象
第四章 JavaScript操作DOM对象 一.DOM操作 DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API接口,1988年,W3C发布了第一级 ...
- JQuery制作网页—— 第三章 JavaScript操作DOM对象
1. DOM:Document Object Model(文档对象模型): DOM操作: ●DOM是Document Object Model的缩 ...
- accp8.0转换教材第11章JAjax加护扩展理解与练习
①杂记:前面有原生态JavaScript实现ajax这里又多了更简单的方法实现ajax ②$.get()方法的常用参数 参数 类型 说明 url String 必选,规定发送地址 data Plain ...
- accp8.0转换教材第9章JQuery相关知识理解与练习
自定义动画 一.单词部分: ①animate动画②remove移除③validity有效性 ④required匹配⑤pattern模式 二.预习部分 1.简述JavaScript事件和jquery事件 ...
- accp8.0转换教材第6章连接MySQL理解与练习
JDBC_ODBC,纯java方式连接mysql 1.单词部分 ①JDBCjava连接数据库②driver manager驱动③connection连接④statement声明 ⑤execute执行⑥ ...
随机推荐
- 3.从AbstractQueuedSynchronizer(AQS)说起(2)——共享模式的锁获取与释放
在上节中解析了AbstractQueuedSynchronizer(AQS)中独占模式对同步状态获取和释放的实现过程.本节将会对共享模式的同步状态获取和释放过程做一个解析.上一节提到了独占模式和共享模 ...
- Java源码学习 -- java.lang.StringBuilder,java.lang.StringBuffer,java.lang.AbstractStringBuilder
一直以来,都是看到网上说“ StringBuilder是线程不安全的,但运行效率高:StringBuffer 是线程安全的,但运行效率低”,然后默默记住:一个是线程安全.一个线程不安全,但对内在原因并 ...
- StringBuffer类的使用
//简单记录下Java中StringBuffer类的基本功能使用public class Test01{ public static void main(String[] args){ //New一个 ...
- struts2.1.6教程四、OGNL与ValueStack(VS)
1.值栈入门 下面我们建立struts2ognl项目来练习ognl的使用. 步骤一.搭建strust2的开发环境 步骤二.建立LoginAction,主要代码如下: package com.asm; ...
- 开涛spring3(5.1&5.2) - Spring表达式语言 之 5.1 概述 5.2 SpEL基础
5.1 概述 5.1.1 概述 Spring表达式语言全称为“Spring Expression Language”,缩写为“SpEL”,类似于Struts2x中使用的OGNL表达式语言,能在运行 ...
- JMeter-MyEclipse编译运行问题(Could not read JMeter properties file)
JMeter-MyEclipse编译运行问题按照 此贴 http://phoenix0529.iteye.com/blog/1530728 进行配置,然后用Ant编译Build.xml 是可以的. 但 ...
- 用R语言对一个信用卡数据实现logit,GBM,knn,xgboost
Prepare the data 数据来自UCIhttp://archive.ics.uci.edu/ml/machine-learning-databases/credit-screening,一个 ...
- VR全景项目领导者,VR全景智慧城市
在互联网大趋势下,实体商家都迫切需要一个好的线上广告宣传方式,来推广自己的店铺及产品,传统的线上宣传方式已经无法满足消费者需求,360度全景展示能更真实直观的把商家展示给用户消费者,给商家带来客流及收 ...
- (转)Java 读写Properties配置文件
原文:http://www.cnblogs.com/xudong-bupt/p/3758136.html 1.Properties类与Properties配置文件 Properties类继承自Hash ...
- Java将头像图片保存到MySQL数据库
在做头像上传的过程中通常是将图片保存到数据库中,这里简单介绍一中将图片保存到数据库的方法: jsp代码: <div> <input class="avatar-input& ...