python第八十八天----dom js
DOM操作
1、 找到标签
直接查找
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合
间接查找
parentNode // 父节点
childNodes // 所有子节点
firstChild // 第一个子节点
lastChild // 最后一个子节点
nextSibling // 下一个兄弟节点
previousSibling // 上一个兄弟节点
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
2、操作标签对应 的对象
内容
innerText 文本
outerText
innerHTML HTML内容
innerHTML
value 值
input标签
selec
属性
attributes // 获取所有标签属性
setAttribute(key,value) // 设置标签属性
getAttribute(key) // 获取指定标签属性
/*
var atr = document.createAttribute("class");
atr.nodeValue="democlass";
document.getElementById('n1').setAttributeNode(atr);
*/
checkbox #可以赋值,进行是否打勾操作
obj.checked= true
obj.checked= false
class操作
<input οnfοcus="Focus();" οnblur="Blur();" type="text" name="il" id="il" value="请输入关键字" />
标签.className // 获取所有类名
标签.classList.remove(cls) // 删除指定类名
标签.classList.add(cls) // 添加类名
标签操作
// 方式一
var tag = document.createElement('a')
tag.innerText = "wupeiqi"
tag.className = "c1"
tag.href = "http://www.cnblogs.com/wupeiqi"
// 方式二
var tag = "<a class='c1' href='http://www.cnblogs.com/wupeiqi'>wupeiqi</a>"
操作标签
// 方式一 字符串
var obj = "<input type='text' />";
xxx.insertAdjacentHTML("beforeEnd",obj);
xxx.insertAdjacentElement('afterBegin',document.createElement('p'))
//注意:第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
// 方式二 对象
var tag = document.createElement('a')
xxx.appendChild(tag)
xxx.insertBefore(tag,xxx[1])
样式操作
var obj = document.getElementById('i1')
obj.style.fontSize = "32px";
obj.style.backgroundColor = "red";
obj.classList#类名
提交表单
document.geElementById('form').submit()
事件:
οnclick='fun()'
1 绑定事件两种方式 2 一、 3 直接标签绑定 4 οnclick='fun()' 5 二、 6 先获取dom对象 ,然后进行绑定 7 onfocus 8 οnmοuseοver=function(){} 9 οnmοuseοut=function(){} 10 this 当前触发事件的标签 11 a. 第一种绑定方式 12 <input id='s1' type='button' onclick='fun(this)'> 13 function fun(self){ 14 // self 当前点击的标签 15 } 16 17 b.第二种绑定方式 18 <input id='xx' type='button'> 19 document.getElementById('xx').οnclick=function(){ 20 this.xxx 21 //this 当前调用this 的对象 22 } 23 c.第三种绑定方式 24 var obj=document.getElementById('xx'); 25 obj.addEventListener()
View Code
其他操作
console.log 输出框
alert 弹出框
confirm 确认框
// URL和刷新
location.href 获取URL
location.href = "url" 重定向
location.reload() 重新加载
// 定时器
setInterval 多次定时器
clearInterval 清除多次定时器
setTimeout 单次定时器
clearTimeout 清除单次定时器
6、位置操作
总文档高度
document.documentElement.offsetHeight
当前文档占屏幕高度
document.documentElement.clientHeight
自身高度
tag.offsetHeight
距离上级定位高度
tag.offsetTop
父定位标签
tag.offsetParent
滚动高度
tag.scrollTop
javaScript
独立的语言 ,浏览器具有JS的解释器
js存在的形式
head 中<script src=".."> </script> #引入文件最好放在 body中的最下方变量:name = 'uge3' #全局变量var name = 'uge3' #局部变量基本数据类型数字JavaScript中不区分整数值和浮点数值,JavaScript中所有数字均用浮点数值表示。转换:parseInt(..) 将某值转换成数字,不成功则NaNparseFloat(..) 将某值转换成浮点数,不成功则NaN特殊值:NaN,非数字。可使用 isNaN(num) 来判断。Infinity,无穷大。可使用 isFinite(num) 来判断。字符串obj.length 长度 obj.trim() 移除空白 左 右obj.trimLeft() 移除左边空白obj.trimRight) 移除右边空白obj.charAt(n) 返回字符串中的第n个字符obj.concat(value, ...) 拼接obj.indexOf(substring,start) 子序列位置 开始位置 从左开始找obj.lastIndexOf(substring,start) 子序列位置 从右开始找obj.substring(from, to) 根据索引获取子序列obj.slice(start, end) 切片obj.toLowerCase() 大写obj.toUpperCase() 小写obj.split(delimiter, limit) 分割 取个数obj.search(regexp) 从头开始匹配,返回匹配成功的第一个位置(g无效)obj.match(regexp) 全局搜索,如果正则中有g表示找到全部,否则只找到第一个。obj.replace(regexp, replacement) 替换,正则中有g则替换所有,否则只替换第一个匹配项,$数字:匹配的第n个组内容;$&:当前匹配的内容;$`:位于匹配子串左侧的文本;$':位于匹配子串右侧的文本$$:直接量$符号列表(数组)obj.length 数组的大小obj.push(ele) 尾部追加元素obj.pop() 尾部获取一个元素obj.unshift(ele) 头部插入元素obj.shift() 头部移除元素obj.splice(start, deleteCount, value, ...) 插入、删除或替换数组的元素 开始位置 删除个数 插入的内容obj.splice(n,0,val) 指定位置插入元素obj.splice(n,1,val) 指定位置替换元素obj.splice(n,1) 指定位置删除元素obj.slice( ) 切片obj.reverse( ) 反转obj.join(sep) 将数组元素连接起来以构建一个字符串obj.concat(val,..) 连接数组obj.sort( ) 对数组元素进行排序字典a={k1:'v1,k2:'v2',k3:'v3' }布尔类型 布尔类型仅包含真假,与Python不同的是其首字母小写。true false== 比较值相等!= 不等于=== 比较值和类型相等!=== 不等于|| 或&& 且for 循环a=[1,2,3,4,5,6]for (var i in a){console.log(i);console.log(a[i]);}for (var i =0 ;i<10;i++){//不支持字典循环}条件语句 if (){}else if(){}else{}if(i==b)//值相等 就可以if(i===b) //类型也要一致== 比较值相等!= 不等于=== 比较值和类型相等!=== 不等于|| 或&& 且定时器setInterval() #定义一个定时器console.log(1)函数function 函数名(形参){}
js函数:
1 三种函数: 2 3 普通函数 4 function func(){ 5 6 } 7 8 匿名函数 9 function(){ 10 } 11 12 自执行函数 13 (function(arg){ 14 console.log(arg); 15 })('123') 16 17 18 序列化 19 20 JSON.stringify(list) //列表转为字符串 21 JSON.parse(str)//字符串转为列表 22 23 24 转义 25 26 decodeURI( ) URl中未转义的字符 27 decodeURIComponent( ) URI组件中的未转义字符 28 encodeURI( ) URI中的转义字符 29 encodeURIComponent( ) 转义URI组件中的字符 30 escape( ) 对字符串转义 31 unescape( ) 给转义字符串解码 32 URIError 由URl的编码和解码方法抛出 33 34 eval 35 36 JavaScript中的eval是Python中eval和exec的合集,既可以编译代码也可以获取返回值。 37 38 eval() 39 EvalError 执行字符串中的JavaScript代码 40 4、正则表达式 41 42 1、定义正则表达式 43 44 /.../ 用于定义正则表达式 45 /.../g 表示全局匹配 46 /.../i 表示不区分大小写 47 /.../m 表示多行匹配 48 JS正则匹配时本身就是支持多行,此处多行匹配只是影响正则表达式^和$,m模式也会使用^$来匹配换行的内容) 49 50 51 52 eval 以及时间操作 53 54 val =eval('1+1') 55 时间 56 Date对象 57 var d= new Date() 生成一个时间对象 58 d.getxxx 获取 59 d.setxxx 设置 60 61 62 作用域 63 JavaScript中每个函数都有自己的作用域,当出现函数嵌套时,就出现了作用域链。当内层函数使用变量时,会根据作用域链从内到外一层层的循环,如果不存在,则异常。 64 切记:所有的作用域在创建函数且未执行时候就已经存在。 65 function f2(){ 66 var arg= 111; 67 function f3(){ 68 console.log(arg); 69 } 70 71 return f3; 72 } 73 74 ret = f2(); 75 ret(); 76 77 78 1、以函数作为作用域 79 80 81 2、函数的作用域在函数未被调用之前,已经创建 82 83 3、函数的作用域存在作用域链, 并且也是在被调用之前创建 84 85 4、函数内部局部变量 提前声明 86 87 对象 88 function func(){ 89 this.name=n; 90 } 91 var obj= new func(); 92 1、this 代指对名象 93 2、创建对象时 用 new 94 ================ 95 function Foo (name,age) { 96 this.Name = name; 97 this.Age = age; 98 this.Func = function(arg){ 99 return this.Name + arg; 100 } 101 } 102 103 var obj = new Foo('alex', 18); 104 var ret = obj.Func("sb"); 105 console.log(ret); 106 107 以上浪费内存 108 =================== 109 function Foo (name,age) { 110 this.Name = name; 111 this.Age = age; 112 } 113 ##原型 114 Foo.prototype = { 115 GetInfo: function(){ 116 return this.Name + this.Age 117 }, 118 Func : function(arg){ 119 return this.Name + arg; 120 } 121 }
View Code
1 //for (var i in [11, 22 ,33];) { 2 // print i; 3 //} 4 // 5 // 6 //for(var 1=0; i<10; i++){ 7 // print i; 8 //} 9 // 10 //switch(name){11 // case '1': 12 // age=123; 13 // break; 14 // case '2': 15 // age=456; 16 // break; 17 // default: 18 // age=789; 19 // 20 //} 21 xo="ab"; 22 function func(){ 23 var xo="3e"; 24 function inner(){ 25 console.log(xo); 26 } 27 return inner; 28 } 29 var ret=func() 30 ret()
View Code
转载于:https://www.cnblogs.com/uge3/p/7257332.html
python第八十八天----dom js相关推荐
- Python解决八皇后问题
Python解决八皇后问题 参考文章: (1)Python解决八皇后问题 (2)https://www.cnblogs.com/littleseven/p/5362791.html 备忘一下.
- 孤荷凌寒自学python第三十八天初识python的线程控制
孤荷凌寒自学python第三十八天初识python的线程控制 (完整学习过程屏幕记录视频地址在文末,手写笔记在文末) 一.线程 在操作系统中存在着很多的可执行的应用程序,每个应用程序启动后,就可以看着 ...
- 孤荷凌寒自学python第八十一天学习爬取图片1
孤荷凌寒自学python第八十一天学习爬取图片1 (完整学习过程屏幕记录视频地址在文末) 通过前面十天的学习,我已经基本了解了通过requests模块来与网站服务器进行交互的方法,也知道了Beauti ...
- python 东八区
python 东八区 import pytz def get_weekend(tt):from dateutil.parser import parsebb=parse(tt)pacific = py ...
- python桌面应用html_是否将Python后端与HTML / CSS / JS用户界面集成到桌面应用程序? - javascript...
在创建桌面应用程序时,如何或将Python代码与HTML / CSS / JS集成为用户界面,该如何做?一个简单的例子:如果我想用Python创建一个打印" Hello World!&quo ...
- 连接Python 3和Electron/Node.JS:构建现代桌面应用程序
目录 先决条件 第1步--设置开发环境 安装Node.js和NPM 设置Python虚拟环境 创建虚拟环境 第4步--创建Node.js应用程序 如何在Electron和Python之间进行通讯 什么 ...
- Python爬虫教程-16-破解js加密实例(有道在线翻译)
python爬虫教程-16-破解js加密实例(有道在线翻译) 在爬虫爬取网站的时候,经常遇到一些反爬虫技术,比如: 加cookie,身份验证UserAgent 图形验证,还有很难破解的滑动验证 js签 ...
- Python第八课(函数1)
Python第八课(函数1) >>>转到思维导图>>>转到中二青年 函数的返回值 函数内要想返回给调用者值 必须用关键字return 不写return:函数默 ...
- 转发:python的八荣八耻
刚在逛CPyUG时看到了个主题讨论python的八荣八耻,见:http://bit.ly/4jeBor, 主题内容如下: 以动手实践为荣,以只看不练为耻. 以打印日志为荣,以单步跟踪为耻. 以空白 ...
最新文章
- 虚拟机+ubuntu 图形界面和终端界面的切换
- mongodb配置windows服务启动
- 检测网络耗时_无人机替代桥梁检测车检测桥梁的可行性分析
- asp.net 强制性单一登陆现实
- php代码静态分析工具,Wpbullet:一款针对WordPress(PHP)的静态代码分析工具
- 微博预期12月8日登陆港交所 最终发售价定为272.8港元
- jsp、servlet、tomcat中都设置了编码为UTF-8,依然报错:java.io.CharConversionException: Not an ISO 8859-1 character:
- 安装MATLAB R2012B遇到问题(需要继续安装以下一个或多个产品: MATLAB 8.0 (不可用) 您必须选择已至少安装这些),已决解!...
- presto 使用 部署_探秘Presto+Alluxio高效云端SQL查询
- Linux电源管理-Runtime PM
- springcahce集成redis 设置过期时间
- 谷歌Chrome浏览器如何截图长图
- 增长黑客AB-Test系统(四)——AB-Test 最小样本量
- 电子邮件的收件人、抄送、密送
- c语言 qt 写小游戏,Qt实现Flappy Bird游戏
- win xp安装详细教程
- 在HTML中marquee有什么作用,【HTML】HTML之marquee详解
- ORACLE_CMD命令(最全的)
- 安卓手机开不了机_手机开不了机的原因 _手机开不了机如何解决
- 送自费购买的 9 台 Kindle,价值 5400 元
热门文章
- 安卓脚本用什么写_python脚本控制安卓手机,可以用来做什么你知道吗?
- jquery隐式迭代
- Python入门--字符串的切片操作
- 文件摆渡是什么意思_小白学炒股:除权、填权、贴权是个什么东东?
- 操作系统—内存管理的概念
- 并查集路径压缩和按rank合并代码实现
- bzoj 1096: [ZJOI2007]仓库建设(斜率DP)
- 51nod-1351:吃点心
- javascript学习之数组的使用二 forEach方法
- js中数组过滤、遍历、迭代every、some、filter、map、forEach、reduce、reduceRight