javaScript学习札记

于 2016-09-19 08:59:51 发布
阅读量399 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： javaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/samuelandkevin/article/details/52582619
本文介绍了JavaScript的基础知识，包括字符串操作、数组管理、事件处理等内容，并深入探讨了DOM操作及对象的创建、属性定义和原型链等高级主题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.字符串。分割，查找，匹配，替换。

 <script>
                
                var num = Math.random()
                num = num *100
                document.write(num+"<br>")
                document.write(Math.ceil(num)+"<br>")
                document.write(Math.floor(num)+"<br>")
                document.write(Math.round(num)+"<br>")
                
 </script>

2.数组

//声明数组方式一(自定义，不建议使用)
                function MyArray(){
                    this.length = arguments.length
                    for(var i=0; i<arguments.length;i++){
                        this[i] = arguments[i];
                    }
                }
            
                var array = new MyArray("a","b","c","d","e")
                alert(array.length)
                array[0] = "aaaa"
                alert(array[0])
                
                //声明数组方式二
                var array2 = ["a","b","c","d","e"]
                array2.push("www","yyyy","cc")//进栈
                array2.pop()//出栈
                document.write(array2)

3.事件处理

鼠标：click单击，dbclik双击，textcontentMenu在文本菜单，mouseover放上，mouse out离开，mousedown按下，mouse抬起，mouse move移动

键盘：keypress  键盘事件，keyup  抬起，keydown 按下

文档：load   加载 ,unload 关闭,before unload关闭之前

表单：focus 焦点，blur 失去焦点，submit 提交事件，change改变事件


4.事件处理程序

第一种格式:  <tag on事件="事件处理程序"/>

第二种格式：<script> 对象.on事件=事件处理程序</script>

第三种格式：<script for="事件源ID" event="事件">事件处理程序</script>


eg:

 <script>
                
             function show(){
                  alert("showingAlert")
              }
                
  </script>

  <input type="button" onClick="show()" value="show">

 <div id="one">show</div>
           
 <script>
              var one = document.getElementById("one")
              one.onclick = function(){
                  alert("showingAlert")
              }
 </script>


<div id="one">show </div>
           
<script for="one" event="onclick">
                var one = document.getElementById("one")
                alert("showingAlert")
 </script>


5.DOM

Oject 对象（HTML元素转成的对象（JS对象））

备注：如果使用JS操作HTML文档，就需要选择HTML文档结构成JS对象

转成对象的两种形式:

1.标志名（多个）、id(唯一)、name(多个)

document中的三个方法

var objs = document.getElementsByTagName(“div”)

var objs = document.getElementsById(“one”)

var objs = document.getElementsByName(“two”) 


 <style>
                .test{
                    width:500px;
                    height:300px;
                    border:5px;solid blue;

                }
                .demo{
                    font-size:4cm;
                    color:orange;
                    backgroudColor:green
                }
 </style>



 <input id="two" type="text" name="userName" value="xiaoming"><br>
        
 <a id="one" href="http://www.baidu.com" target="_blank" title="this is test">test</a>
           
 <script>
               //a.操作属性
               var jsobj = document.getElementById("one")
               jsobj.href = "http://www.google.com";
               jsobj.title = "It is a DEMO"
               alert(jsobj.href)
               
               //b.操作内容
               //innerText(IE能用) textContent(FireFox能用)
               //outerText outerHTML
               //表单 用value
               jsobj.innerText = "friend"//纯文本
               jsobj.innerHTML = "<h1>OhMyGod</h1>"//文本加标签
               
               //c.操作样式
               //“-”去掉，后面的单词，首字母大写
               jsobj.style.backgroudColor = "red"
               jsobj.style.fontSize = "2cm"
               //如果操作对象的两个以上的属性。用className
               jsobj.className = "test"
               jsobj.className += " demo" //两个样式
 </script>


//通过数组
document.title = [object]
document.frame = [object]
document.all   = [object]
document.embeds = [object]
document.scripts = [object]
document.appletes = [object]
document.images   = [object]
document.forms = [object]
document.anchors = [object]
document.styleSheets= [object]
document.links = [object]

BOM 浏览器对象
一、 浏览器本身就有一些对象，不用创建就可以使用。
window:当前浏览器器窗体的
属性：
status
opener 在子窗体中代表父窗体的对象
closer
方法：
alert();
confirm();
setInterval();
clearInterval();
setTimeout();
clearTimeout();
open();
document;
frames;
location;
history;
screen;

//回调函数例子
function test1(){
return 1;
}
function test2(){
return 2;
}
function test(x,y){
return x()+y();
}
// test(test1,test2) 等价于 test(function test1(){return 1;},function test2(){return 2;})
alert(test(test1,test2));
alert(test(functiontest1(){return1;},functiontest2(){return2;}));
function multiply(a,b){
return a*b;
}
var params= [3,4];
alert(multiply.apply(multiply,params));
alert(multiply(multiply.call(multiply,3,4)));
//自调函数
(
function(){
document.write('this is a test!');
}
)();


//创建对象

	 //1.通过 var obj = {} 对象字面量法

		  //例子
		   var obj  = {};
		   var obj2 = {x:2,y:2,z:3};
		   var obj1 = {
		   		'x':1,
		  		 "y":2,
		   		username:'king
		   		'for':'javaScrit的关键字必须放到引号之间',
		   		person:{
		   			username:'king',
		   			age:12,
		   		address:'北京'
		   	
		   	}
		   }
		   
		   //2.通过 var obj = new Object()创建一个空对象
		   var obj3 = new Object();
		   var arr = new Array();
		   
		//3.通过构造函数创建对象 function Person()
		  var Person = function()
		  var obj4 = new Person();
		  //通过instanceof 操作符可以检测一个对象是否由某个指定的构造器函数创建的。
		  //通过Object.create创建对象。
			var obj6=Object.create({x:1});
			var obj7=Object.create(null);
			var obj8=Object.create(Object.prototype);


//对象的属性


		//对象的结构
		//属性特性 writalbe  enumerable可枚举的 configureable可配置的 getter setter
		//对象的原型  对象的类 对象是否可扩展的
		function foo(){};
		foo.prototype.z = 3;
		var obj = new foo();
		obj.x = 1;
		obj.y = 2;
		console.log(obj.x);
		console.	log(obj.y);
		
		//通过in检测对象上是否由某个属性
		console.log('x' in obj);
		//通过hasOwnProperty检测对象上是否有某个属性，父类的不算
		console.log(obj.hasOwnProperty('x'));
		console.log(obj.hasOwnProperty('z'));
		console.log(obj.hasOwnProperty('toString'));


	/****************华丽分隔线**************/
		function Foo(){};
		Foo.prototype.z = 3;
		var obj = new Foo();
		//定义一个对象的属性
		Object.defineProperty(obj,'x',{
			get : function(){
				return 112;
			}
		});
		Object.defineProperty(obj,'y',{
			value:56,
			writable:true,//是否可写
			enumerable:true,//是否可枚举,默认是false
			configureable:false//可否配置，（删除，修改）
		});
		console.log('打印对象的属性:');
		for (p in obj) {
			console.log(p);//如果enumerable=false，对象自身的属性不可显示出来。但原型可以显示
		}
		console.log('获取对象的所有key:');
		console.log(Object.keys(obj));
		console.log('获取对象自身的所有属性名:');
		console.log(Object.getOwnPropertyNames(obj));
		console.log('获取对象某个属性值:');
		console.log(obj.y);
		//get属性
		console.log('通过get,获取对象某个属性值:');
		console.log(obj.x);
		
		/****************华丽分隔线**************/
		var obj1 = {};
//		__proto__:null;//保证所有属性不是继承而来的
		// 备注：定义属性1和定义属性2是等价的
		obj1.x = 1;  //定义属性1
		
		Object.defineProperty(obj1,'x',{
			value:1,
			writable:true,
			enumerable:true,
			configurable:true
		});//定义属性2
		
		//如果属性不可配置，可以将writable的true变成false,但是不可将false变成true.
		
		/****************华丽分隔线**************/
		console.log('****************华丽分隔线**************');
		var Person = {
			userName:'xiao ming',
			sex : '男',
			get age(){
				return 18;
			},
			set age(val){
				console.log('不能设置'+val);
			}
			
		};
		console.log('打印Person对象的属性值：');
		console.log(Person.sex);
		console.log(Person.age);
		Person.age = 13;
		
		/****************华丽分隔线**************/
		console.log('****************华丽分隔线**************');
		var Person2 = {};
		//一次定义对象的多个属性
		Object.defineProperties(Person2,{
			'userName':{
				value:'king',
				writable:true,
				enumable:true,
				configurable:true
			},
			'age':{
				value:13,
				writable:false,

			}
		});
		console.log('Person2用户名:'+Person2.userName);
		console.log('Person2年龄:'+Person2['age']);
		console.log(Object.getOwnPropertyDescriptor(Person2,'userName'));
		console.log(Object.getOwnPropertyDescriptor(Person2,'age'));
		
		//一.对象的原型（prototype）指向另外一个对象，本对象的属性继承自它的原型对象
		//通过对象字面量创建的对象使用Object.prototyp作为它们的原型。
		//通过new创建的对象使用构造函数的prototype属性作为它们的原型
		//通过Object.create()创建的对象使用第一个参数(也可以是null)作为它们的原型
		
		//对象的类（class）是一个标识对象类型的字符串
		//对象的扩展标记（extensible flag）指明了（在ECMAScript5）是否可以向该对象添加新属性
		
		//检测一个对象是否是另外一个对象的原型（或者处于原型链中）
		 obj1.isPrototypeOf(obj);
		 
		 /****************华丽分隔线**************/
		 console.log('****************华丽分隔线**************');
		 var obj3 = {};
		 console.log(obj3.toString());//结果：[Object Object]
		 var arr = new Array();
		 console.log(Object.prototype.toString.call(arr));//结果：[Object Array]
		 var d = new Date();
		 console.log(Object.prototype.toString.call(d));//结果:[Object Date]
		 
		 //自定义函数 判断函数是属于哪种类型的
		 function classof(obj){
		 	if(obj === null){
		 		return 'NULL';
		 	}
		 	if(obj === undefined){
		 		return 'undefined';
		 	}
		 	return Object.prototype.toString.call(obj).slice(8,-1);
		 }
		 
		 //eg:
		 var x = null;
		 x = 12.4;
//		 x = 'string1';
		 console.log(classof(x));




评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值