Javascript 基础知识学习(四)

这里接着前面一篇继续!
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中比较难理解的部分就是面向对象,这里方法有很多种,要完全的掌握还是要自己多试试,可以把自己不理解或者似懂非懂的,通过实践就能够得出结论了!说到底就是要多动手!

发布了30 篇原创文章 · 获赞 37 · 访问量 5354

猜你喜欢

转载自blog.csdn.net/qq_45021180/article/details/104213217