首页
学习
活动
专区
圈层
工具
发布

JS-DOM 综合练习-动态添加删除班级成绩表

虽然问题都解决了,但是还有一个余留的问题就是鼠标经过input时,怎么修改背景颜色的问题。 这一节有点乱,虽然整理的代码编了问题序号。可我相信,再过几天自己回头看肯定还是一头雾水。...难点问题1-3!!window.onload在最上面,也是页面加载完成后执行的效果,就和我之前做ZTA官网的bug一样了,那么后添加的就不能执行onmouseover的变色函数了。...把提交的数据传进去以后不调用这个函数,调用后台的数据,把td的内容innerHTML来等于后台的代码 td.innerHTML = ""; tr.appendChild...table.lastChild.appendChild(tr);//2-5解决,改户口给tr的爸爸tbody bianse();//解决了1-3的问题,给后添加的内容调用变色函数(又生了一个新问题...,证明,table和tr之间还有一个没写出来的tbody,如上3-1实验 //2次错误摸索 // var tbody = document.getElementById //

4.6K80

javascript dom学习笔记

onunload:页面被卸载时触发(IE10对此方法好像不支持兼容性有点小问题),它在onbeforeunload之后执行 三、JavaScript书写规范 1.对于对象,都用o开头+名称表示...    下一个兄弟:nextSibling,返回元素的下一个元素的节点对象     这里有个需要注意的地方:对于表格,也就是table元素,它的第一个儿子是tbody,而不是tr,不管你有没有在table...下面定义     这个tbody,table的第一个儿子都是tbody,孙子才是tr。     ...*          * 解决:          * 将多个所需的样式进行封装。          * 封装到选择器中,只要给指定的标签加载不同的而选择器就可以了。         ...一般使用类选择器。

2.3K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    JS的常用操作

    :对用户输入的数据进行判断 第四步:数据合法(让表单提交) 第五步:数据非法(给出错误提示信息,不让表单提交) 问题:如何控制表单提交?...) 第四步:书写定时任务里面的函数 第五步:通过变量的方式,进行循环(获取轮播图的位置,并设置 src 属性) 4.代码实现 JS 代码: function init(){ **//在循环的时候需要注意到了最后一张图片的时候要重置...); 3.步骤分析 第一步:在页面指定位置隐藏一个广告图片(使用 display 属性的 none 值) 第二步:确定事件(onload)并为其绑定一个函数 第三步:书写这个函数(设置一个显示图片的定时操作...Attribute对象 我们所认知的html页面中所有标签里面的属性都是attribute 5.2 DOM练习 在页面中使用列表显示一些城市 text 我们希望点击一个按钮实现动态添加城市。...获取用户选择的省份(使用方法传参的方式:this.value) 遍历数组(获取省份与用户选择的省份比较,如果相同了,继续遍历该省份下所有的城市) 创建文本节点和元素节点并进行添加操作 createTextNode

    9.4K10

    JavaScript学习总结(七)

    DOM,文档对象模型 一个html页面被浏览器加载的时候,浏览器就会对整个html页面上的所有标签都会创建一个对应的对象进行描述,我在浏览器上看到的信息只不过就是这些html对象的属性信息而已。...我们只要能找到对应的对象操作对象的属性,则可以改变浏览器当前显示的内容。...通过标签属性找标签 这种方法的几种寻找方式如下: document.getElementById("html元素的id") /*这个方法要注意一点,当我们找到这个标签后,并且想向这个标签中插入内容...一是innerHtml,使用情况为存在标签体;另外一个是value,使用情况为无标签体,直接设置的是标签的value值。...实际上,节点还有一个nodeType的属性,标签对象的nodeType均为1,在得到所有的节点之后判断一下这个属性就可以了;还有另外一种处理方式,不常用,就不介绍了。

    67320

    04_使用JS完成功能

    ; return false; } } (2)在输入框后面进行错误提示 思路分析: /* 1.确定使用聚焦事件onfocus和离焦事件onblur和onsubmit 2....) 第三步:离焦事件绑定的函数中(获取用户输入的内容进行判断) 第四步:如果失败,在span位置给出错误提示信息,如果成功,让span内容为空。...var uValue = document.getElementById(id).value; //进行判断 if(uValue==""){ //在span位置给出错误提示信息...document.getElementById("img1"); //设置图片的属性(display)让其显示 imgEl.style.display="block"; //清除显示图片的定时操作...获取用户选择的省份(使用方法传参的方式:this.value) 遍历数组(获取省份与用户选择的省份比较,如果相同了,继续遍历该省份下所有的城市) 创建文本节点和元素节点并进行添加操作 createTextNode

    4.8K60

    前端基础-节点操作

    它接受一个布尔值作为参数,表示是否同时克隆子节点,默认是false,即不克隆子节点。 注意: 不会克隆绑定到该元素上的事件; node.innerHTML 返回该元素包含的 HTML 代码。...之前,我们已经简单的使用过JS控制元素的CSS样式; 在具体使用的时候还有一些需要重点注意的细节: 名字需要改写,将横杠从CSS属性名中去除,然后将横杠后的第一个字母大写: 比如background-color...写成backgroundColor 属性值都是字符串,设置时必须包括单位: 比如,div.style.width的值不能写为100,而要写为100px <div id=...("p1"); document.getElementById("p1").innerText = "哦,这是p啊"; }; 点击按钮设置a标签的地址和热点文字...() { // document.getElementById("btn").value="改变吧"; // }; //在某个元素的自己的事件中,this就是当前的这个元素 document.getElementById

    5K10

    03 . 前端之JavaScipt

    ,后面我们就会用到了 var sum = function(a, b){ //在es6中,使用var,可能会飘黄,是因为在es6中,建议你使用let来定义变量,不过不影响你使用 return a...ES6中,可以使用class这个关键字 this 关键字相当于 python 中的 self, 不同的是在定义一个类方法时 this 关键字不是必须的参数。...在上面的语句中,值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout(),你可以使用这个变量名来指定它。 ​...清空option c.innerHTML = ""; //清空显示市的那个select标签里面的内容    ​ //4.循环所有的市,然后添加到显示市的那个select标签中 for...# absolute ----第一次定位,可以在指定位置,滚轮滚动时,不在了 ​ a

    1.8K40

    JS设置标签的内容和样式

    那么问题来了,如何调用getElementById()方法?接着往下看吧。 上面提到了对象是具有属性和功能,那我们如何使用对象的属性或功能呢?...2 设置样式 现在要对获取到的标签进行设置样式的操作,回顾之前学的HTML与CSS,给标签设置样式有几种方式?我们是不是使用CSS选择器、标签内联来控制标签的样式。...那在JS中,它到底是如何控制标签的样式?...+= '这是我新添加的标签'; 4 课程小结 掌握获取标签的目的是能够利用JS选择到相应的标签,便于对其进行相应的操作; 掌握设置样式的目的是能够利用JS实现对标签样式的控制...= document.getElementById("h5course"); alert(con.innerHTML); 在IE、谷歌浏览器下测试,哪几个浏览器会正常显示?

    23.6K90

    JavaScript DOM操作表格及样式

    一.操作表格 标签是HTML中结构最为复杂的一个,可以通过DOM来创建生成它(比较麻烦),或者HTML DOM来操作它。...HTML DOM中,给这些元素标签提供了一些属性和方法 属性或方法 说明 caption 保存着元素的引用 tBodies 保存着tbody>元素的HTMLCollection集合... alert(table.children[0].innerHTML);//获取caption的内容 PS:这里使用了children[0]本身就忽略了空白,如果使用firstChild...);//空 PS:border属性是一个综合属性(被计算后就不存在了),所以他在Chrome显示了,Firefox为空,IE为undefined。...box.id = 'pox';//把ID改变会带来灾难性的问题 box.className = 'red';//通过className关键字来设置样式 在添加className的时候,我们想给一个元素添加多个

    4.2K100

    BOM和DOM

    BOM window对象   看上面的例子你会发现,name直接封装到了window对象上,了解一下就可以了。   所有浏览器都支持 window 对象。它表示浏览器窗口。   ...(比较重要)     通过使用 JavaScript,我们可以在一定时间间隔之后来执行代码,而不是在函数被调用后立即执行。...在上面的语句中,值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout(),你可以使用这个变量名来指定它。       ...onselect 在文本框中的文本被选中时发生。 onsubmit 确认按钮被点击,使用的对象是form。...注意一个问题:       还有一种解决办法就是将script标签写到body标签最下面     结合计时器的事件示例,input框里面动态显示时间: <!

    1K10

    【兼容性】js 浏览器兼容问题处理方式

    "; } (4)访问标签中的"for" 问题描述: 和"float"属性一样,同样需要使用不现的句法区分来访问标签中的"for" 在IE中这样写: var myObject = document.getElementById...(5)访问和设置class属性 问题描述: 同样由于class是Javascript保留字的原因,这两种浏览器使用不同的 JavaScript 方法来获取这个属性。...兼容处理: 尽量采用W3C DOM 的写法,访问对象的时候,用document.getElementById(“id”) 以ID来访问对象,且一个ID在页面中必须是唯一的,同样在以标签名来访问对象的时候...table操作 问题描述: IE下table中无论是用innerHTML还是appendChild插入都没有效果,而其他浏览器却显示正常。...:可直接设置:option.text = 'foooooooo'; IE:只能设置:option.innerHTML = 'fooooooo'; 删除一个select的option的方法: Firefox

    1.3K20

    Python自动化开发学习-RESTfu

    用例子中的方法就可以拿到了。等下面的小节把前端显示优化之后,可以随便哪句语句添加或者删除个字符搞个语法错误,测试效果。...,display设置为0,那么就不显示了,所以text属性是用不到的。...但是其他字段里可以通过@取到这个字段的值了。 有的显示的字段,我也没设置text,那么等下前端处理的时候,还是按照之前的方法来进行展示 最后的操作字段,现在可以加上任意内容了。...之前是通过 td.innerHTML = row[configItem.field] 显示内容的。现在这个方法保留,在没有text属性的时候继续按这个来显示。...插件里,td.innerHTML赋值之后,添加到tr标签里之前,插入下面这段,为td标签设置属性: // 为td添加属性

    3.2K10

    前端:浏览器Content Security Policy 安全策略介绍和用法

    所以在绝大多数场景下,开发者可以放心地在项目中启用并使用这一安全功能。...传统的防御手段虽然有效,但CSP提供了更深层的保护——它通过白名单机制,告诉浏览器只加载和执行来自特定来源的资源。...CSP两种设置CSP的方式通过HTTP响应头设置(推荐)Content-Security-Policy: default-src 'self'通过Meta标签设置了外部脚本加载(只允许同源脚本)允许加载HTTPS图片阻止了eval()等危险函数使用了安全的textContent而不是innerHTML展示了CSP如何防止XSS攻击具体如下图...,实际应用过程中应该记住以下原则:渐进实施:从报告模式开始,逐步转向强制执行最小权限原则:只授予必要的权限持续监控:定期检查违规报告,优化策略平衡安全与功能:在安全性和开发便利性之间找到平衡点大家如果使用过程中有问题的话欢迎评论区沟通交流

    1.2K10

    dojodom-construct.toDom方法学习笔记

    大家好,又见面了,我是你们的朋友全栈君。   toDom方法用来将html标签字符串转化成DOM节点。1.7之后toDom方法被分配到了dom-construct模块。...toDOM将html转换为dom节点,我能想到的是两种方法: 利用正则表达式,依次匹配出所有标签;首先需要一个正确的正则,其次需要保证正确的节点关系 利用dom的api来做,这个我们可以创建一个元素使用...innerHTML来自动转换   很明显,第二种方法简单,全部交给浏览器去做,我们只需拿到元素的子节点即可;但是innerHTML标签又有它的特殊性: innerHTML取值时会把所有的子元素作为文本输出...所以在遇到这些标签开头的html片段时,我们需要手动补全缺失的包装元素。   下面我们来看一下dom-construct模块是怎么处理的。   ...在将文档片段作为参数传递给这两个方法时,实际上只会将文档片段的所有子节点添加到相应的位置上;文档片段本身永远不会称为文档树的一部分 利用innerHTML标签创建dom元素,并自动补齐缺失的标签,这就是

    63410

    如何在DataGrid里面产生滚动条而不滚动题头

    我们在开发的时候一定遇到,使用DataGrid的时候由于不想分页(数据没有那么多)但是又显示不在一页里面,此时我们希望在DataGrid里面出现一个滚动条,可以上下滚动DataGrid里面的数据而不用上下滚动页面...我们都知道DataGrid在解释到客户端以后将会生成一个Table,但是这个Table是由组成的,我们的脚本里面是需要使用到Table的Thead和Tbody的(在大多数的客户端的应用中都要用到此功能比如...当你需要加载客户端脚本的时候使用该方法是个不错的选择。好了,客户端脚本也有了,剩下的就是处理我们的客户端DataGrid了(也就是DataGrid呈现的客户端Table)。...由于此方法只是由该控件自己使用所以我们将它设置成私有的代码如下:  private string parseMarkup(){          // 插入THead标签和TBody标签         ...由于时间关系该控件分页和滚动不能同时,希望有兴趣的网友可以实现之。我在写此文章的目的旨在抛砖引玉的作用,希望对大家的编程技术有所提高和帮助。谢谢阅读!有什么问题或者好的建议请与我联系。

    2K110

    三峡大学复杂数据预处理day01-day03

    当把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手;使用 Target 属性,可以定义被链接的文档在何处显示。 CSS 注释: 注释是用来解释代码的,浏览器会忽略它,CSS注释以 "/*" 开始, 以 "*/" 结束 参考图片 选择器生效规则 行内样式 > 内嵌样式 > 外部样式 ID选择器...> 类选择 > 标签选择器 在同一选择器中,两条声明相同,后一条声明会覆盖前一条声明 3....改变 HTML 内容:document.getElementById(id).innerHTML=new HTML 改变 HTML 属性:document.getElementById(id)...它拥有自己独特的语法以及一个独立的处理引擎,在提供了正则表达式的语言里,正则表达式的语法都是一样的。正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。

    1.1K40

    JS事件篇

    (子节点):删除子节点 使用innerHTML也可以完成DOM的增删改操作 阻止a标签默认行为的常用三种方式 a标签的索引问题 JS修改元素的样式 读取元素的内联样式 获取当前元素显示的样式---只读...,读取到一行就运行一行,如果将script标签写到页面上边,在代码执行的时候,页面还没有完全加载 window.onload事件会在整个页面加载完成之后,才会触发,将对应的script代码,写在里面,可以确保...script代码可以在页面加载完成之后,才会执行 ---- Dom查询 ---- innerhtml ----获取节点的html内容,或者设置对应节点html内容 innerHTML在JS是双向功能:获取对象的html内容 或 向对象插入...当我们给a标签添加onclick事件处理函数并点击a触发其后, 如果相应JavaScript代码返回true,onclick事件处理函数就会认为这个链接呗点击了,同样的若返回false即会认为链接

    14.5K10

    前端基础技术全解析:从HTML前端基础标签语言开始,逐步深入CSS样式修饰、JavaScript脚本控制、Ajax异步通信以及WebSocket持久通信

    开始标签和结束标签之间,写的是标签的内容,(hello) 开始标签中可能会带有"属性".id 属性相当于给这个标签设置了一个唯一的标识符(身份证号码)....代表的是标题标签,后面数字越大,最后在界面上显示的字体大小就越小,呈反比。...否则就会图片失衡. border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定. 因为当前页面是在我的桌面文件里面的,而我采用的图片也是桌面上的,因此在同一路径下,直接....它使用XMLHttpRequest对象在后台与服务器进行通信,从而实现了页面的局部刷新。 WebSocket: 原理:WebSocket是一种在单个TCP连接上进行全双工通信的协议。...WebSocket的兼容性也相对较好,现代主流的浏览器都对WebSocket提供了良好的支持。但在一些较老的浏览器版本中可能存在兼容性问题。

    59410
    领券