var obj=document.getElementById('t1')

  obj.innerText

  obj.innerHTML

1.javascript

插入代码如下：

 <script type="text/javascript">

     var name="server";  //#局部变量

     age=;             /*#全局变量*/

     //for

     var names=['alex','tony','rain'];

     for(var i=;i<names.length;i++){

        console.log(i);

        console.log(names[i]);

     }

     console.log('----------')

     for (var index in names){

         console.log(names[index]);

     }

     //alert('123');

     console.log('----------')

     var name2={'name':'alex','age':}

     for(var index in name2){

         console.log(index);

         console.log(name2[index]);

     }

      //while

      //while()

      var name3='alex'

      var age3=;

      //swithc,case

      console.log('----------')

      switch (name3){

         case '':

             age3=;

             console.log(age3)

             break;

         case '':

             age3=;

             console.log(age3)

             break;

         default:

            age3=;

            console.log(age3)

      }

      console.log('----------')

      //自执行函数

       (function(arg){

         console.log(arg);

     })(''

 </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

  <title>Django静态网页测试</title>

 //跑马灯标题显示

     function Go(){

         var content=document.title;

         var firstChar=content.charAt();

         var sub=content.substring(,content.length)

         document.title=sub+firstChar;

         //console.log(content)

     }

     setInterval('Go()',);

跑马灯

 <!DOCTYPE html>

 <html>

 <head lang="en">

   <meta charset="UTF-8">

   <title>Django静态网页测试</title>

   <style>

     .gray{

         color:gray;

     }

     .black{

         color:black;

     }

   </style>

   <script type='text/javascript'>

   //关键字搜索

     function Enter(){

         var id=document.getElementById('tip');

         id.className='black';

         if(id.value=='请输入关键字'||id.value.trim()==''){

             id.value='';

         }

     }

     function Leave(){

         var id=document.getElementById('tip');

         var val=id.value;

         id.className='black';

         if(val.length==||id.value.trim()==''){

             id.value='请输入关键字';

             id.className='gray'

             }

         else{

             id.className='balck';

             }

      }

    </script>

 </head>

 <body>

  <h1>主标题</h1>

 <table>

   <tr><td>序号</td><td>名称</td></tr>

   <tr><td></td><td>Hbase实战</td></tr>

   <tr><td></td><td>Lucene in Action</td></tr>

 </table>

 </br></br>

 搜索：<input type='text' class='gray' id='tip' value='请输入关键字' onfocus='Enter();'  onblur='Leave();'/>

 </br>

 </br>

 </br>

 用户名：<input type='text' id='t1' name='username' />

 </br></br>

 <div id='t2' name='pwd'>hello world!</div>

 <!--

 <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>

 -->

 <script type="text/javascript">

     var name="server";  //#局部变量

     age=;             /*#全局变量*/

     //for

     var names=['alex','tony','rain'];

     for(var i=;i<names.length;i++){

        console.log(i);

        console.log(names[i]);

     }

     console.log('----------')

     for (var index in names){

         console.log(names[index]);

     }

     //alert('123');

     console.log('----------')

     var name2={'name':'alex','age':}

     for(var index in name2){

         console.log(index);

         console.log(name2[index]);

     }

      //while

      //while()

      var name3='alex'

      var age3=;

      //swithc,case

      console.log('----------')

      switch (name3){

         case '':

             age3=;

             console.log(age3)

             break;

         case '':

             age3=;

             console.log(age3)

             break;

         default:

            age3=;

            console.log(age3)

      }

      //自执行函数

       (function(arg1){

         //alert(arg1);

         console.log(arg1);

         })('text')

     console.log('----------')

     //面向对象

     function Foo(name,age){

         this.name='name';

         this.age=age;

         this.Func=function(arg){

         return this.name+arg;

         }

     }

     var obj=new Foo('alex',);

     var ret=obj.Func(' so-easy');

     console.log(ret);

     /*

     alert('this is alert')

     confirm('this is confirm')

     */

     //DOM

     var obj=document.getElementById('t1')

     obj.innerText

     obj.innerHTML

     console.log(obj)

     console.log(obj.innerText)

     console.log(obj.innerHTML)

 </script>

 </body>

 </html>

关键字搜索框

JavaScript、Dom和jQuery的更多相关文章

  1. Python 【第八章】：JavaScript 、Dom、jQuery

    JavaScript 放置位置 body内部最下面,这样可以避免javascript链接失效时,长时间加载不到页面html内容 变量: var a =123 局部变量 a = 123 全局变量 作用域 ...

  2. javaScript DOM JQuery AJAX

    http://www.cnblogs.com/wupeiqi/articles/5369773.html 一 JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript ...

  3. JavaScript DOM对象和JQuery对象相互转换

    1.分析源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  4. 一周一话题之四（JavaScript、Dom、jQuery全面复习总结<jQuery篇>）

    -->目录导航 一. 初探Jquery 1. 介绍 2. 基础 二. Jquery操作 1. jQuery页面加载 2. 选择器 3. 操作Dom 三. Jquery进阶 1. 隐式迭代与链式编 ...

  5. javascript DOM对象转jquery对象

    首先,假设一种情形:要在HTML文件中为一个select对象添加一个函数,这个函数的名字叫dynamic_change(this),当select的option被改变的时候调用onchange事件来处 ...

  6. Python学习笔记整理总结【web基础】【web/HTML/CSS/JavaScript/DOM/jQuery】

    一.HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以 ...

  7. 一周一话题之四（JavaScript、Dom、jQuery全面复习总结<Dom篇>）

    -->目录导航 一. 初探Dom 1. Dom介绍 二. Dom基础 1. window顶级对象 2. body.document对象事件 3. 通用的HTML元素的事件 4. 冒泡事件 5. ...

  8. javascript DOM 操作 attribute 和 property 的区别

    javascript DOM 操作 attribute 和 property 的区别 在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...

  9. JavaScript DOM实战：创建和克隆元素

    DOM来创建和克隆元素. createElement()和createTextNode() createElement()和createTextNode()做的事情正如它们的名字所说的那样.最常见的J ...

  10. DOM和jQuery

    一.DOM 在学习DOM之前你应该已经具备了以下三个知识点的应用:HTML CSS javascript DOM 是 W3C(万维网联盟)的标准. W3C DOM 标准被分为 3 个不同的部分: 核心 ...

随机推荐

  1. [bzoj3061][Usaco13Feb]Partitioning the Farm_动态规划_状压dp

    Partitioning the Farm bzoj-3061 Usaco13Feb 题目大意:给定一个n*n的方格图,用k条贯穿方格图的直线将整个方格图分割,使得每一块的权值和的最大值最小. 注释: ...

  2. sql server 学习课件 PPT

    http://www.cnblogs.com/woodytu/p/4465288.html

  3. LeetCode60:Permutation Sequence

    The set [1,2,3,-,n] contains a total of n! unique permutations. By listing and labeling all of the p ...

  4. Android 线程 Looper.prepare()、Looper.loop() 使用

    优化项目过程中发现了一个非常Low的问题,整理一下.备忘: 说问题之前先看下HandlerThread的定义 一个封装了looper的线程:   Looper用于封装了android线程中的消息循环. ...

  5. 学界| UC Berkeley提出新型分布式框架Ray：实时动态学习的开端—— AI 应用的系统需求：支持（a）异质、并行计算，（b）动态任务图，（c）高吞吐量和低延迟的调度，以及（d）透明的容错性。

    学界| UC Berkeley提出新型分布式框架Ray:实时动态学习的开端 from:https://baijia.baidu.com/s?id=1587367874517247282&wfr ...

  6. 【POJ 3074】 Sudoku

    [题目链接] http://poj.org/problem?id=3074 [算法] 将数独问题转化为精确覆盖问题,用Dancing Links求解 转化方法如下 : 我们知道,在一个数独中 : 1. ...

  7. HQL分页查询

    转自:https://blog.csdn.net/dwenxue/article/details/80460161 [例]雇员信息 分页查询(1)setFirstResult(int firstRes ...

  8. 在linux查看内存的大小

    用free -m查看的结果: # free -m          total    used    free     shared buffers     cached Mem:           ...

  9. 新建项目git clone

  10. PCB MongoDB数据库 备份与还原

    一. MongoDB数据库 备份与还原工具介绍: 数据备份工具  mongodump.exe 数据还原工具   mongorestore.exe 二. MongoDB数据库备份 mongodump - ...