javaScript2

1、对象的拆分

<script type = "text/javascript">
function testA(){
    var idStr = "1,2,3,4,5";
    var ids = idStr.split("3");
    var a = parseInt(Math.random()*100+5);
    alert(a);
    }
</script>
<button type="button" οnclick="testA()">点击这里</button>

2、for循环的使用

<script type = "text/javascript">
cars=["BMW","Volvo","Saab","Ford"];
var i=0;
for (;cars[i];)
{
document.write(cars[i] + "<br>");
i++;
}
</script>

3、调用对象属性

<script type = "text/javascript">
function testB(){
var tree = new Object();
tree.treeID = 2;
tree.name = "大树";
tree.sex = 1;
tree.password = "123456";
tree.flag = 0;

tree.alertAll=function(){
alert(" 用户ID: " + tree.treeID + " 用户名: " + tree.name + " 性别: " + tree.sex + " 密码: " + tree.password + " 状态: " + tree.flag)
    }
tree.alertAll();
}
</script>
<button type="button" οnclick="testB()">点击这里</button>

4、DOM的使用，通过标签名找到 HTML 元素

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

HTML DOM （文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

通过 id 找到 HTML 元素

通过标签名找到 HTML元素

通过类名找到 HTML 元素

<div id="main">
<p>提莫队长</p>
</div>
<script type = "text/javascript">
var tree=document.getElementById("main");
var sun=tree.getElementsByTagName("p");
document.write(sun[0].innerHTML);
</script>

5、查询对象字段

<script type = "text/javascript">
function testE(){
var div = document.getElementById("divID");
var tree = document.getElementsByTagName("input");
alert(tree.length);
for(var i=0;i<tree.length;i++){
alert(tree[i].type+tree[i].value+tree[i].onclick+tree[i].name)
    }
}
</script>
<div id = "divID">
<input type="text" >
<input type="button" value="239" οnclick="testE()"name = "dashu">

</div>

6、调用函数盒子的属性

 <div id="div1">
    <p id="p1">提莫队长</p>
    <p id="p2">正在送命</p>
<script>
    var divID=document.createElement("p");
    var p=document.createTextNode("炮娘来了");
    divID.appendChild(p);
    var element=document.getElementById("div1");
    element.appendChild(divID);
</script>
</div>

7、通过点击产生新的事物

<script type = "text/javascript">
  function testA(){
  var divID = document.getElementById("divID");
  var p = document.createElement("p");
  p.innerHTML = "小提莫";
 
  divID.appendChild(p);
  }
  </script>
  <input type = "button" value = "点我啊!" onclick = "testA()"/>
  <div id = "divID">

8、删除段落

 <div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

9、八进制和十六进制

 <script type = "text/javascript">
  function testB(){
      var y=0372;//8进制
    var z=0xFF;//16进制
    alert(y);
    alert(z);
  }
  </script>  
  <button type="button" οnclick="testB()">点击这里</button>

10、查询网页地址

 <script type = "text/javascript">
   function testC(){
   alert(location.hostname)
   alert(location.pathname )
   alert(location.port )
   alert(location.protocol )
   alert(window.location.href)
   }
    </script>
         <button type="button" οnclick="testC()">点击打开</button>

11、通过连接百度来查找自己的信息

   <script type = "text/javascript">
   function testE(){
   var username = document.getElementById("username").value;
       location.href = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd="+username+"&oq=%25E7%25BE%258E%25E5%25A5%25B3&rsv_pq=e2642be800041137&rsv_t=589c1hXdlA6L4sQHFjt01qw7nisC6NI9U0r6P1werBwq11s4xvCRRVZKp3w&rqlang=cn&rsv_enter=1&inputT=10703&rsv_sug3=14&rsv_sug1=10&rsv_sug7=100&rsv_sug2=0&rsv_sug4=13252"}   
   </script>
   <form action="">
           :搜索<input id = "username" type = "text" >

         <input type = "button" value = "百度一下"onclick = "testE()">
   </form>
 

12、字母失去鼠标焦点后换位大写字母

<script type = "text/javascript" >

function testA()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}

</script>

请输入英文字符：<input type="text" id="fname" οnchange="testA()">

13、省份的下拉框

function testB() {
var sheng = document.getElementById("sheng").value;
alert(sheng);
var sheng2 = document.getElementById("sheng");
alert(sheng2.options[sheng2.selectedIndex].text);
    }
function testC(){
var sheng = document.getElementById("sheng");
alert(sheng.options[sheng.selectedIndex].text);
    }

<input type = "button" value = "222" οnclick="testB()"/>
<input type = "text"onchage = "testB()"/>
<div>
    省<select id = "sheng">
    <option value = "选择">选择</option>
    <option value = "上海">上海</option>
    <option value = "北京">北京</option>
    <option value = "东北">东北</option>
    <option value = "湖南">湖南</option>
    </div>

14、onmouseover 和 onmouseout 事件和onmousedown、onmouseup事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。

首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，

最后，当完成鼠标点击时，会触发 onclick 事件。

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数

<div οnmοusedοwn="mDown(this)" οnmοuseup="mUp(this)" style="background-color:blue;color:#ffffff;
width:50px;height:50px;padding:40px;font-size:12px;">来玩啊</div>
<hr/>
<script>
function mDown(obj)
{
obj.style.backgroundColor="#C33C28";
obj.innerHTML="放开我"
}

function mUp(obj)
{
obj.style.backgroundColor="blue";
obj.innerHTML="按下我"
}
</script>
<div οnmοuseοver="mOver(this)" οnmοuseοut="mOut(this)" style="background-color:blue;
width:50px;height:50px;padding:40px;color:#ffffff;">过来啊</div>
<script>
function mOver(obj)
{
obj.innerHTML="谢谢"
}

function mOut(obj)
{
obj.innerHTML="把鼠标移到上面"
}
</script>

15、焦点离开网页和进入网页

<script type = "text/javascript" >
function testA()
{
if (navigator.cookieEnabled==true)
    {
    alert("欢迎光临")
    }
else
    {
    alert("下次再来")
    }
}
</script>