javaScript额外笔记

2021-12-22 09:22:17

--------------------------------------------------------Part 1
javascript:脚本语言
辅助开发：

网页的前台开发三大块：
1.HTML 超文本标记语言
2.CSS样式美化网页
3.javascript 实现网页的动态效果

由网景公司为了减轻服务器的压力而发明
运行在客户端（浏览器端）的脚本语言。

三种形式的脚本语言：
样式：
1.行内样式
<font style="font-size:70px;color:yellow;font-family:华文彩云;">Jane</font>
2.内部样式
<style type = "text/css">
/*标签选择器*/
font{
font-size:80px;
}
p{}
a{}
img{}
table{}
tr{}
li{}
/*类选择器*/
.c1{
font-size:130px;
}

/*id选择器*/
#id1{
font-size:30px;
}
</style>
3.外部样式
<link type = "text/css" rel = "stylesheet" href = "a1.css"/>

a.行内脚本语言
<input type = "button" value = "普通按钮" onclick = "alert('hello')"/>
<a href = "javascript:alert('aa')">点我啊</a>

b.内部脚本
<script type = "text/javascript">
alert("你好啊");

</script>

c.外部脚本
<link type = "text/css" rel = "stylesheet" href = "aa.js"/>

文本样式：
color:green;
font-size:15;
font-family:宋体;
font-weight:bold/normal;
font-style:italic/normal;
text-decoration:underline/none;
text-align:left/center/right;
line-height:23px;行高
letter-spacing:30px;字符间距

背景样式
background-color:;green;
background-image:url();
background-repeat:no-repeat/repeat-x/repeat-y/repeat;//向某个方向铺开
background-position:xpx ypx;
x:正数背景图片向右偏移
y:正数背景图片向下偏移

超链接的伪类：
l v h a love hate
a:link{}
a:visited{}
a:hover{}
a:active{}

边框样式
border-width:3px;
border-color:pink;
border-style:solid/dashed/dotted;
border:1px solid red;
border-right:3px dashed blue;
内边距：padding
外边距：margin
浮动：float
s1java

数据类型
javascript属于弱数据类型，使用var关键字来定义变量

并不是没有数据类型
使用typeof a返回a的数据类型
整数、小数 number 数值型
字符型数据：string
布尔类型：boolean
未定义类型：undefined
对象类型：object

运算符
1.算术运算符 + - * / % ++ --
2.比较运算符 > < >= <= == !=
3.逻辑运算符 && || ！
4.赋值运算 = +=

语法结构
1.顺序结构
2.条件结构
if(){}
if(){}else{}
if(){}else if(){}else{}多重if 区间判断
switch(){} 等值判断
3.循环结构
while(){}
do{}while();
for(){}

常见的内置函数
1.警告框
alert('');

2.确认框
var b = confirm("你确定要提交注册吗？");
得到的值是;true或false
alert(b);

3.提示框
var c = prompt("提示内容","默认值");
c的类型是string类型
要得到数值类型的需要转型
转整形 a = parseInt(a);
转小数 b = parseFloat(b);

4.判断是不是非数值
isNaN(m) is not a number
m是非数值返回true
m是数值的时候返回false
****************************************************************************<head>
****************************************************************************<head>
****************************************************************************<head>
<html>
<head>
<style type = "text/css">
/*id选择器*/
</style>

<link type = "text/css" rel = "stylesheet" href = "a1.css"/>

</head>

<body>

<script type = "text/javascript"src = "a2.js" >

</script>

<script type = "text/javascript">
alert("world");
</script>

<font id = "id1" class = "c1">木木</font>

<form>
<input type = "button" value = "点我看看" onclick = "javacript:alert('恭喜你，中奖500W')"/>
</form>

<a href = "javascript:alert('想得美')">点击看美女</a>

</body>
</html>
-------------------------------------------------------- Part 2

****************************************************************************<head>
<script type = "text/javascript">
function f1(a){
var b = document.getElementById("id1");
var b1 = b.value;
b1 = parseFloat(b1);
var c = document.getElementById("id2");
var c1 = c.value;
c1 = parseFloat(c1);
var e = document.getElementById("id3");
e.value = eval(b1+a+c1);//将字符串作为表达式处理
}
var a;
function openWin(){
a = window.open("test.html","myWindow","width=300,height=300");
}
function closeWin(){
a.close();
}
function closeSelf(){
//this.close();
window.close();//关闭自身窗口
}
var t1;
function f2(){
//延时器
t1 = window.setTimeout("openWin()",3000);
}
function f3(){
//清除延时器
window.clearTimeout(t1);
}
var t2;
function f4(){
t2 = setInterval("openWin()",2000);//设置定时器
}
function f5(){
window.clearInterval(t2);
}
function f6(){
var d = new Date();
var year = d.getFullYear();
var month = d.getMonth()+1;//0-11
var date = d.getDate();
var hour = d.getHours();
var minute = d.getMinutes();
var second = d.getSeconds();
var week = d.getDay();//0-6 0星期天
switch (week)
{
case 0:
week = "日";
break;
case 1:
week = "一";
break;
case 2:
week = "二";
break;
}
//document.write(year+"年"+month+"月"+date+"日"+hour+"时"+minute+"分"+second+"秒星期"+week);
//获得div对象
var d1 = document.getElementById("div");
//设置DIV内的值
d1.innerText = year+"年"+month+"月"+date+"日"+hour+"时"+minute+"分"+second+"秒星期"+week;
setTimeout("f6()",1000);
}
//页面加载时启动定时器
//setInterval("f6()",1000);
function f7(t){
document.body.style.backgroundColor = t.value;
}
</script>
<style type = "text/css">
input{
font-size:30px;
}

#div{
width:500px;
height:30px;
font-size:30px;
border:1px solid red;
}
</style>
</head>
<body onload = "f6()">
<select name="" onchange ="f7(this)">
<option value="red" selected>红色
<option value="green">绿色
<option value="yellow">黄色
</select>
<br><br><br>
<img src="data:images/33.jpg" width="300" border="0" alt="" onmouseover = "this.src = 'images/32.jpg'" onmouseout = "this.src = 'images/33.jpg'">
<br>
<input type="button" value="3秒钟后打开网页" onclick="f2()">
<input type="button" value="关闭延时器" onclick="f3()">
<br>
定时器
<br><input type="button" value="每隔2秒钟打开窗口" onclick="f4()">
<input type="button" value="清除定时器" onclick="f5()">
<br>
<input type="button" value="打开一个窗口" onclick="openWin()">
<br>
<input type="button" value="关闭窗口" onclick="closeWin()">
<br>
<input type="button" value="关闭自身窗口" onclick="closeSelf()">
<br><br><br>

<div id="div" class="">

</div>
<br><br><br>
第一个数：<input type="text" name="" id = "id1"><br>
第二个数：<input type="text" name=""id = "id2"><br>
<input type="button" value=" + " onclick="f1('+')">
<input type="button" value=" - " onclick="f1('-')">
<input type="button" value=" * " onclick="f1('*')">
<input type="button" value=" / " onclick="f1('/')"><br>
计算结果：<input type="text" name="" id = "id3">

</body>
</html>
-------------------------------------------------------- Part 3

****************************************************************************<head>
<style type="text/css">
tr{
text-align:center;
}
</style>

<script type="text/javascript">
function f1(){
var td = document.getElementsByTagName("li");
//alert(td.length);
for (var i = 0;i<td.length ;i++ )
{
//alert(td[i].innerText);
//alert(td[i].innerHTML);
alert(td[i].outerHTML);
}

}
function f2(t){

var cb = document.getElementsByName("love");
//alert(cb.length);
if (t.checked == true)
{//全选按钮被选中的时候
for (var i = 0;i<cb.length ;i++ )
{
cb[i].checked = true;
}
}else{
for (var i = 0;i<cb.length ;i++ )
{
cb[i].checked = false;
}
}
}

function f3(){
var cb = document.getElementsByName("love");
for (var i = 0;i<cb.length ;i++ )
{
if (cb[i].checked == true)
{
cb[i].checked = false;
}else{
cb[i].checked = true;
}
}
}

function f4(){
var cb = document.getElementsByName("love");
var b = true;
for (var i = 0;i<cb.length ;i++ )
{
if (cb[i].checked == false)
{
b = false;
break;
}
}

var qx = document.getElementById("qx");

if (b)
{
qx.checked = true;
}else{
qx.checked = false;
}
}

function f7(){
//alert(location.href);
location.href = "2133.html";
//改变href值实现页面跳转

/*
超链接
提交按钮
图片提交按钮

*/
}

function f8(){
location.reload();
}
function f9(){
var img = document.getElementById("img");
img.style.display = "none";
}
function f10(){
var img = document.getElementById("img");
//img.style.display = "inline"; 行内的方式显示
img.style.display = "block";//以块的方式显示
}
function f11(){
var img = document.getElementById("img");
img.style.visibility = "hidden";
}
function f12(){
var img = document.getElementById("img");
img.style.visibility = "visible";
}
</script>

<style type="text/css">
.c1{
border-bottom:1px dashed #cc3300;
/*solid:实线
dashed:虚线
dotted:点线
*/
}
</style>
</head>

<body>
<input type="button" value="点击隐藏左边的图片" onclick="f9()">
<input type="button" value="点击显示左边的图片" onclick="f10()">
<br>
<input type="button" value="点击隐藏左边的图片" onclick="f11()"><br>
<input type="button" value="点击显示左边的图片" onclick="f12()">
<br>
<img src="data:images/22.gif" width="135" height="180" border="0" alt="" id = "img">
<img src="data:images/23.gif" width="250" height="170" border="0" alt="">

<br><br>
<input type="button" value="刷新网页" onclick="f8()"><br><br>
<img src="data:images/72.gif" width="250" height="161" border="0" alt="">
<img src="data:images/79.gif" width="200" height="200" border="0" alt="">

<img src="data:images/77.gif" width="250" height="169" border="0" alt="">
<br>
<input type="button" value="点击获得当前网页的地址" onclick="f7()">
<br>
<input type="button" value="获得第二行第三列的内容" onclick="f1()">

<table width = "300px" height = "200px" border = "1px" bordercolor = "red" cellspacing="0" cellpadding = "0" id = "td1">
<tr>
<td><font>姓名</font></td>
<td>年龄</td>
<td>性别</td>
<td>身高</td>
</tr>
<tr>
<td><a href = "#">杜总</a></td>
<td>17</td>
<td>女</td>
<td>1.7</td>
</tr>
<tr>
<td>陆总</td>
<td>3</td>
<td>女</td>
<td>1</td>
</tr>
</table>

<div id="" class="">
sads
</div>
<ul>
<li>fdfdfd</li>
<li>fdfdfd</li>
<li>fdfdfd</li>
<li>fdfdfd</li>
</ul>

<form action = "" method = "">
杜总的兴趣爱好：
<br>
<input type = "checkbox" checked = "checked" name = "love" onclick = "f4()"/>吃饭
<br>
<input type = "checkbox" name = "love" onclick = "f4()"/>睡觉<br>
<input type = "checkbox" name = "love" onclick = "f4()"/>lol<br>
<input type = "checkbox" checked = "checked" name = "love" onclick = "f4()"/>KTV<br>
<input type = "checkbox" name = "love" onclick = "f4()"/>运动<br>
<input type = "checkbox" id = "qx" onclick = "f2(this)"/>全选

<input type = "checkbox" onclick = "f3()"/>反选
</form>
<br><br><br><br><br><br><br>
</body>
</html>

-------------------------------------------------------- Part 4

</body>
</html>

-------------------------------------------------------- Part 6
<!-- 动态改变样式
三种
1.行内样式
<font style = "font-size:20px;color:red;">ff</font>
2.内部样式
<style type = "text/css">
a.标签选择器
p{}
b.类选择器
.c1{
}
c.id选择器
#id1{
color:red
font-size:
font-family:
font-weight:bold/normal;
font-style:italic/normal;
text-decoration:underline/none;
text-align:left/center/right;
line-height:23px;行高
letter-spacing:30px;字符间距
}
</style>
3.外部样式
<link type = "text/css" rel = "stylesheet" href = "a.css"/>
文本样式：
color:
font-size:
font-family:
font-weight:bold/normal;
font-style:italic/normal;
text-decoration:underline/none;
text-align:left/center/right;
line-height:23px;行高
letter-spacing:30px;字符间距

背景样式
background-color:;
background-image:url();
background-repeat:no-repeat/repeat-x/repeat-y/repeat;
background-position:xpx ypx;
x:正数背景图片向右偏移
y:正数背景图片向下偏移

超链接的伪类：
l v h a love hate
a:link{}
a:visited{}
a:hover{}
a:active{}

边框样式
border-width:3px;
border-color:pink;
border-style:solid/dashed/dotted;

border:1px solid red;

border-right:3px dashed blue;

内边距：padding
外边距：margin
浮动：float
**************************************<head>
**************************************<head>
**************************************<head>
<script type="text/javascript">
function f1(){
/*var img = document.createElement("img");
img.src = "images/1.gif";
document.body.appendChild(img);*/
/*
var tr_new = document.createElement("tr");
var t = document.getElementById("tab");
t.appendChild(tr_new);
var td0 = document.createElement("td");
td0.innerHTML = "联想笔记本";
var td1 = document.createElement("td");
td1.innerHTML = "3900";
var td2 = document.createElement("td");
td2.innerHTML = "4";
var td3 = document.createElement("td");
td3.innerHTML = "删除";
tr_new.appendChild(td0);
tr_new.appendChild(td1);
tr_new.appendChild(td2);
tr_new.appendChild(td3);
*/
var t = document.getElementById("tab");
var length = t.rows.length;
var tr_new = t.insertRow(length);
var td0 = tr_new.insertCell(0);
var td1 = tr_new.insertCell(1);
var td2 = tr_new.insertCell(2);
var td3 = tr_new.insertCell(3);
td0.innerHTML = "联想笔记本";
td1.innerHTML = "4567";
td2.innerHTML = "3";
td3.innerHTML = "删除";
}

function f2(){
var sp = document.getElementById("sp").value;
var jg = document.getElementById("jg").value;
var sl = document.getElementById("sl").value;
var t = document.getElementById("tab");
var length = t.rows.length;
var tr_new = t.insertRow(length-1);
var td0 = tr_new.insertCell(0);
var td1 = tr_new.insertCell(1);
var td2 = tr_new.insertCell(2);
var td3 = tr_new.insertCell(3);
td0.innerHTML = sp;
td1.innerHTML = jg;
td2.innerHTML = sl;
td3.innerHTML = "<input type = 'button' value = '删除' onclick = 'f3(this)'/>";
}
function f3(t){
var tr = t.parentNode.parentNode;
var index = tr.rowIndex;
var t = document.getElementById("tab");
t.deleteRow(index);
}
function f11(t){
t.style.border = "10px dotted green";
t.style.backgroundColor="yellow";
t.style.color = "purple";
t.style.fontSize = "40px";
t.style.fontWeight = "bold";
}
function f12(t){
t.style.border = "1px solid red";
}
function f21(n,t){
t.style.border = "1px solid red";
var img = document.getElementById("img");
img.src = "../第七次课JS/作业/上机作业/images/"+n+".jpg";
for (var i = 1;i<=5 ;i++ )
{
if (i!=n)
{
var a = document.getElementById("img"+i);
a.style.border = "0px";
}
}
}
</script>
<style type="text/css">
.c1{
width:200px;
height:200px;
border:1px solid red;
color:green;
font-size:30px;
font-family:隶书;
text-decoration:underline;/*下划线*/
}
.c2{
width:200px;
height:200px;
border:2px dashed orange;
color:purple;
font-size:40px;
font-family:华文行楷;
text-decoration:none;/*去下划线*/
}
.li_out{
list-style:none;
float:left;
width:103px;
height:28px;
background-image:url(bg1.gif);
margin-right:1px;
color:white;
font-family:黑体;
text-align:center;
padding-top:5px;
}

.li_over{
list-style:none;//是否有‘●’或‘123’或‘阿拉伯123’修饰
float:left;
width:103px;
height:28px;
background-image:url(bg2.gif);
margin-right:1px;
color:yellow;
font-family:黑体;
text-align:center;
padding-top:5px;
cursor:pointer;
} </style>
</head>
<body>
<table>
<tr>
<td colspan = "5" align="center">
<img src="../images/1.jpg" width="300" border="0" alt="" id = "img">
</td>
</tr>
<tr>
<td><img src="../images/1.jpg"width="160" height="152"border="0" alt="" onmouseover = "f21(1,this)" id = "img1"></td>
<td><img src="./images/2.jpg" width="160" height="152"border="0" alt="" onmouseover = "f21(2,this)" id = "img2"></td>
<td><img src="../images/3.jpg" width="160" height="152" border="0" alt="" id = "img3"onmouseover = "f21(3,this)"></td>
<td><img src="../images/4.jpg" width="160" height="152" border="0" alt="" id = "img4"onmouseover = "f21(4,this)"></td>
<td><img src="../images/5.jpg"width="160" height="152" border="0" alt="" id = "img5"onmouseover = "f21(5,this)"></td>
</tr>
</table>
<ul>
<li class = "li_out" onmouseover = "this.className = 'li_over'" onmouseout = "this.className='li_out'">平板电脑</li>
<li class = "li_out"onmouseover = "this.className = 'li_over'"onmouseout = "this.className='li_out'">平板电脑</li>
<li class = "li_out"onmouseover = "this.className = 'li_over'"onmouseout = "this.className='li_out'">平板电脑</li>
<li class = "li_out"onmouseover = "this.className = 'li_over'"onmouseout = "this.className='li_out'">平板电脑</li>
</ul>
<br><br><br><br>
<div id="" class="c1"onmouseover = "this.className='c2'" onmouseout = "this.className ='c1'">
hello，小样
</div>
<hr/>
<input type="button" value="添加元素" onclick="f1()">
<table width = "300px" height = "200px" border = "1" id = "tab">
<tr>
<td>商品名称</td>
<td>数量</td>
<td>价格</td>
<td>操作</td>
</tr>
<tr>
<td>三星手机</td>
<td>4999</td>
<td>2</td>
<td><input type = "button" value = "删除" onclick = "f3(this)"/></td>
</tr>
<tr>
<td>苹果电脑</td>
<td>9999</td>
<td>1</td>
<td><input type = "button" value = "删除" onclick = "f3(this)"/></td>
</tr>
<tr>
<td colspan = "4"><input type="button" value="添加订单" onclick="f2()"></td>
</tr>
</table>
订单：<br>
商品：<input type="text" name="" id = "sp"><br>
价格：<input type="text" name=""id = "jg"><br>
数量：<input type="text" name=""id = "sl">
</body>
</html>

码农公寓

相关文章