Javascript 基础知识学习(四)

这里接着前面一篇继续!
Javascript中的全部全部事物都是对象:字符串、数值、数组、函数·····
每一个对象都有本身的属性和方法,
JS可以自定义对象: 在第七点是相关面向对象的知识点。css

<script> //直接建立对象 var people={ 
 
   
		name: "ning",
		age: 10,
	}; //经过函数建立对象 function people(name.age){ 
 
   
		this.name=name;
		this.age=age;
	}
	var man=new people("ning",10);
</script>

4、JS内置对象

4.1 String字符串对象

方法名 描述
charAt(index) 返回指定位置的字符,从0开始
charCodeAt(index) 返回指定位置的字符串ASCII编码
String.fromCharCode(value) 返回指ASCII码对应的字符串
indexof(searchStr),indexof(searchStr,fromIndex) 返回某个指定的字符串值在字符串中首次出现的位置
split(delimeter),split(delimeter,Howmany) 用于把一个字符串分割成字符串数组
substring(start),substring(start,stop) 提取两个下标之间的字符
toLowerCase() 把字符串转换成小写
toUpperCase() 把字符串转换成大写
trim() 返回去除字符串两端的空格后的字符串

4.2 Array数组对象

方法名 描述
concat(array1,array2···) 将两个或者多个字符串合并成一个
indexOf(value) 返回value在字符串中第一次出现的索引号
join(),join(separator) 将数组所有元素组成一个字符串,缺省用逗号隔开
lastIndexOf(value) 返回value在字符串中最后一次出现的索引号
pop() 从数组中删除最后一个元素
push(value1,value2···) 在数组尾部追加一个或多个元素
reverse() 反转数组元素的顺序
shift() 把数组第一个元素删除并返回第一个元素值
slice(startIndex),slice(startIndex,endIndex) 从数组中返回一个起点到终点的子数组,返回不含endIndex
splice(index,count,value1,value2···) 从数组中删除从index开始的count个元素,并用新元素来代替
sort() 对数组元素进行排序
toString() 将数组元素转换成字符串,用逗号隔开
unshift(value1,value2···) 向数组的开头添加一个或更多元素,并返回新的长度

4.3 Date日期对象

var date=new Date(); //获取当前时间html

方法名 描述
getFullYear() 获取年份
getTime() 获取毫秒
setFullYear() 设置具体日期
getDay() 获取星期
//首先必定要建立对象
var today=new date();  //获取当前时间
var h=today.getHours(); //获取小时
var m=today.getMinutes();//获取分钟
var s=today.getseconds();//获取秒

4.4 Math工具函数

方法 描述
Math.PI 圆周率
Math.random() 返回一个[0,1)的数
Math.floot(x) 向下取整
Math.sin(x),cos(x),tan(x) 三角函数
Math.asin(x),acos(x),atan(x) 反三角函数
Math.atan2(y,x) 返回对应的角度(-PI,PI)
Math.sqrt(x) 算术平方根
Math.round() 四舍五入
Math.abs() 取绝对值

5、JS-DOM对象

5.1 DOM对象的属性

属性 描述
classNama 元素的class属性
id 元素的id属性
innerHTML 元素中的HTML标记和内容
style 表示元素样式属性的对象
tagName 元素的HTML标签,大写字母表示
checked 单选或复选按钮是否被选中
disabled 是否禁用Form控件
href 连接a的目标URL
src 图像(img)的URL
value Rorm控件中的文本

5.2 DOM对象的方法

方法名 描述
getElementsByName() 获取name
getElementsByTagName() 获取元素
getAttribute() 获取元素属性
setAttribute() 设置元素属性
childNodes() 访问子节点
parentNode() 访问父节点
createElement() 建立元素节点
createTextNode() 建立文本节点
insertBefore() 插入节点
removeChild() 删除节点
offsetHeight() 网页尺寸
scrollHeight 网页尺寸

举例:node

var anode=document.getElementById("id1");
  var text=anode.getAttribute("id"); //获取当前元素的属性
  alert(text);
  anode.setAttribute("id","id2");//设置id属性为id2

6、全局DOM对象

6.1 window对象

window对象是BOM的核心,window对象指的是当前的浏览器窗口。全局变量、函数、变量都会自动成为window对象的成员。HTML DOM 的document也是window对象的属性之一。web

方法名 描述
alert,confirm,prompt 弹出框
moveBy(dx,dy),moveTo(x,y) 将窗口移动到指定的位置,dx/dy是偏移量
resizeBy(dw,dh),risizeTo(x,y) 改变浏览器窗口
scrollBy(dx,dy),scroolTo(x,y) 将页面滚动到特定点
alert(window.innerHeight,window.innerWidth); //浏览器窗口的内部高度和宽度
window.open("noindex.html","打开页面的名字","height=100px,width=100px,top=100,left=100");//打开新的窗口
window.close();//关闭当前页面

6.2 计时器

方法 描述
setInterval() 间隔指定的毫秒数不停的调用指定的函数
clearInterval() 中止setInterval()方法执行的函数代码
setTimeout() 暂停指定毫秒数执行指定的代码函数
clearTimeout() 中止setTimeout()方法执行的函数代码
<p id="pid"></p> <script> var mytime = setInterval(function () { 
 
   
         showTime();
     },1000); //每隔1秒调用一次showTime函数 function showTime(){ 
 
   
         var pnode=document.getElementById("pid");
         var time=new Date();
         var t=time.toLocaleTimeString();
         pnode.innerHTML=t;
     }
     function stopTime(){ 
 
   
     clearInterval(myTime);//中止时间刷新
 	}
 </script>

在这里插入图片描述

6.3 History对象

window.history对象包含浏览器的历史(url)的集合。数组

方法 描述
history.back() 功能与浏览器点击后退按钮效果同样
histoty.forward() 功能与浏览器点击向前效果同样
history.go() 进入历史的某个页面
<a href="006.html">进入006</a> <button οnclick="goone()">按钮</button> <script> function goone(){ 
 
   
            history.go(1);
        }
     </script>
<button οnclick="go()">按钮6</button> <script> function go() { 
 
   
        history.back();
    }

6.4 Location对象

window.location对象用于获取当前页面的地址(URL),并把浏览器定向到新的页面。浏览器

对象的属性 描述
location.hostname 返回web主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回web主机端口
location.protocol 返回所使用的web协议(http://或https://)
location.href 返回当前页面的URL
location.assign() 方法加载新的文档
host 主机名和端口号

6.5 Screen对象

window.screen对象包含有关用户屏幕的信息。dom

属性 描述
screen.availWidth 可用的屏幕的宽度
screen.availHeight 可用屏幕的高度
screen.Height 屏幕高度
screen.Width 屏幕宽度

7、面向对象

//面向对象的操做 // 1.第一种 var people={ 
 
   
    name:"ning", age:10, say:function(){ 
 
   
        alert(this.name);
    }
};
alert(people.age);
people.say(); function person() { 
 
   
    this.name="ning";
    this.age=10; this.say=function () { 
 
   
        alert("如今22:29");
    }
}
var p=new person();
p.say();

//2. 第二种
/* function people(){ } people.prototype={ name:"ning", age: 10, say:function () { alert("我是第二种"); } } people.prototype.speak=function () { alert("说话"); } var p=new people(); p.say(); p.speak(); */

//3. 第三种 用function来模拟类继承
/* function people() { } people.prototype.say=function () { alert("我是父类方法"); } function Student() { } Student.prototype=new people(); //Student继承people var s=new Student(); //建立对象 s.say(); //可以调用父类的方法 var superSay=Student.prototype.say; Student.prototype.say=function () { superSay.call(this); alert("重写父类的say方法"); } s.say();//这里想要调用父类的Say方法,须要先用surperSay保存父类的say方法,而后在子类重写的方法中调用superSay.call(this)便可 */


// 4.面向的思惟:封装
/* //格式: (function () { //这里填入上面的代码进行封装,好比对people封装; window.XXX=XXX;//将这个XXX传给最高的window对象,这样就能够经过window访问封装的内容了 }()) //封装举例: (function () { function people() { } people.prototype.say=function () { alert("我是父类方法"); } window.people=people; }) */


//4. 第四种   这里没有封装,若是要封装,方法和上面同样;
/* function people() { var _this={}; _this.name="ning"; _this.age=10; return _this; } function Student() { var _this=people(); return _this; } var s=Student(); alert(s.age+s.name); //可以访问父类属性 */

在这里插入图片描述
在这里插入图片描述


JS的学习到这里就差很少了,我以为JS中比较难理解的部分就是面向对象,这里方法有不少种,要彻底的掌握仍是要本身多试试,能够把本身不理解或者似懂非懂的,经过实践就可以得出结论了!说到底就是要多动手!svg

本文同步分享在 博客“战 胜”(CSDN)。
若有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一块儿分享。函数

相关文章
相关标签/搜索