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相关推荐

  1. Python解决八皇后问题

    Python解决八皇后问题 参考文章: (1)Python解决八皇后问题 (2)https://www.cnblogs.com/littleseven/p/5362791.html 备忘一下.

  2. 孤荷凌寒自学python第三十八天初识python的线程控制

    孤荷凌寒自学python第三十八天初识python的线程控制 (完整学习过程屏幕记录视频地址在文末,手写笔记在文末) 一.线程 在操作系统中存在着很多的可执行的应用程序,每个应用程序启动后,就可以看着 ...

  3. 孤荷凌寒自学python第八十一天学习爬取图片1

    孤荷凌寒自学python第八十一天学习爬取图片1 (完整学习过程屏幕记录视频地址在文末) 通过前面十天的学习,我已经基本了解了通过requests模块来与网站服务器进行交互的方法,也知道了Beauti ...

  4. python 东八区

    python 东八区 import pytz def get_weekend(tt):from dateutil.parser import parsebb=parse(tt)pacific = py ...

  5. python桌面应用html_是否将Python后端与HTML / CSS / JS用户界面集成到桌面应用程序? - javascript...

    在创建桌面应用程序时,如何或将Python代码与HTML / CSS / JS集成为用户界面,该如何做?一个简单的例子:如果我想用Python创建一个打印" Hello World!&quo ...

  6. 连接Python 3和Electron/Node.JS:构建现代桌面应用程序

    目录 先决条件 第1步--设置开发环境 安装Node.js和NPM 设置Python虚拟环境 创建虚拟环境 第4步--创建Node.js应用程序 如何在Electron和Python之间进行通讯 什么 ...

  7. Python爬虫教程-16-破解js加密实例(有道在线翻译)

    python爬虫教程-16-破解js加密实例(有道在线翻译) 在爬虫爬取网站的时候,经常遇到一些反爬虫技术,比如: 加cookie,身份验证UserAgent 图形验证,还有很难破解的滑动验证 js签 ...

  8. Python第八课(函数1)

    Python第八课(函数1)    >>>转到思维导图>>>转到中二青年 函数的返回值 函数内要想返回给调用者值 必须用关键字return 不写return:函数默 ...

  9. 转发:python的八荣八耻

    刚在逛CPyUG时看到了个主题讨论python的八荣八耻,见:http://bit.ly/4jeBor, 主题内容如下: 以动手实践为荣,以只看不练为耻.  以打印日志为荣,以单步跟踪为耻.  以空白 ...

最新文章

  1. 虚拟机+ubuntu 图形界面和终端界面的切换
  2. mongodb配置windows服务启动
  3. 检测网络耗时_无人机替代桥梁检测车检测桥梁的可行性分析
  4. asp.net 强制性单一登陆现实
  5. php代码静态分析工具,Wpbullet:一款针对WordPress(PHP)的静态代码分析工具
  6. 微博预期12月8日登陆港交所 最终发售价定为272.8港元
  7. jsp、servlet、tomcat中都设置了编码为UTF-8,依然报错:java.io.CharConversionException: Not an ISO 8859-1 character:
  8. 安装MATLAB R2012B遇到问题(需要继续安装以下一个或多个产品: MATLAB 8.0 (不可用) 您必须选择已至少安装这些),已决解!...
  9. presto 使用 部署_探秘Presto+Alluxio高效云端SQL查询
  10. Linux电源管理-Runtime PM
  11. springcahce集成redis 设置过期时间
  12. 谷歌Chrome浏览器如何截图长图
  13. 增长黑客AB-Test系统(四)——AB-Test 最小样本量
  14. 电子邮件的收件人、抄送、密送
  15. c语言 qt 写小游戏,Qt实现Flappy Bird游戏
  16. win xp安装详细教程
  17. 在HTML中marquee有什么作用,【HTML】HTML之marquee详解
  18. ORACLE_CMD命令(最全的)
  19. 安卓手机开不了机_手机开不了机的原因 _手机开不了机如何解决
  20. 送自费购买的 9 台 Kindle,价值 5400 元

热门文章

  1. 安卓脚本用什么写_python脚本控制安卓手机,可以用来做什么你知道吗?
  2. jquery隐式迭代
  3. Python入门--字符串的切片操作
  4. 文件摆渡是什么意思_小白学炒股:除权、填权、贴权是个什么东东?
  5. 操作系统—内存管理的概念
  6. 并查集路径压缩和按rank合并代码实现
  7. bzoj 1096: [ZJOI2007]仓库建设(斜率DP)
  8. 51nod-1351:吃点心
  9. javascript学习之数组的使用二 forEach方法
  10. js中数组过滤、遍历、迭代every、some、filter、map、forEach、reduce、reduceRight