当前位置:阳光沙滩 >前端 > 查看文章
阿里云优惠码

1.全局函数

全局函数:在JS中什么是全局函数呢?

其实呀,在JS中提供了部分的函数,不需要任何的对象就可以调用了, 可以直接调用这个函数名称就可以用啦,就好像JAVA中已经静态导入的静态方法一样,直接调用就可以了哦。

 

 

关于URI和URL的解释

  • URL:统一资源定位符

就好比浏览器地址栏输入的东西一样,这就是一个UR

  • URI:统一资源标识符

URI表示的资源并不明确,可以是任意URL里的资源

两者的范围,URI大于URL,也包含URL

 

 

在JS中有两个可能可以解释平时的疑问的函数:

  • encodeURI 对URI进行编码
  • encodeURI对URI进行解码

栗子如下:

<script type = "text/javascript">var url = "bbs.sunofbeaches.com?search=yes&&keyword=JAVA教程";

document.write(encodeURI(url));

</script>

结果:


bbs.sunofbeaches.com?search=yes&&keyword=JAVA%E6%95%99%E7%A8%8B

这就解释了大家在搜索东西的时候,有没有发现,当你在搜索栏里输入中文的话,然后地址栏里头就是一串百分号的玩意,试试吧,哈哈!解释,这个编码只对中文进行编码,一个中文为3个字节。用百分号隔开,所以这里的话,两个汉字,六个字节,十六进制表示。

 

好吧,下面我们进行解码吧,很简单的,逆转来而已!

代码如下

<script type = "text/javascript">var url = "bbs.sunofbeaches.com?search=yes&&keyword=JAVA%E6%95%99%E7%A8%8B";

document.write(decodeURI(url));

</script>

结果:

bbs.sunofbeaches.com?search=yes&&keyword=JAVA教程

2.2.BOM对

BOM对象介绍:browser object model

翻译过来就是:浏览器对象模型,理解一下就是,嘻嘻!既然是浏览器作为对象嘛,那当然是获取浏览器的信息的,获取什么信息呢?有:是什么浏览器,操作系统平台,可以获取历史记录,获取地址等,有空查看一下API吧。

 

2.1.2.1window

也就是窗口对象哈,window对象是JS中的顶层对象。

window对象代表的是一个浏览器窗口或者是一个框架

window对象会在<body>或者<frameset>每次出现的时候自动创建

 

Window对象在浏览器加载到这个<body>或者这个<frameset>时,JS引擎自动创建。所以我们直接使用即可,其实我们经常省略掉的,直接使用这个对象下的方法,嘻嘻!

 

 

再说明一下吧:Window对象在JSk上是属于顶层对象,使用的时候,可以省略不写,类似于JAVA中的Object地位吧,哈哈!

 

Window下的其他对象:

  • document对象,获取浏览器加载的HTML文件
  • history对象,浏览器的历史记录
  • location对象,浏览器的地址栏对象
  • navigator对象,浏览器对象
  • screen对象,在屏幕上显示的相关对象

 

 

window对象中的方法:

setInterval(“函数名”,毫秒值);指定时间重复执行函数

clearInterval();清除重复执行

 

setTimeout(“函数名”,毫秒值); 指定时间只执行一次函数

clearTimeout()清除指定的执行操作

 

以上清除,若函数已经执行完,则没有意义。

 

status:状态栏信息

 

open();打开一个窗口

close();关闭新打开的窗口

 

用一个例子搞定吧,功能大概是这样:点击开始,则在显示时间的区域开始显示时间,点击停止则时间停止。

<script type = "text/javascript">

window.onload = function(){

window.status = "能看到我吗?我在状态栏里!";

}

function showTime(){

var date = new Date();

var h = date.getHours();

var m = date.getMinutes();

var s = date.getSeconds();

if(s<10){

s = "0"+s;

}

document.getElementById("time").innerHTML = h+":"+m+":"+s+"</br>";

}

var stop;

function start(){

//定时调用时间展示函数

stop = setInterval("showTime()",1000);

}

function end(){

clearInterval(stop);

}

</script>

    <body>

<div>

<span id = "time">显示时间</span>

</div>

<div>

<span id = "button_start"><button onclick = "start()">显示现在的时间</button></span>

<span id = "button_close"><button onclick = "end()">暂停现在的时间</button></span>

</div>

</body>

 

2.2.对于这个对象,有两个方法,一个是back(),一个是forward()。2.2history

  • back();返回到上一个页面
  • forward();前进一个页面
  • go(数字);跳到去到的页面

 

其实这样的功能没什么用的,哈哈。因为浏览器里民有这个前进和后退的按钮嘛。是吧!

 

需要写一下吗?好吧,还是写一下吧!

 

<div>

<span><a href = "javascript:void(0);" onclick = "history.back();">返回一页</a></span>

<span><a href = "javascript:void(0);" onclick = "history.forward();">前进一页</a></span>

</div>

 

 

2.3localtion

这个是浏览器地址栏对象,我们可以通过这个对象设置和获取地址栏中的内容。

好,我们尝试一下吧。设置和获取一起啦!

 

 

<html>

<head>

<script type = "text/javascript">

function set(){

location.href = "http://bbs.sunofbeaches.com";

}

function get(){

document.write(location.href);

}

</script>

</head>

<body>

<div>

<span ><button id = "set" onclick = "set()">设置地址栏地址</button></span><span><button id= "get" onclick = "get()">获取地址栏地址</button></span>

</div>

</body>

</html>

 

 

2.4navigator

查看API吧,这里呢,说说获取浏览器插件的方法吧。

直接写代码吧:

<script type = "text/javascript">

window.onload = function(){

var args = navigator.plugins;

for(var i = 0;i<args.length;i++){

document.write(args[i].name+"</br>");

}

}

</script>

 

3.DOM对

DOM:document object model 文件对象模型

上面是以浏览器为主,现在我们开始以HTML文件为主,通过获取HTML的标签,属性,内容等方式来对HTML进行操作。

 

我们看一下这个文档的结构图吧:

3.%e5%9b%be%e7%89%8713
4
.DOM中常用方法介绍

要呢,有这三个,我们经常用来获取要操作的对象

  • getElementsById();通过ID获取对象的引用
  • getElementsByName();注意,这里返回的一个数组,有S哦
  • getElementsByTagName();个也是返回一个数组,通过标签名获取。

 

4. 

<html>

<head>

<script type = "text/javascript">

/*

介绍document对象中的getElementById方法

getElementById: 是根据页面上的标签属性值,获取取当前标签对象

当获取到一个html页面中的标签对象之后,当前这个标签对象的具体操作

需要查询DHTML文档

getElementsByName():根据页面上标签的name属性值,获取取当前页面上的标签对象

由于标签的name属性的值可能重复,因此获得一个数组

getElementsByTagName():根据标签名获取对象,页面上可能有很多相同标签

名的,所以会获得一个标签对象数组。

*/

function getName_1(){

// 通过ID获取

var input = document.getElementById("userName");

if(input.value=="")

alert("没有输入内容");

else

alert();

}

function getName_2(){

//通过名字获取

var args = document.getElementsByName("userName");

for(var i = 0;i<args.length;i++){

if(args[i].value=="")

alert("没有输入内容");

else

alert(args[i].value);

}

}

function getName_3(){

//通过标签来获取

var args = document.getElementsByTagName("input");

for(var i = 0;i<args.length;i++){

if(args[i].value=="")

alert("没有输入内容");

else

alert(args[i].value);

}

}

</script>

</head>

<body>

用户名<input type = "text" name = "userName" id = "userName">

<button onclick = "getName_1()">获取用户名ID</button>

<button onclick = "getName_2()">获取用户名Name</button>

<button onclick = "getName_3()">获取用户名Tag</button>

</body>

</html>

 

5.5.JS事件

事件:它表示在页面上,用户通过鼠标键盘等页面的操作。任何操作都有一个对应的事件

所以我们要给不同的事件不同的功能。

当这个页面发生某一事件时,需要为这个事件指定功能。

 

 

给标签绑定事件有两种方式:

1、直接在页面上的标签上书写时间名称,然后在这个事件上绑定JS函数名(功能)

2、在页面加载完成之后,通过JS和DOM技术获取到标签对象,然后动态地绑定标签事件。

<html>

<head>

<script type = "text/javascript">

/*

实现功能:当点击这个输入框的时候,里面的提示文字消失

*/

window.onload = function(){

document.getElementById("userName").onclick = function(){

var value = this.value;

if(value=="请输入用户名")

{

this.value = "";

document.getElementById("name").innerHTML = "请输入用户名:";

}

}

}

</script>

</head>

<body>

<!--搞一个输入框-->

<span id = "name"></span><input type = "text" id = "userName" value = "请输入用户名">

</body>

</html>

 

6.6.DOM练习

6.1创建和添加方法

6.1.1. 

<html>

<head>

<script type = "text/javascript">

/*需求:

写一个DIV,两个按钮,一个添加文本,一个添加链接文本。

*/

window.onload = function(){

var input = document.getElementById("textarea");

document.getElementById("addtext").onclick = function(){

//添加文本

var text = document.createTextNode("被添加的文本");

input.appendChild(text);

}

document.getElementById("removetext").onclick = function(){

//清空文本

input.innerHTML = "";

}

}

</script>

<style>

#textarea{

background-color:green;

}

</style>

</head>

<body>

<div>

<div id = "text"><textarea id = "textarea" rows ="10" cols="40" ></textarea></div>

<div><span><button id = "addtext">添加文本</button></span>

<span><button id = "removetext">清空文本</button></span>

</div>

</div>

</body>

</html>

 

 

6.1.2.6.2Dom删除、克隆、复制技术

<html>

<head>

<script type = "text/javascript">

window.onload = function(){

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

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

document.getElementById("deldiv").onclick = function(){

//删除页面上ID为div2的DIV

var two = document.getElementById("div2");

var body = two.parentNode;

var one = two.previousSibling;

body.removeChild(one);

}

//替换

document.getElementById("replacediv").onclick = function(){

var two = document.getElementById("div2");

var one = document.getElementById("div1");

//获取父标签

var body = two.parentNode;

body.replaceChild(one,two);

}

//克隆再替换

document.getElementById("clonreplace").onclick = function(){

var two = document.getElementById("div2");

var one = document.getElementById("div1");

var cloneOne = one.cloneNode(true);

var body = one.parentNode;

body.replaceChild(cloneOne,two);

}

}

</script>

<style>

#div1{

background-color:green;

width:500px;

height:200px;

}

#div2{

background-color:gray;

width:500px;

height:200px;

}

</style>

</head>

<body>

 

 <div id = "div1"></div>

 <div id = "div2"></div>

 <div id = "button"><button id = "deldiv">删除Div</button>

<button id = "replacediv">替换Div</button>

<button id = "clonreplace">克隆替换</button></div>

 

</body>

</html>

 

6.3全选/全不选/反选

 

 

<html>

<head>

<script type = "text/javascript">

 

window.onload = function(){

var elements = document.getElementsByName("hobby");

//全选代码

document.getElementById("selectAll").onclick = function(){

for(var i = 0;i<elements.length;i++){

elements[i].checked = true;

}

}

//反选代码

document.getElementById("fanxuan").onclick = function(){

for(var i = 0;i<elements.length;i++){

var temp = !elements[i].checked;

elements[i].checked = temp;

}

}

//全不选

document.getElementById("allnot").onclick = function(){

for(var i = 0;i<elements.length;i++){

elements[i].checked = false;

}

}

}

</script>

</head>

<body>

 <div>请选择你的爱好:</div>

 <div>

 <input type = "checkbox" id = "java" name = "hobby" value = "JAVA" >JAVA

 <input type = "checkbox" id = "PHP" name = "hobby" value = "PHP">PHP

 <input type = "checkbox" id = "IOS" name = "hobby" value = "IOS">IOS

 <input type = "checkbox" id = ".NET" name = "hobby" value = ".NET">.NET

 </div>

 <div>

 

 <button id = "selectAll">选择全部

 <button id = "fanxuan">反选

 <button id = "allnot">全部不选

 

 </div> 

</body>

</html>

 

 

6.4变色表格

<html>

<head>

<!--

 

需求:

事项一个表格,单数行为一个颜色,双数行为另外一个颜色。

当鼠标移上去时,颜色又变,离开时,变回原来的颜色。

-->

<script type = "text/javascript">

window.onload = function(){

//获取所有的行标签

var elements = document.getElementsByTagName("tr");

for(var i = 0; i < elements.length;i++){

if(i%2){

elements[i].className = "one";

}else{

elements[i].className = "two";

}

var oldclassName = "";

elements[i].onmouseover = function(){

oldclassName = this.className;

this.className = "three";

}

elements[i].onmouseout = function(){

this.className = oldclassName;

}

}

}

</script>

<style>

td{

border:1px blue solid;

     margin: 10px;

     padding: 10px;

     text-align: center;

}

#table{

border: 1px red solid;

     width: 500px;

     margin: auto;

border-collapse:collapse;

}

.one{

background-color: orange;

}

.two{

background-color:green;

}

.three{

background-color:blue;

}

</style>

</head>

<body>

<!--创建表格-->

 

<table id = "table">

<tr>

<td>黄永康</td>

<td>广东</td>

</tr>

<tr>

<td>比尔盖茨</td>

<td>西雅图</td>

</tr>

<tr>

<td>马克扎克伯格</td>

<td>硅谷</td>

</tr>

<tr>

<td>拉里佩奇</td>

<td>硅谷</td>

</tr>

<tr>

<td>艾莉森</td>

<td>硅谷</td>

</tr>

<tr>

<td>马克斯</td>

<td>硅谷</td>

</tr>

<tr>

<td>马云</td>

<td>杭州</td>

</tr>

<tr>

<td>李嘉诚</td>

<td>香港</td>

</tr>

<tr>

<td>王健林</td>

<td>北京</td>

</tr>

<tr>

<td>刘强东</td>

<td>北京</td>

</tr>

<tr>

<td>章泽天</td>

<td>刘强东家</td>

</tr>

</table>

 

</body>

</html>










 

本文链接:http://blog.sunofbeaches.com/archives/133 转载请注明出处.
如果喜欢:点此订阅本站
7K
相关文章
为您推荐
各种观点