JS创建对象、属性、方法
创建对象的三种方法
一：
实例
<script>
var obj = {}; //定义对象
obj.name = 'php';
console.log(obj.name);
// 对象的匿名函数
obj.rand = function(){
console.log(Math.random()*10); //Math.random() 产生0到1之间的随机数
}
obj.rand(); //调用对象中的方法
// 对象的匿名函数传参
obj.sum = function(num1,num2){
return num1+num2;
}
console.log(obj.sum(1,3));
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
二：
实例
<script>
var obj = {}; //定义对象
obj.name = 'php';
console.log(obj.name);
// 对象的匿名函数
obj.rand = function(){
console.log(Math.random()*10); //Math.random() 产生0到1之间的随机数
}
obj.rand(); //调用对象中的方法
// 对象的匿名函数传参
obj.sum = function(num1,num2){
return num1+num2;
}
console.log(obj.sum(1,3));
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
三：
实例
<script>
var obj = {
name:'php',
rand:function(){
console.log(Math.random()*10);
},
sum:function(num1,num2){
return num1+num2;
},
}
console.log(obj.name);
obj.rand()
console.log(obj.sum(2,3));
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
链式查询：
实例
<script>
var obj = {
table:'aaa',
find:function(){
return this.table;
},
where:function(){
return this; //链式查询，返回当前对象
}
};
var res1 = obj.where().find();
console.log(res1);
// 将对象obj赋值给obj2,
var obj2 = obj;
var res2 = obj.where().find();
console.log(res2); //会和res1有一样的结果
obj2.table = 'kajdlajdl'; //修改obj2的table属性
var res3 = obj.where().find();
console.log(res3); //输出修改后的obj2对象的结果
var res4 = obj.where().find();
console.log(res4); //输出obj对象的结果,发现与修改的相同,相当于起了一个别名,对两者的操作是一样的.
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
通过jquery的id、class选择器选择元素
<div id="div1" style="background: #000000;width: 100%;height: 50px;"></div>
<p class="p1" style="background: blue;width: 100%;height: 50px;"></p>
<button onclick="change_color_div()">改变div颜色</button>
<button onclick="change_size_p()">改变p大小</button>
<script>
function change_color_div(){
$('#div1').css('background','#777777');
};
function change_size_p(){
$('.p1').css('width','100px');
}
</script>
$.each遍历数组
实例
<script>
// 利用jquery方法遍历数组
var arr = [1,7,8,3,6,9,2,5,7,4,5];
$.each(arr,function(i,v){ //第一个参数是数组名,function里面的第一个参数是下标,第二个参数是值.
if(i>6){
// 如果i>6结束循环的方法
return false; //类似break
}
if(v==3||v==7){
return true; //类似continue,跳过值为3和7的输出
}
console.log('索引:'+i+'值:'+v);
});
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：
Math.random() 产生0到1之间的随机数，不同浏览器可能不同
selector.substr(0,1); //获取参数的第一个字符
document.getElementsByClassName(类名);
document.getElementById(id名);
选择元素：'.'为类， '#'为id。
