三、Javascript笔记
目录
3.document.getElementsByClassName()
4.document.getElementsByTagName()
5.document.getElementsByName()
一、概念和用法
1.1 概念
1.2 作用
1.3用法
<script type="text/javascript" src="js/js1.js"></script>
1.3.3标签属性中
<a href="Javascript:alert("")">登录</a>
1.4显示数据的方式
1.4.1window.alert("hello");
会在弹窗中显示hello
1.4.2document.write("hello");
将hello写到html文档中。即在网页页面显示出来
1.4.3使用innerHTML写入到html元素
从div1中输出
-
-
<html>
-
<head>
-
<meta charset="UTF-8">
-
<title></title>
-
</head>
-
<body>
-
<div id="div1">
-
-
</div>
-
</body>
-
</html>
-
<script>
-
document.getElementById("div1").innerHTML="hello world"
-
</script>
1.4.4console.log写入到控制台
二、基本语法
2.1注释
单行注释以//开头
多行注释以/*开始以/*结束
-
//我是单行注释
-
/*
-
* 我
-
* 是
-
* 多行注释
-
*/
2.2变量
和java不同的是,变量全部以var声明
-
var teacher;
-
teacher = "张三";
-
var x;
-
x = 5;
-
var y = 6;
命名规则:
1.必须以字母或$和_开头
2.区分大小写
3.不能用关键字保留字
2.3语句
分支
循环
-
for (var i=0;i<5;i ) {
-
document.write(names[i]);
-
}
2.4数据类型
1.字符串String
var String = "英雄联盟";
2数字Number
可以用科学计数法e书写
-
var x = 6;
-
var y = 6e8;//6000000
-
var z = 6e2;//0.02
3.布尔Boolean
var isRight = true;
4.空Null
var friend = null;
5.未定义Undefined
四种情况会undefined
1.变量声明且未赋值
var obj;
2.对象不存在属性时
-
var obj;
-
alert(obj.name);
3.函数需要实参,但是调用时没有传值,形参是undefined
4.函数调用没有返回值或者return后没有数据,接收函数返回的变量是undefined
6独一无二的值Symbol
2.5动态数据类型
-
var num = 6;//num现在是number类型
-
num = "hello";//num现在是String类型
2.6运算符
比较运算 | |
=== | 绝对等于(值和类型均相等为true) |
!== | 不绝对等于(值和类型有一个不相等,或两个都不相等为true) |
2.7对象
1.String
-
//长度
-
<script>
-
var you = "你不是\'单身狗\'?"
-
console.log(you.length);
-
console.log(you)
-
</script>
q其中\是转义字符,不算字符数,总长度为9
其他属性和java差不多
2.Array
声明数组
-
<script>
-
//第一种
-
var names = new Array();
-
names[0]="张三";
-
names[1]="李四";
-
names[2]="王五";
-
names[3]="赵六";
-
names[4]="孙七";
-
for (var i=0;i<5;i ) {
-
document.write(names[i]);
-
}
-
//第二种
-
var students=new Array("小一","小二","小三");
-
//第三种
-
var school=["高中","小学"];
-
-
</script>
3.Date
-
var date1 = new Date(); //当前日期
-
var date2 = new Date(milliseconds);//从1970年1月1日到所需时间的毫秒
-
var date3 = new Date(dateString); //符合日期格式的字符串
-
var date4 = new Date(year, month, day,
-
hours, minutes, seconds,
-
milliseconds);//年月日时分秒毫秒
-
//月份取值0-11
常用方法
方法 | 描述 |
getDate() |
从 Date 对象返回一个月中的某一天 (1 ~ 31) 。
|
getDay()
|
从 Date 对象返回一周中的某一天 (0 ~ 6) 。
|
getFullYear()
|
从 Date 对象以四位数字返回年份。
|
getHours()
|
返回 Date 对象的小时 (0 ~ 23) 。
|
getMinutes()
|
返回 Date 对象的分钟 (0 ~ 59) 。
|
getMonth()
|
从 Date 对象返回月份 (0 ~ 11) 。
|
getSeconds()
|
返回 Date 对象的秒数 (0 ~ 59) 。
|
setDate()
|
设置 Date 对象中月的某一天 (1 ~ 31) 。
|
setFullYear()
|
设置 Date 对象中的年份(四位数字)。
|
setHours()
|
设置 Date 对象中的小时 (0 ~ 23) 。
|
setMinutes()
|
设置 Date 对象中的分钟 (0 ~ 59)
|
setSeconds()
|
设置 Date 对象中的秒钟 (0 ~ 59) 。
|
setMonth()
|
设置 Date 对象中月份 (0 ~ 11)
|
4.Math
1.Math.PI;返回圆周率
2.Math.random();返回0-1的随机值
3.Math.max(12,34,-90.9);返回最大值
4.Math.min(12,34,-90,9);返回最小值
2.8函数
1.isNaN(param);
是数字返回false,不是返回true,NaN 意思是not a number不是数字
2.parseFloat(String)
解析字符串,如果首位是数字则对字符串进行解析,返回数字类型
parseFloat(“”10年”);//10
parseFloat(“”1222 1212”);//1222
3.parseInt(string,radix)
解析字符串返回整数,radix设置进制
没有设置进制时:
如果 string 以 "0x" 开头,parseInt() 会把 string 的其余部分解析为十六进制的整数。
如果 string 以 0 开头,那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进 制或十六进制的数字。
如果 string 以 1 ~ 9 的数字开头,parseInt() 将把它解析为十进制的整数。
字符串中只会返回第一组数字(1022 121)1022
开头结尾可以是空格
2.9自定义函数
function 函数名(参数){}
function num(num1,num2){
console.log(num1 num2);
}
2.10匿名函数
-
var fun1=function(){
-
console.log("fun1");
-
}
-
var fun2=function(a,b){
-
console.log("fun2");
-
}
-
var fun3=function(a,b){
-
return a b;
-
}
-
fun1();
-
fun2(1,2);
-
var num2=fun3(1,2);
-
console.log(num2);
2.11作用域
局部变量,函数中的变量是局部变量,只能在此函数中用
全局变量,函数外声明的变量,可以被所有脚本调用
生命周期,生命周期从被声明开始,局部变量函数运行后被删除,全局变量页面关闭后被删除
2.12自定义对象
-
//定义对象
-
var student={
-
name:"张三",
-
age:18,
-
run:function(){
-
console.log("张三");
-
}
-
};
-
//访问属性
-
var name6=student.name;
-
var age=student["age"];
-
console.log(name6);console.log(age);
-
//调用方法
-
student.run();
2.13window对象
1.常用属性
2.常用方法
alert警告弹窗
confirm确认框
prompt提示用户输入
-
<script>
-
//window对象常用的弹框方法
-
//1、基本弹框
-
window.alert("只有一个确定按钮的对话框");
-
//2、对话框:有确定和取消两个看你,点击确定返回true,点击取消返回false
-
var res=window.confirm("确认要关闭吗?");
-
if(res){
-
alert("点击了确定按钮");
-
}
-
else{
-
alert("点击取消按钮");
-
}
-
//3、输入框:prompt(提示信息,默认值)
-
var age=prompt("请输入年龄:",19);
-
alert("输入的年龄信息是:" age);
-
</script>
open打开新窗口
close关闭窗口
-
<a href="javascript:window.open('https://www.百度.com')">打开百度</a>
-
<a href="javascript:window.open('index.html')">打开-index</a>
-
<a href="javascript:window.close()">关闭当前页面</a>
setTimeout(“方法名”,毫秒)指定毫秒数后调用函数
clearTimeout取消上面设定
setInterval“方法名”,毫秒)指定周期(单位毫秒)调用函数
clearInterval取消上面设定
定时器
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="UTF-8">
-
<title></title>
-
<script>
-
//定时器
-
function showTime(){
-
var time = new Date();
-
var year=time.getFullYear();
-
var month=time.getMonth();
-
var day=time.getDate();
-
var hour=time.getHours();
-
var minute = time.getMinutes();
-
var second = time.getSeconds();
-
document.getElementById("today").innerHTML
-
=year "年" month "月" day "日," hour "时" minute "分" second "秒";
-
-
}
-
window.setInterval("showTime()",1000);
-
</script>
-
</head>
-
<body>
-
<div id="today"></div>
-
</body>
-
</html>
3.history
浏览器历史,
-
<a href="javascript:window.history.forward()">前进</a>
-
<a href="javascript:window.history.back()">后退</a>
-
<a href="javascript:window.history.go(1)">前进go</a>
-
<a href="javascript:window.history.go(-1)">后退go</a>
和浏览器左上的功能一致
4.location对象
reload() 重新载入当前网址,如同按下刷新按钮
-
<a href="javascript:alert(window.location.href)">获取当前页面的URL地址</a>
-
<a href="javascript:window.location.reload()">刷新</a><br />
-
<a href="javascript:window.location.replace('index.html')">跳转到index</a><br />
-
<a href="javascript:location.replace('https://www.百度.com')">跳转到百度</a><br />
2.14事件
onsubmit:点击了注册按钮时
onfocus:将鼠标焦点点击到元素时触发,比如为了输入文字将焦点确定在文本框中时
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="UTF-8">
-
<title></title>
-
<script>
-
function fun1(){
-
alert('内容发生了变化');
-
}
-
function fun2(){
-
alert('触发了点击事件');
-
}
-
function fun3(){
-
alert('键盘按下');
-
}
-
</script>
-
</head>
-
<body>
-
<select id="month" onchange="fun1()">
-
<option>1月份</option>
-
<option>2月份</option>
-
</select>
-
<input type="button" onclick="fun2()" value="button"/>
-
<input type="text" onkeydown="fun3()" />
-
</body>
-
</html>
-
2.15document
1.document对象
当浏览器载入 HTML 文档, 它就会成为 Document 对象。
2.document.getElementById()
根据id获得所有该id的第一个对象的引用
-
<head>
-
<meta charset="UTF-8">
-
<title></title>
-
<script>
-
function fun1(){
-
var pp=document.getElementById("pp");
-
console.log(pp)
-
}
-
</script>
-
</head>
-
<body>
-
<p id="pp">ppp</p>
-
</body>
3.document.getElementsByClassName()
返回 拥有相同class类名称元素的集合
-
<head>
-
<meta charset="UTF-8">
-
<title></title>
-
<script>
-
function fun1(){
-
var us=document.getElementsByClassName("us");
-
for(var i=0;i<us.length;i ){
-
console.log(us[i]);
-
}
-
}
-
</script>
-
</head>
-
<body>
-
-
<p id="pp" class="us">ppp</p>
-
<ul class="us">
-
<li>ffdsfds</li>
-
<li>ds</li>
-
<li>das</li>
-
<li>dsa</li>
-
</ul>
-
</body>
4.document.getElementsByTagName()
返回拥有相同<标签>名的对象集合
5.document.getElementsByName()
返回拥有相同name的对象集合
6.修改属性
-
document.getElementById(id).innerHTML=新的 HTML。
-
-
方式1:document.getElementById(id).attribute=新属性值 //修改属性
-
方式2:document.getElementById(id).setAttribute(属性名,属性值);
-
-
document.getElementById(id).style.property //修改css
-
document.getElementById("myli").style.color="blue";
7.添加节点,插入元素
-
<head>
-
<meta charset="UTF-8">
-
<title></title>
-
<script>
-
function creatNewP(){
-
var newEP=document.createElement("p");//创建新元素节点
-
var text=document.createTextNode("appendChild插入");//新建文本节点
-
newEP.appendChild(text);//将文本节点添加到元素节点
-
var div=document.getElementById("div1");//获取要插入的元素
-
div.appendChild(newEP);//将新的元素p插入到节点
-
}
-
function creatNewP2(){
-
var newEP=document.createElement("p");//创建新元素节点
-
var text=document.createTextNode("insertBefore插入");//新建文本节点
-
newEP.appendChild(text);//将文本节点添加到元素节点
-
var div=document.getElementById("div1");//获取要插入的元素
-
var p=document.getElementById("p1");
-
div.insertBefore(newEP,p);//将新的元素p插入到节点
-
}
-
</script>
-
</head>
-
<body>
-
-
<div id="div1" >
-
<button onclick="creatNewP()">1</button>
-
<button onclick="creatNewP2()">2</button>
-
<p id="p1">第一</p>
-
</div>
-
</body>
8.删除元素,替换元素
-
function replaceE(){
-
var newEP=document.createElement("p");//创建新元素节点
-
var text=document.createTextNode("替换");//新建文本节点
-
newEP.appendChild(text);//将文本节点添加到元素节点
-
var div=document.getElementById("div1");//获取元素
-
var p=document.getElementById("p1");
-
div.replaceChild(newEP,p);//替换成新元素
-
}
-
-
function deleteE1(){
-
var div=document.getElementById("div1");//获取元素
-
var p=document.getElementById("p1");
-
div.removeChild(p);//通过父元素删除其中的p
-
}
-
-
function deleteE2(){
-
var p=document.getElementById("p1");
-
p.parentNode.removeChild(p);//找到父元素然后删除
-
}
2.16正则表达式
1.语法
-
语法: var reg=new RegExp(/正则表达式主体/,修饰符(可选));
-
或更简单的方法 var reg=/正则表达式主体/修饰符(可选);
-
案例: var reg=new RegExp(/kkk/i);
-
var reg = /kkk/i; //此处定义了一个一个正则表达式。
-
kkk 是一个正则表达式主体 (用于检索)。
-
i 是一个修饰符 (搜索不区分大小写)。
修饰符
查找某个范围内的字符
特殊含义
更多查看正则表达式手册
2.经典案例
-
<script>
-
/*检查输入的身份证号是否正确*/
-
function checkCard(str) {
-
/*15位数身份证正则表达式:
-
* 编码规则顺序从左至右依次为6位数字地址码,6位数字出生年份后两位及日期,3位数字顺序 码。
-
* [1-9]\d{5} 前六位地区,非0打头 \d{2} 出生年份后两位00-99
-
* ((0[1-9])|(10|11|12)) 月份,01-12月 (
-
* ([0-2][1-9])|10|20|30|31) 日期,01-31天
-
* \d{3} 顺序码三位,没有校验码 */
-
var arg1 = /^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1- 9])|10|20|30|31)\d{3}$/;
-
if (arg1.length == 15 && !arg1.test(arg1)) {
-
return false;
-
}
-
/** 18位数身份证正则表达式:
-
* * 编码规则顺序从左至右依次为6位数字地址码,8位数字出生年份日期码,3位数字顺序码,1 位数字校验码(可为x)。
-
* [1-9]\d{5} 前六位地区,非0打头
-
* (18|19|([23]\d))\d{2}
-
* 出身年份,覆盖范围为 1800-3999 年
-
* ((0[1-9])|(10|11|12)) 月份,01-12月
-
* (([0-2][1-9])|10|20|30|31) 日期,01-31天
-
* \d{3}[0-9Xx]: 顺序码三位 一位校验码 */
-
var arg2 = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))
-
(([0-2] [1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
-
if (arg2.length == 18 && !arg2.test(sfzhmcode)){
-
return false;
-
}
-
return true;
-
}
-
-
/*是否是小数*/
-
function isDecimal(strValue) {
-
var objRegExp = /^\d \.\d $/;
-
return objRegExp.test(strValue);
-
}
-
-
/*校验是否中文名称组成 */
-
function ischina(str) {
-
var reg = /^[\u4E00-\u9FA5]{2,4}$/;
-
return reg.test(str);
-
}
-
-
/*校验是否全由8位数字组成 */
-
function isNum(str) {
-
var reg = /^[0-9]{8}$/;
-
return reg.test(str);
-
}
-
-
/*校验电话码格式 :座机和手机*/
-
function isTelCode(str) {
-
var reg = /^((0\d{2,3}-\d{7,8})|(1[345789]\d{9}))$/;
-
return reg.test(str);
-
}
-
-
/*校验手机号*/
-
function isPhoneNum(str) {
-
//如果你要精确验证手机号码,那个你可以使用第一个正则。这是根据电信,移动,联通目前发 行的号码来的。验证比较精确。
-
var reg = /^1[3|4|5|7|8][0-9]{9}$/;
-
// 如果因为现有的号码不能满足市场需求,电信服务商会增大号码范围。所以一般情况下我们 只要验证手机号码为11位,且以1开头。
-
var reg = /^^1[0-9]{10}$$/; return reg.test(str);
-
}
-
-
/*校验邮件地址是否合法 */
-
function IsEmail(str) {
-
var reg = /^\w @[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/; return reg.test(str);
-
}
-
-
/*检查输入的URL地址是否正确 */
-
function checkURL(str) {
-
if(str.match(/http(s)?:\/\/[\w.] [\w\/]*[\w.]*\??[\w=&\ \%]*/i) == null) {
-
return false;
-
}
-
else {
-
return true;
-
}
-
}
-
</script>
3.全选全不选
-
<head>
-
<meta charset="UTF-8">
-
<title></title>
-
<style>
-
td{
-
text-align: center;
-
}
-
th{
-
text-align: center;
-
}
-
</style>
-
<script>
-
//点击全选,小选项跟着改变
-
function myAll(){
-
var all=document.getElementById("all");
-
var oneList=document.getElementsByName("one");
-
for(var i=0;i<oneList.length;i ){
-
oneList[i].checked=all.checked;
-
}
-
}
-
//点击小选项,全选也有改变
-
function myOne(){
-
var all=document.getElementById("all");
-
var oneList=document.getElementsByName("one");
-
for(var i=0;i<oneList.length;i ){
-
if(oneList[i].checked==false){
-
all.checked=false;
-
return;
-
}
-
all.checked=true;
-
}
-
}
-
</script>
-
</head>
-
<body>
-
<table border="1" cellpadding="0" cellspacing="0" width="300px" height="160" >
-
-
<tr>
-
<th>全选<input id="all" type="checkbox" onclick="myAll()"/></th>
-
<th>序号</th>
-
<th>名称</th>
-
<th>单价</th>
-
</tr>
-
<tr><
-
<td><input name="one" type="checkbox" onclick="myOne()"/></td>
-
<td>1</td>
-
<td>小熊饼干</td>
-
<td>¥12</td>
-
</tr>
-
<tr><
-
<td><input name="one" type="checkbox" onclick="myOne()"/></td>
-
<td>1</td>
-
<td>小熊饼干</td>
-
<td>¥12</td>
-
</tr>
-
<tr><
-
<td><input name="one" type="checkbox" onclick="myOne()"/></td>
-
<td>1</td>
-
<td>小熊饼干</td>
-
<td>¥12</td>
-
</tr>
-
</table>
-
</body>
4.动态增加删除表格的一行
-
-
<html>
-
<head>
-
<meta charset="UTF-8">
-
<title></title>
-
<style>
-
td{
-
text-align: center;
-
}
-
th{
-
text-align: center;
-
}
-
</style>
-
<script>
-
//遍历表格
-
function bianli(){
-
var tab=document.getElementById("tab1");
-
var rowArr= tab.rows;
-
for(var i=0;i<rowArr.length;i ){
-
var row = rowArr[i];
-
var tdArr = row.cells;
-
var str="";
-
for(var j=0;j<tdArr.length;j ){
-
var tdd = tdArr[j];
-
str =tdd.innerHTML "..." tdd.cellIndex "======";
-
}
-
console.log("行的下标" row.rowIndex ",列:" str);
-
}
-
}
-
-
function addRow(){
-
var tab=document.getElementById("tab1");
-
var newRow=tab.insertRow();
-
var newTd1=newRow.insertCell();
-
var newTd2=newRow.insertCell();
-
var newTd3=newRow.insertCell();
-
var newTd4=newRow.insertCell();
-
-
newTd1.innerHTML="1";
-
}
-
function delRow(btn){
-
-
var tab=document.getElementById("tab1");
-
var trIndex=btn.parentNode.parentNode.rowIndex;
-
tab.deleteRow(trIndex);
-
}
-
</script>
-
</head>
-
<body>
-
<button type="button" onclick="bianli()">遍历</button>
-
<button type="button" onclick="addRow()">添加一行</button>
-
<table id="tab1" border="1" cellpadding="0" cellspacing="0" width="300px" height="160" >
-
<tr>
-
<th>序号</th>
-
<th>名称</th>
-
<th>单价</th>
-
<th>删除</th>
-
</tr>
-
<tr><
-
-
<td>1</td>
-
<td>小熊饼干</td>
-
<td>¥12</td>
-
<<td><button onclick="delRow(this)">删除</button></td>
-
</tr>
-
<td>1</td>
-
<td>小熊饼干</td>
-
<td>¥12</td>
-
<td><button onclick="delRow(this)">删除</button></td>
-
</tr>
-
<td>1</td>
-
<td>小熊饼干</td>
-
<td>¥12</td>
-
<td><button onclick="delRow(this)">删除</button></td>
-
</tr>
-
-
</table>
-
-
</body>
-
</html>
5.选择省,显示对应市(省市级联)
-
-
<html>
-
<head>
-
<meta charset="UTF-8">
-
<title></title>
-
<select onchange="changeCity(this.value)">
-
<option>请选择省份</option>
-
<option value="0">北京</option>
-
<option value="1">浙江</option>
-
<option value="2">河北</option>
-
<option value="3">广东</option>
-
</select>
-
<select id="city"></select>
-
</head>
-
<body>
-
-
</body>
-
</html>
-
<script>
-
var cityList=new Array();
-
cityList[0] = new Array("朝阳区", "海淀区", "东城区", "西城区");
-
cityList[1] = new Array("杭州市", "嘉兴市", "宁波市", "绍兴市");
-
cityList[2] = new Array("石家庄市", "唐山市", "承德市", "张家口市");
-
cityList[3] = new Array("广州市", "惠州市", "深圳市", "茂名市");
-
function changeCity(val){
-
var city=document.getElementById("city");
-
city.options.length=0;
-
var arr=cityList[val];
-
for(var i=0;i<arr.length;i ){
-
var option = document.createElement("option");
-
option.innerHTML=arr[i];
-
option.value=arr[i];
-
city.appendChild(option);
-
-
}
-
-
}
-
</script>
这篇好文章是转载于:编程之路
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 编程之路
- 本文地址: /boutique/detail/tanhgfejig
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01