JavaScript学习二（js常用对象操作方法|window对象|Location对象|数组|字符串|）

最新推荐文章于 2022-08-12 15:42:36 发布
最新推荐文章于 2022-08-12 15:42:36 发布
阅读量533 收藏
点赞数
分类专栏： # 前端-javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baiyan3212/article/details/82882799
版权

WINDOW对象

 

Location对象

Screen对象

 

js对数组操作

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>数组函数</title>
</head>
<script>
    var a = [1, 2, 3, 4, 5]
    console.log(a)		//数组
    /**
     * join()
     */
    var strArr = a.join();
    console.log(strArr)	//1,2,3,4,5
    //join("")转换成不带逗号的字符串
    var strArr2 = a.join("");
    console.log(strArr2)	//12345
    //join("-")	以指定占位符拼接
    console.log(a.join("-"));	//1-2-3-4-5

    /**
     * 排序
     * reverse()倒序
     * sort()
     * sort(function())    按照指定规则排序
     */
    console.log(a.reverse());	// [5, 4, 3, 2, 1]

    //sort()	排序
    var b = [99, 2, 55, 6, 11]
    console.log(b.sort());	//sort会将数值转换成字符串后排序	比如55比6小
    //结果	[11, 2, 55, 6, 99]

    //sort(function())	按照指定规则排序
    var sortArr = b.sort(function (x, y) {
        return x - y
    })
    console.log(sortArr)	//[2, 6, 11, 55, 99]


    /**
     * concat 连接数组
     */
    var arr1 = [1, 2]
    var arr2 = [3, 4]
    console.log(arr1.concat(arr2, [5, 6]))	// [1, 2, 3, 4, 5, 6]

    /**
     * slice(start,end)    截取
     * 如果有负数就用负数加数组长度 来确定下标
     */
    var arr3 = [0, 1, 2, 3, 4, 5, 6]
    console.log(arr3.slice(0, 1))		//[0]
    console.log(arr3.slice(-5, 5))		//[2,3,4]

    /**
     * splice  删除/插入/替换
     * splice(index,count)    删除
     * splice(index,0,arg1,...arg2)        插入
     * splice(index,count,arg1,....arg2)    替换
     */
    var arr4 = ['a', 'b', 'c', 'd']
    var result = arr4.splice(0, 3)
    console.log(arr4)		//[d]
    arr4 = ['a', 'b', 'c', 'd']
    arr4.splice(2, 0, 'c', 'd')
    console.log(arr4)	//[a,b,c,d,c,d]
    arr4 = ['a', 'b', 'c', 'd']
    arr4.splice(2, 2, 'e', 'f')
    console.log(arr4)	//[a,b,e,f]


    /**
     * indexof()    检测指定值的位置
     */
    var arr5 = [2, 3, 5, 7, 4, 6, 7]
    console.log(arr5.indexOf(7));		//3
    console.log(arr5.indexOf(7, 4))		//6
</script>
<body>
</body>
</html>

js对字符串操作

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>字符串</title>
</head>
<body>

<script>
    /**
     * charAt(index)            取出指定下标字符
     */
    var str1 = "hello";
    console.log(str1.charAt(0));	//h
    console.log(str1[0]);			//h

    /**
     * indexOf()    lastIndexOf()    返回指定字符串在字符串中出现的位置
     */
    console.log(str1.indexOf("l"));		//2
    console.log(str1.lastIndexOf("l"));	//3
    console.log(str1.indexOf("a"));		//-1

    /**
     * slice(),substr(),substring()        字符串截取
     */
    console.log(str1.slice(0, 1));		//h
    console.log(str1.substr(2, 2));		//ll
    console.log(str1.substring(3, 4));	//l

    /**
     * 练习，输入字符串返回字符串对应的后缀    3种方法
     */
    var str2 = "1.txt";		//输入的字符串
    console.log(str2.substring(str2.lastIndexOf("."), str2.length));
    console.log(str2.slice(str2.lastIndexOf("."), str2.length));
    console.log(str2.slice(str2.lastIndexOf(".")));

    /**
     * split(分隔符)        分割转换成数组
     */
    var arrStr1 = str1.split("");
    console.log(arrStr1);				 //["h", "e", "l", "l", "o"]

    /**
     * replace("要替换的","替换后")
     */
    var str3 = "111,222";
    var newStr = str3.replace("1", "1,");
    console.log(newStr);				//1,11,222

</script>
</body>
</html>

js对DOM操作

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Dom元素方法</title>
    <style>
        .box {
            color: blue;
        }
    </style>
</head>
<body>
<div id="box" data-type="str">box</div>
<ul>
    <li>前端</li>
    <li>UI</li>
    <li>设计</li>
    <li>java</li>
    <li>c</li>
</ul>
</body>
<script>
    /**
     * document.getElementById("")    根据ID获取元素
     */
    var box = document.getElementById("box");
    console.log(box);					//<div id="box"></div>

    /**
     * document.getElementsByTagName    获取整个页面所有的指定元素
     */
    var li = document.getElementsByTagName("li");
    console.log(li);

    /**
     *
     * 设置元素样式
     * 元素.style.样式            样式必须要用驼峰
     *
     */
    box.style.color = "red";		//设置box中的字体颜色为红色
    box.style.fontSize = "40px";	//驼峰文字大小
    var list = document.getElementsByTagName("li");
    for (var i = 0; i < list.length; i++) {
        list[i].style.background = "blue";
    }

    /**
     * innerHTML    获取标签中的值
     * innerHTML=    指定标签中的值
     */
    var html = document.getElementById("box");
    console.log(html.innerHTML);
    html.innerHTML = 'new-box';

    /**
     * className()        设置类，如果标签已经有class 则覆盖
     */
    html.className = "box";

    /**
     * getAttribute("id") 获取指定属性
     * setAttribute("data-type")    设置属性
     * removeAttribute            删除属性
     *
     */
    console.log(html.getAttribute("id"));		//box
    console.log(html.getAttribute("class"));	//box
    console.log(html.getAttribute("data-type"));	//自定义属性	str
    html.setAttribute("dataColor", "red");		//datacolor="red"
    html.removeAttribute("dataColor");
</script>
</html>

 

 

 

 

 

 

 

踟蹰千年
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈javascript中遇到的字符串对象处理
10-21
这篇文章主要探讨了在JavaScript中如何处理字符串对象，包括对参数的处理以及字符串对象的属性和方法。 首先，我们来看一下如何在JavaScript中处理URL参数。在Web开发中，经常需要获取URL中的查询参数。在示例代码...
JavaScript—window对象使用示例
12-01
JavaScript中的`window`对象是浏览器环境中最核心的对象之一，它代表了浏览器的顶级窗口或整个浏览器视口。这个对象提供了很多与用户交互、页面导航、窗口控制和文档操作相关的属性和方法。以下是对`window`对象及其...
JavaScript（Array，String，window对象）入门
最新发布
cgj-horizons
08-12 397
在 JavaScript 中自定义对象特别简单，不用像java一样先创建一个类var 对象名称 = {属性名称1:属性值1,属性名称2:属性值2,函数名称:function (形参列表){},};
JavaScript常用数组操作方法
懒虫的博客
11-13 1万+
1、concat() concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，仅会返回被连接数组的一个副本。 2、join() join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的，默认使用’,'号分割，不改变原数组。 3、push() push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。末尾添加，返回的是长度，会改变原数组。 4、pop() pop() 方法用于删除并返回数组的最后一个元素。返回最后一个元素，会改变原数组。 5、s
JS中__proto__和prototype都是什么？原型链继承解读
qq_30675607的博客
10-28 1969
首先要知道，prototype是函数才有的属性，__proto__是每个对象都有的属性 随后，先谈一下 1.什么是prototype？ prototype对象是JS实现面向对象的一个重要机制。 在很早以前，js中是没有class这个概念的（现在js中的class是函数的语法糖） 每个函数就是一个对象（Function类型），函数对象都有一个子对象 prototype对象，在创建这个函数对象的时候，prototype会自动成为这个对象的成员。 prototype表示该函数的原型，也表示一个类的成员的集合，简称
JS数组常用的操作方法
热门推荐
简廉的博客
11-04 2万+
1. push() 将一个或多个元素添加到数组的末尾，并返回该数组的新长度。此方法修改原有数组。 var arr = ['a','b','c']; var ele = arr.push('d'); // ele结果为: 4; // arr数组被修改: ['a','b','c','d']; 2. pop()，从数组中删除最后一个元素，并返回该元素的值。如果数组为空，则返回undefined。此方法修改原有数组。 var arr = ['a','b','c','d']; var ele = arr.pop()
javascript之数组操作
weixin_30832405的博客
04-01 197
1、数组的创建 var arrayObj = new Array();　//创建一个数组 var arrayObj = new Array([size]);　//创建一个数组并指定长度，注意不是上限，是长度 var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]);　创建一个数组并赋值 要说明的是，虽然第...
js对象关系图 方便dom操作
12-11
String对象则提供了字符串操作的方法，如concat、slice、indexOf等；RegExp对象用于正则表达式匹配；还有全局对象Global，其中包含了window等浏览器相关的对象。 浏览器对象参考手册涵盖了Window对象，这是所有...
javascript对象的相关操作小结
11-22
我们知道浏览器对象模型（BOM）是javascript的组成之一，它提供了...2.对象[“方法名称字符串”](); window对象的常用方法 window对象的常用方法 名 称 说 明 prompt（） 显示可提示用户输入的对话框 alert（）
JavaScript封闭函数及常用内置对象示例
10-17
封闭函数是一种创建私有变量和方法的机制，而内置对象则是JavaScript提供的一系列预定义对象，它们提供了处理各种任务的便捷方法。 封闭函数，也称为闭包，是JavaScript中的一种特性，允许函数访问并操作其外部作用...
jQuery中DOM常见操作实例小结
10-16
主要介绍了jQuery中DOM常见操作,结合实例形式总结分析了jQuery针对dom属性操作、文档操作等常用方法与操作技巧,需要的朋友可以参考下
【JavaScript】window对象_frames数组对象
weixin_33782386的博客
03-08 211
window对象的frames属性是一个数组，它与window对象的parent、top等 对象属性，都是用于对HTML的帧标签(<frameset>或<iframe>)进行编程的 javascript对象。(利用parent.frames.来调用) framedemo.html:<html> <head&gt...
javascript学习笔记 Array/String/window对象的常用方法
qq_44829011的博客
09-08 311
regexp正则表达式 表达式： /查找的字符串/检索方式 、 字符串不需要加双引号 检索方式 如 i 不区分大小写 函数search 查找功能 返回所查找的正则表达式的数组位置 没有返回-1 两种使用方式 var str="lxzssg"; var i =str.search(/sg/i); //i=5 var j= str.search("sg"); //j=5 函数replace 替换功能 : 同样是两种使用方式 var str="lxzssg"; var str2=str.r
js、script、window.onload、数组、
Casablanca
12-02 312
script标签的属性 script标签的属性： 1：type //指定脚本类型 2：language //指定脚本语言，在script标签中这个属性不建议使用，可以用type取代它 3：src //规定外部脚本文件的url 4：charset //定义外部脚本文件
window.open传递(数组)参数
heartOfblack 离开了电脑，我不希望我还有病
08-15 8012
有时候想要通过window.open并把数据传递过去，但是由于参数过多，不适合在URL里面添加，为此我们可以把这些数据放到一个Array里面。 window对象有个对象属性叫opener 这个属性是将父窗口作为一个引用 我们可以通过这个引用来操作父窗口的数据； 比如 我们在父窗口，希望传递的数据为array[],那么在子窗口所在的页面 var parent_win
window操作frames框架数组
Byte_Dance的博客
01-19 3595
index主页面:frameset框架不能和body在一起使用html> lang="en"> charset="UTF-8"> 索引 rel="icon" href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516353689965&di=8dfc47790a10cc35e
Window CMD 脚本中模拟数组的实现方法
一个程序猿无聊时的随笔
03-07 6992
CMD脚本中只有变量的概念，没有数组的概念，为了实现类似数组的功能，需要进行变量嵌套使用，并使用for命令将输出转换为内部变量值。
JavaScript window 对象详解
明天也要努力的博客
06-07 2211
1. 概述 window对象 指当前的浏览器窗口，它也是当前页面的顶层对象，即最高一层的对象，所有其他对象都是它的下属。 一个变量如果未声明，那么默认就是顶层对象的属性。 // a是一个没有声明就直接赋值的变量，它自动成为顶层对象的属性。 a = 1; console.log(window.a) // 1 window 有自己的实体含义，其实不适合当作最高一层的顶层对象，这是一个语言的设计失误。 最早，设计这门语言的时候，原始设想是语言内置的对象越少越好，这样可以提高浏览器的性能。因此，语言设计者 Bre
第一讲_第5课__JavaScript_DOM对象模型编程.doc
06-11
首先，学习者了解到如何将网页文档中的元素映射到JavaScript中的内置对象，例如，window对象代表浏览器窗口，其提供了诸如alert(), confirm(), prompt()等交互式方法。alert()用于弹出一个带有确定按钮的消息框，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值