python之路 Javascript的学习 - my-soul
1.JavaScript 被设计用来向 HTML 页面添加交互行为。
2.JavaScript 是一种脚本语言（脚本语言是一种轻量级的编程语言）。
3.JavaScript 由数行可执行计算机代码组成。
4.JavaScript 通常被直接嵌入 HTML 页面。
5.JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）。
javascript能做什么
表单数据验证：表单数据验证是JavaScript最基本也是最能体现效率的功能。
动态HTML（即DHTML）：动态HTML指不需要服务器介入而动态变化的网页效果，包括动态内容、动态格式、动态布局等。
用户交互：用户交互指根据用户的不同操作进行的响应处理。例如：联动菜单等。
少量数据查找：能够实现在当前网页中进行字符串的查找和替换。
AJAX核心技术：AJAX即异步JavaScript+XML。该对象提供一种支持异步请求的技术，使客户端可以使用JavaScript向服务器提出请求并处理响应，但并不影响用户在客户端的浏览。
javascript的书写方式
第一种：写到整个网页内容中最下面（原则：将所有内容加载出来再出现所要互动的效果）
<script>
sdfsdfsdfsd
<script>
第二种：通过连接一个文件来实现
<script src=”a.js”></script>
javascript的输出方式
<script >
alert(sdfsdf)
console.log(sdfsdfsdfsdf)
</script>
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 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <marquee behavior="" direction="">my nane is liwenqiang</marquee> 9 10 </body> 11 </html>
View Code
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div id="wel">欢迎光临</div> 9 10 </body> 11 <script> 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 </script> 23 </html>
View Code
数组
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<arr.length;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
比较运算符：
> >= < <= != == === !==
三个等于相当于全部相等（数值和数据类型都相等）
逻辑运算符：
&& || ！
赋值运算符：
= += -= *= /=
字符串运算符：
+ 连接，两边操作数有一个或两个是字符串就做连接运算
流程控制
顺序结构
代码一行一行向下执行
<script>
console.log(“吃饭”);
console.log(“睡觉”);
console.log(“打豆豆”);
</script>
分支结构
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 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div id="clock"> 9 10 </div> 11 12 </body> 13 <script> 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 </script> 30 </html>
View Code
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 = “<p>要显示内容</p>”;
案例：输入框搜索关键字(focus, blur)
操作样式属性方法
创建节点方法
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <script src="jquery-3.1.1.js"></script> 6 <title>Title</title> 7 </head> 8 <body> 9 <div id="myinput"> 10 11 </div> 12 13 </body> 14 <script> 15 var myinput = document.getElementById("myinput"); 16 // var tag = "<input type=\'text\' />"; 17 // myinput.insertAdjacentHTML(\'beforeEnd\',tag); 18 var myipt = document.createElement("input"); // <input type=""> 19 myipt.setAttribute("type","button"); 20 myipt.setAttribute("value","点击"); 21 myinput.appendChild(myipt); 22 23 </script> 24 </html>
View Code
1.字符串的方式创建：
var tag = “<input type=\’text\’ />”;
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 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <input type="button" value="全选" onclick="selectAll();"> 9 <input type="button" value="取消" onclick="cancleAll();"> 10 <input type="button" value="反选" onclick="reverseAll();"> 11 <table border="1"> 12 <thead> 13 <tr> 14 <th>操作</th> 15 <th>ip</th> 16 <th>端口</th> 17 </tr> 18 </thead> 19 <tbody id="info"> 20 <tr> 21 <td><input type="checkbox"></td> 22 <td> </td> 23 <td> </td> 24 </tr> 25 <tr> 26 <td><input type="checkbox"></td> 27 <td> </td> 28 <td> </td> 29 </tr> 30 <tr> 31 <td><input type="checkbox"></td> 32 <td> </td> 33 <td> </td> 34 </tr> 35 </tbody> 36 </table> 37 38 </body> 39 <script> 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<Mytrs.length;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<Mytrs.length;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<Mytrs.length;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 </script> 89 </html>
View Code
模态框：间接查找（三层实例）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 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 </style> 32 </head> 33 <body> 34 <div> 35 <input type="button" value="点击" onclick="showMode();"/> 36 </div> 37 <div class="one hide"> 38 </div> 39 <div class="info hide"> 40 <p><input type="text"></p> 41 <p><input type="text"></p> 42 <span><input type="button" value="确定"></span> 43 <span><input type="button" value="取消" onclick="hideMode();"></span> 44 </div> 45 46 </body> 47 <script> 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 </script> 61 62 </html>
View Code
使用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 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <form action="http://www.baidu.com"> 9 <input type="text" id="user" name="user" /> 10 <input type="submit" value="提交" onclick="return func();" /> 11 </form> 12 13 </body> 14 <script> 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 </script> 25 </html>
View Code
绑定方式2：
鼠标点击文本框，文本框中的提示内容消失，如果点击文本框外部，文本框中的内容出现。（获取焦点onfoucs、失去焦点onblur）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <input type="text" value="请输入关键字" onfocus="fuckFoucs(this)"; onblur="fuckBlur(this);" /> 9 <input type="button" value="提交"/> 10 <script> 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 </script> 27 </body> 28 </html>
View Code
阻止默认事件发生：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <script src="jquery-3.1.1.js"></script> 6 <title>Title</title> 7 </head> 8 <body> 9 10 <a href="http://www.baidu.com" onclick=" return func();">揍你</a> 11 12 <script> 13 function func() { 14 alert(123); 15 return false; 16 } 17 </script> 18 </body> 19 </html>
View Code
第二种方式：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <script src="jquery-3.1.1.js"></script> 6 <title>Title</title> 7 </head> 8 <body> 9 10 <a href="http://www.baidu.com" id="i1">揍你</a> 11 <script> 12 document.getElementById(\'i1\').onclick = function () { 13 alert(123); 14 return false; 15 } 16 </script> 17 </body> 18 </html>
View Code
实例：用户提交数据（没有填写内容）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <script src="jquery-3.1.1.js"></script> 6 <title>Title</title> 7 </head> 8 <body> 9 <form action="http://www.baidu.com"> 10 <input type="text" id="user" name="user" /> 11 <!--<input type="submit" value="提交" onclick="return func();" />--> 12 <input type="submit" id="sb" value="提交" /> 13 </form> 14 <script> 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 </script> 34 </body> 35 </html>
View Code
绑定多个相同的事件
document.getElementById(\’i1\’).addEventListener(\’click\’,function () {
console.log(2);
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <script src="jquery-3.1.1.js"></script> 6 <title>Title</title> 7 8 </head> 9 <body> 10 11 <div id="i1" onclick="console.log(1);" >鸡建明</div> 12 <script> 13 // document.getElementById(\'i1\').onclick = function () { 14 // console.log(2); 15 // } 16 document.getElementById(\'i1\').addEventListener(\'click\',function () { 17 console.log(2); 18 }) 19 </script> 20 </body> 21 </html>
View Code
– 事件执行顺序：
– 捕获 true
– 冒泡
document.getElementById(\’i1\’).addEventListener(\’click\’,函数,true或者false)
– event是当前事件的信息
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <script src="jquery-3.1.1.js"></script> 6 <title>Title</title> 7 </head> 8 <body> 9 <!--<div id="i1" style="height: 400px;width: 400px;background-color: red" onclick="alert(1);">--> 10 <!--<div id="i2" style="height: 300px;width: 300px;background-color: green" onclick="alert(2);">--> 11 <!--<div id="i3" style="height: 200px;width: 200px;background-color: antiquewhite" onclick="alert(3);"></div>--> 12 <!--</div>--> 13 <!--</div>--> 14 <div id="i1" style="height: 400px;width: 400px;background-color: red" > 15 <div id="i2" style="height: 300px;width: 300px;background-color: green" > 16 <div id="i3" style="height: 200px;width: 200px;background-color: antiquewhite" ></div> 17 </div> 18 </div> 19 20 <script> 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 </script> 29 30 </body> 31 </html>
View Code
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <script src="jquery-3.1.1.js"></script> 6 <title>Title</title> 7 </head> 8 <body> 9 <input type="text" onkeydown="func(this,event);" /> 10 11 <script> 12 function func(ths,e) { 13 console.log(ths,e); 14 } 15 window.onkeydown = function(e){ 16 console.log(e); 17 } 18 19 </script> 20 </body> 21 </html>
View Code