Django_JavaScript
JavaScript是什么
JavaScript是一种运行在客户端(浏览器)的编程语言，用来给网页添加动态功能。
JavaScript的作用
最初目的
为了处理表单的验证操作
现在广泛的应用场景
网页特效
服务段开发(Node.js)
命令行工具(Node.js)
桌面程序(Electorn)
APP(Cordova)
游戏开发
JavaScript和Html、CSS的区别
HTML：提供网页的结构和内容
CSS：修饰和美化内容
JavaScript：控制页面内容，增加页面动态效果
JavaScript的书写位置
JavaScript书写位置和CSS类似(行内样式，嵌入式样式，外部样式)
1、写在行内：
<input type="button" value="按钮" onclick="alert('Hello World')" />
2、写在script标签中
<head>
<script>
alter('Hello Wolrd!');
</script>
</head>
3、写在js文件中，在页面引用
<script src="main.js"></script>
注意：引入外部js文件的script标签中，不可以写javascript代码，在</body>标签之前，css在head引入，js文件在底部引入。
综合示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--行内js-->
<button onclick="alert('别点我')">这是一个按钮</button><br />
<hr />
<button id="mybn2">这是第二个按钮</button>
<hr />
<button id="mybn3">这是第3个按钮</button>
<script>
//内部标签写法
document.getElementById("mybn2").onclick=function(){
alert('111111111111111111111111111111');
};
</script>
<!-- 外部js文件引入 -->
<script src="main.js"></script>
</body>
</html>
注意：
上面的代码要在同一级目录创建main.js文件内容如下：
document.getElementById('mybn3').onclick=function(){
alert('3333333333333333333333333')
}
JavaScript基本语法
1、变量的定义
在js中使用var关键字定义变量
1.1变量的语法
var age = 18
var userName = lili
1.2 同时声明多个变量
var age,name,sex;
age = 18;
1.3 同时声明多个变量并赋值
var age = 23,name='shell';
DOM
学习DOM就可以使用JavaScript进行控制页面(样式，元素属性，隐藏显示等)
1、什么是DOM
DOM是浏览器对象模型，这是由浏览器生成的一个树形结构，使编程语言可以很容易的访问html结构。
在DOM中可以通过document获取整个页面。
2、获取页面元素
getElementById() 根据id获取元素
getElementsByTagName() 根据标签名称，获取元素(集合)
querySelector() 使用选择器获取元素，只返回第一个匹配的元素
querySelectorAll() 使用选择器获取元素，返回所有匹配的元素(集合)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
<p id="p1"><span>这是1段文字</span> Lorem ipsum dolor sit
consectetur adipisicing elit. Vero ducimus eveniet pariatur incidunt dolorem rem minima quo nemo quasi beatae similique maiores aliquam culpa quas,
reprehenderit iusto doloremque error cum.
</p> <p><span>这是2段文字</span> Lorem ipsum dolor sit
consectetur adipisicing elit. Vero ducimus eveniet pariatur incidunt dolorem rem minima quo nemo quasi beatae similique maiores aliquam culpa quas,
reprehenderit iusto doloremque error cum.
</p>
<p><span>这是3段文字</span> Lorem ipsum dolor sit
consectetur adipisicing elit. Vero ducimus eveniet pariatur incidunt dolorem rem minima quo nemo quasi beatae similique maiores aliquam culpa quas,
reprehenderit iusto doloremque error cum.
</p>
</div>
<script>
// 通过id获取元素
var mytag = document.getElementById('p1');
console.log(mytag);
// 通过标签名称获取标签名称
console.log(document.getElementsByTagName('span'));
// 使用选择器获取元素
console.log(document.querySelector('div'));
</script>
</body>
</html>
3、设置元素属性
获取到元素，可以设置元素对应的树形，改变页面的效果。
HTML 中标签的属性一般对应 DOM 中元素的属性，DOM 中元素的属性，例如：
title、src、id 等
通过元素的 innerHTML 属性可以设置标签之间的内容
通过 innerHTML 动态生成列表
表单元素的属性
value、checked、selected、disabled
遍历文本框给所有文本框赋值
获取下拉框中的选项，设置下拉框中显示的项
禁用按钮
案例：
1、使用js动态生成列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.list {
list-style-type: none;
}
</style>
</head>
<body>
<script>
var mylist = '<ul class="list"><li>1111111111111111111111</li><li>2222222222222222222222</li><li>3333333333333333333333</li><li>4444444444444444444444</li><li>5555555555555555555555</li></ul>'
// 获取动态数据
var data = ['linux','centos','readhat','devops','haha','hahaha','hahahahaha'];
// 组合模版
var dataList = '<ul class="list">';
// 循环遍历数组生成li标签
for (index = 0; index < data.length; index++) {
dataList += '<li>'+ data[index] +'</li>';
}
dataList += '</ul>';
console.log(dataList); // 通过js插入数据
// document.write(mylist); // 带标签
document.querySelector('body').innerHTML = dataList; // 便签当做文本输出
// document.querySelector('body').innerText = dataList;
</script>
</body>
</html>
2、操作表单，获取表单相关值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="" method="GET">
<!-- 表单控件-->
<table>
<tr>
<td>姓名：<input type="text" name="usename" value="devops"></td>
</tr>
<tr>
<td>
<!--下拉菜单实现-->
学历：
<select name="education">
<!-- <option value="">==请选择==</option>-->
<option value="1">初中</option>
<option value="2">高中</option>
<option value="3" selected="selected">专科</option>
<option value="4">本科</option>
<option value="5">研究生</option>
<option value="6">博士生</option>
</select>
</td>
</tr>
<tr>
<td>
<!-- <label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">-->
性别：
<input type="radio" name="sex" id="male"><label for="male">男</label>
<input type="radio" name="sex"id="male1"><label for="male1">女</label>
<input type="radio" name="sex"id="male2"><label for="male2">保密</label>
</td>
</tr>
<tr>
<td>
年薪：
<input type="password">
</td>
</tr>
<tr>
<td>给自己打个标签
<input type="checkbox" name="mytag" id="tag1"><label for="tag1">社会精英</label>
<input type="checkbox"name="mytag" id="tag2"><label for="tag2">一般青年</label>
<input type="checkbox"name="mytag" id="tag3"><label for="tag3">年薪百万</label>
</td>
</tr>
<tr>
<td><input type="submit"value="注册"></td>
<td><input type="reset"value="重置"></td>
</tr> <tr>
<td>
<textarea cols="30" rows="10">
文本内容
</textarea>
</td>
</tr>
</table>
</form>
<script>
// 表单赋值
console.log(document.querySelector('input').value='sa');
// 单选按钮选中
console.log(document.querySelector('#male').checked='checked');
// 下拉菜单选中
console.log(document.querySelector('option').selected='selected');
// 禁用按钮
console.log(document.querySelector('#submit').disabled='disabled');
</script>
</body>
</html>
4、注册事件
DOM中的事件机制，可以实现一些常规操作。比如：点击按钮，按下键盘等的响应。
语法：
element.onclick = function () {
alert('hello world');
};
常用事件 ：
Html事件的例子：
当用户点击鼠标时
当完孤儿已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交HTML表单时
当用户触发按键时
案例：实现按钮的点击事件，取消a标签调转。
//按钮的点击事件
document.querySelector('button').onclick = function(){
alert('绑定并执行了点击事件');
}
//取消a标签的默认跳转
document.querySelector('a').onclick = function(){
return false;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id='bt1'>这是button1</button>
<script>
document.querySelector('#bt1').onclick=function() {
alert(this.innerHTML);
}
document.querySelector('#bt1').onclick=function() {
console.log('你碰到我了')
}
</script>
</body>
</html>
5、改变元素的样式
5.1 改变行内样式
element.style.color = 'red';
5.2 改变类样式
element.className = 'active';
Django_JavaScript的更多相关文章
随机推荐
- JS正则和点击劫持代码（第十二天 9.27）
JS正则 正则表达式:用单个字符串描述或者匹配符合特定语句规则的字符串一些字符序列组合在一起,可以简单也可以复杂模式的,可以去搜索,可以去替换 语法:/表达式/修饰符(可选)var para=/icq ...
- VMware Workstation 不可恢复错误: (vcpu-0) vcpu-0:VERIFY vmcore/vmm/main/physMem_monitor.c:1123
在新机器上,启动虚拟机报了个错: 使用VMware® Workstation 11.1.2 build-2780323安装MacOS系统时出现以下错误: VMware Workstation 不可恢复 ...
- JS - 局部方法改变全局变量的值
var a = "" function aa() { a="卡卡" } aa() // 注意,aa() 一定要执行,局部赋值全局变量才会有作用 aler ...
- 第三章，数据和C
3.1 数据类型关键字 位:计算机内部数据存储的最小存储单位(bit). 字节:计算机中数据处理的基本单位(Byte)),1B=8bit. 字:计算机进行数据处理时,一次存取,加工和传送的数据长度.( ...
- [XSS防御]HttpOnly之四两拨千斤
今天看了<白帽子讲web安全>一书,顺便记录一下,HttpOnly的设置 httponly的设置值为 TRUE 时,使得Javascript无法获取到该值,有效地防御了XSS打管理员的 c ...
- JetBrains,vim配置文件, .ideavimrc
addr: https://github.com/NorseLZJ/lzj-config/tree/master/idea_vim
- bestphp's revenge
0x00 知识点 1利用PHP原生类来构造POP链 本题没有可以利用的类,没有可以利用的类就找不到POP链所以只能考虑PHP原生类 我们先来解释一下什么是POP链 POP:面向属性编程 在二进制利用时 ...
- JavaScript-数据类型和变量
数据类型 计算机顾名思义就是可以做数学计算的机器,因此,计算机程序理所当然地可以处理各种数值.但是,计算机能处理的远不止数值,还可以处理文本.图形.音频.视频.网页等各种各样的数据,不同的数据,需要定 ...
- Mac OS 终端利器 iTerm2配置大全
之前一直使用 Mac OS 自带的终端,用起来虽然有些不太方便,但总体来说还是可以接受的,是有想换个终端的想法,然后今天偶然看到一个终端利器 iTerm2,发现真的很强大,也非常的好用,按照网上配置了 ...
- LeetCode——139. 单词拆分
给定一个非空字符串 s 和一个包含非空单词列表的字典 wordDict,判定 s 是否可以被空格拆分为一个或多个在字典中出现的单词. 说明: 拆分时可以重复使用字典中的单词. 你可以假设字典中没有重复 ...