js的DOM对象

1、js的Array对象
           ** 创建数组(三种)
                          - var arr1 = [1,2,3];
                          - var arr2 = new Array(3); //长度是3
                          - var arr3 = new Array(1,2,3); //数组中的元素是1 2 3

- var arr = []; //创建一个空数组

** 属性:length:查看数组的长度

** 方法
                          - concat方法: 数组的连接
                            * var arr11 = [1,2,3];
                               var arr12 = [4,5,6];
                               document.write(arr11.concat(arr12));

- join():根据指定的字符分割数组
                             * var arr13 = new Array(3);
                                 arr13[0] = "a";
                                 arr13[1] = "b";
                                 arr13[2] = "c";

document.write(arr13);
                                 document.write("<br/>");
                                 document.write(arr13.join("-"));

- push():向数组末尾添加元素,返回数组的新的长度
                                 ** 如果添加的是一个数组,这个时候把数组当做一个整体字符串添加进去

* //push方法
                                     var arr14 = new Array(3);
                                          arr14[0] = "tom";
                                          arr14[1] = "lucy";
                                          arr14[2] = "jack";
                                     document.write("old array: "+arr14);

document.write("<br/>");
                                     document.write("old length:"+arr14.length);

document.write("<br/>");
                                     document.write("new length: "+arr14.push("zhangsan"));

document.write("<br/>");
                                     document.write("new array: "+arr14);

* var arr15 = ["aaa","bbb","ccc"];
                                       var arr16 = ["www","qqq"];

document.write("old array:"+arr15);
                                     document.write("<br/>");
                                     document.write("old length:"+arr15.length);

document.write("<br/>");
                                     document.write("new length:"+arr15.push(arr16));
                                     document.write("<br/>");
                                     document.write("new array: "+arr15);
                                       for(var i=0;i<arr15.length;i++) {
                                             alert(arr15[i]);
                                          }

- pop():表示 删除最后一个元素,返回删除的那个元素
                                     * var arr17 = ["zhangsan","lisi","wangwu","zhaoliu"];
                                        document.write("old array: "+arr17);
                                        document.write("<br/>");

document.write("return: "+arr17.pop());
                                        document.write("<br/>");
                                        document.write("new array: "+arr17);

- reverse():颠倒数组中的元素的顺序
                                        * var arr17 = ["zhangsan","lisi","wangwu","zhaoliu"];
                                        document.write("old array: "+arr17);
                                        document.write("<br/>");

document.write("return: "+arr17.pop());
                                        document.write("<br/>");
                                        document.write("new array: "+arr17);

//reverse方法
                                        document.write("<hr/>");
                                        var arr18 = ["zhangsan1","lisi1","zhaoliu1","niuqi1"];
                                        document.write("old array: "+arr18);
                                        document.write("<br/>");
                                        document.write("new array:"+arr18.reverse());

3、js的Date对象
                 ** 在java里面获取当前时间
                      Date date = new Date();
                      //格式化
                     //toLocaleString() //2015年4月17日 11:17:12

** js里面获取当前时间
                     var date = new Date();
                     //获取当前时间
                    var date = new Date();
                    document.write(date); // Fri Apr 17 10:47:46 UTC+0800 2015

//转换成习惯的格式
                    document.write("<hr/>");
                    document.write(date.toLocaleString());

** 获取当前的年方法
                      getFullYear():得到当前的年
                 **** document.write("year: "+date.getFullYear());

** 获取当前的月方法
                      getMonth():获取当前的月
                       *** 返回的是 0-11月,如果想要得到准确的值,加1
                             **** var date1 = date.getMonth()+1;
                                      document.write("month: "+date1);

** 获取当前的星期
                     getDay():星期,返回的是 (0 ~ 6)
                         ** 外国朋友,把星期日作为一周的第一天,星期日返回的是 0
                              而星期一到星期六 返回的是 1-6
                               ** document.write("week: "+date.getDay());

** 获取当前的日
                     getDate():得到当前的天 1-31
                     ** document.write("day: "+date.getDate());

** 获取当前的小时
                      getHours():获取小时
                      ** document.write("hour: "+date.getHours());

** 获取当前的分钟
                       getMinutes():分钟
                       ** document.write("minute: "+date.getMinutes());

** 获取当前的秒
                        getSeconds(): 秒
                        ** document.write("second: "+date.getSeconds());

** 获取毫秒数
                        getTime()
                         返回的是1970 1 1 至今的毫秒数

** 应用场景:
                         *** 使用毫秒数处理缓存的效果(不有缓存)
                             http://www.baidu.com?毫秒数

4、js的Math对象
               * 数学的运算
               ** 里面的都是静态方法,使用可以直接使用 Math.方法()

** ceil(x): 向上舍人

** floor(x):向下舍人

** round(x):四舍五入

** random():得到随机数(伪随机数)
                  - 得到0-9的随机数
                  Math.random()*10
                  Math.floor(Math.random()*10));

5、js的全局函数
               * 由于不属于任何一个对象,直接写名称使用

** eval() : 执行js代码(如果字符串是一个js代码,使用方法直接执行)
                             **** var str = "alert(‘1234‘);";
                             //alert(str);
                                eval(str);

** encodeURI() :对字符进行编码
                              - %E6%B5%8B%E8%AF%95%E4%B8%AD%E6%96%87aaa1234

decodeURI() :对字符进行解码

encodeURIComponent() 和 decodeURIComponent()

** isNaN():判断当前字符串是否是数字
                               -- var str2 = "aaaa";
                              alert(isNaN(str2));
                              *** 如果是数字,返回false
                              *** 如果不是数字,返回true

** parseInt():类型转换
                              ** var str3 = "123";
                              document.write(parseInt(str3)+1);

6、js的函数的重载
              ** 什么是重载?方法名相同,参数不同

** js的重载是否存在? 不存在
                             ** 调用最后一个方法
                             ** 把传递的参数保存到 arguments数组里面

** js里面是否存在重载?(面试题目)
                           (1)js里面不存在重载。
                           (2)但是可以通过其他方式模拟重载的效果 (通过aruguments数组来实现)

*** function add1() {
                                   //比如传递的是两个参数
                                    if(arguments.length == 2) {
                                                 return arguments[0]+arguments[1];

} else if (arguments.length == 3) {
                                                 return arguments[0]+arguments[1]+arguments[2];

} else if (arguments.length == 4) {

return arguments[0]+arguments[1]+arguments[2]+arguments[3];
                                    } else {
                                                 return 0;
                                   }
                               }

7、js的bom对象
          ** bom:broswer object model: 浏览器对象模型

** 有哪些对象?
          *** navigator: 获取客户机的信息(浏览器的信息)
                       - navigator.appName
                       - document.write(navigator.appName);

*** screen: 获取屏幕的信息
                      - document.write(screen.width);
                      document.write("<br/>");
                      document.write(screen.height);

*** location: 请求url地址
                      - href属性
                      **** 获取到请求的url地址
                      - document.write(location.href);

**** 设置url地址
                                   - 页面上安置一个按钮,按钮上绑定一个事件,当我点击这个按钮,页面可以跳转到另外一个页面
                                   - location.href = "hello.html";

**** <input type="button" value="tiaozhuan" onclick="href1();"/>
                                   - 鼠标点击事件 onclick="js的方法;"

*** history:请求的url的历史记录
                     - 创建三个页面
                               1、创建第一个页面 a.html 写一个超链接 到 b.html
                               2、创建b.html 超链接 到 c.html
                               3、创建c.html

- 到访问的上一个页面
                               history.back();
                               history.go(-1);

- 到访问的下一个页面
                               history.forward();
                               history.go(1);

**** window(****)
                   * 窗口对象
                   * 顶层对象(所用的bom对象都是在window里面操作的)

** 方法
                            - window.alert() : 页面弹出一个框,显示内容
                                              ** 简写alert()

- confirm(): 确认框
                                              - var flag = window.confirm("显示的内容");

- prompt(): 输入的对话框
                                              - window.prompt("please input : ","0");
                                              - window.prompt("在显示的内容","输入框里面的默认值");

- open() : 打开一个新的窗口
                                             ** open("打开的新窗口的地址url","","窗口特征,比如窗口宽度和高度")
                                             - 创建一个按钮,点击这个按钮,打开一个新的窗口
                                             - window.open("hello.html","","width=200,height=100");

- close(): 关闭窗口(浏览器兼容性比较差)
                                             - window.close();

- 做定时器
                                             ** setInterval("js代码",毫秒数) 1秒=1000毫秒
                                                            - 表示每三秒,执行一次alert方法
                                                            window.setInterval("alert(‘123‘);",3000);

** setTimeout("js代码",毫秒数)
                                                            - 表示在毫秒数之后执行,但是只会执行一次

- 表示四秒之后执行js代码,只会执行一次
                                                                 window.setTimeout("alert(‘abc‘);",4000);

** clearInterval(): 清除setInterval设置的定时器
                                                            var id1 = setInterval("alert(‘123‘);",3000);//通过setInterval会有一个返回值
                                                                  clearInterval(id1);

** clearTimeout() : 清除setTimeout设置的定时器
                                                            var id2 = setTimeout("alert(‘abc‘);",4000);
                                                                 clearTimeout(id2);

时间: 2024-09-30 20:55:12

js的DOM对象的相关文章

JS and DOM 对象列表

JavaScript 对象(9个) JS Array JS Boolean JS Date JS Math JS Number JS String JS RegExp JS Functions JS Events Browser 对象(5个) Window Navigator Screen History Location HTML DOM 对象(4个) DOM Document DOM Element DOM Attribute DOM Event HTML 对象(...) <a> <

jQuery对象与JS原生dom对象之间的转换

jQuery就是JS的一个扩展库,工具库,提供很多方便快捷的方法,所以将JS对象转换为jQuery对象后,能更方便地操作这个对象.但是jQuery对象也不是万能的,有一些JS对象有的能,jQuery对象并没有提供,所以需要转换回JS对象,才能进行操作.另外一种情况可能是,你使用某些第三方库,接口函数只能接受JS对象或者jQuery对象,那么你就需要在这两者之间进行转换. 1.将jQuery转换为dom对象的方法 [index] 或者.get(index): a.$(“#form”)[index]

JavaScript基础15——js的DOM对象

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js的DOM对象</title> 6 <script type="text/javascript"> 7 // DOM:Document Object Model 文档对象模型 8 /* 9 文档:超文本文档html.xml 10 对象:提供了属

关于JS读取DOM对象(标签)的自定义属性

DOM对象对于js来说,是个很基础的元素,我们写js一般来说,都一定会对它进行操作.我们可以很方便地给它加上自定义的属性,比如: var test = document.getElementById("test"); test.adang = "adang"; alert(test.adang); 我们会发现,已经给这个id为test的DOM元素添加了一个叫做adang的属性了,然后在js中,可以调用这个属性.我在写js的时候经常用到这种方法,可以很方便地对某个do

前端之JavaScript:JS之DOM对象三

js之DOM对象三 一.JS中for循环遍历测试 for循环遍历有两种 第一种:是有条件的那种,例如    for(var i = 0;i<ele.length;i++){} 第二种:for (var i in li ){} 现在我们来说一下测试一下第二种(数组和obj的) 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8">

js之DOM对象三

js之DOM对象三 一.JS中for循环遍历测试 for循环遍历有两种 第一种:是有条件的那种,例如    for(var i = 0;i<ele.length;i++){} 第二种:for (var i in li ){} 现在我们来说一下测试一下第二种(数组和obj的) 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8">

js之DOM对象一

js之DOM对象一 一.什么是HTML  DOM HTML  Document Object Model(文档对象模型) HTML DOM 定义了访问和操作HTML文档的标准方法 HTML DOM 把 HTML 文档呈现为带有元素.属性和文本的树结构(节点树) 二.DOM树 画dom树是为了展示文档中各个对象之间的关系,用于对象的导航. 三.DOM节点 1.节点类型 HTML 文档中的每个成分都是一个节点. DOM 是这样规定的:    整个文档是一个文档节点     每个 HTML 标签是一个

js获取dom对象style样式的值

js获取到的dom对象的style通常是没有值得,因为我们都写在外部文件中,从慕课网上见到讲师封装的一个方法,挺不错.特此记录下来. 1 function getStyle(obj,attr){ 2 if(obj.currentStyle){//兼容IE 3 return obj.currentStyle[attr]; 4 }else{ 5 return getComputedStyle(obj,false)[attr]; 6 } 7 }

js操作DOM对象及怎么获取浏览器宽高

DOM独立于具体的编程语言,通常通过JavaScript访问DOM,不过并不严格要求这样.可以使用任何脚本语言来访问DOM,这要归功于其一致的API.getElementById(id) (document) 获取有指定惟一ID属性值文档中的元素getElementsByTagName_r(name) 返回当前元素中有指定标记名的子元素的数组hasChildNodes() 返回一个布尔值,指示元素是否有子元素getAttribute(name) 返回元素的属性值,属性由name指定有了W3C D