JavaScript基础--事件驱动和访问CSS技术(十)
1、原理：
2、快速入门案例
js中的事件主要分为4种：
案例：监听鼠标点击事件，并能够显示鼠标点击的位置x,y
<script language="javascript" type="text/javascript">
function test1(e){
window.alert('x='+e.clientX+'y='+e.clientY);
} function test2(e){
window.alert('x='+e.clientX+'y='+e.clientY);
} function test3(){
window.alert(new Date());
}
</script>
<body onmousedown="test1(event)" onmousemove="test2(event)">
<input type="button" onclick="test3()" value="显示当前时间"/>
</body>
3、js如何访问元素的行内style属性，进行style外观修改
<script language="javascript" type="text/javascript">
function test4(obj){
//怎么知道button1被按，还是button2按下
//window.alert(obj.value);
if(obj.value=="黑色"){
//获取div1
var div1 = document.getElementById('div1');
div1.style.backgroundColor="black";
}else if(obj.value=="红色"){
var div1 =document.getElementById('div1');
div1.style.backgroundColor="red";
}
}
</script>
<body>
<!--如何通过修改style来改变style-->
<div id ="div1" style="width:400px;height:300px;background-color:red">div1</div>
<input type="button" value="黑色" onclick="test4(this)"/>
<input type="button" value="红色" onclick="test4(this)"/>
</body>
4、js如何修改外部CSS样式
<html>
<head>
<link href="mycss.css" rel="stylesheet" type="text/css"/>
<script language="javascript" type="text/javascript">
function test4(obj){
//获取mycss.css 中的所有class选择器都获取，
var ocssRules = document.styleSheets[0].rules;
//从ocssRules中取出你希望的class
//ocssRules[0];这里的0表示mycss.css文件中的第一个规则
var style1 = ocssRules[0];
if(obj.value=="黑色")
style.style.backgroundColor="black";
else if(obj.value=="红色")
style1.style.backgroundColor="red";
}
</script>
</head>
<body>
<!--如何通过修改style来改变style-->
<div id ="div1" class="style">div1</div>
<input type="button" value="黑色" onclick="test4(this)"/>
<input type="button" value="红色" onclick="test4(this)"/>
</body>
</html>
/*mycss.css*/
.style{
width:600px;
height:400px;
background-color:black;
}
5、如何区分当前浏览器是什么类型
//"",null,false,0,NaN 都是False
if(window.XMLHttpRequest){ //Mozilla,Safari,IE7,IE8
if(!window.ActiveXObject){ //Mozilla,Safari,
alert('Mozilla,Safari');
}else{
alert('IE');
}
}else{
alert('IE6');
}
6、其他事件
<html>
<head>
<script language="javascript" type="text/javascript">
function test4(e){
window.alert("ok1");
} function test5(e){
window.alert("ok2");
} function test6(){
window.alert("输入框被选中"); }
function test7(){
window.alert("onload");
//把鼠标定位到text输入框
//document.getElementById("text1").onfocus; //onfocus这个属性不正确 } function test8(){
window.alert("onunload");
} function test9(){
window.alert("onbeforeunload");
} function test10(){
window.alert("不要点击右键");
return false;
} function test11(){
window.alert("不能选择文字");
}
</script>
</head>
<body onselectstart="return test11()" oncontextmenu="return test10()" onload="test7()" onbeforeunload="test9()" onunload="test8()">
<!--如何通过修改style来改变style-->
<div id ="div1" class="style">div1</div>
<input type="button" value="黑色" onclick="test4(this),test5(this)"/>
<input type="text" id="text1" onfocus="test6()"/>
</body>
</html> /* window有三个事件
onload 页面打开
onbeforeunload 页面关闭前
onunload 关闭页面 说明： 第一次页面打开的调用顺序：onload
第二次刷新页面的调研顺序：onbeforeunload->onunload->onload
在第二次打开页面前，要用到onbeforeunload->onunload事件销毁第一次打开页面中没有用的对象，再用到onload加载第二次打开页面的变量信息
*/
JavaScript基础--事件驱动和访问CSS技术(十)的更多相关文章
- JavaScript基础--DOM对象加强篇（十四）
1.document 对象 定义:document对象代表的整个html文档,因此可以去访问到文档中的各个对象(元素)document重要的函数 1.1 write 向文档输出文本或js代码 1.2 ...
- 前端html、Javascript、CSS技术小结
简单地总结了一下前端用过的html.javascript.css技术,算是清点一下,做个大略的小结,为进一步的学习给个纲领. 一.HTML 由于HTML5的兴起,简单地判断一个网页是否是html5网页 ...
- 学习笔记 第十五章 JavaScript基础
第15章 JavaScript基础 [学习重点] 了解JavaScript基础知识 熟悉常量和变量 能够使用表达式和运算符 正确使用语句 能够掌握数据类型和转换的基本方法 正确使用函数.对象.数组 ...
- 前端（十二）—— JavaScript基础操作：if语句、for循环、while循环、for...in、for...of、异常处理、函数、事件、JS选择器、JS操作页面样式
JavaScript基础操作 一.分支结构 1.if语句 if 基础语法 if (条件表达式) { 代码块; } // 当条件表达式结果为true,会执行代码块:反之不执行 // 条件表达式可以为普通 ...
- javascript基础01
javascript基础01 Javascript能做些什么? 给予页面灵魂,让页面可以动起来,包括动态的数据,动态的标签,动态的样式等等. 如实现到轮播图.拖拽.放大镜等,而动态的数据就好比不像没有 ...
- (转)JAVA AJAX教程第二章-JAVASCRIPT基础知识
开篇:JAVASCRIPT是AJAX技术中不可或缺的一部分,所以想学好AJAX以及现在流行的AJAX框架,学好JAVASCRIPT是最重要的.这章我给大家整理了一些JAVASCRIPT的基础知识.常用 ...
- JavaScript基础知识点
本书目录 第一章: JavaScript语言基础 第二章: JavaScript内置对象第三章: 窗口window对象第四章: 文档document对象第五章: 表单form对象第六章: ...
- JavaScript基础（.....持续待更）
javascript热身 一.你知道,为什么JavaScript非常值得我们学习吗? 1. 所有主流浏览器都支持JavaScript. 2. 目前,全世界大部分网页都使用JavaScript. 3. ...
- JavaScript基础知识（一）
一.JavaScript基础 1.JavaScript用法: HTML 中的脚本必须位于 <script> 与 </script> 标签之间. 脚本可被放置在 HTML 页面的 ...
随机推荐
- 前端Html和Css面试题
前端Html和Css面试题Html篇:1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Ope ...
- lucene5.5 field
lucene常见Field IntField 主要对int类型的字段进行存储,需要注意的是如果需要对InfField进行排序使用SortField.Type.INT来比较,如果进范围查询或过滤,需要采 ...
- Visual Studio 2015简体中文企业版/专业版下载+有效激活密钥
Visual Studio 2015是一个基本完整的开发工具集,它包括了整个软件生命周期中所需要的大部分工具,如UML工具.代码管控工具.集成开发环境(IDE)等等.所写的目标代码适用于微软支持的所有 ...
- Java菜鸟学习 Script 脚本语言（简介)
script 可以写在head里 也可以写在body里 还可以写在 /html后面 script 也是成对出现的 <script></script> 他有三种常见的对话框 1 ...
- 【Android】解析Json数据
Json数据:"{\"UserID\":\"Allen\",\"Dep\":IT,\"QQ\":\" ...
- windows中的程序放在linux上因为字符集不同出错
问题 在把windows下的一个python脚本挪到linux下的时候,出现了一个奇怪的问题,就是标题那样的报错,很明显,shell没有用对应的python解释器去解释脚本,而是直接用shell解释了 ...
- 深入浅出设计模式——装饰模式（Decorator Pattern）
模式动机 一般有两种方式可以实现给一个类或对象增加行为: 继承机制,使用继承机制是给现有类添加功能的一种有效途径,通过继承一个现有类可以使得子类在拥有自身方法的同时还拥有父类的方法.但是这种方法是静 ...
- Trick
1. var b = a.slice(beginIndex,endIndex); [].slice.call( [] ) Array.prototype.slice.call([]) will cop ...
- python成长之路【第四篇】：装饰器
实现装饰器的知识储备: 示例: def f1(): print("f1") 1.函数即“变量” #上面的示例中,函数f1为变量,它指向内存地址.而f1()表示函数执行. 2.高阶函 ...
- zabbix3.0.4 部署之一 （简介）
官方网站:http://www.zabbix.com/ 下载地址:http://www.zabbix.com/download.php zabbix是一个基于WEB界面的提供分布式系统监视以及网络监视 ...