文章目录
- JS相关内容
- 1.初识JS
- 1.1第一个JS代码
- 1.2 JS基本语法
- 1.3 JS定义对象
- 1.4 JS严格检查模式
- 2.再续前缘
- 2.1 JS定义函数
- 2.2 JS变量
- 2.3 JS方法
- 2.4 JSON
- 2.5 JS 文件
- 3 深入探究
- 3.1获得DOM节点
- 3.2 更改DOM节点
- 3.3 添加DOM节点
- 3.4 操作表单
- 3.5 提交表单
- 3.6 操作Dom元素
- 3.7 jquery
- 3.8 事件
- 3.9选择器
JS相关内容
1.初识JS
-
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。
-
JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。
-
JavaScript的标准是ECMAScript 。
1.1第一个JS代码
<script src="js/y.js"></script>
<script type="text/javascript">
</script>
<!--放在头部或身体都可以，注意type语句不要使用自闭和标签-->
<--y.js里面只写了一句 alert("hello")-->
1.2 JS基本语法
javascript"><!--JavaScript严格区分大小写！-->
<script>
// 1. 定义变量 变量类型 变量名 = 变量值;
var num = 1;
alert(num);
</script>
1.3 JS定义对象
javascript">var person = {
name: "yang",
age: 3,
tags: ['js','java','web','...']
}
1.4 JS严格检查模式
javascript"><!--
前提：IEDA 需要设置支持ES6语法
'use strict'; 严格检查模式，预防JavaScript的随意性导致产生的一些问题
必须写在JavaScript的第一行！
局部变量建议都使用 let 去定义~
-->
<script>
'use strict';
// 全局变量
let i = 1;
// ES6 let
</script>2.再续前缘
2.1 JS定义函数
javascript">var abs = function(x){
console.log("x=>"+x);
for (var i = 0; i<arguments.length;i++){
console.log(arguments[i]);
}
if (arguments.length==2){
} else if(arguments.length==3){
}
if(x>=0){
return x;
}else{
return -x;
}
}
2.2 JS变量
javascript">const PI = '3.14'; //只读变量
console.log(PI); //大写代表的是常量2.3 JS方法
javascript"><script>
function getAge() {
var now = new Date().getFullYear();
return now-this.birth;//必须有this指向，否则会报错
}
var yang = {
name: '杨凯波',
birth: 1999,
age: getAge
}
getAge().apply(yang,[]);
</script>
2.4 JSON
javascript"><script>
var Student = {
name: "yangkaibo",
age: 3,
run: function () {
console.log(this.name + " run....");
}
};
var xiaoming = {
name: "xiaoming"
};
//原型对象
xiaoming.__proto__ = Student;
var Bird = {
fly: function () {
console.log(this.name + " fly....");
}
};
// 小明的原型 是 Student
xiaoming.__proto__ = Bird;
</script>
<!--可以指定要指定的原型--> xiaoming.__proto__ = Student;2.5 JS 文件
javascript"><dl id="app">
<dt>Java</dt>
<dd>JavaSE</dd>
<dd>JavaEE</dd>
</dl>
<script>
var dl = document.getElementById('app');
</script>
3 深入探究
3.1获得DOM节点
javascript"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
</body>
<script>
//对应 css 选择器
function fun(){
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');
var father = document.getElementById('father');
var childrens = father.children; //获取父节点下的所有子节点
// father.firstChild
// father.lastChild
}
fun()
</script>
</html>
3.2 更改DOM节点
javascript"><div id="id1"></div>
<script>
var id1 = document.getElementById('id1');
id1.innerText = 'abc'
</script>
3.3 添加DOM节点
javascript">
<p id="js">JavaScript</p>
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaME</p>
</div>
<script>
var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
</script>
3.4 操作表单
javascript"><form action="post">
<p>
<span>用户名：</span><input type="text" id="username" required>
</p>
<p>
<span>性别：</span>
<input type="radio" name="sex" value="man" id="boy">男
<input type="radio" name="sex" value="women" id="girl">女
</p>
<input type="submit" value="查询">
</form>
<script>
var input_text = document.getElementById('username');
var boy_radio = document.getElementById('boy');
var girl_radio = document.getElementById('girl');
// 得到输入框的值
input_text.value
// 修改输入框的值
input_text.value = '123'
// 对于单选框，多选框等等固定的值，boy_radio.value只能取到当前的值
boy_radio.checked; true;//查看返回的结果，是否为true，如果为true，则被选中~
girl_radio.checked = true; //赋值
</script>
3.5 提交表单
javascript"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--MD5工具类-->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--
表单绑定提交事件
onsubmit= 绑定一个提交检测的函数， true， false
将这个结果返回给表单，使用 onsubmit 接收！
onsubmit="return aaa()"
-->
<form action="https://www.baidu.com/" method="post" onsubmit="return aaa()">
<p>
<span>用户名：</span> <input type="text" id="username" name="username">
</p>
<p>
<button type="submit">提交</button>
<span>密码：</span> <input type="password" id="input-password">
</p>
<input type="hidden" id="md5-password" name="password">
<!--绑定事件 onclick 被点击-->
</form>
<script>
function aaa() {
alert(1);
var uname = document.getElementById('username');
var pwd = document.getElementById('input-password');
var md5pwd = document.getElementById('md5-password');
// pwd.value = md5(pwd.value);
md5pwd.value = md5(pwd.value);
// 可以校验判断表单内容，true就是通过提交，false，阻止提交
return true;
}
</script>
</body>
</html>3.6 操作Dom元素
javascript"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul id="test-ul">
<li class="js">JavaScript</li>
<li name="python">Python</li>
</ul>
<script>
//document.getElementById('')
$('#test-ul li[name=python]').css("color","red")
</script>
</body>
</html>jquery_330">3.7 jquery
javascript"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.4.1.js"></script>
</head>
<body>
<a href="" id="test-jquery">点我</a>
<script>
//选择器就是css的选则器
$('#test-jquery').click(function () {
alert('hello,jQuery');
})
</script>
</body>
</html>3.8 事件
javascript"><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.4.1.js"></script>
<style>
#divMove{
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
<!--要求：获取鼠标当前的一个坐标-->
mouse ：<span id="mouseMove"></span>
<div id="divMove">
在这里移动鼠标试试
</div>
<script>
//当网页元素加载完毕之后，响应事件
$(function () {
$('#divMove').mousemove(function (e) {
$('#mouseMove').text('x:'+e.pageX + 'y:'+e.pageY)
})
});
</script>
</body>
</html>3.9选择器
javascript">//jQuery css 中的选择器它全部都能用！
$('p').click(); //标签选择器
$('#id1').click(); //id选择器
$('.class1').click() //class选择器
