queryselector | 易学教程

在网页中动态地给表格添加一行内容--HTML+CSS+JavaScript

阅读更多关于在网页中动态地给表格添加一行内容--HTML+CSS+JavaScript

需求描述：用户在页面上点击按钮,可以把文本框中的数据在表格的新的一行中显示，具体表现如下图：如果如果输入框内容有一项为空，弹出对话框‘请将数据填入完全步骤： 1.按钮注册单击事件 2.获取并判断文本框的内容 4.创建行并添加到tbody中 5.创建列，并设置内容 6.把列添加到行中代码： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>在网页中添加表格</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 12 div { 13 width: 400px; 14 margin: 100px auto; 15 } 16 table { 17 margin-top: 10px; 18 width: 400px; 19 border: 2px solid #000; 20 border-collapse: collapse; 21 } 22 table thead tr { 23 background-color: purple; 24 color: #e0e0e0; 25 } 26 27 table tr { 28 background-color: pink; 29 } 30 31 table td {

js-DOM中基础选择器的整理

阅读更多关于 js-DOM中基础选择器的整理

DOM中基础选择器的整理注意：DOM中选择器返回是数组类型的都是伪数组，只能拥有数组的索引以及length,数组的其他方法是不可以使用的！一：DOM中的选择器 1.getElementById(id) //获取指定元素的ID元素 2.getElementsByTagName() //获取相同元素的节点列表，通过标签名选择元素，返回值是一个数组 3.getElementsByName() //通过name值获取元素，返回值是数组，通常用来获取有name的input的值 4.getElementsByClassName() //通过class名获取元素，返回值(HTML集合)是数组n 　　tip：这是四个基础的选择器，后面在其基础上在拓展二：ES5选择器：就两个，但功能强大(都是对象的方法) 　　注意：兼容性自行测试 1：document.querySelector(); //可以获取所有类型的选择器，但是只能获取一个，返回的值是单个元素拓展：querySelector返回dom的子元素中第一个符合selectors选择器字符串的元素，无匹配项则返回null，在获取时，可以直接在括号内使用css选择器的样式，比如：obox = document.querySelector("#box>h2"); 2：document.quertSelectorAll(); /

DOM选择器之元素选择器

阅读更多关于 DOM选择器之元素选择器

DOM中元素选择器　　在DOM中我们可以将元素选择器分为两类；1、元素节点选择器；2、其它节点选择器。通过选择器选择HTML中的元素以对其进行操作，以此实现用JS对页面的操作。　　一、元素节点选择器　　1.ID选择器：document.getElementById() 　　通过标签的ID名选择,返回的是单个的值，在HTML中ID具有唯一性；　　2.class选择器：document.getElementsByClassName() var aEle=document.getElementsByClassName("myClass")　　//选择文档中所有class名为myClass的元素，返回一个数组。　　通过标签的class名进行选择，返回的是一个数组，当我们需要对单个进行操作时，可利用数组的操作来选择单个的元素；这里需要注意的是，不同于ID选择器，因为是一个数组所以是Elements,注意有一个s，又由于在ES6中有class关键字，为了避免重复这里用的是ClassName。　　3.标签选择器：document.getElementsByTagName() 　　通过标签名进行选择,如下选择文档中所有span标签。 var aspan=document.getElementsByTagName("span")　　//选择DOM文档中所有的<span></span

DOM选择器之元素其他节点选择器

阅读更多关于 DOM选择器之元素其他节点选择器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <span>qwe</span> <div class="box"><span>1</span> <p>2</p> hello  <em>3</em></div> <span>zxc</span> </body> <script> 其他节点选择器: 关系：父选子： var obox = document.querySelector(".box") console.log(obox.childNodes) //) [span, text, p, text, comment, text, em] 上一个兄弟： var obox = document.querySelector(".box") console.log(obox.previousSibling) //#text 下一个兄弟： var obox =

文件拖放

阅读更多关于文件拖放

拖放拖放是一种常见的特性，即抓取对象以后,从当前位置拖到另一个位置的过程。 dragenter 开始拖动 dragover 拖动中 dragleave 拖动放开 drop 拖动完成html 元素 <div id="target_box">把图片拖到这里试试</div> <div id="show-drop" title="拖动的图片可以在这里显示出来"></div> // js 部分 function addEventListener(dom,event,callback){ if(typeof dom == "string"){ document.querySelector(dom).addEventListener(event,callback); }else{ dom.addEventListener(event,callback); } } //开始拖动 addEventListener(document,"dragenter",function(e){ e.preventDefault(); document.querySelector("#target_box").setAttribute("class","droping"); }); //拖动中 addEventListener(document,"dragover",function(e){ e

原生js获得八种方式,事件操作

阅读更多关于原生js获得八种方式,事件操作

08.17自我总结关于js 一.原生js获得八种方式通过ID获取（getElementById）通过name属性（getElementsByName）通过标签名（getElementsByTagName）通过类名（getElementsByClassName）通过选择器获取一个元素（querySelector）通过选择器获取一组元素（querySelectorAll）获取html的方法（document.documentElement） document.documentElement是专门获取html这个标签的获取body的方法（document.body） document.body是专门获取body这个标签的二.事件句柄属性当以下情况发生时，出现此事件 onabort 图像加载被中断 onblur 元素失去焦点 onchange 用户改变域的内容 onclick 鼠标点击某个对象 ondblclick 鼠标双击某个对象 onerror 当加载文档或图像时发生某个错误 onfocus 元素获得焦点 onkeydown 某个键盘的键被按下 onkeypress 某个键盘的键被按下或按住 onkeyup 某个键盘的键被松开 onload 某个页面或图像被完成加载 onmousedown 某个鼠标按键被按下 onmousemove 鼠标被移动

salesforce lightning零基础学习(九) Aura Js 浅谈二: Event篇

阅读更多关于 salesforce lightning零基础学习(九) Aura Js 浅谈二: Event篇

我们在上篇介绍了 @track / @api的区别。在父子 component中，针对api类型的变量，如果声明以后就只允许在parent修改，son component修改便会导致报错。 sonItem.html 1 <template> 2 <lightning-input value={itemName} onchange={changeItemName} label="item name"></lightning-input> 3 </template> sonItem.js 1 import { LightningElement, api } from 'lwc'; 2 3 export default class SonItem extends LightningElement { 4 @api itemName = 'test'; 5 6 changeItemName() { 7 this.itemName = 'change item name'; 8 } 9 } parentForSonItem.html 1 <template> 2 <c-son-item item-name="test parent for son item"></c-son-item> 3 </template> 运行结果：默认显示一个输入框，当修改了里面内容

Dart简明教程

阅读更多关于 Dart简明教程

【前言】Dart语言是使用flutter框架开发时候必备的语言，flutter是一个跨平台的框架，一套代码就可以完美实现安卓和ios两个平台，适配也很不错，Dart语言很友好，和java很类似，学习成本也是很低的。所以这也是我推荐学习Dart语言的一个原因。从本篇文章开始讲解Dart语言的基本使用，我将会连续推出好几篇文章详解，希望帮助大家快速掌握Dart语言。 Dart的使用： Dart中所有东西都是对象，包括数字、函数等。目录：一、关键字（56个）二、变量和常量三、特殊数据类型四、运算符 operators 五、控制流程语句 Control flow statements 六、函数 Function 七、异常 Exceptions 八、类 Classes 九、泛型 Generics 十、库和可见性 Libraries and visibility 十一、异步支持 Asynchrony support 十二、生成器 Generators 十三、可调用的（Callable）类十四、隔离 Isolates 十五、类型定义 Typedefs 十六、元数据 Metadata 十七、注释 Comments 十八、概要 Summary 一、关键字（56个） 33个保留字（不能使用保留字作为标识符）关键字 - - - if superdo switch assert else

工具方法

阅读更多关于工具方法

将table导出为xlsx import FileSaver from 'file-saver' import XLSX from 'xlsx' // /* generate workbook object from table */ // // 转换成excel时，使用原始的格式 let xlsxParam = {raw: true}; // el-table的fixed属性来让某一列固定，但elementui的实现方式是：创建了两个tabledom，通过一个隐藏一个显示来实现交互效果。 // 当导出整个el-table 就会将两个div内的table都导出，导致数据重复。移除重复table let fix = document.querySelector('.el-table__fixed'); let wb; if (fix) { wb = XLSX.utils.table_to_book(document.querySelector('.el-table').removeChild(fix), xlsxParam); document.querySelector('.el-table').appendChild(fix); } else { wb = XLSX.utils.table_to_book(document.querySelector('.el-table'),

Scraper throws errors instead of quitting the browser when everything is done

阅读更多关于 Scraper throws errors instead of quitting the browser when everything is done

I've written a scraper to parse movie information from a torrent site. I used IE and queryselector . My code does parse everything. It throws errors instead of quitting the browser when everything is done. If I cancel the error box then I can see the results. Here is the full code: Sub Torrent_Data() Dim IE As New InternetExplorer, html As HTMLDocument Dim post As Object With IE .Visible = False .navigate "https://yts.am/browse-movies" Do While .readyState <> READYSTATE_COMPLETE: Loop Set html = .Document End With For Each post In html.querySelectorAll(".browse-movie-bottom") Row = Row + 1:

订阅 queryselector