javascrip python_Python之Javascript
1.JavaScript 被设计用来向 HTML 页面添加交互行为。
2.JavaScript 是一种脚本语言(脚本语言是一种轻量级的编程语言)。
3.JavaScript 由数行可执行计算机代码组成。
4.JavaScript 通常被直接嵌入 HTML 页面。
5.JavaScript 是一种解释性语言(就是说，代码执行不进行预编译)。
javascript能做什么
表单数据验证：表单数据验证是JavaScript最基本也是最能体现效率的功能。
动态HTML(即DHTML)：动态HTML指不需要服务器介入而动态变化的网页效果，包括动态内容、动态格式、动态布局等。
用户交互：用户交互指根据用户的不同操作进行的响应处理。例如：联动菜单等。
少量数据查找：能够实现在当前网页中进行字符串的查找和替换。
AJAX核心技术：AJAX即异步JavaScript+XML。该对象提供一种支持异步请求的技术，使客户端可以使用JavaScript向服务器提出请求并处理响应，但并不影响用户在客户端的浏览。
javascript的书写方式
第一种：写到整个网页内容中最下面(原则：将所有内容加载出来再出现所要互动的效果)
dsfsdfsrtrhgfjhyt
第二种：通过连接一个文件来实现
javascript的输出方式
alert(sdfsdf)
console.log(sdfsdfsdfsdf)
javascript的注视方式
单行注释：//
多行注释：/**/
变量
1.变量是用于存储信息的容器： x=5; length=66.10;
2. JavaScript 变量名称的规则：
(1).变量对大小写敏感(y 和 Y 是两个不同的变量)
(2).第一个字符必须是字母、下划线(_)或美元符号($)
(3).余下的字符可以是下划线、美元符号或任何字母或数字字符
注释：由于 JavaScript 对大小写敏感，变量名也对大小写敏感。
3.关于变量，js中是这样定义的：var 变量名 = 变量值(局部变量) 变量名 = 变量值(全局变量)
数据类型
数字
var num = 10 或者.1(与0.1相同) parseInt会把变量总的以数字开头的数字取出来，如果数字在中间会报Nan(not a number)。
parsefloat解析浮点数
var num = 1234sdsf parseInt(num)
字符串
var str = 'alex is sb'
console.log(str)
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) 分割
跑马灯实例
1
2
3
4
5
Title
6
7
8
9
10
11
12 function test(){
13 var mywel = document.getElementById("wel");
14 var content = mywel.innerText;
15 var f_content = content.charAt(0);
16 var l_content = (content.substring(1,content.length));
17 var new_content = l_content + f_content;
18 mywel.innerText = new_content;
19
20 }
21 setInterval("test();",1000);
22
23
数组
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.sort( ) 对数组元素进行排序
循环方式：
第一种(循环类似于数据的数据)：for(var i = 0 ;i
console.log('sdfsdfsd')
}
第二种(循环字典类型的数据)：for(var in arr){
console.log(arr[i]);
}
字典
var = dict{'lwq':11,'hsc':qwq}
bool
true or false
对象
function 函数，在js中位置很重要
typeof产看数据类型
算法
Math.ceil(数值)
Math.floor(数值)
Math.round(数值)
Math.min(数值1,数值2)
Math.max(数值1,数值2)
Math.random() 获得0-1之间的随机数
算术运算符：
+ - * / % ++ --
var num=10
var total = num++ ++num
console.log(total)
num++:total先等于num，然后num在+1
++num：num先+1，total再等于num
比较运算符：
> >= < <= != == === !==
三个等于相当于全部相等(数值和数据类型都相等)
逻辑运算符：
&& || ！
赋值运算符：
= += -= *= /=
字符串运算符：
+ 连接，两边操作数有一个或两个是字符串就做连接运算
流程控制
顺序结构
代码一行一行向下执行
console.log(“吃饭”);
console.log(“睡觉”);
console.log(“打豆豆”);
分支结构
1.单分支
if(){}
2.双分支
if(){}
else(){}
3.多分枝
if(){}
else if(){}
else(){}
循环结构
do ..... while 先执行一次，然后再执行while
var n = 0
do {
console.log('sdfsdfsd')
n = n+1
}while(n<3)
函数
书写方式：
1.function 函数名(){
console.log('rerer')
}
2.var func = function(){
console.log()
}
3.(function(){
console.log()
}) 直接运行，不用调用
系统函数
eval ( ) 是Python中eval和exec的合集，既可以编译代码也可以获取返回值。
1、序列化
JSON.stringify(obj) 序列化
JSON.parse(str) 反序列化
2、转义
decodeURI( ) URl中未转义的字符
decodeURIComponent( ) URI组件中的未转义字符
encodeURI( ) URI中的转义字符
encodeURIComponent( ) 转义URI组件中的字符
escape( ) 对字符串转义
unescape( ) 给转义字符串解码
URIError 由URl的编码和解码方法抛出
时间函数
实例：时间显示
1
2
3
4
5
Title
6
7
8
9
10
11
12
13
14 function clock() {
15 var mydate = new Date();
16 var myyear = mydate.getFullYear();
17 var mymonth = mydate.getMonth() + 1;
18 var myday = mydate.getDate();
19
20 var myhour = mydate.getHours();
21 var myminutes = mydate.getMinutes();
22 var mysec = mydate.getSeconds();
23
24 var res = myyear +"-"+ mymonth +"-"+ myday +" "+ myhour +":"+ myminutes +":"+ mysec
25 var mycolock = document.getElementById("clock")
26 mycolock.innerText = res
27 }
28 setInterval("clock()",1000)
29
30
JavaScript之DOM操作
什么是DOM
HTML Document Object Model(文档对象模型)
2.HTML DOM 定义了访问和操作HTML文档的标准方法
3.HTML DOM 把 HTML 文档呈现为带有元素、属性和文本 的树结构(节点树)
获取元素节点方法
1.直接查找：
document.getElementById(“idname”)
document.getElementsByTagName(“tagname”)
document.getElementsByName(“name”)
document.getElementsByClassName(“name”) 获取一个数组
2.间接查找
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
操作属性节点方法
tag.className => 直接整体做操作
tag.classList.add('样式名') 添加指定样式
tag.classList.remove('样式名') 删除指定样式
innerText innerHtml
value获取当前选中的value值
1.input value获取当前标签中的值
var myinput = document.getElementById('username')
myinput.value
myinput.value = 'fuck'
2.select (selectedIndex 代表找索引)
3.textarea
innerHTML 给节点添加html代码：
该方法不是w3c的标准，但是主流浏览器支持
tag.innerHTML = “
要显示内容
”;
案例：输入框搜索关键字(focus, blur)
操作样式属性方法
创建节点方法
1
2
3
4
5
6
Title
7
8
9
10
11
12
13
14
15 var myinput = document.getElementById("myinput");
16 // var tag = "";
17 // myinput.insertAdjacentHTML('beforeEnd',tag);
18 var myipt = document.createElement("input"); //
19 myipt.setAttribute("type","button");
20 myipt.setAttribute("value","点击");
21 myinput.appendChild(myipt);
22
23
24
1.字符串的方式创建：
var tag = "";
xxx.insertAdjacentHTML('beforeEnd',tag);
注意：第一个参数只能是：
‘beforeBegin’‘afterBegin’‘beforeEnd’‘afterEnd’
2.createElement(标签名)
创建一个指定名称的元素。
例：var tag = document.createElement(“input")
tag.setAttribute('type','text');
追加节点方法
追加一个子节点(作为最后的子节点)
somenode.appendChild(newnode)
把增加的节点放到某个节点的前边
somenode.insertBefore(newnode,某个节点);
节点替换
somenode.replaceChild(newnode, 某个节点);
str.add
表格案例：直接查找
1
2
3
4
5
Title
6
7
8
9
10
11
12
13
14
操作
15
ip
16
端口
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40 function selectAll() {
41 // console.log('dafdfdf'); 检测
42 // 1.得到tbody
43 var myTody = document.getElementById('info');
44 // console.log(myTody)
45
46 //2.找下面的孩子
47 var Mytrs = myTody.children;
48 // console.log(Mytrs)
49 for (var i = 0;i
50 // console.log(Mytrs[i].children[0].children[0]);
51 var Myinput = Mytrs[i].children[0].children[0]
52 Myinput.checked = true;
53 }
54 }
55 function cancleAll() {
56 // console.log('dafdfdf'); 检测
57 // 1.得到tbody
58 var myTody = document.getElementById('info');
59 // console.log(myTody)
60
61 //2.找下面的孩子
62 var Mytrs = myTody.children;
63 // console.log(Mytrs)
64 for (var i = 0;i
65 // console.log(Mytrs[i].children[0].children[0]);
66 var Myinput = Mytrs[i].children[0].children[0]
67 Myinput.checked = false;
68 }
69
70 }
71 function reverseAll() {
72 var myTody = document.getElementById('info');
73 // console.log(myTody)
74
75 //2.找下面的孩子
76 var Mytrs = myTody.children;
77 // console.log(Mytrs)
78 for (var i = 0;i
79 // console.log(Mytrs[i].children[0].children[0]);
80 var Myinput = Mytrs[i].children[0].children[0]
81 if (Myinput.checked) {
82 Myinput.checked = false;
83 }else{
84 Myinput.checked = true
85 }
86 }
87 }
88
89
模态框：间接查找(三层实例)
1
2
3
4
5
Title
6
7 .one{
8 position: fixed;
9 top:0;
10 bottom: 0;
11 left:0;
12 right: 0;
13 background-color: black;
14 opacity:0.6;
15 }
16 .info{
17 position: fixed;
18 top:50px;
19 left: 400px;
20 right:400px;
21 background-color: white;
22 width: 400px;
23 height: 300px;
24 }
25 .hide{
26 display: none;
27 }
28 .show{
29 display: block;
30 }
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48 function showMode() {
49 var myone = document.getElementsByClassName('one')[0];
50 myone.classList.remove('hide');
51 var mytwo = document.getElementsByClassName('info')[0];
52 mytwo.classList.remove('hide');
53 }
54 function hideMode() {
55 var myone = document.getElementsByClassName('one')[0];
56 myone.classList.add('hide');
57 var mytwo = document.getElementsByClassName('info')[0];
58 mytwo.classList.add('hide');
59 }
60
61
62
使用js操作css属性的写法是有一定的规律：
1、对于没有中划线的css属性一般直接使用style.属性名即可。如：
obj.style.margin，obj.style.width，obj.style.left，obj.style.position等
2、对于含有中划线的css属性，将每个中划线去掉并将每个中划线后的第一个字符换成大写即可。如：
obj.style.marginTop，obj.style.borderLeftWidth，obj.style.zIndex，obj.style.fontFamily等。
绑定方式：如果编辑框中有内容，可以提交，如没有内容，弹出提示框。
1
2
3
4
5
Title
6
7
8
9
10
11
12
13
14
15 function func() {
16 var v = document.getElementById('user').value;
17 if(v.length>0){
18 return true;
19 }else{
20 alert('请输入内容');
21 return false;
22 }
23 }
24
25
绑定方式2：
鼠标点击文本框，文本框中的提示内容消失，如果点击文本框外部，文本框中的内容出现。(获取焦点onfoucs、失去焦点onblur)
1
2
3
4
5
Title
6
7
8
9
10
11 /* 当标签获取焦点时，执行该函数*/
12 function fuckFoucs(ths){
13 var v= ths.value;
14 if(v == '请输入关键字'){
15 ths.value = '';
16 }
17 }
18 /* 当标签失去焦点时，执行该函数*/
19 function fuckBlur(ths) {
20 var v = ths.value;
21 if (v.length == 0){
22 ths.value = '请输入关键字'
23 }
24
25 }
26
27
28
阻止默认事件发生：
1
2
3
4
5
6
Title
7
8
9
10 揍你
11
12
13 function func() {
14 alert(123);
15 return false;
16 }
17
18
19
第二种方式：
1
2
3
4
5
6
Title
7
8
9
10 揍你
11
12 document.getElementById('i1').onclick = function () {
13 alert(123);
14 return false;
15 }
16
17
18
实例：用户提交数据(没有填写内容)
1
2
3
4
5
6
Title
7
8
9
10
11
12
13
14
15 document.getElementById('sb').onclick = function(){
16 var v = document.getElementById('user').value;
17 if(v.length>0){
18 return true;
19 }else{
20 alert('请输入内容222');
21 return false;
22 }
23 };
24 function func() {
25 var v = document.getElementById('user').value;
26 if(v.length>0){
27 return true;
28 }else{
29 alert('请输入内容');
30 return false;
31 }
32 }
33
34
35
绑定多个相同的事件
document.getElementById('i1').addEventListener('click',function () {
console.log(2);
1
2
3
4
5
6
Title
7
8
9
10
11
12
13 // document.getElementById('i1').onclick = function () {
14 // console.log(2);
15 // }
16 document.getElementById('i1').addEventListener('click',function () {
17 console.log(2);
18 })
19
20
21
- 事件执行顺序：
- 捕获 true
- 冒泡
document.getElementById('i1').addEventListener('click',函数,true或者false)
- event是当前事件的信息
1
2
3
4
5
6
Title
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 document.getElementById('i1').addEventListener('click',function () {alert(1);},true);
22 document.getElementById('i2').addEventListener('click',function () {
23 alert(2);
24 },true);
25 document.getElementById('i3').addEventListener('click',function () {
26 alert(3);
27 },true);
28
29
30
31
1
2
3
4
5
6
Title
7
8
9
10
11
12 function func(ths,e) {
13 console.log(ths,e);
14 }
15 window.onkeydown = function(e){
16 console.log(e);
17 }
18
19
20
21
转载：https://www.cnblogs.com/l-w-q/p/6423360.html
javascrip python_Python之Javascript相关推荐
- js代码转python_Python和JavaScript间代码转换的4个工具
选 Python 还是 JavaScript?虽然不少朋友还在争论二者目前谁更强势.谁又拥有着更为光明的发展前景,但毫无疑问,二者的竞争在 Web 前端领域已经拥有明确的答案.立足于浏览器平台,如果放 ...
- JavaScript 01
JavaScrip定义: JavaScript 是脚本语言,JavaScript 是一种轻量级的编程语言.JavaScript 是可插入 HTML 页面的编程代码. JavaScript五种基本类型: ...
- （四）javaweb 学习--javascript篇基础
文章目录 javascript (数据类型,方法) javascrip使用 javascrip使用进阶 HTML代码 CSS代码 javascript代码 javascrip使用进阶2 HTML代码 ...
- python学习四十四天(前端之HTML标签)
今日主要内容: web标准 浏览器内核 HTML介绍,规范,结构详解 字体标签 排版标签 超链接 图片标签 列表标签 <ul>.<ol>.<dl> 表格标签 < ...
- 001-2019-0124 前端Html
01-html介绍和head标签 主要内容 web标准 浏览器介绍 开发工具介绍 HTML介绍 HTML颜色介绍 HTML规范 HTML结构详解 一.web标准 web准备介绍: w3c:万维网联盟组 ...
- asp.net实现无刷新ajax技术登录界面
首先声明我是asp.net的初学者,有好多技术问题都不会,希望以后看到博客的技术大牛们,看到不对的和不好的,都能够提出: 1.首先用visual studio 2012新建一个asp.net网站,添加 ...
- 0521 HTML基础
一.web标准 web准备介绍: w3c:万维网联盟组织,用来制定web标准的机构(组织) web标准:制作网页遵循的规范 web准备规范的分类:结构标准.表现标准.行为标准. 结构:html.表示: ...
- html标签——内联标签(行内元素)
阅读目录 字体 粗体 斜体 上下标 划线 b em sup del strong i sub u 排版 span br 超链接 a 图片 img 回到顶部 字体标签 粗 ...
- Day 50 CSS剩余和初识JS
Day 50 CSS剩余和初识JS 定位流 一.相对定位就是相对于自己以前在标准流中的位置来移动 格式:position:relative: 需要配合以下四个属性一起使用:top:20pxleft:2 ...
最新文章
- 扩增子统计绘图3热图：样品相关分析，差异OTU/ASV
- 【JeeSite】用户管理
- noip2011day1题解
- emqx 使用端口_数据传输、存储、展现，EMQ X + TDengine 搭建 MQTT 物联网数据可视化平台...
- JAVA可阻塞队列-ArrayBlockingQueue
- javascript--一个简洁的管理菜单
- libpng的使用 | 在Linux系统下编译、安装与使用
- 17届智能车竞赛技术报告 | 常熟理工学院-昆承湖二队
- 好像有点看不懂，脑洞
- 台积电发年终奖，总额712亿新台币
- 解决Pycharm绘图报错：Error: failed to send plot to http://127.0.0.1:63342
- 微信小程序物流快递状态时间轴
- java模拟器安卓版钻石狂潮，王者笔记！
- 对比不同子载波数量下的OFDM和FBMC频谱matlab仿真
- Java_取模/取余
- 《The Wiley Handbook of Human Computer Interaction》翻译之Part XI
- 直线电机对比直线模组有哪些优点
- stm8 IAR 编译错误atal Error[Pe035]: #error directive: quot；Please select first the target STM8L device
- [移动应用]跨平台开发框架
- EasyExcel设定了表格底色但是不生效的问题
热门文章
- android 获取 第三方应用,android PackageManager的使用如何获取第三方应用程序(包)的信息，求大神指点...
- 聊聊Spring事务失效的12种场景，太坑人了
- 悬挑脚手架卸载钢丝绳要求_100m的悬挑脚手架技术交底
- 企业中常用的几种文件传输方法介绍
- java并发核心知识体系精讲_JAVA核心知识汇总
- mysql消重统计_mysql sql查询如何实现发私信用户和其他用户的列表？要求消重所有重复的用户结果 - 贪吃蛇学院-专业IT技术平台...
- 条令考试小程序辅助器_在线考试题库小程序开发有哪些功能？
- c#如何将多个json合并_合并两个c＃对象（json）列表作为父级子级
- 【c语言】输入天数，求这天是全年的第几周的第几天
- 除了 iOS 和 Android，世界第三大移动系统是什么？