首页 > Web开发 > 详细

Js基础操作

时间:2015-02-09 00:31:03      阅读:326      评论:0      收藏:0      [点我收藏+]
var a="zhangsan";
  document.write(a+":I love JavaScrip");
  a="lisi";
  document.write("<br/>");
  document.write(a+":I love JavaScrip");
  alert(‘haha‘);

函数的编写
 function test(){
	    var mymessage=confirm("你喜欢JavaScript吗?");
    if(mymessage==true)
    {   document.write("很好,加油!");   }
    else
    {  document.write("JS功能强大,要学习噢!");   }
	  }

 function test()
	  {
		  	var con=confirm("你缺点需要退出网站吗?");
			if(con==true)
			{
				document.write("你端机确定额!");
				}
				else
				
				{
					document.write("你端机确定额!");
					}
		  }

--------------------------------
function test1()
		  {
			  	var myname=prompt("请输入你的姓名:");
if(myname!=null)
  {   alert("你好"+myname); }
else
  {  alert("你好 my friend.");  }
			  }

-------------------
打开关闭
  var a=window.open(‘http://www.imooc.com‘,‘_blank‘,‘width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes‘);
				  a.close();


-----------------------dom节点操作
 function test3()
				  {
					 var d=document.getElementById("hh").innerHTML;
				  document.write(d);  


属性节点操作
     function test5()
				  {
					 var d=document.getElementById("hh1");
				  d.style.color="black" ;
				  d.style.background="gray";
				  d.style.fontFamily="微软雅黑";
				  d.style.fontSize=20;
				  
				  }

---------------显示隐藏
				  function test6()
				  {
					  var d=document.getElementById("dis").style.display="none";
					  }
					   function test7()
				  {
					  var d=document.getElementById("dis").style.display="block";
					  }

修改类名

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>className属性</title>
<style>
    body{ font-size:16px;}
    .one{
		border:1px solid #eee;
		width:230px;
		height:50px;
		background:#ccc;
		color:red;
    }
	.two{
		border:1px solid #ccc;
		width:230px;
		height:50px;
		background:#9CF;
		color:blue;
	}
	</style>
</head>
<body>
    <p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。</p>
    <input type="button" value="添加样式" onclick="add()"/>
	<p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>
    <input type="button" value="更改外观" onclick="modify()"/>

	<script type="text/javascript">
	   function add(){
	      var p1 = document.getElementById("p1");
	      p1.className="two";
	   }
	   function modify(){
	      var p2 = document.getElementById("p2");
		    p1.className="one";
	      
	   }
	</script>
</body>
</html>

js变量 什么是变量 定义 表达式 赋值 自增自减 ++--
比较运算法 逻辑运算发  是非颠倒 操作运算符

数组 组团  数组赋值  数组添加元素  使用数组元素 数组数量  二维数组

流程控制语句  if if else switch for while do break conitinute

函数  函数定义  有参函数 带返回值函数

事件 单机事件 鼠标经过 移开 光标聚集 内容选中 内容改变 加载事件 卸载事件

js内置对象
什么是对象
date对象  返回设置年份方法 返回星期方法 返回设置时间方法  返回指定字符  返回字符串首次出现的位置  

字符串分割 split()  提取字符串substring()  提取指定数目的字符substr()  Math对象

向上取整ceil() 乡下取整floor() 四舍五入round() 随机数random() array数组对象()

数组里阿尼额concat()  指定分隔符链接数组元素join()


window对象 

js计时器  计算器setInterval()  取消clearInterval()  计时器setTimeout()取消计时器  clearTimeout()

History对象 返回前一个下一个页面 返回浏览历史中其他页面


赋值多元化:
var num1 = 123;       // 123是数值
var num2 = "一二三";    //"一二三"是字符串
var num3=true;   


数组的使用
var myarr=new Array(); //定义数组
 myarr[0]=80; 
 myarr[1]=60;
 myarr[2]=99;

var myarray= new Array(8); //创建数组,存储8个数据

var myarray = new Array(66,80,90,77,59);//创建数组同时赋值

 var myarray = [66,80,90,77,59];//直接输入一个数组(称 “字面量数组”)
myarray[5]=88; //使用一个新索引,为数组增加一个新元素

var arr=[55,32,5,90,60,98,76,54];//包含8个数值的数组arr 
document.write(arr.length); //显示数组长度8
document.write(arr[7]); //显示第8个元素的值54

二维数组
  var myarr=new Array();  //先声明一维 
for(var i=0;i<2;i++){   //一维长度为2
   myarr[i]=new Array();  //在声明二维 
   for(var j=0;j<3;j++){   //二维长度为3
   myarr[i][j]=i+j;   // 赋值,每个数组元素的值为i+j
   }
   
   document.write("二维数组:"+myarr);

if语句的使用
 var mycarrer = "HTML";
  if (mycarrer == "HTML")
  {
    document.write("你面试成功,欢迎加入公司。");
  }
颠倒数组元素顺序reverse()  选定元素slice()  数组排序sort()

8-11 Location对象
8-12 Navigator对象
8-13 userAgent
8-14 screen对象
8-15 屏幕分辨率的高和宽
8-16 屏幕可用高和宽度

HTML5  section ==div

wbr响应式布局  换行标签  progress  details标签 缩放  datalist  自动提示

form表单下的keygen加密

 

Js基础操作

原文:http://www.cnblogs.com/codemouserman/p/4280706.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!