1.直接获取 CSS 的内容
举几个例子先来测试下:
先定义一个css文件
#div2{
width:500px;
height:200px;
background-color:green;
left:50px; top:200px;
position:absolute;
}
#div3{
width:500px;
height:200px;
background-color:red;
left:50px; top:450px; position:absolute;
}
<body>
<table >
<tr>
<td><input type=”button” value=”测试” οnclick=”test()” /> </td>
</tr>
</table>
<br/>
再定义个 html文件
function test(){
1)★方式1- html 属性
可以
2)★方式2-css原始
var div2 = document.getElementById(“div2”);
//取出width
用 原始 css方式添加的样式中, 可以获取 到属性
window. alert (“div2:”+div2.style.width);
可以:500px
3)方式3
Id既可以代表 html元素id ,又可以代表 ID选择器
取不出
因为div2没有给属性值
4)方式4
想从id选择器里取
取不出来
5)方式5
也取不出来
有些浏览器能认这个
6)★结论
① 可以 html属性 方式
② css原始 方式
2.★ 构造方法 (函数)介绍
1)★ 构造函数 的基本用法
function 类名(参数列表){
属性=参数值;
}
① 属性名不一定有this
② 没有的话,要进行区分(这里没有讲到,先保留疑问)
举例如下:
function Person(name,age){
this不能少
this.name=name;
this.age=age;
}
创建一个Person对象的时候 ,就可以 直接给名字,和年龄
var p1 =new Person(“abc”,820);
window.alert(p1.name);
var p2 = new Person(“Hello”,80);
window.alert(p2.name + p2.age);
2)特点
3)★初始化实例-指定函数属性
创建一个对象实例 的时候, 单独 指定一个方法
看案例:
<html>
<head>
< script language=”javascript”>
function jisuan(num1,num2,oper){
if(oper==”+”){
return num1+num2;
}else if(oper==”-“){
return num1-num2;
}if(oper==”*”){
return num1*num2;
}if(oper==”/”){
return num1/num2;
}
}
传递一个函数,很神奇
相当与将函数赋给类的属性
function Person(name,age,fun){
this.name=name;
this.age=age;
this.myfun=fun;
}
var p1=new Person(“aa”,60, jisuan );
如果不指定函数,给个null就好了
var p1=new Person(“aa”,60, null) ;
window.alert(p1.name+p1.age);
window.alert( p1.myfun (80,50,”+”));
</script>
</head>
<body></body>
</html>
4)★小结
① 构造方法名 和类名相同
② 主要作用是完成对新 对象 实例的 初始化
③ 在创建对象实例时,系统 自动调用 该对象的构造方法
④ 给对象初始化属性值的时候,可以 指定函数属性
3.类(原型对象)定义的完善:
面向对象编程的进一步认识
4. Extjs
比较强大
一个js框架,可以用来在网页上画图
炒股,动态图曲线图
5.★一种新的创建对象方式
1)★指定属性
① extjs里面常用
② 类似与json
③ 创建对象的又一种形式:如果一个 对象比较简单 ,我们 可以直接创建 (可以指定普通属性和函数属性)
④ 韩顺平,培训机构出来,发现很多知识太多不会了,但好就好在,并不要求全会
⑤ 会的越多,价值会上升
⑥ 技术更替是客观存在的
⑦ 不要觉得恐慌,最重要的是夯实基础,基础扎实,学习东西就很容易
⑧ 安卓,就是以Java 网络的东西为基础,基础好的话容易上手
<html>
<head>
<script language=”javascript”>
① 这里是name:’小明’,而不是name=’小明’,是 冒号 而不是等于号
② 属性中间是 ,
③ 不要模板了
④ 需要掌握
⑤ 属性是公开的
⑥ Js中属性一般都是公开的
⑦ 本质是以object方式创建对象,属性动态添加进去的
var dog={name:’小明’,age:9};
window.alert(dog.constructor);
window.alert(dog.name); 小明
2)★指定函数
很多框架都有这种写法
var dog={name:’小明’, //属性之间用 逗号 隔开
age:9,
sayHello:function(a,b){window.alert(“Hello”);},
jisuan:function(a,b){window.alert(“结果=”+(a+b));}
} ;
window.alert(dog.name);
window.alert(dog[“name”]);//这样也可以访问
dog.sayHello();
dog.jisuan(50,60);
</script>
</head>
<body></body>
</html>
6.★call-一种新的调用方式
1)基本语法
有时,我们会看到这样一种调用方法
函数名.call(对象实例)
函数call对象
这样调用,该函数的this就指向 对象实例
<html>
<head>
<script language=”javascript”>
var dog={name:’小明’,age:9} ; //这里是name:’小明’,而不是name=’小明’,是冒号而不是等于号
function test(){
window.alert(this.name);
}
function test1(){
window.alert(this.name1);
}
test(); //空白 ,什么也没有输出,其实也就是 undefined
window.test(); //空白 ,什么也没有输出,其实也就是undefined
test.call(dog);
① call实际上为了改变test函数中this的指向,
② 韩老师说其 等价于 dog.test() ; 前提是需要指定
③ 目的是,传递进去的对象改变this,this改成放进去的对象,放的是什么就是什么,希望传进去的对象充当this的角色
var name1 = “顺平”;
test1.call(window);
New test();会报错
7.★forin
① 利用 for … in 可以很方便的 查看某一对象 的所有 属性 和 方法
② 用处很大
var dog={name:’小明’, //属性之间用 逗号 隔开
age:9,
sayHello:function(a,b){window.alert(“Hello”);},
jisuan:function(a,b){window.alert(“结果=”+(a+b));}
};
循环列出dog对象的所有属性和方法,对象名[‘属性名’]
for(var key in dog){
document.writeln(dog[key]+”<br/>”);
}
1)意义:
① 查看不同浏览器对window对象属性支持不同
② 比查文档或者网上查方便
③ 或者查看其他的对象
//循环列出window对象的所有属性和方法
document.writeln(“***当前浏览器window对象有 属性 和 方法***<br/>”);
for(var key in window){
document.writeln(key + “:” + window[key] + “<br/>”);
}
//如果想看其他对象的属性和方法,将window改为其他的即可
document.writeln(“***当前浏览器history对象有 属性 和 方法***<br/>”);
for(var key in history){
document.writeln(key + “:” + history[key] + “<br/>”);
}
</script>
</head>
<body></body>
</html>
这里最重要的就是 浏览器window对象的属性和方法,利用for in 我们就可以知道当前我们使用的浏览器支持window对象中的哪些方法和属性,就不用查找网络了,浏览器除了window对象外,还有其他对象,如下图所示:
通过下面的方法查看浏览器window对象的属性和方法:(我用的是火狐浏览器)
//循环列出window对象的所有属性和方法
document.writeln(“***当前浏览器window对象有 属性 和 方法***<br/>”);
for(var key in window){
document.writeln(key + “:” + window[key] + “<br/>”);
}
输出结果:
再来看浏览器 history 对象的属性和方法: (我用的是火狐浏览器)
Js的内容基本已经学完了
前面压力比较大
后面相对轻松一点了