JS创建对象、属性、方法,jquery的id、class选择器选择元素—2019年10月24日

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。