JavaScript学习12.1
JavaScript弹窗
可以创建3种消息框:警告框、确认框、提示框,可以不带window对象直接使用相应的方法
警告框:保护用户可以得到某些信息,当出现警告框后需要用户点击确认按钮之后才能操作
window.alert(); //简写,alert('sometext')
确认框:通常验证是否接受用户操作
确认:返回True;取消:放回false
window.confirm(); //简写,confirm('sometext')
提示框:常用于提示用户在进入页面前输入某个值
当提示框出现时,用户需要某个值,然后点击确认或取消按钮才能继续操作
如果用户点击确认,那么返回值为输入的值;如果用户点击取消,那么返回值为null
function myConfirm() {
var text;
var x = confirm("Please try it")
if(x==true){
text = "you get it, it is true"
}else{
text = "you lost it, it is false"
}
document.getElementById("confirm").innerHTML= text;
}
function myPrompt() {
var text;
var x = prompt("this is a prompt message\nBest wishes to you");
if(x!=null && x != ""){
text = x;
}else {
text = "null another line";
}
document.getElementById("prompt").innerHTML=text;
}
JavaScript的计时事件:一个设定的时间间隔后来执行代码
使用JavaScript有能力在一定的时间间隔后来执行代码,而不是函数在调用后立即执行,称之为计时事件
两个主要方法:
1)setInterval():间隔指定的毫秒数不停地执行指定的代码
2)setTimeout():暂停指定的毫秒数后执行指定的代码
都是HTML DOM window对象的方法
setInterval:语法
setInterval('javascript function', millseconds)
每两秒钟弹出一个hello
setInterval(function(){alert("hello") }, 2000);
显示时钟:
function myTime() {
setInterval(function () {
Timer();
}, 1000);
}
function Timer() {
var t = new Date();
var text = t.toLocaleTimeString();
document.getElementById("setTime").innerHTML=text;
}
setTimeout方法,会返回某个值
setTimeout('JavaScript函数',毫秒数)
第一个参数:JavaScript语句的字符串,可以是‘alert’,也可以是函数的调用
第二个参数:从当前起多少时间后执行第一个参数
setTimeout(function () {
getClock();
}, 500);
自己调用自己执行某个函数
JavaScript cookies 用于web页面的用户信息
cookies是一些数据,存储在你电脑上的文本文件中
当web服务器向浏览器发送web页面时,在连接关闭后,服务器不会记录用户信息,cookies就是解决如何记录用户的问题
1)当用户访问web页面时,他的名字可以在cookies中
2)当用户下一次访问该页面时,可以在cookies中读取用户访问记录
cookies以名/值对形式存储,如:username=Jhon
当浏览器向服务器请求web页面时,属于该页面的cookies会加入到请求中,服务端通过这种方式获取用户的信息
创建cookies
document.cookie属性来创建、读取、删除cookies
以字符串的形式返回所有的cookies,形式如:cookie1=value;cookie2=value;cookie3=value
JavaScript库
JQuary,Prototype,MooTools
JQuary是最受欢迎的框架
如果在网页中使用JavaScript库,只需在<script>标签中引入该库即可
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
如果要测试库,需要在网页中引用它,使用<scrip>标签,src属性的值为库的URL
主要JQuary函数是$()函数,如果像该函数传递DOM对象,它会返回JQuary对象,允许通过CSS选择器来选取函数
2017.12.1
<script>
function myJq() {
$("#useJQuary").attr("style","color:red").html("hello jquary, my name is dengyexun");
}
$(document).ready(myJq);
</script>
JQuary允许链接,链接是一种在同一对象上执行多个任务的便捷方法,链式语法
总结:
JavaScript的对象:
1)字符串对象:String
2)日期对象:Date
3)数组对象:Array
4)布尔对象:Boolean
5)算数对象:Math
JavaScript的浏览器对象:
1)Window对象
2)Navigator对象
3)Screen对象
4)History对象
5)Location对象
内置的JavaScript对象
1)Document对象
anchor集合返回了当前文档中所有超级链接的数组,形式:<a name="abc"></a>
document.anchor.length:返回文档中锚的个数
document.anchor[0].innerHTML,第一个链接
var y = document.anchors[0].innerHTML;
document.getElementById("setDoc").innerHTML=y;
返回文档中表单的数目:
var y = document.forms.length;
document.getElementById("setDoc").innerHTML=y;
返回文档中第一个表单的名字:
var y = document.forms[0].name;
document.getElementById("setDoc").innerHTML=y;
返回文档中图片的数目:
var y = document.images.length;
document.getElementById("setDoc").innerHTML=y;
返回文档中第一个图像的id:
var y = document.images[0].id;
document.getElementById("setDoc").innerHTML=y;
返回文档的链接数目:
var y = document.links.length;
document.getElementById("setDoc").innerHTML=y;
返回文档的第一个链接的id
var y = document.links[0].id;
document.getElementById("setDoc").innerHTML=y;
返回文档中所有cookies的名/值对:
var y = document.cookie;
document.getElementById("setDoc").innerHTML=y;
返回加载的文档服务器域名:
var y = document.domain;
document.getElementById("setDoc").innerHTML=y;
返回文档的标题:
var y = document.title;
document.getElementById("setDoc").innerHTML=y;
返回文档的完整的URL
var y = document.URL;
document.getElementById("setDoc").innerHTML=y;
open() 方法可打开一个新文档,并擦除当前文档的内容。
打开输出流,向流中输入文本
var doc = document.open("text/html",'replace');
var text = "I am very happy!"
doc.write(text);
doc.close();
document.getElementById("setDoc").innerHTML="successful";
document.write()
document.writeln():换行输出
innerHTML:设置或返回表格行的开始和结束标签之间的HTMLL
document.getElementById('id1').innerHTML
用指定Name弹出元素的数目:
document.getElementByName('x).length
用指定的TagName弹出元素的数目:
document.getElementByName('input').length
2)Anchor对象
document.getElementById('id').charset:获得字符集类型
document.getElementById('id').href:获得链接的href属性
document.getElementById('id').hreflang:获得链接的hreflang属性
target属性描述了在何处打开链接
document.getElementById("baidu").target="_blank";
在一个新的未命名的窗口载入文档
document.getElementById('id').type:返回链接类型的type的返回值
3)Area对象
4)Base对象
5)Button对象
点击完成后,button不可用
document.getElementById("disbutton").disabled=true;
返回button所属表的id
document.getElementById("button1").form.id
6)Form对象
表单中所有元素的value值:
var myform = document.getElementById("form1");
var temp='';
for (var i=0; i<myform.length;i++){
temp += i+":"+myform.elements[i].value+"<br>"
} document.getElementById("setDoc").innerHTML=temp;
表单中action的属性值
document.getElementById('form').action
enctype 属性可设置或返回用于编码表单内容的 MIME 类型
如果表单没有 enctype 属性,那么当提交文本时的默认值是 "application/x-www-form-urlencoded"
返回表单元素的数量:
document.getElementById("f0rm1").length
返回发送表单数据的方法:
document.getElementById("form1").method
返回表单名
document.getElementById("form1").name
7)Frame对象
8)Image对象
9)Event对象
10)Option and Select对象
11)Table、TableHeader、TableRow、TableData对象