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>

关键字搜索框

时间: 2024-08-21 21:46:43

JavaScript、Dom和jQuery的相关文章

web前端全部课件(html5+CSS3+javascript+dom+bom+jquery+jqm+bootstrap+angular+ext+weixin+less)

一.HTML5 BASIC课件 Unit01:Web基础知识.HTML快速入门.文本 Unit02:图像和链接.表格.结构标记 Unit03:列表.表单.其他常用标记 二.CSS3 BASIC课件 Unit01:CSS 概述.CSS 语法\尺寸与边框 Unit02:框模型.背景.渐变\文本格式化-1 Unit03:文本格式化-2.表格.浮动.显示 Unit04:列表.定位 三.京东首页实战(无PPT) 四.WEB UI课件 Unit01:Photoshop基本操作.网页切图.图像优化 Unit0

JavaScript DOM和JQuery方法对比

  JQuery JavaScript   创建节点 $("<div>') document.createElement("div“)   选择元素 $(CSS选择器) querySelector(CSS选择器):querySelector(CSS选择器):getElementById();getElementsByTagName();getElementsByClassName();    更改元素CSS 修改单个CSS:$("p").css(&quo

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

1.分析源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C

JavaScript之jQuery-3 jQuery操作DOM(查询、样式操作、遍历节点、创建插入删除、替换、复制)

一.jQuery操作DOM - 查询 html操作 - html(): 读取或修改节点的HTML内容,类似于JavaScript中的innerHTML属性 文本操作 - text(): 读取或修改节点的文本内容,类似于JavaScript中的textContent属性 值操作 - val(): 读取或修改节点的value属性值,类似于 JavaScript 中的value值 属性操作 - attr(): 读取或者修改节点的属性 - removeAttr(): 删除节点的属性 二.jQuery操作

JavaScript对象与jQuery对象以及DOM对象

今天说一下JavaScript对象与jQuery对象和DOM对象的区别和转换,前面已经见过JavaScript对象的创建,但还是要重提 var variable =                     //这是一个JavaScript对象 var $variable = $()             //这就是个jQuery对象 var variable = document.get...                   //这是一个DOM对象,方法包括getElementById(

JavaScript强化教程——JQuery中的DOM编程

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 --JQuery中的DOM编程 JavaScript强化教程--JQuery中的DOM编程 本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 --JQuery中的DOM编程 DOM编程 ---------------------------- js中DOM编程   创建一个标签对象     var p=document.createElement("p"

JavaScript DOM实战:创建和克隆元素

DOM来创建和克隆元素. createElement()和createTextNode() createElement()和createTextNode()做的事情正如它们的名字所说的那样.最常见的JavaScript DOM方法实战-修改文档树中已经用过它们.当时的目的是把新创建的元素添加到文档树里,使它成为某个元素的最后一个子节点. 1. //创建一个li新元素 2. var newChild=document.createElement('li'); 3. //创建一个a 新元素 4. v

电子书 JavaScript DOM编程艺术.pdf

是Web开发中重要的一门语言,它强大而优美.无论是桌面开发,还是移动应用.都是必须掌握的技术.W3C的DOM标准是开发Web应用的基石.已经得到所有现代浏览器的支持,这使得跨平台Web开发成了一件轻松惬意的事.< DOM编程艺术(第2版)>是超级畅销书的升级版,由倡导Web标准的领军人物执笔,揭示了前端开发的真谛,是学习和DOM开发的推荐阅读之作. < DOM编程艺术(第2版)>在简洁明快地讲述和DOM的基本知识之后,通过几个实例演示了专业水准的网页开发技术,透彻阐述了平稳退化等一

原生javaScript仿写jQuery的例子

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>原生javaScript仿写jQuery</title> </head> <body> <div> <div class="wrap"> <input type="text" /> <input

JavaScript之jQuery-1 jQuery概述、jQuery的编程步骤、jQuery对象

一.jQuery 概述 JavaScript 类库 - JavaScript 类库的出现,是为了简化 JavaScript 的开发 - JavaScript 类库封装了预定义的对象和实用的函数,可以帮助开发人员来建立有高难度交互的 Web 2.0 特性的丰富客户端页面,并且兼容各大浏览器 - JavaScript 类库可以简称为JS库 - 目前比较流行的JavaScript 类库有: - jQuery - Mootools - Prototype - Dojo jQuery 概述 - jQuer