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. zookeeper协调技术

    本文转自http://www.cnblogs.com/wuxl360/p/5817471.html 感谢作者 一.分布式协调技术 在给大家介绍ZooKeeper之前先来给大家介绍一种技术——分布式协调 ...

  2. 学习KNN算法体会和总结

    k-d树(k-dimensional树的简称),是一种切割k维数据空间的数据结构.主要应用于多维空间重要数据的搜索(如:范围搜索和近期邻搜索). 索引结构中相似性查询有两种主要的方式:一种是范围查询( ...

  3. spark streaming updateStateByKey 使用方法

    updateStateByKey 解释: 以DStream中的数据进行按key做reduce操作,然后对各个批次的数据进行累加 在有新的数据信息进入或更新时.能够让用户保持想要的不论什么状.使用这个功 ...

  4. leetcode第一刷_Convert Sorted Array to Binary Search Tree

    晕.竟然另一样的一道题.换成sorted array的话.找到中间位置更加方便了. TreeNode *sortTree(vector<int> &num, int start, ...

  5. 使用oracle数据库和MySQL数据库时hibernate的映射文件.hbm.xml的不同

    假设是使用oracle数据库.那么hibernate的映射文件.hbm.xml例如以下: <id name="xuehao" column="xuehao" ...

  6. 配置Java连接池的两种方式：tomcat方式以及spring方式

    1. tomcat方式:在context.xml配置连接池,然后在web.xml中写配置代码(也能够在server.xml文件里配置连接池).这两种方法的差别是:在tomcat6版本号及以上中cont ...

  7. C++第11周(春)项目3 - 点类派生直线类

    课程首页在:http://blog.csdn.net/sxhelijian/article/details/11890759.内有完整教学方案及资源链接 [项目3 - 点类派生直线类]定义点类Poin ...

  8. OTA制作及升级过程笔记【转】

    本文转载自:http://www.it610.com/article/5752570.htm 1.概述 1.1   文档概要 前段时间学习了AndroidRecovery模式及OTA升级过程,为加深理 ...

  9. hdu 6112 今夕何夕(模拟）

    今夕何夕 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  10. [Apple开发者帐户帮助]二、管理你的团队（7）管理服务器帐户

    如果在配置机器人以在多个设备上运行应用程序时向团队添加服务器,允许Xcode Server为您管理签名,或者配置机器人以创建iOS App文件,则服务器可以访问您的资产并显示在您的开发人员帐户 您可以 ...