JS基础(三)

25、使用JS操作CSS样式

  • DHTML表示动态HTML(Dynamic HTML,DHTML),不是标记语言,只是一种由微软提出的网页脚本化概念,目标是结合JS+HTML+CSS设计动态特效,得到很多浏览器厂商支持。
  • CSS脚本化应用:显隐特效、尺寸缩放、对象定位、视图控制、透明设计、对象交互、UI交互
  • CSS脚本属性名规范:驼峰式命名法重命名CSS属性名,去掉CSS的连字符(css属性float在脚本中用cssFloat表示);elementNode.style.width="100px",px单位必须要有

26、操作行内样式

 1 <script>
 2 window.onload = function(){
 3     var box = document.getElementById("box");
 4     var str = box.style.cssText;//cssText获取css样式文本信息,getAttribute("style")也可,只是两者格式略有区别
 5     var a = str.split(";");
 6     var temp="";
 7     for(var b in a){
 8         var prop = a[b].split(":");
 9         if(prop[0])
10             temp += b + " :" + prop[0] + " = " + prop[1] + "<br>";
11     }
12     box.innerHTML = "box.style.cssText = " + str;
13     box.innerHTML = box.innerHTML + "<br><br>" + temp;
14 }
15 </script>
16 </head>
17 <body>
18 <div id="box" style="width:600px; height:200px; background-color:#81F9A5; border:solid 2px blue;padding:10px"></div>
19 </body>
20
21 <script>
22 window.onload = function(){
23     var box = document.getElementById("box");                //获取盒子的引用指针
24     box.onmouseover = function(){                        //定义鼠标经过时的事件处理函数
25        box.style.setProperty("background-color", "blue", "");    //设置背景色为蓝色,移除可用removeProperty(),第三个参数表示是否设置!important命令,不设置就为“”
26        box.style.setProperty("border", "solid 50px red", "");    //设置边框为50像素的红色实线
27     }
28     box.onclick = function(){                            //定义鼠标单击时的事件处理函数
29           box .innerHTML = (box.style.item(0) + ":" + box.style.getPropertyValue("width"));//显示盒子的宽度
30           box .innerHTML = box .innerHTML + "<br>" +  (box.style.item(1) + ":" + box.style.getPropertyValue("height"));//显示盒子的高度
31     }
32     box.onmouseout = function(){                            //定义鼠标移出时的事件处理函数
33        box.style.setProperty("background-color", "red", "");    //设置背景色为红色
34        box.style.setProperty("border", "solid 50px blue", "");    //设置边框为50像素的蓝色实线
35     }
36 }
37 </script>
38
39 <script>
40 window.onload = function(){
41     var box = document.getElementById("box");
42     var width = box.style.width;//早期IE浏览器不支持setProperty()和getProperty(),只能使用style对象;box.style.getPropertyValue("width”)方法获取指定属性;
43     box.innerHTML =  "盒子宽度:" + width;
44 }
45 </script>
46 </head>
47 <body>
48 <div id="box" style="width:300px; height:200px;border:solid 1px red" >盒子</div>
49 </body>

27、操作样式表

  1. <style type="text/css">
  2. #box { color:green; }
  3. .red { color:red; }
  4. .blue { color:blue; }
  5. </style>
  6. <link href="style1.css" rel="stylesheet" type="text/css" media="all" />
  7. <script>
  8. window.onload = function(){
  9. var cssRules = document.styleSheets[0].cssRules || document.styleSheets[0].rules;//IE浏览器中rules、标准浏览器cssRules
  10. var box = document.getElementById("box");
  11. box.innerHTML = "第一个样式表中第三个样式选择符 = " + cssRules[2].selectorText;//.blue 读取样式选择符,cssRules[2].style.color="#999",编辑样式,慎用
  12. }
  13. </script>
  14. </head>
  15. <body>
  16. <div id="box"></div>
17
18 <style type="text/css">
19 #box { color:green; }
20 .red { color:red; }
21 .blue {
22     color:blue;
23     background-color:#FFFFFF;
24 }
25 </style>
26 <script>
27 window.onload = function(){
28     var styleSheets = document.styleSheets[0];            //获取样式表引用指针
29     var index = styleSheets.length;                     //获取样式表中包含样式的个数
30     if(styleSheets.insertRule){                         //判断浏览器是否支持insertRule()方法
31        //使用insertRule()方法在文档内部样式表中增加一个p标签选择符的样式,设置段落背景色为红色,字体颜色为白色,补白为一个字体大小。插入位置在样式表的末尾,
32         styleSheets.insertRule("p{background-color:red;color:#fff;padding:1em;}", index);
33     }else{                                        //如果浏览器不支持insertRule()方法,FF浏览器不支持addRules,仅支持insertRule
34         styleSheets.addRule("P", "background-color:red;color:#fff;padding:1em;", index);
35     }
36     var p = document.getElementsByTagName("p")[0];
37     if( document.defaultView && document.defaultView.getComputedStyle)//标准浏览器访问元素当前样式
38         p.innerHTML =  "背 景 色:"+document.defaultView.getComputedStyle(p,null).backgroundColor+"<br>字体颜色:"+document.defaultView.getComputedStyle(p,null).color;
39     else if( p.currentStyle//IE浏览器访问元素当前样式
40         p.innerHTML =  "背 景 色:"+p.currentStyle.backgroundColor+"<br>字体颜色:"+p.currentStyle.color;
41     else
42         p.innerHTML =  "当前浏览器无法获取最终显示样式";
43 }
44 </script>
45 </head>
46 <body>
47 <p class="blue">在样式表中增加样式操作</p>
48 </body>

28、网页换肤、设计折叠面板、设计工具提示

  1 </style>
  2 <script language="javascript" type="text/javascript">
  3 window.onload = function(){
  4     var link = document.getElementsByTagName("link")[0];
  5     var span = document.getElementById("header").getElementsByTagName("span");
  6     span[0].onclick = function()
  7     {
  8         link.href = "test1(0).css";
  9     }
 10     span[1].onclick = function()
 11     {
 12         link.href = "test1(1).css";
 13     }
 14     span[2].onclick = function()
 15     {
 16         link.href = "test1(2).css";
 17     }
 18 }
 19 </script>
 20

 21 .expand { overflow:visible; }
 22 .collapse {
 23     height:28px;
 24     overflow:hidden;
 25 }
 26 </style>
 27 <script>
 28 function Switch(dt){
 29     var dl = dt.parentNode;
 30     if(dl.className == "collapse")dl.className = "expand";
 31     else dl.className = "collapse";
 32 }
 33 </script>
 34 </head>
 35 <body>
 36 <dl>
 37     <dt onClick="Switch(this)">标题</dt>
 38     <dd>折叠区域<img src="images/3.jpg" width="300"></dd>
 39 </dl>
 40 </body>
 41

 42 </style>
 43 <script language="javascript" type="text/javascript">
 44 window.onload = function()
 45 {
 46     var a = document.getElementsByTagName("a");
 47     for(var i = 0; i < a.length; i ++ )
 48     {
 49         tit = a[i].getAttribute("title");
 50         if(tit)  a[i].removeAttribute("title");
 51
 52         var div = document.createElement("div");
 53         var txt = document.createTextNode(tit);
 54         div.setAttribute("class", "title");
 55         div.setAttribute("className", "title");//兼容IE
 56         div.style.position = "absolute";
 57         div.appendChild(txt);
 58
 59         a[i].onmouseover = (function(i,div)
 60         {
 61             return function()
 62             {
 63                 a[i].appendChild(div);
 64             }
 65         }
 66         )(i,div);
 67         a[i].onmouseout = (function(i,div)
 68         {
 69             return function()
 70             {
 71                 a[i].removeChild(div);
 72             }
 73         }
 74         )(i,div);
 75         a[i].onmousemove = (function(div,e)
 76         {
 77             return function(e)
 78             {
 79                 var posx = 0, posy = 0;
 80                 if(e == null) e = window.event;
 81                 if(e.pageX || e.pageY)
 82                 {
 83                     posx = e.pageX;
 84                     posy = e.pageY;
 85                 }
 86                 else if(e.clientX || e.clientY)//兼容IE
 87                 {
 88                     if(document.documentElement.scrollTop)
 89                     {
 90                         posx = e.clientX + document.documentElement.scrollLeft;
 91                         posy = e.clientY + document.documentElement.scrollTop;
 92                     }
 93                     else//IE5.5以下版本才有document.body.scrollLeft属性
 94                     {
 95                         posx = e.clientX + document.body.scrollLeft;
 96                         posy = e.clientY + document.body.scrollTop;
 97                     }
 98                 }
 99                 div.style.top = (posy + 20) + "px";
100                 div.style.left = (posx + 10) + "px";
101             }
102
103         }
104         )(div);
105     }
106 }
107 </script>
108 </head>
109 <body>
110 <a href="#" title="新浪首页" target="_blank">新浪</a><br>
111 <a href="#" title="百度首页" target="_blank">百度</a><br>
112 <a href="#" title="腾讯首页" target="_blank">腾讯</a><br>
113 <a href="#" title="搜狐首页" target="_blank">搜狐</a>
114 </body>

29、Ajax是Asynchronous JavaScript and XML的缩写,中文翻译,异步JavaScript和XML

Ajax就是利用JavaScript脚本语言和XML数据实现客户端和服务器端之间快捷通信的一种技巧

  • 基于标准化的HTML和CSS
  • 通过DOM实现动态显示和交互
  • 通过XML和XSLT来进行数据交换和处理
  • 通过XMLHttpRequest通过异步方式获取数据
  • 视同JavaScript整合以上所有的技术

30、一个最简单的Ajax实例

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 <style type="text/css">
 7 </style>
 8 <script>
 9 function createXMLHttpRequest(){// 创建XMLHttpRequest对象函数
10     var request;
11     if(window.XMLHttpRequest){//标准浏览器及IE6以上浏览器
12         request = new XMLHttpRequest();
13     }
14     else if (window.ActiveXObject){//兼容IE6以及6以下浏览器
15         try{
16             request = new ActiveXObject("Msxml2.XMLHTTP");//IE6
17         }
18         catch (e){
19             try{
20                 request = new ActiveXObject("Microsoft.XMLHTTP");//6以下
21             }
22             catch (e){
23                 alert("初始化XMLHttpRequest对象失败,请检查浏览器是否支持XMLHttpRequest组件。");
24             }
25         }
26     }
27     return request;
28 }
29 var request = createXMLHttpRequest();
30 window.onload = function(){
31     var user = document.getElementById("user");
32     user.onkeyup = function(){
33         var name = document.getElementById("user").value;
34         var url = "test.asp?name=" + name;
35         request.open("GET", url, true);//负责连接客户端到服务器,与数据传输无关,只是表示打开连接,第三个参数默认为true,表示可以异步
36         request.send(null);//使用GET方法传递,send()方法参数设为null
37         request.onreadystatechange = updatePage;//异步回调函数,表示每当HTTP请求发生改变时,服务器都会调用该函数
38     }
39 }
40 function updatePage(){
41     if (request.readyState == 4){//readyState属性值,0 未初始化,1 初始化,2 发送数据,3 数据传送中,4 数据接收完毕;
42         if (request.status == 200){//由于每当HTTP状态码发生改变,服务器都会调用回调函数,所有须设置此值以确保一切顺利
43             var response = request.responseText;
44             var p = document.getElementsByTagName("p")[0];
45             p.innerHTML = response;
46         }
47         else
48         alert(request.status);
49     }
50 }
51
52 </script>
53 </head>
54 <body>
55 <form action="" method="get" name="form1">
56     <label for="user">用户名:</label>
57     <input name="user" id="user" type="text" />
58     <input name="ok" type="submit" value="提交" />
59 </form>
60 <p style="color:red;"></p>
61 </body>
62 </html>


<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>//服务器端代码 test.asp
<%
dim user
user = Request.QueryString("name")
Response.AddHeader "Content-Type","text/html;charset=gb2312"
if user<>"admin" then
Response.Write "输入信息非法!"
else
Response.Write "欢迎"&user
end if
%>

原文地址:https://www.cnblogs.com/agasha/p/9997590.html

时间: 2024-08-10 11:12:24

JS基础(三)的相关文章

JS基础三

1.delete删除对对象的属性和方法的定义.强制解除对它的引用,将其设置为 undefined delete 运算符不能删除开发者未定义的属性和方法. 2.void 运算符对任何值返回 undefined.该运算符通常用于避免输出不应该输出的值,没有返回值的函数真正返回的都是 undefined. 3.前增量运算符,就是数值上加 1,形式是在变量前放两个加号(++): var iNum = 10; ++iNum; 第二行代码把 iNum 增加到了 11,它实质上等价于: var iNum =

NodeJs&gt;-------&gt;&gt;第三章:Node.js基础知识

第三章:Node.js基础知识 一:Node.js中的控制台 1:console.log.console.info  方法 1 console.log("this is a test string."); 1 node app1.js 1> info.log 1 console.log("This is a test String ."); 2 3 //从第二个参数开始,依序输出所有的字符串 4 console.log("%s","

三、JS基础

三.js基础语句 1.JS调用,可以放在任意地方,建议放在html末端 (1)调用js文件 <script type="css/javascript" src="js/web.js"></script> (2)直接编写 <script type="css/javascript" > alert("hello"); </script> 2.变量控制语句 a.变量定义,弱类型语言,没

js基础学习笔记(三)

3.1 认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码: 将HTML代码分解为DOM节点层次图: HTML文档可以说由节点构成的集合,三种常见的DOM节点: 1. 元素节点:上图中<html>.<body>.<p>等都是元素节点,即标签. 2. 文本节点:向用户展示的内容,如<li>...</li&g

JS基础知识回顾:ECMAScript的语法(三)

ECMA-262描述了一组用于操作数据值的操作符,包括算术操作符.位操作符.关系操作符和相等操作符. ECMAScript操作符的与众不同之处在于,他们能够适用于很多值,例如字符串.数字值.布尔值.甚至是对象. 在将这些操作符应用于对象时,相应的操作符通常都会调用对象的valueOf()和(或)toString()方法,以便取得可以操作的值. 只能操作一个值的操作符叫做一元操作符. 递增和递减操作符直接借鉴自C,各有前置型和后置型两个版本:a++.++a.a--.--a 这四种操作符不仅适用于整

JS基础知识回顾:引用类型(三)

ECMAScript通过RegExp类型来支持正则表达式. 使用类似Perl的语法就可以创建一个正则表达式:var expression=/pattern/flags; 其中模式(pattern)部分可以是任何简单或复杂的正则表达式,可以包含字符类.限定符.分组.向前查找以及反向引用. 每个正则表达式都可以带有一个或多个标志(flags),用以标注正则表达式的行为. 正则表达式的匹配模式只是下列三个标志: g:表示全局(global)模式,即模式将被应用于所有字符串,而非在发现第一个匹配项时立即

JS运动基础(三) 弹性运动

加减速运动速度不断增加或减少速度减小到负值,会向反方向运动弹性运动在目标点左边,加速:在目标点右边,减速根据距离,计算加速度带摩擦力的弹性运动弹性运动+摩擦力 弹性:速度 += (目标点 - 当前值)/系数;  //6 , 7 , 8速度 *= 摩擦系数;   // 0.7 0.75终止条件距离足够近 并且 速度足够小 缓冲:var 速度 = (目标点 - 当前值)/系数;速度取整 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <me

【 js 基础 】Javascript “继承”

是时候写一写 "继承"了,为什么加引号,因为当你阅读完这篇文章,你会知道,说是 继承 其实是不准确的. 一.类1.传统的面向类的语言中的类:类/继承 描述了一种代码的组织结构形式.举个例子:"汽车"可以被看作是"交通工具"的一种特例.我们可以定义一个 Vehicle 类和一个 Car 类来对这种关系进行描述.Vehicle 的定义可能包含引擎.载人能力等,也就是 所有交通工具,比如飞机.火车和汽车等都有的通用的功能描述.在对 Car 类进行定义的

JS基础

JavaScript 第 一 部 分 一.定义 基于浏览器的语言: 基于面向对象:c语言面向过程,java面向对象:继承,封装,多态; 事件驱动: 脚本语言: 二.作用: 表单验证,减轻服务端的压力: 添加页面动画效果: 动态更改页面内容: AJax网络请求: 三.组成部分: ECMAScript;脚本程序语言, 语言标准ES5.1,最新ES6.0; 语法,变量和数据类型, DOM; 文档对象模型 ;文档节点 BOM浏览器对象模型window:history,doucument,location

JS基础(超级简单)

1     JS基础(超级简单) 1.1 数据类型 1.1.1   基本类型: 1)        Number:特别注意:NaN的检测方法:Nan!=NaN;或者使用isNaN方法 2)        string 3)        boolean 4)        null 5)        undefined 1.1.2   复杂类型 object:date,array,function 1.2 变量 var 变量名=值 变量的作用域:1.全局:以页面为单位.2局部:以函数为单位.