脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-黑马程序员_javaScript笔记，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
1 HtML内容
1.1)
Html就是超文本标记语言的简写,是最基础的网页语言
Html是通过标签来定义的语言,代码都是由标签所组成
Html代码不用区分大小写
Html代码由<html>开始 </html>结束.里面由头部分<head></head>和体部分<body></body>两部分组成
头部分是给Html页面增加一些辅助或者属性信息,它里面的内容会最先加载
体部分是真正存放页面数据的地方
1.2)
多数标签都是有开始和结束标签,其中有个别标签因为只有单一功能,或者没有要修饰的内容,那么可以在标签内结束
想要对标签修饰的内容进行更丰富的操作,就用到了标签中的属性,通过对属性值的改变,增加了更多的效果选择.
属性与属性值之间用"="连接,属性值可以用双引号或单引号或者不用引号,一般都会用双引号,或公司规定书写规范
格式:<标签名 属性名="属性值"> 数据内容</标签名>
<标签名 属性名="属性值" />
1.3)操作思想:
为了操作数据,都需要对数据进行不同标签的封装,通过标签中的属性对封装的数据进行操作
标签就相当于一个容器,对容器中的数据进行操作,就是在不断的改变容器的属性值
2 常用标签的使用
2.1)字体标签<font>
例子:<font size=5 color=red>字体标签示例</font>
注:简单颜色可以直接写对应的英文单词,复杂颜色用16进制表示,表现形式#FF0000两个数为一组,按红,绿,蓝排列,如:#00FF00表示绿色.建议用工具选取
2.2)标题标签:<h1><h2>...<h6>
因为标题是文本中常用的内容,为了方便操作而定义的,其实就是某个字体和粗体的组合
2.3)特殊字符:
如果要在网页上显示一些特殊符号,比如< > &等.因为这些符号在代码中会被浏览器识别并解释,所以用一些特殊方式来表示
< &qt; & " &req; © ™
< > & " 空格
3 列表
3.1)列表标签<dl>
<dt>:上层项目
<dd>:下层项目
注意:<dt>和<dd>都要放在<dl>中使用
例子:
<dl>
<dt>游戏名称</dt>
<dd>星际争霸</dd>
<dd>红色境界</dd>
<dt>部门名称</dt>
<dd>技术部</dd>
<dd>培训部</dd>
</dl>
效果:
游戏名称
星际争霸
红色境界
部门名称
技术部
培训部
3.2)列表中项目符号对应的标签
<ol>:数字标签(a A 1 i r)
<ul>:是符号标签
<li>:具体项目内容标签.此标签只在<ol>和<ul>中有效
通过tyPE属性更改项目符号,如果想做出效果更好的列表,如:黑色圆点就用css
4 图像
4.1)图像标签<img>
例:<img src="1.jpg" align=";middle" border="3" alt="Introduce of the photos"/>
align:属性定义图片的排列方式,
border:用来设置图像的边框
src:连接一个文件
4.2)图像地图<map>
应用:当要在图像中选取某一部分作为连接的时候.如中国地图每个省所对应的区域
map标签要和img标签联合使用.href是超连接
<img src="Sunset.jpg" alt="the introduce of the photos" uSEMap="#Map" />
<map>
<area Shape="rect"coords="50.12.221,111" href="1.html">
<area shape="rect"coords="52.11.121,133" href="2.html">
</map>
5 表格
5.1)表格标签<table>
组成:
标题标签<caption>给表格提供标题
表头标签:<th>一般对表格的第一行或者第一列进行格式化,就是粗体显示,并不常用
行标签:<tr>
单元格标签<td>加载行标签的里面,可以简单理解为,先有行,在行中再加入单元格
格式:
<table border="1" width="40%"><!--值为百分比可以让表格的宽度随浏览器窗口的大小变化-->
<caption>表格标题</caption>
<tr><!--第一行-->
<th>姓名</th>
<th>年龄</th>
</tr>
<tr algin="center"><!--第二行-->
<td>张三</td>
<td>23</td>
</tr>
</table>
5.2)例子
colspan:表示单元格占两列
rowspan:表示单元格占两行
[html] <html>
<head>
<!--font size="3" color="red">哈哈,我来啦!</font-->
</head>
<body>
<table border="1" bordercolor="00ffff" width="50%" cellspacing="0"
cellpadding="10">
<caption>我是标题</caption>
<tbody >
<tr>
<th colspan="2">我是张三</th>
<!--td>我是李四</td-->
</tr>
<tr>
<td align="center"><b>我是王五</b></td>
<td>我是赵六</td>
</tr>
</tbody>
<tbody >
<tr>
<th rowspan="2">我是张三</th>
<td>我是李四</td>
</tr>
<tr>
<td align="center"><b>我是王五</b></td>
</tr>
</tbody>
</table>
</body>
</html>
<html>
<head>
<!--font size="3" color="red">哈哈,我来啦!</font-->
</head>
<body>
<table border="1" bordercolor="00ffff" width="50%" cellspacing="0"
cellpadding="10">
<caption>我是标题</caption>
<tbody >
<tr>
<th colspan="2">我是张三</th>
<!--td>我是李四</td-->
</tr>
<tr>
<td align="center"><b>我是王五</b></td>
<td>我是赵六</td>
</tr>
</tbody>
<tbody >
<tr>
<th rowspan="2">我是张三</th>
<td>我是李四</td>
</tr>
<tr>
<td align="center"><b>我是王五</b></td>
</tr>
</tbody>
</table>
</body>
</html>
5.3)tbody的作用
可以控制表格分行下载,从而提高下载速度,网页的打开是先表格的内容全部下载完毕后,才显示出来的,分行下载可以先显示部分内容,这样会减少用户等待事件
使用tbody的不到是可以使得这些包含在内的代码不用在整个表格都解析后一起显示,就是说如果有多行,那么如果得到一个tbody行,就可以显示一行
tbody这个标签可以控制表格分行下载,当表格内容很大时比较使用,在需要分行下载处加上
<tbody>和</tbody>
6 超链接标签<a>有两种用法
6.1)超链接
超链接<a href=" ">
例子:
<a href="http://www.sina.COM.cn" target="_blank">新浪</a>
href属性值可以是url,也可以是本地文件,
target属性是指定在那个窗口打开,其中_blank表示在新窗口中打开
tITle:当鼠标放到新浪的时候,显示新浪的说明
例子:
[html] <html>
<head>
</head>
<body>
<a name="top">顶部位置<a/><br/>
<a href="http://www.xxx.com" title="图片说明"><img src="xiaoyunhui.jpg" width="5%"/></a>
<br/>
<a href="http://www.sina.com.cn" target="_blank">
<font size="5" color="blue">新浪<font/></a><br/>
<a href="mailto:abc@sohu.com.">联系我们</a><br/>
<a href="thunder://avadCADfa">下载</a>
<hr color="ff0000" />
<table align="center" border="1" color="blue" height="300" width="300">
<tbody>
<tr>
<th>第一行第一个单元格</th>
<th>第一行第二个单元格</th>
<tr>
<tr>
<td>第二行第一个单元格</td>
<td>第二行第二个单元格</td>
<tr>
</body>
<table>
<table align="center" border="1" color="blue" height="300" width="300">
<tbody>
<tr>
<th>第一行第一个单元格</th>
<th>第一行第二个单元格</th>
<tr>
<tr>
<td>第二行第一个单元格</td>
<td>第二行第二个单元格</td>
<tr>
</body>
<table>
<table align="center" border="1" color="blue" height="300" width="300">
<tbody>
<tr>
<th>第一行第一个单元格</th>
<th>第一行第二个单元格</th>
<tr>
<tr>
<td>第二行第一个单元格</td>
<td>第二行第二个单元格</td>
<tr>
</body>
<table>
<a href="#top">回到顶部<a/>
</body>
</html>
<html>
<head>
</head>
<body>
<a name="top">顶部位置<a/><br/>
<a href="http://www.xxx.com" title="图片说明"><img src="xiaoyunhui.jpg" width="5%"/></a>
<br/>
<a href="http://www.sina.com.cn" target="_blank">
<font size="5" color="blue">新浪<font/></a><br/>
<a href="mailto:abc@sohu.com.">联系我们</a><br/>
<a href="thunder://avadcaDFa">下载</a>
<hr color="ff0000" />
<table align="center" border="1" color="blue" height="300" width="300">
<tbody>
<tr>
<th>第一行第一个单元格</th>
<th>第一行第二个单元格</th>
<tr>
<tr>
<td>第二行第一个单元格</td>
<td>第二行第二个单元格</td>
<tr>
</body>
<table>
<table align="center" border="1" color="blue" height="300" width="300">
<tbody>
<tr>
<th>第一行第一个单元格</th>
<th>第一行第二个单元格</th>
<tr>
<tr>
<td>第二行第一个单元格</td>
<td>第二行第二个单元格</td>
<tr>
</body>
<table>
<table align="center" border="1" color="blue" height="300" width="300">
<tbody>
<tr>
<th>第一行第一个单元格</th>
<th>第一行第二个单元格</th>
<tr>
<tr>
<td>第二行第一个单元格</td>
<td>第二行第二个单元格</td>
<tr>
</body>
<table>
<a href="#top">回到顶部<a/>
</body>
</html>
6.2)定位标记<a name=" ">
一般在本页面中使用,当网页内容过长,定位标记会比拖动滚动条方便快捷
注:定位标记要和超链接结合使用才有效
例子:
<a name="标记">标记位置</a>
<p>.....<!--很多空行以制造网页过长的效果-->
<a href="#标记">返回标记位置</a>
注意:使用定位标记时一定要在href值的开始处加入$标记名
7表单
7.1)表单标签<form>
表单标签是最常用的标签,用于与服务器端的交互
<input>:输入标签:接受用户输入信息
7.2)type选择标签
type属性指定输入标签的类型
文本框text:输入的文本信息直接显示在框中
密码框password;输入的文本以原点或者星号的形式显示
单选框radio:如性别选择
复选框checkbox:如兴趣选择
隐藏字段hidden:在页面上不显示,但在提交的时候随其他内容一起提交
提交按钮submit:用于提交表单中的内容
重置按钮reset:将组件中填写的内容设置为初始值
按钮button:自定义一个按钮默认是没有任何效果的可以为其自定义事件
file:后期扩展内容,文件上传会自动生成一个文本框,和一个浏览按钮
图像image:它可以替代submit按钮,为了提交按钮的难看,可以用image的src属性链接一个好看的按钮图片,完成提交效果
例子:
[html] <html>
<head>
</head>
<body>
<fieldset>
<legend>注册区域</legend>
<form action="http://192.168.1.104:10009">
<table border="1" bordercolor="blue" cellspacing="0" cellpadding="10" width="50%" algin="center">
<tr>
<th colspan="2">信息注册页面</th>
</tr>
<tr>
<td>用户名:</td>
<td><input type="text" name="user" /> </td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="psw" /> </td>
</tr>
<tr>
<td>确定密码:</td>
<td><input type="password" name="repsw"/> </td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" value="man" />男
<input type="radio" name="sex" value="gril"/>女
</td>
</tr>
<tr>
<td>技术:</td>
<td>
<input type="checkbox" name="chb" value="java"/>java <input type="checkbox" name="chb" value="jsp"/>jsp <input type="checkbox" name="chb" value="Servlet"/>Servlet
</td>
</tr>
<tr>
<td>国家:</td>
<td>
<select name="country" >
<option value="none">--选择国家--</option>
<option value="cn">中国</option>
<option value="en">英国</option> <option value="usa">美国</option>
</select>
</td>
</tr>
<tr>
<th colspan="2">
<input type="submit" />
<input type="reset" />
</th>
</tr>
</table>
</form>
</fieldset>
</body>
</html>
<html>
<head>
</head>
<body>
<fieldset>
<legend>注册区域</legend>
<form action="http://192.168.1.104:10009">
<table border="1" bordercolor="blue" cellspacing="0" cellpadding="10" width="50%" algin="center">
<tr>
<th colspan="2">信息注册页面</th>
</tr>
<tr>
<td>用户名:</td>
<td><input type="text" name="user" /> </td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="psw" /> </td>
</tr>
<tr>
<td>确定密码:</td>
<td><input type="password" name="repsw"/> </td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" value="man" />男
<input type="radio" name="sex" value="gril"/>女
</td>
</tr>
<tr>
<td>技术:</td>
<td>
<input type="checkbox" name="chb" value="java"/>java <input type="checkbox" name="chb" value="jsp"/>jsp <input type="checkbox" name="chb" value="Servlet"/>Servlet
</td>
</tr>
<tr>
<td>国家:</td>
<td>
<select name="country" >
<option value="none">--选择国家--</option>
<option value="cn">中国</option>
<option value="en">英国</option> <option value="usa">美国</option>
</select>
</td>
</tr>
<tr>
<th colspan="2">
<input type="submit" />
<input type="reset" />
</th>
</tr>
</table>
</form>
</fieldset>
</body>
</html>
7.3)
<select>选择标签,提供用户选择内容.如用户所在的省市.size属性为显示项目个数
<option>:子项标签 属性selected没有属性值,加在子项上,其中一个子项上,子项就变成默认被选项
7.4)<textarea>:多行文本框.如:个人信息描述
7.5)<label>:用于给各元素定义快捷键
for属性:指定快捷键作用的表单元素,必须要与作用的表单元素的id值相同
accesskey属性:指定快捷键,此快捷键需要和alt键组合使用
例子:
<label for="user" accesskey="u" >用户名(u)</label>
<input type="text" id="user" />
7.6)get方法和post方法的区别
<form action="http://192.168.1.104" method="get">
<form action="http://192.168.1.104" method="post">
get:会将提交的数据显示在地址栏上,对于敏感性安全性不高,提交数据的体积受地址栏的限制,获取到的消息封装在消息头之前(封装在http请求行)
post:不会将数据显示在地址栏,安全性高,可以提交大体积的数据,获取的的消息封装在数据体中,也就是http消息头之后的空行后.
对于服务端而言:
表单提交尽量用post,因为涉及到编码问题
对于post提交的中文.在服务端可以直接使用setCharacterEncoding("gbk")就可以解决
使用表单的组件不一定要定义form标签.
只有需要将数据进行服务端的提交的时候才会用到form标签因为form有个action属性,可以链接到服务端
表单提交:
先定义form表单中的action属性值,指定表单数据提交的目的地(服务端)
明确提交方式,通过指定method属性值.如果不定义,那么method的值默认是get
8)头标签
头标签放在<head></head>头部分之间.包括:title base meta link
8.1)<title>指定浏览器的标题栏显示内容
8.2)<base>
href属性:指定网页中所有的超链接目录.可以是本地目录,也可以是网络目录.注意值的结尾处一定要用/表示目录.只作用于相对路径的超链接文件
当要更新网站的时候,可以先把更新的文件都备份都另外一个盘,然后在备份文件上面完全更新完之后,把目录指向更新后的文件就行了,这样就避免了在原文件上面修改,当修改到一半的时候,用户访问不了的情况
target属性:指定打开超链接方式.如_blank表示所有的超链接在新窗口中打开
例子:
<head>
<base href="c:/" target="_blank">
</head>
<body>
<a href="news.html"><u>新闻</u></a>
</body>
8.3)<meta>
name属性:网页的描述信息.当取keywords时,content属性的内容就作为搜索引擎的关键字进行搜索
http-equiv属性:模拟HTTP协议的相应消息头
例子:
<meta name="keywords" content="犀利哥,凤姐,曾哥" />
<meta http-equiv="refresh" content="3";url="http://www.sina.com.cn" />
表示打开此页面3秒后自动转到新浪页面
我们可以设置在本页面注册成功后,转到主页
8.4)<link>
rel属性:描述目标文档与当前文档的关系.
type属性:文档类型.
media:指定目录文档在那种设备上起作用.
例子:
<link rel="stylesheet" type="text/css" media="screen,PRint" href="a.css" />
9)其它标签
<marquee>让内容动起来
direction属性:left right down up
behavior属性:scroll alternate slide
<pre>可以将文本内容按在代码区的样子显示在页面上
<i>斜体标签
<u>下横线标签
<strong>加粗标签
<p>段落标签,跟<br>标签不一样,两段之间会有空隙
<br>换行标签
<sub>首字母下沉
<sup>字母上升,如次数幂
10)XHTML XML
XHTML是可扩展的超文本标记语言(Extensible HyperText Markup Language)
XHTML是w3c组织在2000年的时候为了增强HTML退出的,本来是想替代Html的,但是发现internet上用 Html写的网页太多了,没有成功.可以理解为它是html一个升级版本
XHTML的代码结构更为严谨,是基于xml的一种应用
xml是可扩展标记语言(Extensible Markup Language)
xml是对数据信息的描述.Html是数据显示的描述
Xml代码规定的更为严格,如:标签不结束视为错误
xml规范可以被更多的应用程序所解释,将称为一种通用的数据交换语言
各位服务器,框架都将xml作为配置文件
10)CSS样式
10.1)css层叠样式表
将网页中的样式分离出来,完全由css来控制
增强样式的复用性以及可扩展性
格式:
选择器{属性名:属性值;属性名:属性值...}
10.2)css和html相结合的四种方式:
每一个html标签都有一个style属性
当页面有多个标签有相同样式时,可以进行复用
<style>
css代码
<style>
当有多个页面中的标签的样式相同时,还可以将样式单独封装成一个css文件
通过在每个页面中定义
<style>
@import url("1.css");
<style>
通过html中head标签中的link标签连接一个css文件
<link rel="stylesheet" href="1.css" />
技巧:为了提高相同样式的复用性以及可扩展性,可以将多个标签样式进行单独定义,并封装成css文件
p.css,p.css
在一个css文件中使用css的import将多个标签样式文件导入
然后在html页面上,使用link标签导入这个总的css文件即可
例子:
1.css
@import url("p.css");
@import url("p.css");
<link rel="stylesheet" href="1.css" />
10.3)选择器:其实就是样式要作用的标签容器
当样式分离后,html作用于标签封装数据.然后将css加载到指定标签上
10.3.1)选择器的基本分类:
标签选择器:其实就是html中的每一个标签名
类选择器:其实就是每一个标签中的class属性.
用.的形式表示,只用来给css所使用,可以对不同标签进行相同样式设定
ID选择器:其实就是每一个标签中的id属性,但是要保证id唯一性,用#来标识
id不仅可以被css所使用,还可以被javascript所使用
10.3.2)选择器优先级:ID>class>标签
10.3.3)扩展选择器:
关联选择器:其实就是对标签中的标签进行样式定义.选择器 选择器...
组合选择器:对多个选择器进行限购听那个样式定义,将多个选择器通过,隔开的形式
伪元素选择器:其实就是元素的一种状态
a:link:超链接被点前状态
a;visited:超链接被点击后状态
a:hover:悬停在超链接上
a:active:点击超链接时
在定义这些状态时,有一个顺序:L V H A
p:First-letter
p:first-line
:focus:很遗憾,ie6不支持,但ff支持
css滤镜:其实通过一些代码完成丰富了样式
当使用到css的更多属性时,还需要查阅css api
11)JavaScript概述
11.1)javaScript是基于对象和事件的脚本语言
特点:
安全性(不允许直接访问本地硬盘),它可以做的就是信息的动态交互
跨平台性,(只要是可以解释js的浏览器都可以执行,和平台无关)
11.2)JavaScript与Java不同
js是Netscape公司的产品,java是sun公司的产品
js是基于对象,java是面向对象
js只需要解释就可以执行,java需要先编译成字节码文件,再执行
js是弱类型,java是强类型
11.3)JavaScript与Html的结合方式
想要将其它代码融入Html中,都是标签的形式
js代码存放在标签对<script>...</script>中
使用script标签的src属性引入一个js文件.(方便后期维护,扩展)
例子:<script src="test.js" type="javascript"></script>
注:规范中script标签中必须加入type属性
11.4)javaScript语法
每一种语言都有自己的语法规则,js语法与java很像,所以学习起来比较容易,js当中也有变量,语句,函数,数组等常见语言组成元素.
11.4.1)变量
通过关键字VAR来定义,弱类型就是说不用指定具体的数据类型
例子:var x = 3;x = "hello";
注意:javascript中都是字符串,没有字符一说,用单引号或者双引号都是表示字符串
注:js中特殊的常量值:undefined,当变量没有初始化就被使用,该变量的值就是undefined(未定义).
11.4.2)语句(与java语句格式相同)
判断结构(if语句)
注:var x = 3;
if(x == 4)//可以进行比较运算
if(x = 4)//可以进行赋值运算,而且可以同样进行判断,不报错.因为在js中0就是false,非0就是 true(通常用1表示).所以if(x=4)结果是true
选择结构(switch语句)
循环结构(while语句,do...while语句,for语句)
注意:不同的是,没有了具体数据类型的限制,使用时要注意
例子:
<Script type="text/javaScript">
alert (true+5)
var x = 3;
var y = "abc";
if(x=1)
alert (x);
else
alert (y);
</Script>
使用逻辑运算符进行布尔表达式连接的时候,需要是短路与和短路或.
&& ||因为在js中,非0即为true,0为false,非null为true,null为false
js特有的语句:
with(对象){}
可以确定对象所使用的范围.在范围内,可以直接使用指定对象的属性和行为
而不用 对象. 的形式调用,简化了对象的操作
for(变量 in 对象):可以对对象的属性及行为进行遍历
11.4.3)函数
11.4.3.1)一般函数
格式:
fnuction 函数名(形式参数...)
{
执行语句
return返回值
}
函数是多条执行语句的封装体,只有被调用才会运行
注意:调用有参数的函数,但没有给其传值,函数一样可以运行,或者调用没有参数的函数,给其传值,该函数也一样运行.说的简单点;只要写了函数名后面跟了一对小括号,该函数就会运行,那么传递的参数呢?
其实,在函数中有一个参数数组对象arguments,该对象将传递的参数都封装在一个数组中.
例子:
function demo()//定义函数
{
alert(arguments.length)
}
demo("hello",123,true);//调用函数
那么弹出的对话框结果是3,如果想得到所有的参数值,可以通过for循环遍历该数组
11.4.3.2)匿名函数,匿名函数就是一种简写格式
格式:
function()
{
执行语句
}
例子1:
var fun=function()
{
alert("hello world");
}
fun();
例子2:
window.onload=function()
{
alert("load ok");
}
11.4.3.3)动态函数
通过js的内置对象function实现
例子:
var demo=new function("x","y";"alert(x+y);");
demo(4,6);
如同:
function demo(x,y)
{
alert(x+y);
}
demo(4,6);
不同的是动态函数,参数以及函数体都可以通过参数进行传递,可以动态指定
11.4.3.4)函数使用时要注意的部分:
function show()
{
return "show run";
}
var method=show();
var method=show;
两句代码都是正确的,
第一句表示的是show方法运行后的结果赋值给method变量.
第二句表示的是show指向的对象的地址值赋值给method.那么method也指向了该对象
那么就可以通过method();的形式来调用这个show方法.
11.5)数组
方便操作多元素的容器,可以对其中的元素进行编号
特点:可以存任意元素,长度是可变的,该数组中存放的元素类型可以是不同的.
格式:
格式1:var arr=new Array();
arr[0] = "hello";
arr[1] = 123;
格式2:var arr=['hello',123,true,"abc"];
格式3二维数组的定义:var arr=[[3,2,1],[1,2]];
通过遍历即可对数组进行基本操作
for(var x=0;x<arr.length;x++)
{
alert(arr[x]);
}
11.6)对象
js除了已经提供的内置对象外,也可以自定义对象.
例子:
function Person()
{
}
var p=new Person();
p.name="zhansan";//定义成员变量
p.age=20;
//定义成员函数
p.run=function()
{
alert("run");
}
p.run();
或者:
function Person(name,age)
{
this.name=name;
this.age=age;
}
var p=new Person("zhangsan",20);
11.6.1)js用于操作对象的语句
with语句
格式:
with(对象)
{
}
应用:当调用一个对象中多个成员时,为了简化调用,避免"对象."这种格式的重复书写
var p=new Person("zhangsan",20);
alert(p.name+","p.age);
11.6.2)prototype属性
javascript已经定义了一些对象,这些对象都有一个属性叫做prototype原型
prototype可以获取指定的对象引用,可以通过该引用给已有的对象赋予一些新的功能
那么在使用该对象时,可以直接调用定义好的新功能.
例子1定义一个获取最大值的方法:
function getMax()
{
var max=0;
for(var x=1; x<this.length; x++)
{
if(this[max]<this[x])
max=x;
}
return this[max];
}
var arr=[3,2,1,222,11,111,121];
arr.sort();//直接调用Array对象的sort方法对数组进行排序.
那么可不可以像调用sort方法一样调用getMax方法呢?
就需要将getMax方法添加到Array对象当中.
Array.prototype.getMax=getMax;
var x=arr.getMax();
alert("max"+x);
例子2:取出字符串两端的空格
[html]
<html>
<head>
</head>
<body>
<script type="text/javascript">
function myTrim()
{
var start=0;
var end=this.length-1;
while(start<=end && this.charAt(start)==" ")
start++;
while(start<=end && this.charAt(end)==" ")
end--;
return this.substring(start,end+1);
}
String.prototype.trim=myTrim;
var str1=" abcdefg ";
var str2=str1.trim();
alert(str2);
</script>
</body>
</html>
<html>
<head>
</head>
<body>
<script type="text/javascript">
function myTrim()
{
var start=0;
var end=this.length-1;
while(start<=end && this.charAt(start)==" ")
start++;
while(start<=end && this.charAt(end)==" ")
end--;
return this.substring(start,end+1);
}
String.prototype.trim=myTrim;
var str1=" abcdefg ";
var str2=str1.trim();
alert(str2);
</script>
</body>
</html>
11.6.3)常见的全局方法
parseInt(numstr,[radix]);//将数字格式的字符串转成整数,如果指定了基数,那么numstr,就会按照执行基数进行转换.
var num=parseInt("110",2);//表示"110"这个字符串会按照二进制进行转换
var x=6;
alert(x.toString(2));//110//获取6对应的二进制表现形式
12)DOM(document object model)文档对象模型
其实就是将一些标记型的文档以及文档中的内容当成对象.
为什么要将这些文档以及其中的标签封装成对象呢?
因为可以在对象中定义其属性和行为,可以方便操作这些对象
DOM在封装标记型文档时,有三层模型.
DOM1:针对html文档.
DOM2:针对XML文档
DOM3:针对xml文档
html,xhtml,xml:这些都是标记型文档
DHTML:是多个技术的综合体,叫做动态的html
html:负责将数据进行标签的封装
css:负责标签的样式
dom:负责标签以及标签中的数据封装成对象
javascript：负责通过程序设计方式来操作这些对象
标签之间存在这层次关系:
window
|--
|--
|--
document
html
|--head
|--title
|--base
|--link
|--meta
|--style
|--script
|--body
|--p
|--form
|--input
|--select
|--span
|--a
|--table
|--tbody
|--tr
|--td
|--th
|--dl
|--dt
|--dd
通过这个标签层次,可以形象的看作是一个树形结构,那么我们也可以称标记型文档,加载进内存的是一颗DOM树,这些标签以及标签的数据都是这棵树上的节点
当标记型文档加载进内存,那么内存中有了一个对应的DOM树
DOM对已标记型文档的解析有一个弊端就是文档过大,相对消耗资源.
对于大型文档可以使用SAX这种方式解析.
节点类型:
标签型节点:类型:1
属性节点:类型:2
文本型节点:类型:3
注释型节点:类型:8
document:类型:9
注意:标签之间存在空行时,会出现一个空白的文本节点,在获取节点时一定要注意
节点的关系:
父节点
子节点
兄弟节点
上一个兄弟节点
下一个兄弟节点
获取可以通过节点的层次关系完成.
也可以通过document对象完成
getElementById通过di属性值获取对应的节点对象.如果有多个id值相同,获取到的是第一个id所属对 象,尽量保证id唯一性.返回的是一个对象
getElementByName通过name属性值获取对象,返回的是一堆对象,其实就一个对象数组
getelementsbytagname:既没有id也没有name时,可以通过标签名来获取节点对象.返回的是一堆对象, 其实是一个对象数组
例子:
[html]
<html>
<head>
<script type="text/javascript">
function demo()
{
var pobj=document.getElementById("pid");
//获取父节点
var parent=pobj.parentNode;
//getNodeInfo(parent);
//获取子节点
var childs=pobj.childNodes;
//getNodeInfo(childs[0]);//p中的文本节点
//获取兄弟节点
//1,获取上一个兄弟节点
var preNode=pobj.previousSibling.previousSibling;
//getNodeInfo(preNode);
//2,获取下一个兄弟节点
var nextNode=pobj.nextSibling;
//getNodeInfo(nextNode);
//需求:获取a标签的文本
var aNode=pobj.nextSibling.nextSibling;
var aText=aNode.childNodes[0];
//getNodeInfo(aText);
//需求:获取单元格--文本
var tabNode=pobj.nextSibling;//得到table标签对象
//getNodeInfo(tabNode.childNodes[0].childNodes[0].childNodes[0].childNodes[0]);//这种方式太疯狂了,不可取
var tdNodes=tabNode.getElementsByTagName("td");
//getNodeInfo(tdNodes[0].childNodes[0]);
}
var info="";
function getDocAll()
{
var nodes=document.all;//获取document文档中所有的节点对象的引用
for(var x=0; x<nodes.length; x++)
{
info +=nodes[x].nodeName+"..."+nodes[x].nodeType+"<br/>";
}
//var node=document.all(7);//获取document文档的第七个节点
document.write(info);
}
function getNodeInfo(node)
{
alert("name:"+node.nodeName+"..."+"type:"+node.nodeType+"..."+"value:"+node.nodeValue);
}
/*
public void listFile(File dir)
{
System.out.println(getSpace(level)+dir.getName());
level++;
File[] files=dir.listFiles();
for(int x=0; x<files.length; x++)
{
if(files[x].isDirectory())
listFile(files[x]);
else
System.out.println(getSpace(level)+files[x].getName());
}
}
public String getSpace(int level)
{
StringBuilder sb=new StringBuilder();
for(int x=0; x<level; x++)
{
sb.append("|--");
}
return sb.toString();
}
*/
//通过递归获取节点的层次关系
var str="";
function listNodes(node,level)
{
printInfo(node,level);
level++;
var nodes = node.childNodes;
for(var x=0; x<nodes.length; x++)
{
if(nodes[x].hasChildNodes())
listNodes(nodes[x],level);
else
printInfo(nodes[x],level);
}
}
function getSpace(level)
{
var s="";
for(var x=0; x<level; x++)
{
s +="|-----";
}
return s;
}
function printInfo(node,level)
{
str +=getSpace(level)+"name:"+node.nodeName+"..."+"type:"+node.nodeType+"..."+"value:"+node.nodeValue+"<br/>"
}
function getNodes()
{
listNodes(document,0);
document.write(str);
}
//获取节点的所有属性
function getAtts()
{
var q="";
var pobj=document.getElementById("pid");
var atts=pobj.attributes;
for(var x=0; x<atts.length; x++)
{
q += atts[x].nodeName+"..."+atts[x].nodeType+"..."+atts[x].nodeValue+"<br/>"
}
document.write(q);
}
</script>
</head>
<body>
<input type="button" value="演示" onclick="getAtts()" />
<p id="pid">
aaaaa
</p>
<table>
<tr>
<td>单元格一</td>
<td>单元格二</td>
</tr>
<tr>
<td>单元格一</td>
<td>单元格二</td>
</tr>
</table>
<a href="http://www.sinac.com">非新浪网站</a>
<span>审判区域</span>
</body>
</html>
<html>
<head>
<script type="text/javascript">
function demo()
{
var pobj=document.getElementById("pid");
//获取父节点
var parent=pobj.parentNode;
//getNodeInfo(parent);
//获取子节点
var childs=pobj.childNodes;
//getNodeInfo(childs[0]);//p中的文本节点
//获取兄弟节点
//1,获取上一个兄弟节点
var preNode=pobj.previousSibling.previousSibling;
//getNodeInfo(preNode);
//2,获取下一个兄弟节点
var nextNode=pobj.nextSibling;
//getNodeInfo(nextNode);
//需求:获取a标签的文本
var aNode=pobj.nextSibling.nextSibling;
var aText=aNode.childNodes[0];
//getNodeInfo(aText);
//需求:获取单元格--文本
var tabNode=pobj.nextSibling;//得到table标签对象
//getNodeInfo(tabNode.childNodes[0].childNodes[0].childNodes[0].childNodes[0]);//这种方式太疯狂了,不可取
var tdNodes=tabNode.getElementsByTagName("td");
//getNodeInfo(tdNodes[0].childNodes[0]);
}
var info="";
function getDocAll()
{
var nodes=document.all;//获取document文档中所有的节点对象的引用
for(var x=0; x<nodes.length; x++)
{
info +=nodes[x].nodeName+"..."+nodes[x].nodeType+"<br/>";
}
//var node=document.all(7);//获取document文档的第七个节点
document.write(info);
}
function getNodeInfo(node)
{
alert("name:"+node.nodeName+"..."+"type:"+node.nodeType+"..."+"value:"+node.nodeValue);
}
/*
public void listFile(File dir)
{
System.out.println(getSpace(level)+dir.getName());
level++;
File[] files=dir.listFiles();
for(int x=0; x<files.length; x++)
{
if(files[x].isDirectory())
listFile(files[x]);
else
System.out.println(getSpace(level)+files[x].getName());
}
}
public String getSpace(int level)
{
StringBuilder sb=new StringBuilder();
for(int x=0; x<level; x++)
{
sb.append("|--");
}
return sb.toString();
}
*/
//通过递归获取节点的层次关系
var str="";
function listNodes(node,level)
{
printInfo(node,level);
level++;
var nodes = node.childNodes;
for(var x=0; x<nodes.length; x++)
{
if(nodes[x].hasChildNodes())
listNodes(nodes[x],level);
else
printInfo(nodes[x],level);
}
}
function getSpace(level)
{
var s="";
for(var x=0; x<level; x++)
{
s +="|-----";
}
return s;
}
function printInfo(node,level)
{
str +=getSpace(level)+"name:"+node.nodeName+"..."+"type:"+node.nodeType+"..."+"value:"+node.nodeValue+"<br/>"
}
function getNodes()
{
listNodes(document,0);
document.write(str);
}
//获取节点的所有属性
function getAtts()
{
var q="";
var pobj=document.getElementById("pid");
var atts=pobj.attributes;
for(var x=0; x<atts.length; x++)
{
q += atts[x].nodeName+"..."+atts[x].nodeType+"..."+atts[x].nodeValue+"<br/>"
}
document.write(q);
}
</script>
</head>
<body>
<input type="button" value="演示" onclick="getAtts()" />
<p id="pid">
aaaaa
</p>
<table>
<tr>
<td>单元格一</td>
<td>单元格二</td>
</tr>
<tr>
<td>单元格一</td>
<td>单元格二</td>
</tr>
</table>
<a href="http://www.sinac.com">非新浪网站</a>
<span>审判区域</span>
</body>
</html>
13)window对象
例子:
[html]
<html>
<head>
<script type="text/javascript">
function windemo()
{
//navigator是window窗口对象的其中一个对象,包含了浏览器的信息
var name=window.navigator.appName;
var version=window.navigator.appversion;
//alert(name+"..."+version);
/*
//location是地址栏对象
var url = window.location.href="http://www.sina.com.cn";//页面链接到指定页面
var url2 = window.location.href;//不指定href值,url2默认是打开页面的地址
//alert(url);
*/
/*
//confirm(string str)该方法是window对象的方法,弹出确定和取消的对话框
var b=window.confirm("哥们,这是什么对话框呢?");
alert(b);
*/
/*
//做一个振动屏幕功能
//window.moveTo(200,400);//移到指定位置
for(var x=0; x<88; x++)
{
window.moveBy(20,0);//偏移值,左向右边偏移20,上到下不偏移
window.moveBy(0,20);
window.moveBy(0,-20);
window.moveBy(-20,0);
}
*/
//window方法
//var text=window.prompt("我是对话框","哈哈哈");
//alert(text);
}
function addemo()
{
//window.open("ad.html","_blank","height=400,width=600,location=no menubar=no scrollbars=no,resizable=no,status=no,toolbar=no");
//window.setTimeout("alert('kk')",3000);
//window.setInterval("alert('iter')",3000);//窗口每隔3秒弹出iter
}
/*
window.onload=function()
{
window.open("ad.html","_blank","height=400,width=600,location=no menubar=no scrollbars=no,resizable=no,status=no,toolbar=no");
}
window.onunload=function()
{
//alert("onunload");
}
window.onbeforeunload=function()
{
//alert("onbeforeunload");
}
*/
//keyCode按下键盘,输出对应的ascii值
function keyDemo()
{
/*
//文本框中只能输入1到9的数字
if(!(window.event.keyCode>=48 && window.event.keyCode<=57))
{
alert("不允许录入非法数字");
//returnValue,设置和获取返回值.使得非法数字不显示在文本框中
event.returnValue=false;
}
*/
//srcElement拿到事件源对象
var node= event.srcElement;
alert(node.type);
}
</script>
</head>
<body>
<input type="text" onkeyPress="keyDemo()" /><br/>
<input type="button" value="window演示" onclick="addemo()" />
</body>
</html>
<html>
<head>
<script type="text/javascript">
function windemo()
{
//navigator是window窗口对象的其中一个对象,包含了浏览器的信息
var name=window.navigator.appName;
var version=window.navigator.appVersion;
//alert(name+"..."+version);
/*
//location是地址栏对象
var url = window.location.href="http://www.sina.com.cn";//页面链接到指定页面
var url2 = window.location.href;//不指定href值,url2默认是打开页面的地址
//alert(url);
*/
/*
//confirm(string str)该方法是window对象的方法,弹出确定和取消的对话框
var b=window.confirm("哥们,这是什么对话框呢?");
alert(b);
*/
/*
//做一个振动屏幕功能
//window.moveTo(200,400);//移到指定位置
for(var x=0; x<88; x++)
{
window.moveBy(20,0);//偏移值,左向右边偏移20,上到下不偏移
window.moveBy(0,20);
window.moveBy(0,-20);
window.moveBy(-20,0);
}
*/
//window方法
//var text=window.prompt("我是对话框","哈哈哈");
//alert(text);
}
function addemo()
{
//window.open("ad.html","_blank","height=400,width=600,location=no menubar=no scrollbars=no,resizable=no,status=no,toolbar=no");
//window.setTimeout("alert('kk')",3000);
//window.setInterval("alert('iter')",3000);//窗口每隔3秒弹出iter
}
/*
window.onload=function()
{
window.open("ad.html","_blank","height=400,width=600,location=no menubar=no scrollbars=no,resizable=no,status=no,toolbar=no");
}
window.onunload=function()
{
//alert("onunload");
}
window.onbeforeunload=function()
{
//alert("onbeforeunload");
}
*/
//keyCode按下键盘,输出对应的ascii值
function keyDemo()
{
/*
//文本框中只能输入1到9的数字
if(!(window.event.keyCode>=48 && window.event.keyCode<=57))
{
alert("不允许录入非法数字");
//returnValue,设置和获取返回值.使得非法数字不显示在文本框中
event.returnValue=false;
}
*/
//srcElement拿到事件源对象
var node= event.srcElement;
alert(node.type);
}
</script>
</head>
<body>
<input type="text" onkeypress="keyDemo()" /><br/>
<input type="button" value="window演示" onclick="addemo()" />
</body>
</html>
13)利用超链接实现改变字体大小的功能
定义数据封装的标签(定义界面)
注册事件
事件处理
需求:
页面中有一个新闻区域.
通过超链接 大 中 小
可以让用户改变区域中的字体大小
代码如下:
js代码:
function getDivobj(pid)
{
return document.getElementById(pid);
}
html中的代码:
<html>
<head>
<script type="text/javascript" src=超链接改变字体大小封装的document.js></script>
<script type="text/javascript">
//定义改变字体大小的功能
function changeSize1(size)
{
//var pobj=document.getElementById("pid");
var pobj=getDivobj("pid");
pobj.style.fontSize=size;//这里如果字体要改变背景色,前景色时就要传入很多的数,而且后期要修改也不方便,干脆把这行代码抽取出来,定义一个css样式,我们在函数中调用css样式就行了
}
//定义改变字体大小的功能2,传入css样式
function changeSize2(classname)
{
var pobj=getDivobj("pid");
pobj.className=className;
}
</script>
//设置css样式
<style type="text/css">
.norm{
background-color:#66ffoo;
color:#ff000;
font-Size:16px;
}
.max{
background-color:#66ffcc;
color:#ff00cc;
font-size:24px;
}
.min{
background-color:#66ffcc;
color:#000000;
font-size:10px;
}
</style>
</head>
<body>
//href="javascript：void(0)"//设置不启动超链接引擎
<a href="javascript：void(0)" onclick=changeSize2("max")>大</a>
<a href="javascript：void(0)" onclick=changeSize2("norm")>中</a>
<a href="javascript：void(0)" onclick=changeSize2("min")>小</a><br/>
<h2>我是新闻标题</h2>
//class="norm"设置p对象的默认的css样式
<p id="pid" class="norm">
大家好,哥们我是新闻内容!!!大家好,哥们我是新闻内容!!!</br>
大家好,哥们我是新闻内容!!!大家好,哥们我是新闻内容!!!</br>
大家好,哥们我是新闻内容!!!大家好,哥们我是新闻内容!!!</br>
大家好,哥们我是新闻内容!!!大家好,哥们我是新闻内容!!!</br>
大家好,哥们我是新闻内容!!!大家好,哥们我是新闻内容!!!</br>
</p>
</body>
</html>
14)展开闭合效果
主要用到几个方法:
getElementByTagName(String str),把节点名称传进去,返回document中所有的该名称的节点对象数组
overflow:css样式中的属性,功能是当该区域超过了规定的范围时,可以显示visible,隐藏hidden或者auto和scroll有三种属性值
以下是展开闭合效果的例子:
[html]
<html>
<head>
<script type="text/javascript" src="doctool.js"></script>
<script type="text/javascript">
function change()
{
//var pNode=document.getElementsByTagName("p")[0];
var pNode=byTag("p")[0];
//alert(pNode.nodeName);
/*
//方法一:鼠标事件,单击字体调用本方法:展开闭合效果
var b=true;
if(b)
{
pNode.style.height="8px";
pNode.style.overflow="hidden";
b=false;
}
else
{
pNode.style.height="8px";
pNode.style.overflow="visible";
b=true;
}
//方法二:展开闭合效果
if(pNode.className=="close")
{
pNode.className="open";
}
else
{
pNode.className="close";//因为一开始没有设置overflow的值,所以默认是空的字符串,所以第一次会走else语句
}
*/
}
//点击上层项目下层项目展现出来
function list1()
{
var dtNode=event.srcElement;
var dlNode=dtNode.parentNode;
//alert(dtNode.nodeName+"..."+dlNode.nodeName);
if(dlNode.className=="open")
{
dlNode.className="close";
}
else
{
dlNode.className="open";
}
}
//当点击一个项目,其它项目都要关闭,只有一个项目打开
function list(dtNode)
{
var dlNode=dtNode.parentNode;//得到dt节点对象的父节点dl
var dlNodes=byTag("dl");//获取所有的dl标签
for(var x=0; x<dlNodes.length; x++)//循环获得的所有dl标签
{
//如果该节点和源节点相等,执行操作
if(dlNodes[x]==dlNode)
{
if(dlNode.className=="open")
{
dlNode.className="close";
}
else
{
dlNode.className="open";
} }
//如果不是源节点,则把overflow设置为hidden
else
dlNodes[x].className="close";
}
}
/*
获取事件源对象的两种方式:
1.通过event对象是srcElement属性
2.将事件源对象通过this传入
*/
</script>
<style type="text/css">
.open{
overflow:visible;
}
.close{
overflow:hidden;
}
dl{
overflow:hidden;
height:16px;
}
</style>
</head>
</body>
<!--需求:通过点击实现一个展开闭合效果
<p onclick="change()">
哈哈,哥们我来啦<br/>
哈哈,哥们我来啦<br/>
哈哈,哥们我来啦<br/>
哈哈,哥们我来啦<br/>
哈哈,哥们我来啦<br/>
哈哈,哥们我来啦<br/>
</p>
-->
<dl>
<dt onclick="list(this)">上层项目上层项目</dt>
<dd>下层项目下层项目</dd>
<dd>下层项目下层项目</dd>
<dd>下层项目下层项目</dd>
<dd>下层项目下层项目</dd>
<dd>下层项目下层项目</dd>
</dl>
<dl>
<dt onclick="list(this)">上层项目上层项目</dt>
<dd>下层项目下层项目</dd>
<dd>下层项目下层项目</dd>
<dd>下层项目下层项目</dd>
<dd>下层项目下层项目</dd>
<dd>下层项目下层项目</dd>
</dl>
<dl>
<dt onclick="list(this)">上层项目上层项目</dt>
<dd>下层项目下层项目</dd>
<dd>下层项目下层项目</dd>
<dd>下层项目下层项目</dd>
<dd>下层项目下层项目</dd>
<dd>下层项目下层项目</dd>
</dl>
</body>
</html>
14)
给表格里的元素进行排序
例子:
<html>
<head>
<link rel="stylesheet" href="tab.css" />
<script type="text/javascript" >
var b="true";
//将表格里的年龄进行排序
function sorttab()
{
//1,获取表格中所有的行对象
var tabNode=document.getElementsByTagName("table")[0];
var trs=tabNode.rows;//取得表格中的行数
//alert(trs.length);
//2,定义临时容器,将表格中需要参与排序的行对象临时存储
var arr=new Array();//临时容器中存入的是引用
for(var x=1; x<trs.length; x++)
{
arr[x-1]=trs[x];//从1角标开始赋值给数组
}
//alert(arr.length);
sort(arr);//给数组排序
var tbdNode=tabNode.childNodes[0];//取得tbody标签,因为它的第一个子标签是tr
if(b)
{
for(var x=0; x<arr.length;x++)
{
//alert(arr[x].cells[0].innerText+"..."+arr[x].cells[1]);
tbdNode.appendChild(arr[x]);//把行添加到tbody中
}
b=false;
}
else
{
for(var x=arr.length-1; x>=0;x--)
{
//alert(arr[x].cells[0].innerText+"..."+arr[x].cells[1]);
tbdNode.appendChild(arr[x]);
}
b=true;
}
}
function sort(arr)
{
for(var x=0; x<arr.length; x++)
{
for(var y=x+1; y<arr.length; y++)
{
//parseInt把表格中的字符串文本转为数字格式,以数字形式进行比较,不然它会按照字符串的形式进行比较:字符串中23<5得出不想要的结果
if(parseInt(arr[x].cells[1].innerText)>parseInt(arr[y].cells[1].innerText))
{
var temp=arr[x];
arr[x]=arr[y];
arr[y]=temp;
}
}
}
}
</script>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th><a href="javascript：void(0)" onclick="sorttab()">年龄</a></th>
<th>地址</th>
</tr>
<tr>
<th>张三</th>
<th>30</th>
<th>北京</th>
</tr>
<tr>
<th>李四</th>
<th>31</th>
<th>北京</th>
</tr>
<tr>
<th>王五</th>
<th>28</th>
<th>北京</th>
</tr>
<tr>
<th>赵六</th>
<th>22</th>
<th>北京</th>
</tr>
<tr>
<th>周七</th>
<th>26</th>
<th>北京</th>
</tr>
<tr>
<th>孙八</th>
<th>33</th>
<th>北京</th>
</tr>
</table>
</body>
</html>
15)页面展示效果
<html>
<head>
<style type="text/css">
table,table th{
border:#0066ff 1px solid;
width:600px;
}
table th{
padding:10px;
}
</style>
<script type="text/javascript">
function opendemo(page)
{
window.open(page,"_blank","height=500px,width=600px");
}
</script>
</head>
<body>
<table>
<tr>
<th>
<input type="button" value="弹出table展开闭合页面效果" onclick="opendemo('table里的展开闭合效果.html')" />
</th>
<th>
<input type="button" value="演示效果" onclick="opendemo()" />
</th>
<th>
<input type="button" value="演示效果" onclick="opendemo()" />
</th>
</tr>
<tr>
<th>
<input type="button" value="演示效果" onclick="opendemo()" />
</th>
<th>
<input type="button" value="演示效果" onclick="opendemo()" />
</th>
<th>
<input type="button" value="演示效果" onclick="opendemo()" />
</th>
</tr>
<tr>
<th>
<input type="button" value="演示效果" onclick="opendemo()" />
</th>
<th>
<input type="button" value="演示效果" onclick="opendemo()" />
</th>
<th>
<input type="button" value="演示效果" onclick="opendemo()" />
</th>
</tr>
</table>
</body>
</html>
<html>
<head>
<script type="text/javascript" src="doctool.js"></script>
<script type="text/javascript">
function change()
{
//var pNode=document.getElementsByTagName("p")[0];
var pNode=byTag("p")[0];
//alert(pNode.nodeName);
/*
//方法一:鼠标事件,单击字体调用本方法:展开闭合效果
var b=true;
if(b)
{
pNode.style.height="8px";
pNode.style.overflow="hidden";
b=false;
}
else
{
pNode.style.height="8px";
pNode.style.overflow="visible";
b=true;
}
//方法二:展开闭合效果
if(pNode.className=="close")
{
pNode.className="open";
}
else
{
pNode.className="close";//因为一开始没有设置overflow的值,所以默认是空的字符串,所以第一次会走else语句
}
*/
}
//点击上层项目下层项目展现出来
function list1()
{
var dtNode=event.srcElement;
var dlNode=dtNode.parentNode;
//alert(dtNode.nodeName+"..."+dlNode.nodeName);
if(dlNode.className=="open")
{
dlNode.className="close";
}
else
{
dlNode.className="open";
}
}
//当点击一个项目,其它项目都要关闭,只有一个项目打开
function list(dtNode)
{
var dlNode=dtNode.parentNode;//得到dt节点对象的父节点dl
var dlNodes=byTag("dl");//获取所有的dl标签
for(var x=0; x<dlNodes.length; x++)//循环获得的所有dl标签
{
//如果该节点和源节点相等,执行操作
if(dlNodes[x]==dlNode)
{
if(dlNode.className=="open")
{
dlNode.className="close";
}
else
{
dlNode.className="open";
} }
//如果不是源节点,则把overflow设置为hidden
else
dlNodes[x].className="close";
}
}
/*
获取事件源对象的两种方式:
1.通过event对象是srcElement属性
2.将事件源对象通过this传入
*/
</script>
<style type="text/css">
.open{
overflow:visible;
}
.close{
overflow:hidden;
}
dl{
overflow:hidden;
height:16px;
}
</style>
</head>
</body>
<!--需求:通过点击实现一个展开闭合效果
<p onclick="change()">
哈哈,哥们我来啦<br/>
哈哈,哥们我来啦<br/>
哈哈,哥们我来啦<br/>
哈哈,哥们我来啦<br/>
哈哈,哥们我来啦<br/>
哈哈,哥们我来啦<br/>
</p>
-->
<dl>
<dt onclick="list(this)">上层项目上层项目</dt>
<dd>下层项目下层项目</dd>
<dd>下层项目下层项目</dd>
<dd>下层项目下层项目</dd>
<dd>下层项目下层项目</dd>
<dd>下层项目下层项目</dd>
</dl>
<dl>
<dt onclick="list(this)">上层项目上层项目</dt>
<dd>下层项目下层项目</dd>
<dd>下层项目下层项目</dd>
<dd>下层项目下层项目</dd>
<dd>下层项目下层项目</dd>
<dd>下层项目下层项目</dd>
</dl>
<dl>
<dt onclick="list(this)">上层项目上层项目</dt>
<dd>下层项目下层项目</dd>
<dd>下层项目下层项目</dd>
<dd>下层项目下层项目</dd>
<dd>下层项目下层项目</dd>
<dd>下层项目下层项目</dd>
</dl>
</body>
</html>
14)
给表格里的元素进行排序
例子:
<html>
<head>
<link rel="stylesheet" href="tab.css" />
<script type="text/javascript" >
var b="true";
//将表格里的年龄进行排序
function sorttab()
{
//1,获取表格中所有的行对象
var tabNode=document.getElementsByTagName("table")[0];
var trs=tabNode.rows;//取得表格中的行数
//alert(trs.length);
//2,定义临时容器,将表格中需要参与排序的行对象临时存储
var arr=new Array();//临时容器中存入的是引用
for(var x=1; x<trs.length; x++)
{
arr[x-1]=trs[x];//从1角标开始赋值给数组
}
//alert(arr.length);
sort(arr);//给数组排序
var tbdNode=tabNode.childNodes[0];//取得tbody标签,因为它的第一个子标签是tr
if(b)
{
for(var x=0; x<arr.length;x++)
{
//alert(arr[x].cells[0].innerText+"..."+arr[x].cells[1]);
tbdNode.appendChild(arr[x]);//把行添加到tbody中
}
b=false;
}
else
{
for(var x=arr.length-1; x>=0;x--)
{
//alert(arr[x].cells[0].innerText+"..."+arr[x].cells[1]);
tbdNode.appendChild(arr[x]);
}
b=true;
}
}
function sort(arr)
{
for(var x=0; x<arr.length; x++)
{
for(var y=x+1; y<arr.length; y++)
{
//parseInt把表格中的字符串文本转为数字格式,以数字形式进行比较,不然它会按照字符串的形式进行比较:字符串中23<5得出不想要的结果
if(parseInt(arr[x].cells[1].innerText)>parseInt(arr[y].cells[1].innerText))
{
var temp=arr[x];
arr[x]=arr[y];
arr[y]=temp;
}
}
}
}
</script>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th><a href="javascript：void(0)" onclick="sorttab()">年龄</a></th>
<th>地址</th>
</tr>
<tr>
<th>张三</th>
<th>30</th>
<th>北京</th>
</tr>
<tr>
<th>李四</th>
<th>31</th>
<th>北京</th>
</tr>
<tr>
<th>王五</th>
<th>28</th>
<th>北京</th>
</tr>
<tr>
<th>赵六</th>
<th>22</th>
<th>北京</th>
</tr>
<tr>
<th>周七</th>
<th>26</th>
<th>北京</th>
</tr>
<tr>
<th>孙八</th>
<th>33</th>
<th>北京</th>
</tr>
</table>
</body>
</html>
15)页面展示效果
<html>
<head>
<style type="text/css">
table,table th{
border:#0066ff 1px solid;
width:600px;
}
table th{
padding:10px;
}
</style>
<script type="text/javascript">
function opendemo(page)
{
window.open(page,"_blank","height=500px,width=600px");
}
</script>
</head>
<body>
<table>
<tr>
<th>
<input type="button" value="弹出table展开闭合页面效果" onclick="opendemo('table里的展开闭合效果.html')" />
</th>
<th>
<input type="button" value="演示效果" onclick="opendemo()" />
</th>
<th>
<input type="button" value="演示效果" onclick="opendemo()" />
</th>
</tr>
<tr>
<th>
<input type="button" value="演示效果" onclick="opendemo()" />
</th>
<th>
<input type="button" value="演示效果" onclick="opendemo()" />
</th>
<th>
<input type="button" value="演示效果" onclick="opendemo()" />
</th>
</tr>
<tr>
<th>
<input type="button" value="演示效果" onclick="opendemo()" />
</th>
<th>
<input type="button" value="演示效果" onclick="opendemo()" />
</th>
<th>
<input type="button" value="演示效果" onclick="opendemo()" />
</th>
</tr>
</table>
</body>
</html>
15)表格中行颜色间隔显示效果
用到两个新事件:
onmouseover:鼠标经过
onmouseout:鼠标移开
例子:表格中行颜色间隔显示效果:
[html]
<html>
<head>
<link rel="stylesheet" href="tab.css" />
<style type="text/css" >
.one{
background-color:#33ffcc;
}
.two{
background-color:#ffff66;
}
.over{
background-color:#00ffoo;
}
</style>
<script type="text/javascript" >
//行颜色间隔显示
function trcolor()
{
var tabNode=document.getElementsByTagName("table")[0];//得到table对象
var trs=tabNode.rows;//得到所有行对象
var name;
for(var x=1; x<trs.length; x++)
{
if(x%2==0)
trs[x].className="one";
else
trs[x].className="two";
//alert(trs[x].nodeName);
trs[x].onmouseover=function()//给每一个行对象赋一个事件属性,onmouseover鼠标经过事件
{
name=this.className;//先把以前的className存储起来
//alert(this.nodeName);//问题:为什么this换成trs[x]就报错呢兄弟?
this.className="over";
};
trs[x].onmouseout=function()//onmouseout鼠标离开事件
{
this.className=name;//把以前的className赋给行对象
};
}
}
//为什么这里trcolor不用加括号,而事件那些就要加括号呢?
window.onload=trcolor;//窗口加载的时候调用函数
</script>
</head>
<body>
<table>
<tr >
<th>姓名</th>
<th><a href="javascript：void(0)" onclick="sorttab()">年龄</a></th>
<th>地址</th>
</tr>
<tr >
<td>张三</td>
<td>30</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>31</td>
<td>北京</td>
</tr>
<tr>
<td>王五</td>
<td>28</td>
<td>北京</td>
</tr>
<tr>
<td>赵六</td>
<td>22</td>
<td>北京</td>
</tr>
<tr>
<td>周七</td>
<td>26</td>
<td>北京</td>
</tr>
<tr>
<td>孙八</td>
<td>33</td>
<td>北京</td>
</tr>
</table>
</body>
</html>
16)checked属性为true表示checkbox被选中
<html>
<head>
<script type="text/javascript" >
function getSum()
{
var items=document.getElementsByName("item");
var spanNode=document.getElementById("sum");
//alert("kkk");
var sum=0;
for(var x=0; x<items.length; x++)
{
if(items[x].checked)//checked属性为true表示checkbox被选中
sum+=parseInt(items[x].value);
}
//spanNode.innerText=sum+"元";
var str=sum+"元";
spanNode.innerHTML=str.fontsize(7);
}
function checkAll(allNode)
{
//var allNode=document.getElementsByName("all")[0];
var itemsnode=document.getElementsByName("item");
for(var x=0; x<itemsNode.length; x++)
{
if(allNode.checked)
itemsNode[x].checked=allNode.checked;
} //<span id="sum"></span>
}
</script>
</head>
<body>
<input type="checkbox" name="all" onclick="checkAll(this)"/>全选<br/>
<input type="checkbox" name="item" value="3000"/>笔记本电脑: 3000元<br/>
<input type="checkbox" name="item" value="3000"/>笔记本电脑: 3000元<br/>
<input type="checkbox" name="item" value="3000"/>笔记本电脑: 3000元<br/>
<input type="checkbox" name="item" value="3000"/>笔记本电脑: 3000元<br/>
<input type="checkbox" name="item" value="3000"/>笔记本电脑: 3000元<br/>
<input type="checkbox" name="item" value="3000"/>笔记本电脑: 3000元<br/>
<input type="checkbox" name="item" value="3000"/>笔记本电脑: 3000元<br/>
<input type="checkbox" name="all" onclick="checkAll(this)"/>全选<br/>
<input type="button" value="获取总金额" onclick="getSum() "/><span id="sum"></span>//这里用<span>标签而不用用p标签是因为span不会换行,而p标签会在下一行显示
</body>
</html>
16)select标签的演示例子
<html>
<head>
<style type="text/css" >
#cssid{
height:100px;
width:300px;
background-color:#ffcc00;
}
#textid{
background-color:#cccccc;
width:300px;
}
</style>
<script type="text/javascript" >
function change()
{
var selNode=document.getElementById("selid");
//options()得到select对象的option对象总数
//selNode.selectedIndex获取选中选项位于select中的位置
var value=selNode.options[selNode.selectedIndex].value;
var pNode1=document.getElementById("cssid");
var pNode2=document.getElementById("textid");
pNode1.style.textTransform=value;
pNode2.innerText="text-transform : "+value+";";
}
</script>
</head>
<body>
<p id="cssid">
Good good study,Day day up!
</p>
<p></p>
<select id="selid" onchange="change()">
<option value="none">--text-transform--</option>
<option value="capitalize">首字母大写</option>
<option value="uppercase">所有字母大写</option>
<option value="lowercase">所有字母小写</option>
</select>
<p></p>
<p id="textid">
text-transform : none;
</p>
</body>
</html>
<html>
<head>
<link rel="stylesheet" href="tab.css" />
<style type="text/css" >
.one{
background-color:#33ffcc;
}
.two{
background-color:#ffff66;
}
.over{
background-color:#00ffoo;
}
</style>
<script type="text/javascript" >
//行颜色间隔显示
function trcolor()
{
var tabNode=document.getElementsByTagName("table")[0];//得到table对象
var trs=tabNode.rows;//得到所有行对象
var name;
for(var x=1; x<trs.length; x++)
{
if(x%2==0)
trs[x].className="one";
else
trs[x].className="two";
//alert(trs[x].nodeName);
trs[x].onmouseover=function()//给每一个行对象赋一个事件属性,onmouseover鼠标经过事件
{
name=this.className;//先把以前的className存储起来
//alert(this.nodeName);//问题:为什么this换成trs[x]就报错呢兄弟?
this.className="over";
};
trs[x].onmouseout=function()//onmouseout鼠标离开事件
{
this.className=name;//把以前的className赋给行对象
};
}
}
//为什么这里trcolor不用加括号,而事件那些就要加括号呢?
window.onload=trcolor;//窗口加载的时候调用函数
</script>
</head>
<body>
<table>
<tr >
<th>姓名</th>
<th><a href="javascript：void(0)" onclick="sorttab()">年龄</a></th>
<th>地址</th>
</tr>
<tr >
<td>张三</td>
<td>30</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>31</td>
<td>北京</td>
</tr>
<tr>
<td>王五</td>
<td>28</td>
<td>北京</td>
</tr>
<tr>
<td>赵六</td>
<td>22</td>
<td>北京</td>
</tr>
<tr>
<td>周七</td>
<td>26</td>
<td>北京</td>
</tr>
<tr>
<td>孙八</td>
<td>33</td>
<td>北京</td>
</tr>
</table>
</body>
</html>
16)checked属性为true表示checkbox被选中
<html>
<head>
<script type="text/javascript" >
function getSum()
{
var items=document.getElementsByName("item");
var spanNode=document.getElementById("sum");
//alert("kkk");
var sum=0;
for(var x=0; x<items.length; x++)
{
if(items[x].checked)//checked属性为true表示checkbox被选中
sum+=parseInt(items[x].value);
}
//spanNode.innerText=sum+"元";
var str=sum+"元";
spanNode.innerHTML=str.fontsize(7);
}
function checkAll(allNode)
{
//var allNode=document.getElementsByName("all")[0];
var itemsNode=document.getElementsByName("item");
for(var x=0; x<itemsNode.length; x++)
{
if(allNode.checked)
itemsNode[x].checked=allNode.checked;
} //<span id="sum"></span>
}
</script>
</head>
<body>
<input type="checkbox" name="all" onclick="checkAll(this)"/>全选<br/>
<input type="checkbox" name="item" value="3000"/>笔记本电脑: 3000元<br/>
<input type="checkbox" name="item" value="3000"/>笔记本电脑: 3000元<br/>
<input type="checkbox" name="item" value="3000"/>笔记本电脑: 3000元<br/>
<input type="checkbox" name="item" value="3000"/>笔记本电脑: 3000元<br/>
<input type="checkbox" name="item" value="3000"/>笔记本电脑: 3000元<br/>
<input type="checkbox" name="item" value="3000"/>笔记本电脑: 3000元<br/>
<input type="checkbox" name="item" value="3000"/>笔记本电脑: 3000元<br/>
<input type="checkbox" name="all" onclick="checkAll(this)"/>全选<br/>
<input type="button" value="获取总金额" onclick="getSum() "/><span id="sum"></span>//这里用<span>标签而不用用p标签是因为span不会换行,而p标签会在下一行显示
</body>
</html>
16)select标签的演示例子
<html>
<head>
<style type="text/css" >
#cssid{
height:100px;
width:300px;
background-color:#ffcc00;
}
#textid{
background-color:#cccccc;
width:300px;
}
</style>
<script type="text/javascript" >
function change()
{
var selNode=document.getElementById("selid");
//options()得到select对象的option对象总数
//selNode.selectedIndex获取选中选项位于select中的位置
var value=selNode.options[selNode.selectedIndex].value;
var pNode1=document.getElementById("cssid");
var pNode2=document.getElementById("textid");
pNode1.style.textTransform=value;
pNode2.innerText="text-transform : "+value+";";
}
</script>
</head>
<body>
<p id="cssid">
Good good study,Day day up!
</p>
<p></p>
<select id="selid" onchange="change()">
<option value="none">--text-transform--</option>
<option value="capitalize">首字母大写</option>
<option value="uppercase">所有字母大写</option>
<option value="lowercase">所有字母小写</option>
</select>
<p></p>
<p id="textid">
text-transform : none;
</p>
</body>
</html>
17)实例总结
DOM编程:
1,定义界面
通过html打开标签将数据进行封装
2,定义一些静态的样式
通过css.
3,需要动态的完成和用户的交互
a,先明确事件源
b,明确事件并将事件注册到事件源上.
c,通过javascript的函数对象事件进行处理.
d,在处理过程需要明确被处理的区域.
17.1)创建table标签的实例
思路:
1.创建一个table节点.document.createElement("table");
2.通过table节点的insertRow()方法创建表格的行对象并添加到rows集合中
3.通过行对象的insertCell()方法创建单元格对象,并添加到cells集合中
4,给单元格添加数据.
a,创建一个节点如文本节点,document.createTextNode("文本内容");
通过单元格对象的appendChile方法将文本节点添加到单元格的尾部
b,可以通过单元格的innerHTML,添加单元格中的元素.
tdNode.innerHTML="<img src='1.jpg' alt='图片说明信息'/>";
5,建立好表格节点,添加到DOM树中,也就是页面的指定位置上.
17.2)如何删除表格中的行或者列.
思路:
1,删除行:获取表格对象,通过表格对象中的deleTow方法,将指定的行索引传入到deleteRow方法中
2,删除列:表格没有直接删除列的方法,要通过删除每一行中指定的单元格来完成删除列的动作.
获取所有行对象,并进行遍历,通过行对象的deleteCell方法将指定单元格删除.
17.3)对表格中的数据进行排序.
思路:
1,获取表格中的所有行对象
2,定义临时存储,将需要进行排序的行对象存入到数组中.
3,对数组进行排序,通过比较每一个行对象中指定的单元格中的数据,如果是整数需要通过parseInt转换
4,将排序后的数组通过遍历,将每一个行对象重新添加回表格,通过tbody节点的appendChild方法
5,其实排序就是将每个行对象的引用去除
17.4)表格的行颜色间隔显示,并在鼠标指定的行上高亮显示.
思路:
1,获取所有的行对象,将需要间隔颜色显示的行对象进行动态的className属性的指定,那么前提是:先定义类选择器
2,为了完成高亮,需要用到两个事件:onmouseover(鼠标进入)和onmouseout(鼠标移出);
3,为了方法可以在遍历对象时,将每一个行对象都进行两个事件属性的指定,并通过匿名函数完成事件的处理
4,高亮的原理就是将鼠标进入时指定颜色改变,改变前先记录住原先行对象的样式
这样在鼠标离开时,可以将样式还原
17.5)完成一个与css手册中一样示例
通过下拉菜单选择先指定样式属性的使用效果.
17.6)表单中的组件.
单选框,复选框
这两个组件都有一个属性来表示其选中与否的状态:checked
完成一个对复选框,进行全选的操作.
思路:将全选那个复选框的checked状态赋给所有的其它checkbox即可
<input type="checkbox" name="all" onlick="checkAll" />全选
<input type="checkbox" name="item" />
<input type="checkbox" name="item" />
<input type="checkbox" name="item" />
<input type="checkbox" name="all" onlick="checkAll" />
<script type="text/javascript">
function checkAll(index)
{
var node=document.getElementsByName("all")[index];
var items=document.getElementsByName("item");
for(var x=0; x<items.length; x++)
{
items[x].checked=node.checked;
}
}
</script>
17.7)获取鼠标的坐标,让指定区域随鼠标移动
获取鼠标坐标:event.x event.y
这里需要用到的事件:body对象的onmouseover事件.
还需要用到一个css样式,直接定义页面,所以区域都在同一层次.
为了对某一区域进行定位,将该区域分离到另一个层次,用到css中position属性
获取鼠标的坐标,让指定区域随鼠标移动代码如下:
[html]
<html>
<head>
<style type="text/css">
#bodyid{
border:0066ff 1px solid;
height:600px;
width:800px;
}
</style>
<script type="text/javascript">
//为了对某一区域进行定位,将该区域分离到另一个层次,用到css中position属性position:absolute
window.onload=function()
{
document.body.onmousemove=function()
{ //alert("1");
var adNode=document.getElementById("ad");
adNode.style.left=event.x-12;
adNode.style.top=event.y-10;
}
}
/*
问题:
moved方法不写括号老师说这样是把moved指向的对象赋给window.onload
写了括号是把moved方法的返回值赋给window.onload
为什么两种方法出来的结果都是一样的呢?两种写法对程序运行,有什么区别吗?
function moved()
{
document.body.onmousemove=function()
{ //alert("1");
var adNode=document.getElementById("ad");
adNode.style.left=event.x-12;
adNode.style.top=event.y-10;
}
}
window.onload=moved;
window.onload=moved();
*/
function closead()
{
var adNode=document.getElementById("ad");
adNode.style.display="none";//display="none"表示p标签里面不显示任何东西
}
</script>
</head>
<body>
<p id="ad" style="position:absolute; left:0;top:0" onclick="closead()">
<a href="http://www.ad.com.cn" target="_blank">
<img src="1.jpg" height="100px" width="150px"></a>
</p>
<p id="bodyid">
body区域
</p>
</body>
</html>
<html>
<head>
<style type="text/css">
#bodyid{
border:0066ff 1px solid;
height:600px;
width:800px;
}
</style>
<script type="text/javascript">
//为了对某一区域进行定位,将该区域分离到另一个层次,用到css中position属性position:absolute
window.onload=function()
{
document.body.onmousemove=function()
{ //alert("1");
var adNode=document.getElementById("ad");
adNode.style.left=event.x-12;
adNode.style.top=event.y-10;
}
}
/*
问题:
moved方法不写括号老师说这样是把moved指向的对象赋给window.onload
写了括号是把moved方法的返回值赋给window.onload
为什么两种方法出来的结果都是一样的呢?两种写法对程序运行,有什么区别吗?
function moved()
{
document.body.onmousemove=function()
{ //alert("1");
var adNode=document.getElementById("ad");
adNode.style.left=event.x-12;
adNode.style.top=event.y-10;
}
}
window.onload=moved;
window.onload=moved();
*/
function closead()
{
var adNode=document.getElementById("ad");
adNode.style.display="none";//display="none"表示p标签里面不显示任何东西
}
</script>
</head>
<body>
<p id="ad" style="position:absolute; left:0;top:0" onclick="closead()">
<a href="http://www.ad.com.cn" target="_blank">
<img src="1.jpg" height="100px" width="150px"></a>
</p>
<p id="bodyid">
body区域
</p>
</body>
</html>
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-黑马程序员_javaScript笔记全部内容，希望文章能够帮你解决javascript代码实例教程-黑马程序员_javaScript笔记所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。