javaweb之前端JavaScript学习笔记（二）对象操作

最新推荐文章于 2021-12-29 09:53:14 发布

mocas_wang

最新推荐文章于 2021-12-29 09:53:14 发布

阅读量236

点赞数

分类专栏： javaWeb

本文链接：https://blog.csdn.net/mocas_wang/article/details/105711754

版权

javaWeb 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

js中的常见对象

string对象

1.创建String对象：var str = “abc”;
2.获取其长度(属性)：str.length
3.两类常用方法：
（1）与html相关的方法
bold();//加粗字符串
fontcolor(“red”);//字体颜色
fontsize(1-7);//字体大小
link(“1.html”);//将字符串设置成超链接
sub();sup();//下标上标
（2）与java相似的方法
str1.concat(str2);//连接字符串
charAt(i);//返回指定位置的字符
indexOf(“a”);//返回a所在的位置
split(",");//根据,切分字符串，并返回一个字符数组
replace(“a”,“A”);//将a替换成A
substr(5,3);//从第五位开始，向后截取三个字符
substring(3,5);//从第三位到第五位，不包含第五位

Array对象

1.创建数组：参考上文（三种方法）
2.获取其长度(属性)：arr.length
3.常用方法：
concat();//连接数组，返回一个新数组
join("-");//以-分割数组
push(“a”);//向数组末尾添加一个或多个元素，并返回新的长度（添加的是一个数组时，会被当做一个整体元素添加，长度+1）
pop();//删除最后一个元素，并返回删除的元素
reverse();//颠倒数组中元素的顺序

Date对象

1.获取当前时间：var date = new Date();//Fri Apr 17 10:40:46 UTC+0800 2016
2.转换为习惯的格式：date.toLocaleString(); //注意toLocaleString对应的是具体时间精确到秒
3.常用方法：
getFullYear();//得到对象的年份
getMonth()+1;//得到当前的月份(0-11)
getDay();//得到当前的星期(0-6)从星期日开始
getDate();//得到当前的天
getHours();//得到当前的小时
getminutes();//得到当前的分钟
getSeconds();//得到当前的秒
getTime();//返回1970 1 1至今的毫秒数

Math对象

1.都是静态方法，直接使用Math调用
2.常用方法：
ceil(x);//向上舍入
floor(x);//向下舍入
round(x);//四舍五入
random();//得到一个0-1的伪随机数（伪随机数是用确定性的算法计算出来自[0,1]均匀分布的随机数序列）
pow(x,y);//x的y次方

全局函数

js的全局函数：不属于任何一个对象，通过方法名称直接使用
常用方法：
eval();//执行字符串中的js代码
encodeURI();/decodeURI();//对字符进行编码/解码
encodeURIComponent();/decodeURIComponent();//与上面两个方法相同，编码的字符数量不同
isNaN();//判断当前字符串是否为数字
parseInt();//类型转换

js中的bom和dom对象

bom的对象

bom：broswer object model（浏览器对象模型）
常用对象（使用方法：对象名.属性/方法）：
navigator:获取客户机（浏览器）的信息
screen:获取屏幕的信息
location:获取请求url的信息（属性：href->获取/设置请求的url地址）

<input type="button" value="tiaozhuan" onclick="href1();" />//onclick:鼠标点击事件，""中为要执行的方法
funtion href1(){
		location.href = "跳转的地址";//设置url地址
	}

history:请求的url的记录（属性：back()-上一个，forward()-下一个,go(-1/1)）
window:是窗口对象，且是所有bom对象的顶层对象
window.alert();//页面弹出一个框，显示内容->简写alert();
window.confirm(“显示内容”);//确认提示框，返回boolean值
window.prompt(“显示提示内容”,“输入框默认值”);//输入的对话框（少用）
window.open(URL,name,features);//打开一个新的窗口（url：打开的地址，name：窗口名字，features：窗口特征（宽高等））
window.opener();//用open打开新窗口后，返回创建此新窗口的窗口（opener是属性）
window.close();//关闭窗口，浏览器兼容性差
window.setInterval(“js代码/方法”,毫秒数);//每隔…毫秒就执行一次js代码
window.setTimeout(“js代码/方法”,毫秒数);//在…毫秒之后执行js代码（一次）
clearInterval(id);/clearTimeout(id);//清除setInterval/setTimeout设置的定时器（定时器会返回id值）

dom的对象

dom:document object model（文档对象模型）
作用：可以通过使用dom里面提供的对象，使用这些对象的属性和方法，对标记型文档进行操作
dom解析html的原理：
根据html的层级结构，会在内存中分配一个树形结构

树形结构中封装的对象：
document->整个html文档
element->标签对象
属性对象
文本对象
Node节点对象（上诉对象的父对象，上诉对象没有想要的方法时使用）

DHTML

DHTML:动态的HTML，不是一门语言，而是多项技术综合的简称
包含的技术：
html：封装数据
css：使用属性和属性值设置样式
javascript：专门指的是js的语法语句

document对象

常用方法：
document.write();//向页面输出内容或html代码
document.getElementById(“标签的id的值”);//通过id得到其标签对象
document.getElementsByName(“标签的name的属性值”);//返回所有和name值相同的标签对象的数组集合
document.getElementsByTagName(“标签名称”);//返回所有和标签名相同的标签对象的数组集合

<select id="select2"multiple="multiple" style="width:100px;height:100px">
                <option> AASDA</option>
                <option>ASDAF123</option>
                <option>AAAbbbbb</option>
                <option>ccccasd</option>
</select>


 <script type="text/javascript">
var s1=document.getElementById("select1");
var s2=document.getElementById("select2");
var opt2=s2.getElementsByTagName("option");  //option是标签名
</script>

对树的基本操作（详见操作Node对象的小节）：
var li1 = document.creatElement(“标签”);//创建标签节点
var tex1 = document.creatTextNode(“测试”);//创建文本节点
li1.appendChild(tex1);//Node对象的方法，将tex1加到li1下面
ul1.appendChild(li1);//将li1添加到名为ul1的列表下面

element对象

element对象获取方法：通过document对象里面的方法获取
element对象中的常用方法：
getAttribute(“属性名”);//获取属性值
setAttribute(“属性名”,“属性值”);//设置属性的属性值
removeAttribute(“属性名”);//删除属性，不能删除
获取列表标签下的子标签：

<ul id="ulid1">
		<li>aaaa</li>
		<li>bbbb</li>
		<li>cccc</li>
</ul>
<spript type="text/javaspript">
		var ull1 = document.getElementById("uliid1");
		var lis = ull1.childNode;//返回element对象ull1下子类标签的数组（Node对象中的方法，兼容性差）
		var lis1 = ull1.getElementsByTagName("li");//唯一有效方法
</spript>

Node对象

常见属性（标签，属性，文本封装的对象（节点）都有这些属性）：
获取标签对象：var span1 = document.getElementById(“spanid”);//document
获取属性对象：var id1 = span1.getAttributeNode(“id”);//Node
获取文本对象：var text1 = span1.firstChild;//Node
nodeName
nodeType（标签：1，属性：2，文本：3）
nodeValue

<ul id="ulid">
		<li id="li1">qqq</li>
		<li id="li2">www</li>
		<li id="li3">eee</li>
</ul>

var ul1 = document.getElementById(“ulid”);
var li1 = document.getElementById(“li1”);
var li2 = document.getElementById(“li2”)

dom树

查询dom树的常用方法：

li1.parentNode;//获取li1的父节点ulid
ul1.firstChild;//获取ul1的第一个子节点li1
ul1.lastChild;//获取ul1的最后一个子节点li3
li2.nextSibling;//获取li2的下一个同辈节点li3
li2.previouSibling;//获取li2的上一个同辈节点li1

操作dom树的相关方法：

div1.appendChild(“ul1”);//将ul1节点添加到div1节点末尾
insertBefor(“要插入的节点”,“插入谁之前的节点”);//在某个节点之前插入一个节点（同辈）

var li4 = document.creatElement("标签");//创建标签节点  
var tex1 = document.creatTextNode("rrr");//创建文本节点  
li1.appendChild(tex1);//Node对象的方法，将tex1加到li1下面  
ul1.inserBefor("li4","li2");//将节点li4添加到li2节点之前（同辈）

ul1.removeChild(“li1”);//删除li1节点（通过父节点ul1）
replaceChild(newNode,oldNode);//替换节点
cloneNode(boolean);//复制节点true

innerHTML

innerHTML：不是dom的组成部分，但大多数浏览器支持的属性
作用：
1.获取文本内容
2.向标签里面设置内容

var span = document.getElementById("sid");  
span.innerHTML;//获取文本内容  
var div1 = document.getElementById("div1");  
div1.innerHTML = "<h1>AAAA</h1>";//向div里设置内容<h1>AAAA</h1>

mocas_wang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaweb之前端JavaScript学习笔记（二）对象操作

目录js中的常见对象string对象Array对象Date对象Math对象全局函数js中的bom和dom对象bom的对象dom的对象DHTMLdocument对象element对象Node对象dom树查询dom树的常用方法：操作dom树的相关方法：innerHTMLjs中的常见对象string对象1.创建String对...
复制链接

扫一扫

专栏目录