javaScript额外笔记

--------------------------------------------------------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>

javaScript额外笔记的更多相关文章

javascript进阶笔记(2)
js是一门函数式语言,因为js的强大威力依赖于是否将其作为函数式语言进行使用.在js中,我们通常要大量使用函数式编程风格.函数式编程专注于:少而精.通常无副作用.将函数作为程序代码的基础构件块. 在函 ...
JavaScript基础笔记二
一.函数返回值1.什么是函数返回值函数的执行结果2. 可以没有return // 没有return或者return后面为空则会返回undefined3.一个函数应该只返回一种类型的值二.可变 ...
JavaScript基础笔记一
一.真假判断真的:true.非零数字.非空字符串.非空对象假的:false.数字零.空字符串.空对象.undefined 例: if(0){ alert(1) }else{ alert(2) } ...
Java程序猿的JavaScript学习笔记（汇总文件夹）
最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...
javascript - 工作笔记（事件四）
在javascript - 工作笔记 (事件绑定二)篇中,我将事件的方法做了简单的包装, JavaScript Code 12345 yx.bind(item, "click&quo ...
Java程序猿的JavaScript学习笔记（8——jQuery选择器）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
Java程序猿JavaScript学习笔记（2——复制和继承财产）
计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...
Java程序猿的JavaScript学习笔记（3——this/call/apply）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
你不知道的JavaScript上卷笔记
你不知道的JavaScript上卷笔记前言 You don't know JavaScript是github上一个系列文章初看到这一标题的时候,感觉怎么老外也搞标题党,用这种冲突性比较强的题目 ...

随机推荐

[转]python单元测试unittest
单元测试作为任何语言的开发者都应该是必要的,因为时隔数月后再回来调试自己的复杂程序时,其实也是很崩溃的事情.虽然会很快熟悉内容,但是修改和调试将是一件痛苦的事情,如果你在修改了代码后出现问题的话,而单 ...
在X64系统中PowerDesigner无法连接MySQL的解决方法
在MySQL的官网http://dev.mysql.com/downloads/connector/odbc/下载,下个X64版本的,顺带也下了个X86的. 下载完成安装一切顺利(因为是X64系统,自 ...
手机1520 win8.1升级win10
昨天买了手机1520,卖家不错:https://item.taobao.com/item.htm?id=525484481986 于是我想把win8.1升级为win10 首先去http://www.i ...
Spring装配bean
Spring配置的可选方案 Spring提供了如下三种装配机制: (1)在XML中显式配置 (2)在Java中显式配置 (3)隐式的bean发现机制和自动装配 Spring有多种方式可以装配bean, ...
JavaScript HTML Dom改变HTML
本人为小白,首次写博客有不正确的地方望多多指点与见谅!! 一,改变HTML的内容语法: document.getElementById(id).innerHTML=new HTML: 具体用法: ...
C#设计模式之九装饰模式（Decorator）【结构型】
一.引言今天我们要讲[结构型]设计模式的第三个模式,该模式是[装饰模式].我第一次看到这个名称想到的是另外一个词语“装修”,我就说说我对“装修”的理解吧,大家一定要看清楚,是“装修”,不是“装饰”. ...
NOIP2012疫情控制（二分答案+倍增+贪心）
Description H国有n个城市,这n个城市用n-1条双向道路相互连通构成一棵树,1号城市是首都,也是树中的根节点. H国的首都爆发了一种危害性极高的传染病.当局为了控制疫情,不让疫情扩散到边境 ...
yum fastermirror插件屏蔽一些国内源
最近被yum上hust源的问题恶心的受不了了,真不明白这种源还活着有什么意义,干脆关了得了,省得恶心人,经常Errno 14,404not found,去网页一看,好家伙,提示404的xml.gz路径 ...
yii2之GridView小部件
GridView小部件用于展示多条数据的列表.GridView小部件的使用需要数据提供器即yii\data\ActiveDataProvider的实例作为参数,所以第一步就是要在控制器方法中创建这个 ...
Swift 之Protocol在cocoa中的使用范例搜集(一)
protocol Reusable: class { static var reuseIndentifier: String {get} static var nib: UINib? {get} } ...

javaScript额外笔记

javaScript额外笔记的更多相关文章

随机推荐

热门专题