JavaScript、Dom和jQuery

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>

关键字搜索框

相关阅读:
block、inline、inline-block
js 的复制和引用（传值和传址）
俄罗斯方块和作品集
 js 连续赋值。。理解不了，先占坑
 8.7 jquery-dom manipulation
08.04 对象构造方法
 对象的基本操作
 08.03 js _oop
08.02 对象
 The 'Microsoft.ACE.OLEDB.12.0' provider is not registered on the local machine.
原文地址：https://www.cnblogs.com/lisa2016/p/5492055.html