码迷,mamicode.com
首页 > 编程语言 > 详细

javaScript

时间:2019-04-18 20:24:14      阅读:167      评论:0      收藏:0      [点我收藏+]

标签:else   --   dom   ntb   时间间隔   property   用户操作   i++   element   

      javaScript

为什么需要使用JS?

  答:编写网页特页面效,操作页面元素,和服务器交互。

怎样使用JS.

   1内嵌

            <script type="text/javascript">*/

 

document.write("hello js");

 

function show()

{

 

}

</script>

   2外嵌

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

   3直接在事件中写:javascript:动作

            <button onclick="javascript:alert(0)" style="width: 50px;" value="">点击</button>

window.onload=function()跟随页面加载  window.onscroll=function ()跟随鼠标滚动

console.log(d);控制台输出 function定义一个方法 onclick点击

字符串方法

方法

说明

charAt(index)

返回指定位置上的字符

inderOf(“index”)

查找某个指定的字符串在字符串中首次出现的位置

Substring(index1,index2)

返回从index1 index2之间的字符串不包含index2

Split(str)

将字符串分割成数组

数组方法

方法

说明

.push(“数值”);

在数组中追加数值

.join(“*”)

把数组按*分开为字符串

 

浏览器对象

对象名称

说明

window

窗口对象,可以用来控制当前窗口,或打开新的窗口

screen

屏幕对象,获取屏幕相关信息

navigator

浏览器对象,通过这个对象可以判断用户所使用的浏览器

history

历史对象,可以用来前进或后退一个页面

location

地址对象,可以用来获取当前URL的信息

javaScript计时事件

在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行

localStorageSessionStorage

存储对象,可以用来存储数据,和cookie相似,区别是它是为了更大容量存储设计的,在使用上也更加方便

 

列:location 方法试列

<script type="text/javascript">

//返回地址

document.write(window.location.host+"<br/>")(主机IP加端口)

document.write(window.location.hostname+"<br/>")(主机IP)

//location 方法  href加载一个页面

function cas(){

window.location.href="index.html";

}

//reload() 从新加载页面reload()(刷新)

function textreload(){

window.location.reload();

}

</script>

</head>

<body>

<button onclick="cas();">跳转</button>

<a onclick="textreload()"></a>

</body>

History对象

history.Back()

加载history对象中的前一个URL

history.Forward()

加载history对象中的下一个URL

history.Go()

加载history对象中的某个具体URL

 

其中 history.back() --等于-->> history.go(-1) 浏览器中的后退

History.forward() --等于-->> history.go(1) 浏览器中的前进

 

javaScript弹窗 不同的浏览器对弹窗有可能拦截

警告框

Window.alert()

用于确保用户可以得到某些信息

确认框

Window.confirm()

用于验证是否接受用户操作

提示框

Window.prompt()

用户提示用户在进入页面输入某个值

if(confirm("是否确定")){
    alert("确定")
}else{
    alert("取消")
}
var d=prompt("你好马强")
if(d!=null){
    alert("你刚才输入的名字为"+d)
}

Window.location对象

Location.href

返回当前页面的URL url(地址)

Location.pathname

返回URL的路径名 文件

Location.assign()

加载新的文档

 

Close();

关闭当前对象

Open(“地址”,”窗口名”,”属性”);

弹出一个新的窗口

open("../html/hello.html","新窗口","height=20px,width=20px")

Open的属性

 

javaScript计时事件 1000=1

Setlnterval(show,2000)

间隔指定的毫秒数不停地执行指定的代码

Clearlnterval()

用于停止setlnterval()方法执行的函数代码

setTimeout(show,2000)

暂停指定的毫秒数后执行指定的代码

clearTimeout()

用于停止执行setTimeout()方法的函数代码

 function show() {
         alert(0);
     }
    // 间隔指定的毫秒数不停地执行指定的代码
        function demo01() {
        var t =setInterval(show,2000);
        }
     //暂停指定的毫秒数后执行指定的代码
     function demo02() {
        var p=setTimeout(show,2000);
     }
    </script>
</head>
<body>
<button onclick="fun()" >点击</button>
<a onclick="demo01();">测试Setlnterval</a>
<a onclick="demo02();">测试setTimeout</a>

Date(); 方法 var d=new Date(); var n =d.getHours();

.getHours()

获得小时

.getMinutes()

获得分钟

.getSeconds()

获得秒数

 

Dom常用的方法

查找HTML元素

Document.getElementById()

通过id获取对象

Document.getElementsByTagName()

通过标签名获取对象 生成一个数组

Document.getElementsByName()

通过名字获取对象 生成一个数组

Document.getElementsByClassName

通过class获取对象

document.getElementById("切换前的ID").innerText="切换后的名字";
var sum=parseInt(value);把字符串转换为数字

var value=document.getElementById("re").value;查找用户输入的数值(字符串)

 

 

改变HTML元素

Document.write()

改变HTML输出流

对象.innerHTML=新的HTML

改变HTML内容

对象.attribute(属性)=新属性值

改变HTML属性

 

改变CSS样式

对象.style.property(属性)=新样式

通过id属性获取对象

 

 

 

Dom常用的方法

查找HTML元素

试列:   

 <script type="text/javascript">
            function  areplace() {
                var obj=document.getElementById("bookname");
                obj.innerText="切换后的名字";
            }

//通过input获取对象 返回数组
            function shoall() {
                var obj=document.getElementsByTagName("input");
                var strall="";
                for(var i=0;i<obj.length;i++){
                    strall += obj[i].value+" "
                }
                document.getElementById("strall").innerHTML=strall;
            }

//通过name获取对象 返回数组
            function shows() {
                var obj=document.getElementsByName("season");
                var strall="";
                for(var i=0;i<obj.length;i++){
                    strall += obj[i].value+" "
                }
                document.getElementById("s").innerHTML=strall;
            }
    </script>
</head>
<body>
<div class="bb">
    <div style="float: left;width: 150px;height: 100px">
        <img src="../images/1.jpg">
    </div>
    <div style="float: right" >
        <span id="bookname">书名:岛上书店</span><br/>
        <button onclick="areplace()">换换名称</button><br/>
        <span>四季名城</span><br/>
        <input class="a" name="season" type="text" value="春">
        <input class="a" name="season" type="text" value="夏"><br/>
        <input class="a" name="season" type="text" value="秋">
        <input class="a" name="season" type="text" value="冬"><br/>
        <input type="button" onclick="shoall()" value="input内容">
        <input type="button" onclick="shows()" value="四季名称">

//清空页面
        <input type="button" onclick="javascirpt:document.write(‘‘)" value="清空页面内容">
        <span id="strall"></span>
        <span id="s"></span>
    </div>
</div>

 

javaScript

标签:else   --   dom   ntb   时间间隔   property   用户操作   i++   element   

原文地址:https://www.cnblogs.com/qhantime/p/10731730.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!