本文详细介绍了JavaScript中获取CSS内容的方式，包括HTML属性和CSS原始方法。此外，讲解了构造函数的使用，包括初始化实例时指定函数属性。还探讨了一种新的创建对象的方式，类似于JSON，并展示了如何通过`for...in`遍历对象属性。最后，提到了`call`方法改变函数上下文及`for...in`遍历对象属性和方法在检查浏览器对象支持情况上的应用。
- 直接获取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-html属性
可以
- ★方式2-css原始
var div2 = document.getElementById("div2");
//取出width
用原始css方式添加的样式中，可以获取到属性
window.alert("div2:"+div2.style.width);
可以：500px
- 方式3
Id既可以代表html元素id,又可以代表ID选择器
取不出
因为div2没有给属性值
- 方式4
想从id选择器里取
取不出来
- 方式5
也取不出来
有些浏览器能认这个
- ★结论
- 可以html属性方式
- css原始方式
- ★构造方法（函数）介绍
- ★构造函数的基本用法
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);
- 特点
- ★初始化实例-指定函数属性
创建一个对象实例的时候，单独指定一个方法
看案例：
<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>
- ★小结
- 构造方法名和类名相同
- 主要作用是完成对新对象实例的初始化
- 在创建对象实例时，系统自动调用该对象的构造方法
- 给对象初始化属性值的时候，可以指定函数属性
- 类（原型对象）定义的完善：
面向对象编程的进一步认识
- Extjs
比较强大
一个js框架，可以用来在网页上画图
炒股，动态图曲线图
- ★一种新的创建对象方式
- ★指定属性
- 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); 小明
- ★指定函数
很多框架都有这种写法
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>
- ★call-一种新的调用方式
- 基本语法
有时，我们会看到这样一种调用方法
函数名.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（）；会报错
- ★for in
- 利用 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/>");
}
- 意义：
- 查看不同浏览器对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的内容基本已经学完了
前面压力比较大
后面相对轻松一点了
扫一扫
609
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
