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的更多相关文章

随机推荐

  1. python --- request返回值乱码问题

    1.分析 a)<HTTP权威指南>里第16章国际化里提到,如果HTTP响应中Content-Type字段没有指定charset,则默认页面是'ISO-8859-1'编码.一般现在页面编码都 ...

  2. POJ 2481:Cows 树状数组

    Cows Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 14906   Accepted: 4941 Description ...

  3. Struts1 的配置文件总结

    一.在web.xml中安装Struts 要想使用Struts,我们接触到的第一个配置文件就是web.xml.实际上,Struts的入口点是一个名为ActionServlet的Servlet.在第一次访 ...

  4. js运用sort对json 数组进行排序

    Array.sort()方法是用来对数组项进行排序的 ,默认情况下是进行升序排列.sort() 方法可以接受一个 方法为参数. sort()排序时每次比较两个数组项都回执行这个参数,并把两个比较的数组 ...

  5. java题求代码,4、现在有如下的一个数组: int oldArr[]={1,3,4,5,0,0,6,6,0,5,4,7,6,7,0,5} 要求将以上数组中值为0的项去掉,将不为0的值存入一个新的数组,生成的新数组为: int newArr[]={1,3,4,5,6,6,5,4,7,6,7,5}

    public class TEST { public static void main(String[] args) { int [] oldArr= {1,3,4,5,0,0,6,6,0,5,4,7 ...

  6. 一、CI框架(CodeIgniter)简介

    CI是一个非常好用,非常灵活的PHP框架,在官网https://codeigniter.org.cn/ :最新版本3.1.10 版 就可以尽情使用了. 不忘初心,如果您认为这篇文章有价值,认同作者的付 ...

  7. (排序)P1781 宇宙总统

    题解: 此题的关键不在排序,而在于大数字 我们可以用字符串进行存储,比较他们的长度,长度一样时比较他们的大小即可 #include<iostream>using namespace std ...

  8. VScode 修改中文字体

    打开vscode ctrl+,打开设置 找到font,第一个是首选的英文字体,第二个是中文字体.

  9. ArrayList源码阅读笔记

    ArrayList ArrayList继承自AbstractList抽象类,实现了RandomAccess, Cloneable, java.io.Serializable接口,其中RandomAcc ...

  10. 运行xv6

    我们使用Qemu在Ubuntu下运行 1. 安装Qemu sudo apt-get install qemu 执行 qemu-system-i386 ,如果弹出Qemu界面说明安装成功了 2. 编译x ...