python学习笔记十三 JS,Dom(进阶篇)
JS介绍
JavaScript 是属于网络的脚本语言!JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies,以及更多的应用;JavaScript 是因特网上最流行的脚本语言。
JavaScript 与 Java 是两种完全不同的语言,无论在概念还是设计上。
- Java(由 Sun 发明)是更复杂的编程语言。
- ECMA-262 是 JavaScript 标准的官方名称。
- JavaScript 由 Brendan Eich 发明。它于 1995 年出现在 Netscape 中(该浏览器已停止更新),并于 1997 年被 ECMA(一个标准协会)采纳。
1.存在方式
<!-- 方式一 -->
<script type"text/javascript" src="JS文件"></script> <!-- 方式二 -->
<script type"text/javascript">
Js代码内容
</script>
2.存放位置
JavaScript脚本通常放置在三个位置:
- HTMlL中的head部分
- HTML中的body部分最底部(推荐)
- 单独以.js结尾的文件
为什么会推荐放置在body部分的最底部?因为html是从上往下执行的,假设有js文件或者js执行耗时比较久的话,下面的html代码就无法执行了。
所以放置在body代码块底部,那么即使js代码耗时严重,也不会影响用户看到页面效果,只是js实现特效慢而已。
<script src="https://www.gstatic.com/og/_/js/k=og.og2.en_US.iF4jnkQuaf0.O/rt=j/t=zcms/m=def/exm=in,fot/d=1/ed=1/rs=AA2YrTv5-POC4Ks9GtGRdY2ywUWisqz7-Q"></script>
<script>
alert('time_out');
</script>
3.变量的定义
变量定义 JavaScript中变量的声明是一个非常容易出错的点,局部变量必须一个 var 开头,如果未使用var,则默认表示声明的是全局变量(跟python的使用习惯不太相同),使用全局变量会出现意想不到的bug 慎用。
4、基本数据类型
数字类型的4种定义:
//1
var age = 18;
console.log(age,typeof age);
//2
Number("1234");
//3
parseInt(num);
//4
parseFloat(num); var age = 18;
console.log(parseInt(age),typeof age)
var num = 18.9
console.log(name,typeof name);
//通过chrome浏览器 审查元素, console控制台菜单栏, 可以进入浏览器解释器
字符串的定义和方法
var n = "ajax";
var name = String("koka");
var age_str =String(18);
//字符串方法
var t1 = "abc def "
//trim == strip()去除两边空格
t1.trim()
"abc def"
t2 = t1.trim()
"abc def"
t2
"abc def"
var test = "aaaa bbb cc d "
//读取一个字符,传入下标
test.charAt(0)
"a"
test.charAt(1)
"a"
test.charAt(2)
"a"
//substring == [:] 列表分片
test.substring(0,5)
"aaaa "
// indexOf == list.index(char) 查看字符index
test.indexOf("a")
0
test.indexOf("b")
5
test.length
14
bool类型
//bool
var status = true
status
"true"
var status = Boolean(1==1)
status
"true"
数组(array)
//Arrary
var names = ['alex', 'tony', 'eric']
var names = Array('alex', 'tony', 'eric')
//添加
names.push("bob")
4
names
["alex", "eric", "john", "bob"]
//从左边添加
names.unshift("nike")
5
names
["nike", "alex", "eric", "john", "bob"]
//指定位置插入,第二个值必须是0
names.splice(2,0,"ajax")
names
["nike", "alex", "ajax", "eric", "john", "bob"]
//列表分片
names.slice(1,3)
["alex", "ajax"] //字符串化
names.join("_")
"nike_alex_ajax_eric_john_bob"
names
["nike", "alex", "ajax", "eric", "john", "bob"] //长度
names.length
6
字典
var items = {"k1":123,"k2":"tonyAlen"}
items
Object {k1: 123, k2: "tonyAlen"}
5、js循环语句
var li = [11,22,33,44];
//for循环 数组方式一
for(var index in li) {
console.log(index,li[index]);
//循环的结果是 下标 0,1,2,3
} /for 循环 数组方式二
for (var i=0;i<li.length;i++){
console.log(i,li[i]);
} //for 循环 字典
var dic = {"k1":123,"k2":456};
for(var key in dic){
console.log(key,dic[key]);
} //while循环 break,continue
while(true){
console.log("loop");
break;
}
6、js条件语句
if(name == "ajax"){
console.log("got it")
}
else if(name == "alex"){
console.log("alex")
}
else{
console.log("others")
}
// switch,case语句
var name = 1
switch(name){
case "1":
age = 123;
break;
case "2":
age = 456;
break;
default:
age = 888;
}
7、异常处理(与python类似)
try{
var n = m;
//catch<=>except
}catch(e){
console.log(e)
}finally{
console.log("finally")
}
8、函数
//函数定义方式
//普通函数
function f1(arg) {
console.log(arg);
return "alex";
}
f1("1111");
var ret = f1(123);
console.log(ret); // 自动执行函数 定义完自己调用
(function(arg){
console.log(111,arg);
})("alex"); //匿名函数
var f = function(arg) {
onsole.log(arg);
};
f("123456");
9、面向对象
//面向对象式函数定义
function Foo(name,age){
this.Name = name;
this.Age = age;
this.Func = function(arg){
return this.Name + arg;
}
} var obj = new Foo("ajax",18);
ret = obj.Func("ok");
console.log(obj.Name);
console.log(obj.Age);
console.log(ret);
HTML DOM (文档对象模型)
文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。
我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容。
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
HTML DOM 模型被构造为对象的树。
HTML DOM 树
查找元素,有三种方法来做这件事:
- 通过 id 找到 HTML 元素
- 通过标签名找到 HTML 元素
- 通过类名找到 HTML 元素
选择器
通过 id 找到 HTML 元素
<script>
//按照ID查找 返回一个元素
var nid = document.getElementById("n1");
//innerText修改值
nid.innerText="koka";
</script>
通过标签名找到 HTML 元素
<script>
//返回一个列表
var lis = document.getElementsByTagName("li");
for(var i in lis){
var item = lis[i];
item.innerText = i; //innerText修改指定的字符串
}
//按标签查找
//添加下标 查找具体的值
var lis = document.getElementsByTagName("li")[0];
lis.innerText = "1231321321";
</script>
通过类名找到 HTML 元素
<script>
//按类名查找
var lis2 = document.getElementsByClassName("c1");
for(var i in lis2){
var item = lis2[i];
item.innerText = i;
}
</script>
获取和修改HTML内容
innerText
获取标签中间的文本内容
<div>
<div id="n1">c1</div>
<a>asdfgefg</a>
</div>
<script>
var nid = document.getElementById("n1");
//innerTex修改值
nid.innerText="abc";
</script> 输出:
asdfgefg
innerHTML
获取标签中间的html内容
假设我想要获取标签中的所有内容,不单单是标签的中间值,使用innerHTML即可
<div id="n1">
XXXX
<h1>YYYY</h1>
</div>
<script>
var nid = document.getElementById("n1");
//获取div中的所有内容
console.log(nid.innerHTML);
</script> console result: XXXX
<h1>YYYY</h1>
特殊的获取
input系列
textarea标签
select标签
value属性操作用户输入和选择的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="n2" type="text" value="请输入内容">
<select id="n3">
<option>北京</option>
<option>上海</option>
<option>广州</option>
</select>
<textarea id="n4">默认值</textarea>
<p><input type="button" value="获取值" onclick="Getvalue();" /></p> <script type="text/javascript">
function Getvalue(){
var obj1 = document.getElementById("n2");
alert(obj1.value);
obj1.value=""; var obj2 = document.getElementById("n3");
alert(obj2.value);
obj2.value = "2"; var obj3 = document.getElementById("n4");
alert(obj3.value);
obj3.value = "123456789";
}
</script>
</body>
</html>
事件
HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。
什么是事件? 点击一下鼠标,按下键盘均可称为事件;
对事件做出反应?我们可以在事件发生时执行 JavaScript,比如当用户在 HTML 元素上点击时。
绑定事件:
使用事件属性向 h1元素分配 onclick 事件:
<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>
通过使用 JavaScript 来向 HTML 元素分配事件:
<h1 id="t1">请点击该文本</h1>
<script>
document.getElementById("t1").onclick=function(){this.innerHTML="谢谢!"};
</script>
事件包含:
常用事件:
- onclick
- onblur
- onfocus
- ...
自增计数器示例:
onclick:点击
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<div id = "num">
1
</div>
<!--该input标签绑定事件驱动-->
<input type="button" value="+1" onclick="Add();" />
</div>
<script>
function Add(){
/*
1.找到num
2.获取内容
3.每点击一次自增1
*/
var nid = document.getElementById("num"); //通过id查找元素
var text = nid.innerText; //innerText获取文本内容
text = parseInt(text);
text += 1;
nid.innerText = text;
}
</script>
</body>
</html>
搜索框示例:
onfocus:元素获取焦点
onblur: 元素失去焦点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
//该标签绑定事件,从这可以看出一个标签可以绑定多个事件
<input type="text" id="search" value="请输入关键字" onfocus="Focus();" onblur="Blur();"/>
<script type="text/javascript">
//当input标签被选中时触发事件,执行以下操作。
function Focus() {
//查找元素
var nid = document.getElementById("search");
//获取内容 value属性操作用户输入和选择的值适用于
input,select,textarea标签
var value = nid.value;
//判断input标签的value输入空或"请输入关键字"
if (value == "请输入关键字" || value.trim()=='') {
nid.value = "";
}
}
//当input标签失去焦点即不被选中后,执行以下操作
function Blur(){
var nid = document.getElementById("search");
var value = nid.value;
//未输入任何内容,继续提示请输入关键字
if(!value.trim()){
nid.value = "请输入关键字"
}
}
</script>
</body>
</html>
创建标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="container" style="font-size: 14px;color: red;">aaaaaaa</div>
<!--默认a标签会跳转,但是当我们设置onclick事件后,先执行自定义事件,再执行默认事件,假设你不想让你的a标签执行-->
<!--默认事件,执行完自定义事件后返回false,默认事件就不再执行了。-->
<a href="http://www.baidu.com" onclick="return AddElement();">添加</a>
<script>
function AddElement(){
// 方式一
//创建对象的方式
var obj = document.createElement('a');
obj.href = "http://www.python.org";
obj.innerText = "Python";
var container = document.getElementById('container');
//默认右边追加
container.appendChild(obj);
//container.insertBefore(obj, container.firstChild);
//container.insertBefore(obj, document.getElementById('hhh')); // 方式二
// 创建标签 创建字符串的方式
var container = document.getElementById('container');
var obj = "<input type='text' />";
//container.innerHTML = obj; 只能创建一次
//'beforeBegin', 'afterBegin', 'beforeEnd', 'afterEnd'
container.insertAdjacentHTML("afterEnd",obj);//反复添加
return false
}
</script>
</body>
</html>
标签属性
自定义属性(通用):
obj.setAttribute(name,value)
obj.getAttribute(name)
obj.removeAttribute(name)
<div id="container" custom="xxoo" class="c1" style="font-size:48px;color:red;">
</div>
<script>
var obj = document.getElementById('container');
obj.setAttribute("db","ds")
obj.setAttribute("class","c2")
obj.removeAttribute("custom")
obj.getAttribute("db")
</script>
固定属性:
对于标签属性 通过js和dom都是可以修改和移除的。通常通过查找到的 对象.属性 即可获取到该属性的值,但是有些属性是不包含在标签内的,比如div是没有name属性,需要通过自定义
属性设置.
<div id="container" sb="xx" class="c1" style="font-size: 48px;color: red;">
</div>
<script>
var obj = document.getElementById('container');
obj.id
obj.id = "nid"
obj.className //特殊 获取class需要指定className
obj.style.fontSize = "88px"; //特殊 style包含多个属性集合,获取style属性时,需要进入 obj.style.属性; font-size属性特殊属性通过fontSize获取。
</script>
提交表单示例:
通过input的submit也可以提交表单,也可以通过事件实现提交表单功能,同时我们还想对提交表单进行检测不希望出现有空的提交项。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="form1" action="https://www.sogou.com/web" method="get">
<input name="query" type="text"/>
<!--验证,通过onclick事件绑定js提交 上面已经提到过,默认执行自定义函数,定义返回值 返回true才执行默认submit事件,否则不提交-->
<input type="submit" onclick="return MySubmit();" value="提交验证" />
<!--非验证,通过submit提交-->
<input type="submit" value="submit" />
<!--非验证,通过onclick事件绑定js提交-->
<div onclick="return Submit();">提交事件</div>
</form>
<script>
function MySubmit(){
var q = document.getElementsByName('query')[0];
if(q.value.trim()){
return true;
}else{
alert('请输入内容');
return false;
}
}
function Submit(){
//dom 的submit方法也支持提交表单
document.getElementById('form1').submit();
}
</script>
</body>
</html>
其他
setInterval("alert()",2000); //每隔多少秒执行一次
clearInterval(obj) //清除执行任务
setTimeout(); //只执行一次
clearTimeout(obj) //清除任务 cofirm //弹出提示框,返回true和false // URL和刷新
location.href //获取当前url
location.href = "url"
window.location.reload() //刷新或跳转
confirm示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="上来呀" onmouseover="MyConfirm();" />
<script>
function MyConfirm(){
var ret = confirm("SB");
console.log(ret);
}
</script>
</body>
</html>
跑马灯示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎OBJ莅临指导 </title>
</head>
<body>
<input type="button" onclick="StopInterval();" value="停下来" />
<script>
//每隔多少秒执行一次
setInterval("Go()",1000);
function StopInterval(){
//清除定时器
clearInterval(obj1)
}
function Go(){
//获取字符串
var content = document.title;
//获取首字母
var firstChar = content.charAt(0)
//获取除首字母
var sub = content.substring(1,content.length)
//组合新的字符串
document.title = sub + firstChar;
}
</script>
</body>
</html>
python学习笔记十三 JS,Dom(进阶篇)的更多相关文章
- python 学习笔记十一 SQLALchemy ORM(进阶篇)
SqlAlchemy ORM SQLAlchemy是Python编程语言下的一款ORM框架,该框架建立在数据库API之上,使用关系对象映射进行数据库操作,简言之便是:将对象转换成SQL,然后使用数据A ...
- python学习笔记七 初识socket(进阶篇)
socket socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,应用程序通常通过"套接字"向网络发出请求或者应答网络请求. sock ...
- python学习第十六天 --继承进阶篇
这一章节主要讲解面向对象高级编程->继承进阶篇,包括类多继承介绍和继承经典类和新式类属性的查找顺序不同之处. 多继承 上一章节我们讲到继承,子类继承父类,可以拥有父类的属性和方法,也可以进行扩展 ...
- python 学习笔记十三 JQuery(进阶篇)
jQuery 是一个 JavaScript 库. jQuery 极大地简化了 JavaScript 编程. 安装jQuery 有两个版本的 jQuery 可供下载: Production versio ...
- python学习之路-5 基础进阶篇
本篇涉及内容 双层装饰器字符串格式化 双层装饰器 装饰器基础请点我 有时候一个功能需要有2次认证的时候就需要用到双层装饰器了,下面我们来通过一个案例详细介绍一下双层装饰器: 执行顺序:自上而下 解释顺 ...
- python学习笔记二 数据类型(基础篇)
Python基础 对于Python,一切事物都是对象,对象基于类创建 不同类型的类可以创造出字符串,数字,列表这样的对象,比如"koka".24.['北京', '上 ...
- Python学习笔记【第十五篇】:Python网络编程三ftp案例练习--断点续传
开发一个支持多用户在线的FTP程序-------------------主要是学习思路 实现功能点 1:用户登陆验证(用户名.密码) 2:实现多用户登陆 3:实现简单的cmd命令操作 4:文件的上传( ...
- python学习笔记十三:Flask demo
一.Flask简介 Flask 是一个 Python 实现的 Web 开发微框架.官网:http://flask.pocoo.org/ 二.Demo 1.代码结构 . ├── blog.py ├── ...
- Python学习笔记【第十四篇】:Python网络编程二黏包问题、socketserver、验证合法性
TCP/IP网络通讯粘包问题 案例:模拟执行shell命令,服务器返回相应的类容.发送指令的客户端容错率暂无考虑,按照正确的指令发送即可. 服务端代码 # -*- coding: utf- -*- # ...
随机推荐
- 创建catalog数据库
1数据库版本 2环境准备 3目录数据库准备 4创建目录数据库 5使用目录数据库
- vs2013如何在C++中调用Lua(二)
Lua学习笔记 vs2013如何在C++中调用Lua (此为转载教程) 本人试过完全可行 一.准备工作 1.下载Lua源码,地址:http://www.lua.org/download.html(我用 ...
- The Earth Mover's Distance
The EMD is based on the minimal cost that must be paid to transform one distribution into the other. ...
- Graph | Eulerian path
In graph theory, a Eulerian trail (or Eulerian path) is a trail in a graph which visits every edge e ...
- (一)jvm
jvm,作为java平台通用性的实现基础,重要性不言而喻. 1.开发新项目,写运行脚本时要运用相关知识,确定jvm参数 2.维护老项目,需要对jvm进行性能调优 jvm内存划分: 1.程序计数器 2. ...
- java FileLock
import java.nio.ByteBuffer; import java.nio.IntBuffer; import java.nio.channels.FileChannel; import ...
- 从清月高中物理动学课件制作工具说【FarseerPhysics引擎之WheelJoint】及【PropetryGrid之动态下拉列表】
最近在写一个简单的小工具,可以用来制作一些简单的运动学课件,这个工具主要是把物理引擎的设置可视化,主要包括利用纹理图片直接创建并设置物体.关节等方面.之前开发时主要使用BOX2D引擎和BOX2D.XN ...
- iOS,文本输入,键盘相关
1.UIKeyboard键盘相关知识点 2.点击空白区域隐藏键盘(UIKeyboard) 3.键盘(UIKeyboard)挡住输入框处理 4.自定义键盘(UIKeyboard) 5.监听键盘弹出或消失 ...
- AngularJS Best Practices: Directory Structure
app/----- common/ // Acts as reusable components for your app---------- header/--------------- contr ...
- LaTeX学习教程
本来我对LaTeX不是看好的,毕竟都是命令格式的.觉得有word就足够啦word可视化操作方便快捷. 但是由于要写论文等,在导师要求下潜心学习一下,不知不觉间被LaTeX的强大功能所吸引.现在很多出版 ...