python JavaScript
JavaScript
一. JavaScript
- Javascript 在开发中绝大多数情况是基于对象的.也是面向对象的.
a. JavaScript的引入方式
|
1
2
3
4
5
6
7
|
#直接编写 <script> alert('hello yuan') </script> #导入文件 <script src="hello.js"></script> |
二. BOM对象
a. window对象
所有浏览器都支持 window 对象。
概念上讲.一个html文档对应一个window对象.
功能上讲: 控制浏览器窗口的.
使用上讲: window对象不需要创建对象,直接使用即可.
方法
|
1
2
3
4
5
6
7
8
9
10
|
alert() 显示带有一段消息和一个确认按钮的警告框。confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。prompt() 显示可提示用户输入的对话框。open() 打开一个新的浏览器窗口或查找一个已命名的窗口。close() 关闭浏览器窗口。setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。clearInterval() 取消由 setInterval() 设置的 timeout。setTimeout() 在指定的毫秒数后调用函数或计算表达式。clearTimeout() 取消由 setTimeout() 方法设置的 timeout。scrollTo() 把内容滚动到指定的坐标。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#id1{
width:200px;
height:50px;
}
</style> </head>
<body> <input type="text" id="id1" onclick="begin()">
<button onclick="end()">停止</button> <script> function showTime() {
var current_time=new Date().toLocaleString();
var ele=document.getElementById("id1")
ele.value=current_time
} var clock1;
function begin() {
if(clock1==undefined){
showTime();
clock1=setInterval(showTime,1000)
}
} function end() {
clearInterval(clock1);
clock1=undefined
} </script> </body>
</html> setInterval clearInterval 时间框
setInterval clearInterval 时间框
#打印hello
window.alert("hello") #用户选择true或false
obj = window.confirm("hello word")
console.log(obj) #接收用户文本内容
obj = window.prompt("please input content")
console.log(obj) #open() 打开和一个新的窗口 并 进入指定网址
#参数1 什么都不填 就是打开一个新窗口.
#参数2.填入新窗口的名字(一般可以不填).
#参数3: 新打开窗口的参数.
open('http://www.baidu.com','','width=200,resizable=no,height=100'); windows 方法例子 alert confirm prompt open 例子
alert confirm prompt open 例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body> <script>
function f() {
console.log("hello...")
} setTimeout(f,1000) </script>
</body>
</html>
setTimeout 点赞功能可能用到，执行一次退出
b. history
History 对象包含用户（在浏览器窗口中）访问过的 URL。
History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。
方法
|
1
2
3
|
back() 加载 history 列表中的前一个 URL。forward() 加载 history 列表中的下一个 URL。go() 加载 history 列表中的某个具体页面。 |
-----------history1文件------
<a href="history2.html">clink</a>
<button onclick="history.forward()">button</button>
-----------history2文件--------
<button onclick="history.back()">back</button>
c. Location
Location 对象包含有关当前 URL 的信息。
Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。
方法
|
1
2
3
|
location.reload() #刷新页面location.assign(URL) #跳转页面，相当于链接，可以回退location.replace(newURL) #跳转页面，覆盖当前页面 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body> <button onclick="f()">click</button> <script> function f() {
location.reload()
} </script>
</body>
</html>
刷新页面
四. DOM对象(DHTML)
a. 什么是DOM？
|
1
2
3
4
5
6
7
8
9
10
11
|
#DOM 是 W3C（万维网联盟）的标准。DOM 定义了访问 HTML 和 XML 文档的标准：#"W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。"#W3C DOM 标准被分为 3 个不同的部分： #核心 DOM - 针对任何结构化文档的标准模型 #XML DOM - 针对 XML 文档的标准模型 #HTML DOM - 针对 HTML 文档的标准模型#什么是 XML DOM？ －－－－>XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。#什么是 HTML DOM？－－－－>HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。 |
b. DOM 节点
|
1
2
3
4
5
6
7
|
#根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点(NODE)： #整个文档是一个文档节点(document对象) #每个 HTML 元素是元素节点(element 对象) #HTML 元素内的文本是文本节点(text对象) #每个 HTML 属性是属性节点(attribute对象) #注释是注释节点(comment对象) #画dom树是为了展示文档中各个对象之间的关系，用于对象的导航。 |
节点(自身)属性:
|
1
2
3
4
5
|
attributes #节点（元素）的属性节点nodeType #节点类型nodeValue #节点值nodeName #节点名称innerHTML #节点（元素）的文本值 |
导航属性:
|
1
2
3
4
5
6
|
parentElement #父节点标签元素children #所有子标签firstElementChild #第一个子标签元素lastElementChild #最后一个子标签元素nextElementtSibling #下一个兄弟标签元素previousElementSibling #上一个兄弟标签元素 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="div1">
<p class="p1">hello p</p>
<div class="div1">hello div</div>
</div> <script>
var ele = document.getElementsByClassName("p1")[0];
console.log(ele);
console.log(ele.nodeName);
console.log(ele.nodeType);
console.log(ele.nodeValue);
console.log(ele.innerText)
</script>
</body>
</html> 节点(自身)属性 演示
节点(自身)属性 演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="div1">
<p class="p1">hello p</p>
<div class="div2">hello div</div>
</div> <script>
var ele = document.getElementsByClassName("p1")[0];
var ele2 = ele.parentNode; #父亲标签
console.log(ele2.nodeName);
var ele3 = ele.nextElementSibling; #兄弟标签
console.log(ele3.nodeName);
console.log(ele3.innerHTML)
</script>
</body>
</html> 导航属性 演示
导航属性 演示
c. 节点查找
直接查找
|
1
2
3
4
|
document.getElementById(“idname”)document.getElementsByTagName(“tagname”)document.getElementsByName(“name”)document.getElementsByClassName(“name”) |
局部查找
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1"> <div class="div2">i am div2</div>
<div name="yuan">i am div2</div>
<div id="div3">i am div2</div>
<p>hello p</p>
</div> <script> var div1=document.getElementById("div1"); var ele= div1.getElementsByTagName("p");
alert(ele.length); var ele2=div1.getElementsByClassName("div2");
alert(ele2.length);
</script>
</body>
</html> 局部查找只支持两种
局部查找只支持两种
d. DOM Event(事件)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
onclick 当用户点击某个对象时调用的事件句柄。ondblclick 当用户双击某个对象时调用的事件句柄。onfocus 元素获得焦点。 练习：输入框onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.onkeypress 某个键盘按键被按下并松开。onkeyup 某个键盘按键被松开。onload 一张页面或一幅图像完成加载。onmousedown 鼠标按钮被按下。onmousemove 鼠标被移动。onmouseout 鼠标从某元素移开。onmouseover 鼠标移到某元素之上。onmouseleave 鼠标从元素离开onselect 文本被选中。onsubmit 确认按钮被点击。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body> <div onclick="alert('单击事件')">单击事件</div>
<div ondblclick="alert('双击事件')">双击事件</div> <input type="text" value="请输入姓名" onfocus="enter(this)" onblur="exit(this)"> <script>
function enter(self){
self.value="";
} function exit(self){
if(self.value.trim()==""){
self.value="请输入姓名";
}
} </script> </body>
</html> onfocus onblur 表单输入例子
onfocus onblur 表单输入例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function () {
var ele=document.getElementsByClassName("div1")[0];
console.log(ele.innerText)
}
</script>
</head>
<body> <div class="div1">hello div</div> </body>
</html> onload js代码最后执行演示
onload js代码最后执行演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body> <select name="" class="select_pro">
<option value="">河南省</option>
<option value="">湖南省</option>
<option value="">云南省</option>
</select> <select name="" class="select_city"> </select> <script>
var info={"河南省":["郑州","洛阳","开封"],"湖南省":["湘潭","长沙","岳阳"],"云南省":["大理","昆明"]} var ele=document.getElementsByClassName("select_pro")[0];
var ele_2=document.getElementsByClassName("select_city")[0];
ele.onchange=function(){
var arrs=ele.children; var sindex=this.selectedIndex; // 得到一个数字 var province=arrs[sindex].innerText; // 得到省份
var citys_arr=info[province];
console.log(citys_arr); var ele2_children=ele_2.children; // for (var j=0;j<ele2_children.length;j++){
// ele_2.removeChild(ele2_children[0])
// } ele_2.options.length=0; // 清空select的子元素 for (var i=0;i<citys_arr.length;i++){ var option=document.createElement("option"); option.innerText=citys_arr[i];
ele_2.appendChild(option);
}
} </script>
</body>
</html> onchange 二级联动省份演示
onchange 二级联动省份演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
.outer{
margin: 0 auto;
background-color: darkgray;
width: 80%;
height: 600px;
margin-top: 30px;
word-spacing: -5px; } #left {
display: inline-block;
width: 100px;
height: 140px;
background-color: wheat;
text-align: center;
} #choice{
display: inline-block;
height: 140px;
background-color: darkolivegreen; vertical-align: top;
padding:0 5px;
} #choice button{
margin-top: 20px;
} #right{
display: inline-block;
width: 100px ;
height: 140px;
background-color: wheat;
text-align: center;
line-height: 140px; } </style>
</head>
<body> <div class="outer"> <select multiple="multiple" size="" id="left">
<option>红楼梦</option>
<option>西游记</option>
<option>水浒传</option>
<option>JinPingMei</option>
<option>三国演义</option>
</select> <span id="choice">
<button id="choose_move"> > </button><br>
<button id="all_move"> >> </button>
</span> <select multiple="multiple" size="" id="right">
<option>放风筝的人</option>
</select> </div> <script> var choose_move=document.getElementById("choose_move");
var all_move=document.getElementById("all_move"); var right=document.getElementById("right");
var left=document.getElementById("left");
var options=left.options; choose_move.onclick=function(){ for (var i=0; i<options.length;i++){ var option=options[i];
if(option.selected==true){ // var news=option.cloneNode(true);
// console.log(news); right.appendChild(option);
i--;
}
}
}; all_move.onclick=function(){ for (var i=0; i<options.length;i++){ var option=options[i]; right.appendChild(option);
i--; };
}; /*
var buttons=document.getElementsByTagName("button");
for(var i=0;i<buttons.length;i++) {
buttons[i].onclick = function () { for (var i = 0; i < options.length; i++) { var option = options[i]; if (this.innerText == ">") {
if (option.selected == true) { // var news=option.cloneNode(true);
// console.log(news); right.appendChild(option);
i--;
}
} else {
right.appendChild(option);
i--;
}
}
};
} */ </script> </body>
</html> select移动
select移动
e. 绑定事件方式
方式一： 标签内绑定
<div id="div" onclick="foo(this)">点我呀</div> <script>
function foo(self){ // 形参不能是this;
console.log("点你大爷!");
console.log(self);
}
</script>
方式二： 标签对象.事件=function(){}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body> <p>PPP</p>
<p>PPP</p>
<p>PPP</p> <script> //绑定方式二 标签对象.事件=function(){}; var eles =document.getElementsByTagName("p");
for (var i=0;i<eles.length;i++){
eles[i].onclick=function(){
alert(789);
}
} </script> </body>
</html>
f. 事件介绍
事件传播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title> <style>
.outer{
width: 200px;
height: 200px;
background-color: red; } .inner{
width: 100px;
height: 100px;
background-color: yellow; }
</style>
</head>
<body> <div class="outer">
<div class="inner"></div>
</div> <script>
var ele=document.getElementsByClassName("outer")[0];
ele.onclick=function(){
alert(123);
}; var ele2=document.getElementsByClassName("inner")[0];
ele2.onclick=function(e){
alert(456); e.stopPropagation();
}
</script>
</body>
</html> stopPropagation 阻止外层的事件传向内层
stopPropagation 阻止外层的事件传向内层
onkeydown:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<body>
<input type="text" id="d1"> <script>
var ele=document.getElementById("d1");
ele.onkeydown=function (e) {
var num=e.keyCode;
var alph=String.fromCharCode(num);
alert(e.keyCode+"-----"+alph)
}
</script> </body>
</html> onkeydown 演示
onkeydown 演示
onmouseout与onmouseleave事件的区别：
|
1
2
3
|
#1.不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。#2.只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#container{
width:300px;
background-color: purple;
text-align: center;
}
#title{
line-height: 50px;
}
#list{
display: none;
}
#list div{
line-height: 50px;
}
#list .item1{
background-color: green;
}
#list .item2{
background-color: yellow;
}
#list .item3{
background-color: blue;
}
</style> </head>
<body> <div id="container">
<div id="title">mouseout演示</div>
<div id="list">
<div class="item1">111</div>
<div class="item2">222</div>
<div class="item3">333</div>
</div>
</div> <script> var container=document.getElementById("container");
var list=document.getElementById("list");
var title=document.getElementById("title"); title.onmouseover=function () {
list.style.display="block"
} container.onmouseleave=function(){
list.style.display="none";
}; </script> </body>
</html>
onsubmit
|
1
|
当表单在提交时触发. 该属性也只能给form元素使用.应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交. |
Event 对象：
|
1
2
3
|
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行！event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.比如onkeydown,我们想知道哪个键被按下了，需要问下event对象的属性，这里就时KeyCode； |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <script> window.onload=function(){
//阻止表单提交方式1().
//onsubmit 命名的事件函数,可以接受返回值. 其中返回false表示拦截表单提交.其他为放行. var ele=document.getElementById("form");
ele.onsubmit=function(event) {
// alert("验证失败 表单不会提交!");
// return false; // 阻止表单提交方式2 event.preventDefault(); ==>通知浏览器不要执行与事件关联的默认动作。
alert("验证失败 表单不会提交!");
event.preventDefault(); } }; </script>
</head>
<body> <form id="form">
<input type="text"/>
<input type="submit" value="点我!" />
</form> </body>
</html> 阻止事件发生 两种演示
阻止事件发生 两种演示
g. 节点操作
创建节点：
|
1
2
3
4
|
createElement(标签名) ：创建一个指定名称的元素。例：var tag=document.createElement(“input") tag.setAttribute('type','text'); |
添加节点：
|
1
2
3
4
5
|
追加一个子节点（作为最后的子节点）somenode.appendChild(newnode) 把增加的节点放到某个节点的前边somenode.insertBefore(newnode,某个节点); |
删除节点：
|
1
|
removeChild()：获得要删除的元素，通过父元素调用删除 |
替换节点：
|
1
|
somenode.replaceChild(newnode, 某个节点); |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
.div1,.div2,.div3,.div4{
width: 300px;
height: 200px;
}
.div1{
background-color: green;
}
.div2{
background-color: red;
}
.div3{
background-color: blue;
}
.div4{
background-color: lemonchiffon;
}
</style> </head>
<body> <div class="div1">
<button onclick="add()">add</button>
div1</div> <div class="div2">
<button onclick="del()">del</button>
div2</div>
<div class="div3">
<button onclick="change()">change</button>
<p>div3</p>
</div>
<div class="div4">div4</div> <script> // 把div3 的p改变为image
function change() {
var img=document.createElement("img");
img.src="meinv.png"; var ele=document.getElementsByTagName("p")[0];
var father=document.getElementsByClassName("div3")[0];
father.replaceChild(img,ele)
} // 删除p元素
function del() {
var father=document.getElementsByClassName("div1")[0];
var son=father.getElementsByTagName("p")[0]
father.removeChild(son)
} // 增加p元素
function add() {
var ele=document.createElement("p");
ele.innerHTML="hello p"; var father=document.getElementsByClassName("div1")[0];
father.appendChild(ele)
} </script> </body>
</html> 增 删 改 查 演示
增 删 改 查 演示
h. 节点属性操作：
a. 改变 HTML 内容
|
1
|
改变元素内容的最简答的方法是使用 innerHTML ，innerText。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
.div1{
width: 300px;
height: 200px;
}
.div1{
background-color: green;
} </style> </head>
<body> <div class="div1">
<button onclick="add()">add</button>
div1</div> <script> function add() {
var ele=document.createElement("p");
ele.innerHTML="<h1>hello p</h1>"; var father=document.getElementsByClassName("div1")[0];
father.appendChild(ele)
} </script> </body>
</html> 改变元素内容 演示
改变元素内容 演示
b. 改变 CSS 样式
|
1
2
3
4
5
|
<p id="p2">Hello world!</p><script>document.getElementById("p2").style.color="blue";</script> |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
.div1{
width: 300px;
height: 200px;
}
.div1{
background-color: green;
} </style> </head>
<body> <div class="div1">
<button onclick="add()">add</button>
div1</div> <script> function add() {
var ele=document.createElement("p");
ele.innerHTML="<h1>hello p</h1>";
ele.style.color="red";
ele.style.fontSize="10px"; var father=document.getElementsByClassName("div1")[0];
father.appendChild(ele)
} </script> </body>
</html> 改变CSS样式 演示
改变CSS样式 演示
c.改变 HTML 属性
|
1
2
3
|
elementNode.setAttribute(name,value)elementNode.getAttribute(name)<-------------->elementNode.value(DHTML) |
f. 关于class的操作
|
1
2
3
|
elementNode.classNameelementNode.classList.addelementNode.classList.remove |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div class="div1 div2">div1</div> <script>
var ele=document.getElementsByTagName("div")[0]; console.log(ele.className);
console.log(ele.classList[0]);
ele.classList.add("hide");
console.log(ele.className)
</script> </body>
</html> class操作 演示
class操作 演示
五. 案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<body> <button onclick="select('all');">全选</button>
<button onclick="select('cancel');">取消</button>
<button onclick="select('reverse');">反选</button> <table border="" id="Table">
<tr>
<td><input type="checkbox"></td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>333</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>444</td>
</tr>
</table> <script>
function select(choice){
var ele=document.getElementById("Table"); var inputs=ele.getElementsByTagName("input");
for (var i=0;i<inputs.length;i=i+1){ var ele2=inputs[i];
if (choice=="all"){
ele2.checked=true; }else if(choice=="cancel"){
ele2.checked=false;
}
else { if (ele2.checked){
ele2.checked=false;
}else {
ele2.checked=true;
}
} }
}
</script> </body>
</html> 表格 全选 反选 取消 演示
表格 全选 反选 取消 演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
h1{
background-color: darkgray;
color: red;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body> <h1 class="title">欢迎方少伟sb</h1>
<script>
function test(){
var ele=document.getElementsByClassName("title")[0];
// console.log(ele)
// console.log(ele.innerText);
// console.log(typeof ele.innerText);
var content=ele.innerText;
var fist_char=content.charAt(0);
var later_string=content.substring(1,content.length);
var new_content=later_string+fist_char; // 赋值操作
ele.innerText=new_content;
} setInterval(test,1000);
</script>
</body>
</html> 跑马灯例子
跑马灯例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content{
height: 1800px;
background-color: grey;
} .shade{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: yellow;
opacity: 0.3;
} .mode1{
width: 200px;
height: 200px;
background-color: bisque;
position: absolute;
top:50%;
left: 50%;
margin-top: -100px;
margin-left: -100px; } .hide{
display: none;
} </style>
</head>
<body>
<div class="content">
<button onclick="show()">show</button>
</div> <div class="shade hide"></div> <div class="mode1 hide">
<button onclick="cancle()">cancle</button>
</div> <script> function show() {
var ele_share=document.getElementsByClassName("shade")[0];
var ele_mode1=document.getElementsByClassName("mode1")[0]; ele_share.classList.remove("hide");
ele_mode1.classList.remove("hide");
} function cancle() {
var ele_share=document.getElementsByClassName("shade")[0];
var ele_mode1=document.getElementsByClassName("mode1")[0]; ele_share.classList.add("hide");
ele_mode1.classList.add("hide"); }
</script> </body>
</html> 模态对话框
模态对话框
python JavaScript的更多相关文章
- 日历的问题C语言,C++(boost),python,Javascript,Java和Matlab实现
今天看到一个很有意思的话题,例的标题叙述性描述,下面: 根据以下信息来计算1901年1月1至2000年12月31适逢星期日每个月的第一天的合伙人数量? a) 1900.1.1星期一 b) 1月,3 ...
- Python JavaScript概述
一.如何编写? 1.JavaScript代码存在形式 <!DOCTYPE html> <html> <head> <meta http-equiv=" ...
- 关于php,python,javascript文件或者模块导入引入的区别和联系
前言: 我们经常看到编程语言之间,文件或者模块的引来引去的,但是他们在各个编程语言之间有什么区别和联系呢? 1.javascript (1).全局引入方式: <script src='xxxxx ...
- 编程开发(C/C++&Java&Python&JavaScript&Go&PHP&Ruby&Perl&R&Erlang)
使用Docker快速部署主流编程语言的开发.编译环境及其常用框架,包括C.C++.Java.Python.JavaScript.Go.PHP.Ruby.Perl.R.Erlang等. 在今后采用编程语 ...
- [Python]JavaScript VS Python 函数
js function 相当于 python def js语句结束符; python为缩进符 JavaScript /*定义*/ function 函数名(参数1,参数2,参数3...){ 函数体 } ...
- Python javascript操作DOM
文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把 ...
- No.15 selenium for python JavaScript
JS处理滚动条 一.上下滚动 1.滚动条回到顶部: js="var q=document.documentElement.scrollTop=10000" driver.execu ...
- Python协程与JavaScript协程的对比
前言 以前没怎么接触前端对JavaScript 的异步操作不了解,现在有了点了解一查,发现 python 和 JavaScript 的协程发展史简直就是一毛一样! 这里大致做下横向对比和总结,便于对这 ...
- 初始JavaScript
本文是笔者在看廖雪峰老师的JavaScript教程时的总结 一.加载 JavaScript 1.直接在html语句中写入JavaScript语句 2.在html ...
随机推荐
- Go a lot of way but I go back to the original point
I try a lot of blog platform and even construct my blog website. But I have to say I just want to ha ...
- 11 个简单的 Java 性能调优技巧
大多数开发人员理所当然地以为性能优化很复杂,需要大量的经验和知识.好吧,不能说这是完全错误的.优化应用程序以获得最佳性能不是一件容易的事情.但是,这并不意味着如果你不具备这些知识,就不能做任何事情.这 ...
- 简单的 Promise 实现 一
const Promise = function(fn){ let state = { pending: "pending", fulfilled: "fulfilled ...
- mysql存储过程(查询数据库内表 游标循环 if判断 插入别的表内)
BEGIN declare f_age int;DECLARE incode1 VARCHAR(100);DECLARE incode2 VARCHAR(100);DECLARE incode3 VA ...
- 微信公众号开发，weUi组件，问题总结
1.实现上拉分页,Google兼容问题,weui框架提供的模板是这样的($(document.body).infinite()),在body定一个div通过这个div,实现上拉 $('#wrapper ...
- js中的Hook
1. 简单理解: hook(钩子)就是: 把将要执行的的函数或者一系列动作注册到一个统一的接口下面, 当应用程序调用此接口(即hook)时,就等于调用了这一系列动作.
- Vue解析一之挂载全局变量与方法
1.在mian.js里面进行Vue对象的原型连的挂载Vue.prototype.$ajax = Ajax; 2.使用Mixin: VuVue.mixin({ data(){ return { Host ...
- Webpack的加载器
一.什么是加载器(loaders)loaders 用于转换应用程序的资源文件,他们是运行在nodejs下的函数 使用参数来获取一个资源的来源并且返回一个新的来源(资源的位置),例如:你可以使用load ...
- Orcle查询优化改写-----单表查询
1.将空值转化为实际值 coalesce 返回第一个不是null的参数 2.查询满足多个条件的行 需要注意,对于多个条件组合,要使用括号,这样在更改维护语句时可以不吸烟再考虑优先级问题,而且可以很容 ...
- python中Properties的一些小用法
property最大的用处就是可以为一个属性制定getter,setter,delete和doc,他的函数原型为: def __init__(self, fget=None, fset=None, f ...