这里接着前面一篇继续!
Javascript中的所有所有事物都是对象:字符串、数值、数组、函数·····
每个对象都有自己的属性和方法,
JS能够自定义对象: 在第七点是相关面向对象的知识点。
<script>
//直接创建对象
var people={
name: "ning",
age: 10,
};
//通过函数创建对象
function people(name.age){
this.name=name;
this.age=age;
}
var man=new people("ning",10);
</script>
四、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(); //获取当前时间
方法名
描述
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()
取绝对值
五、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
网页尺寸
举例:
var anode=document.getElementById("id1");
var text=anode.getAttribute("id"); //获取当前元素的属性
alert(text);
anode.setAttribute("id","id2");//设置id属性为id2
六、全局DOM对象
6.1 window对象
window对象是BOM的核心,window对象指的是当前的浏览器窗口。全局变量、函数、变量都会自动成为window对象的成员。HTML DOM 的document也是window对象的属性之一。
方法名
描述
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对象包含有关用户屏幕的信息。
属性
描述
screen.availWidth
可用的屏幕的宽度
screen.availHeight
可用屏幕的高度
screen.Height
屏幕高度
screen.Width
屏幕宽度
七、面向对象
//面向对象的操作
// 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中比较难理解的部分就是面向对象,这里方法有很多种,要完全的掌握还是要自己多试试,可以把自己不理解或者似懂非懂的,通过实践就能够得出结论了!说到底就是要多动手!
本文同步分享在 博客“战 胜”(CSDN)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。