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

JavaScript、Dom和jQuery

时间:2016-05-14 12:47:23      阅读:225      评论:0      收藏:0      [点我收藏+]

标签:

1 var obj=document.getElementById(t1)
2 
3  obj.innerText
4 
5  obj.innerHTML

 

1.javascript

插入代码如下:

 

技术分享
 1 <script type="text/javascript">
 2     var name="server";  //#局部变量
 3     age=18;             /*#全局变量*/
 4     //for
 5     var names=[alex,tony,rain];
 6     for(var i=0;i<names.length;i++){
 7        console.log(i);
 8        console.log(names[i]);
 9     }
10     console.log(----------)
11     for (var index in names){
12         console.log(names[index]);
13     }
14     //alert(‘123‘);
15     console.log(----------)
16     var name2={name:alex,age:18}
17     for(var index in name2){
18     
19         console.log(index);
20         console.log(name2[index]);
21     }
22      //while
23      //while()
24      var name3=alex
25      var age3=1;
26      //swithc,case
27      console.log(----------)
28      switch (name3){
29         case 1:
30         
31             age3=13;
32             console.log(age3)
33             break;
34         case 2:
35             age3=456;
36             console.log(age3)
37             break;
38         default:
39            age3=777;
40            console.log(age3)
41      }
42      console.log(----------)
43      //自执行函数
44       (function(arg){
45 
46         console.log(arg);
47 
48     })(123
49      
50 </script>
view code

2.DOM

文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容。注:一般说的JS让页面动起来泛指JavaScript和Dom

 

 var obj=document.getElementById(‘t1‘)

 obj.innerText

 obj.innerHTML

技术分享
 1  <title>Django静态网页测试</title>
 2 //跑马灯标题显示
 3     function Go(){
 4         var content=document.title;
 5         var firstChar=content.charAt(0);
 6         var sub=content.substring(1,content.length)
 7         document.title=sub+firstChar;
 8         //console.log(content)
 9         
10     }
11     setInterval(Go(),1000);
跑马灯

 

技术分享
  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4   <meta charset="UTF-8">
  5   <title>Django静态网页测试</title>
  6   
  7   <style>
  8     .gray{
  9         color:gray;
 10     }
 11     .black{
 12         color:black;
 13     }
 14     
 15   </style>
 16   <script type=text/javascript>
 17   //关键字搜索
 18     function Enter(){
 19         var id=document.getElementById(tip);
 20         id.className=black;
 21         if(id.value==请输入关键字||id.value.trim()==‘‘){
 22             id.value=‘‘;
 23         }
 24     
 25     }
 26     function Leave(){
 27         var id=document.getElementById(tip);
 28         var val=id.value;
 29         id.className=black;
 30         if(val.length==0||id.value.trim()==‘‘){
 31             id.value=请输入关键字;
 32             id.className=gray
 33             }
 34         else{
 35             id.className=balck;
 36             }
 37      }
 38    </script>
 39 </head>
 40 <body>
 41 
 42 
 43  <h1>主标题</h1>
 44 
 45 <table>
 46   <tr><td>序号</td><td>名称</td></tr>
 47   <tr><td>1</td><td>Hbase实战</td></tr>
 48   <tr><td>2</td><td>Lucene in Action</td></tr>
 49 </table>
 50 </br></br>
 51 搜索:<input type=text class=gray id=tip value=请输入关键字 onfocus=Enter();  onblur=Leave();/>
 52 </br>
 53 </br>
 54 </br>
 55 
 56 用户名:<input type=text id=t1 name=username />
 57 </br></br>
 58 <div id=t2 name=pwd>hello world!</div>
 59 <!--
 60 <script src="https://www.gstatic.com/og/_/js/k=og.og2.en_US.iF4jnkQuaf0.O/rt=j/t=zcms/m=def/exm=in,fot/d=1/ed=1/rs=AA2YrTv5-POC4Ks9GtGRdY2ywUWisqz7-Q"></script>
 61 -->
 62 <script type="text/javascript">
 63     var name="server";  //#局部变量
 64     age=18;             /*#全局变量*/
 65     //for
 66     var names=[alex,tony,rain];
 67     for(var i=0;i<names.length;i++){
 68        console.log(i);
 69        console.log(names[i]);
 70     }
 71     console.log(----------)
 72     for (var index in names){
 73         console.log(names[index]);
 74     }
 75     //alert(‘123‘);
 76     console.log(----------)
 77     var name2={name:alex,age:18}
 78     for(var index in name2){
 79     
 80         console.log(index);
 81         console.log(name2[index]);
 82     }
 83      //while
 84      //while()
 85      var name3=alex
 86      var age3=1;
 87      //swithc,case
 88      console.log(----------)
 89      switch (name3){
 90         case 1:
 91         
 92             age3=13;
 93             console.log(age3)
 94             break;
 95         case 2:
 96             age3=456;
 97             console.log(age3)
 98             break;
 99         default:
100            age3=777;
101            console.log(age3)
102      }
103      
104      //自执行函数
105       (function(arg1){
106         //alert(arg1);
107         console.log(arg1);
108         })(text)
109     console.log(----------)    
110     //面向对象
111     
112     function Foo(name,age){
113         this.name=name;
114         this.age=age;
115         this.Func=function(arg){
116         return this.name+arg;
117         }
118     }
119     var obj=new Foo(alex,19);
120     var ret=obj.Func( so-easy);
121     console.log(ret);
122     /*
123     alert(‘this is alert‘)
124     confirm(‘this is confirm‘)
125     */
126     //DOM
127     var obj=document.getElementById(t1)
128     obj.innerText
129     obj.innerHTML
130     console.log(obj)
131     console.log(obj.innerText)
132     console.log(obj.innerHTML)
133     
134 </script>
135 
136 </body>
137 </html>
关键字搜索框

 

JavaScript、Dom和jQuery

标签:

原文地址:http://www.cnblogs.com/lisa2016/p/5492055.html

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