JavaWeb笔记-03-js对象

1.js的String对象

  •    创建String对象

        var str = "字符串内容";
    
    属性:length  表示字符串长度
    
    方法:

   (1)、与html相关的方法        

        .bold(); 加粗字符串

        .fontcolor(color);  设置字符串颜色
                       传参为颜色

        .fontsize();设置字符串大小

        .link(url);  将字符串显示为超链接
                       传参为链接地址

        .sub();将字符串显示为下标
        .sup();将字符串显示为上标

    (2)、与Java相似的方法

       .cancat(str);连接字符串
                     传参为需要连接的字符串
        
        .charAt(num);返回指定位置的字符串
                    传参为表示字符串位置的数字
        
        .indexOf(str);检索字符串,返回字符串位置
                    传参为需要检索的字符串
        
        .split(); 分割字符串  返回一个数组。
                     传参为需要分割出去的字符串

        .replace("str1","str2"); 替换字符串。
                     传参:被替换的字符串,字符串
        
        .substr(start,length); 从start位置开始截取length长度的字符串

        .substring(start,end); 从start位置开始到end位置结束 ,但不包含end位置字符
                    [start,end);

   2.js的Array对象

    属性:length.
    方法:
        .cancat(arr);数组连接
        .join("--"); 使用指定字符间隔数组元素

 

            eg: var arr = new Array(3);
                arr[0] = "a";
                arr[1] = "b";
                arr[2] = "b";
                document.write(arr.arr.join("--")); 

           输出结果为"a--b--c" 
        
        .push(); 向数组末尾添加添加元素。返回数组新的长度。
                      也可添加数组,此时整个数组作为整体,长度为 1
        
        .pop(); 删除最后一个元素,返回被删除的元素。

        .reverse(); 颠倒数组中元素的顺序(逆序排列数组)
                                

  3.js的Date对象

   Java中获取当前时间

Date date = new Date();
        //使用方法格式化
        simpleDateFormat(); / toLocalString();


    Js中获取当前时间

var date = new Date();
        //使用方法格式化
        toLocalString();  .getFullYear(); 返回四位数年份


    
    .getMonth();  返回当前月。返回 0~11月,需要提前+1

var date1 = date.getMonth()+1;
            document.write(date1);

          
     .getDay(); 返回星期 0~6 ,星期日用0表示,其余数字相互对应。 
     .getDate(); 返回日。1~31.

    .getHours(); 返回当前小时

    .getMinutes(); 返回当前分钟

    .getSeconds(); 返回当前秒

    .getTime(); 返回当前毫秒 从1970年1月1日开始至今
        应用场景:
            使用毫秒数处理缓存效果(防止缓存)


4.Math对象    ---   Math内都是静态对象(可直接通过 Math.方法调用)


     属性:PI 返回 3.14159

    .var x = 10.4
    .ceil(x);  向上舍入  返回11

    .floor(x); 向下舍入  返回10

    .round(x);  四舍五入  返回10

    .random(); 返回随机数(伪随机数 0.0 ~ 1.0 之间)。

    .max(a,b); 返回a,b中较大的
    .min(a,b); 返回a,b中较小的

    .pow(x,y); 返回x的y次方的值

5. js的全局函数(不属于任何对象的函数,可直接通过名称使用)


   .eval(); 执行js代码(如果字符串时js代码)
        eg: var str = "alert('1234')"
            eval(str);
    
    .encodeURL(); 对字符进行编码
    .decodeURL(); 对字符进行解码

    
    .encodeURLComponent();对字符进行编码
    .decodeURLComponent();对字符进行编码

    ---有无Component的区别:不编码的字符个数不同

    .isNaN(); 判断是否为数字,返回true/false。
        ****注:是数字返回false
                    不是数字返回true

            
    .parseInt(); 将字符串解析为整数
    .parseFloat(); 将字符串解析为浮点数

6.js的函数的重载


    重载:方法名相同,参数不同。
    
    1)js中不存在重载,就近原则调用方法
    2)但可以通过其他方式模拟重载

    
    eg:
    function add(a,b){
        return a+b;
    }
    function add(a,b,c){
        return a+b+c;
    }
    function add(a,b,c,d){
        return a+b+c+d;
    }

    alert(add(1,2));       结果:NaN
    alert(add(1,2,3));    结果:NaN
    alert(add(1,2,3,4));    结果:10

    可用arguments模拟重载。
    利用arguments数组接收参数的性质。
    判断arguments.length == 多少。用if语句使不同参数对应不同方法。

    

  7.js的BOM对象   ---- broswer object model浏览器对象模型  

    对象:
    1)window(重点)
        窗口对象 , 也是顶层对象(所有的bom对象都是在Window里面操作的)

        方法:
            .alert();     弹出窗口

            .confirm();   确认框,窗口内含有确认和取消按钮。

   var flag = window.confirm("提示内容");
                if(flag == true){
                    alert("删除成功");
                }else{
                    alert("删除失败");    
                }

            .prompt("text","defaulttext"); 输入对话框

            .open("url","name","窗口特征"); 打开一个新的窗口
                可传参,name一般为空,特征为宽度高度

            .close; 关闭窗口

        做定时器的方法(重要)
            .setInterval("js代码",毫秒数);   //每(毫秒数)执行一次"js代码"
            .setTimeout("js代码",毫秒数);    //在(毫秒数)后只执行一次"js代码"
            .clearInterval(id);  //清除由setInterval设置的定时器 ,  传参为setInterval()返回的id值
            .clearTimeout(id);    //清除由setTimeout设置的定时器     传参为setTimeout()返回的id值

  //每3秒弹出123
                window.setInterval("alert('123')",3000);


    2)navigator 获取客户机信息(浏览器信息)
        方法
        .appName(); 返回浏览器名称
        
    3)screen
        .width(); 返回屏幕宽度
        .height(); 返回屏幕高度

    4)location 请求url地址
        href属性    

    location.href   获取请求的url地址        
        location.href = "地址"; 设置url地址

        <input type = "botton" value="跳转" onclick = "href();"/>   //定义按钮事件
        function href(){
            
            location.href = "跳转地址";    //跳转到设置的地址
            document.write("location.href");  //输出当前地址
        }


    5)history: 请求url的历史纪录
        history.back();  //到访问的上一个页面
        history.forward;  //到访问的下一个页面
        history.go(1);    //到访问的下一个页面 

       <input type = "botton" value="back" onclick = "back()"/>   //定义按钮事件
        function back(){
            history.back();  //到访问的上一个页面
        }

        <input type = "botton" value="next" onclick = "next()"/>  //定义按钮事件
        function next(){
            history.forward;  //到访问的下一个页面
        }

8.js的dom对象 --- document object model  文档对象模型


    文档:超文本标记文档 html 、 xml
    对象:提供属性和方法的对象
    模型:使用属性和方法来操作超文本标记文档

    操作超文本文档步骤:  (先封装,后解析)
        1)先封装将要操作的超文本标记文档所有内容(标签、属性、文本内容)
        2)后解析标记型文档
            解析过程:
            根据html的层级结构,在内存中分配一个树形结构存储,把每部分封装
            五种对象
            document对象: 整个html文档
            element对象: 标签对象
            属性对象
            文本对象
            Node节点对象 : 是上面所有对象的父对象。

   DOM基本功能: 
    ① 查询某个元素 
    ② 查询某个元素的祖先、兄弟以及后代元素 
    ③ 获取、修改元素的属性 
    ④ 获取、修改元素的内容 
    ⑤ 创建、插入和删除元素     

    

DHTML:是很多技术的简称
    包括:
    HTML:封装数据
    CSS:使用属性和属性值设置样式
    DOM:操作html文档(标记型文档)
    Javascript(指js的语法语句):

  

9、document对象  

    表示整个文档
    方法
        .wirte(); 
            1)向页面输出变量(值)
            2)向页面输出html代码

        
        .getElementById();  
            通过id得到标签对象,可以通过标签对象来设置标签属性

            

      //修改id为"nameid"的<input>标签的value值
      <input type="text" id="nameid" name="name1" value="default"/>
      var input1 = document.getElementById("nameid");
      input1.value= "default111"

        .getElementsByName();
            通过标签的name的值来得到标签
            返回值为集合(数组)

            //存在多个<input>标签name值相同时,
            可以此方法得到所有"name"值相同的标签
        
        .getElementsTagName();通过标签来获得标签数组

10、案例:window弹窗案例

    实现过程
    1、创建首页面
        两个输入项
        一个事件按钮
            按钮事件:弹出一个窗口  用.open();实现

 <body>
	编号:<input type="text" id="numid"/></br>
	姓名:<input type="text" id="nameid"/></br>
	<input type="button" value="选择" onclick="open1()"/>
	
	<script type="text/javascript">
   		//实现弹出窗口的方法
		function open1(){
			window.open("User.html","","width=300,height=180");
		}
	</script>

 </body>


    2、创建弹出页面
        一个表格
            每行有一个选择按钮、编号、姓名
                选择按钮事件:
                    把当前编号、姓名赋值给首页面的两个输入项中

 <body>
	<table border="1" width="250" height="120">
	<tr>
		<td>操作</td>
		<td>编号</td>
		<td>姓名</td>
	</tr>
	<tr>
		<td><input type="button" value="选择" onclick="s1('001','阿大')"/></td>
		<td>001</td>
		<td>阿大</td>
	</tr>
	<tr>
		<td><input type="button" value="选择" onclick="s1('002','阿二')"/></td>
		<td>002</td>
		<td>阿二</td>
	</tr>
	<tr>
		<td><input type="button" value="选择" onclick="s1('003','阿三')"/></td>
		<td>003</td>
		<td>阿三</td>
	</tr>
	</table>

	<script type="text/javascript">
		function s1(num1,name1){
			//把num1和name1赋值到window页面   跨页面操作
			//跨页面操作方法  opener():得到创建这个窗口的页面(窗口) --得到window页面
			var pwin = window.opener;    //得到window页
			pwin.document.getElementById("numid").value = num1;
			pwin.document.getElementById("nameid").value = name1;

			//关闭窗口
			window.close();
		}
	</script>
 </body>

        .opener(); 得到创建这个窗口的页面(窗口)

    问题:  js不能访问本地文件。
        在chrome浏览器中不能访问本地文件,将不能从本地文件中传值

    解决:  实际开放中,将不会有这样问题,因为实际开发中不会访问本地文件。。

    案例实现中遇到的问题:
        1)<input/>标签末尾有"/" !
        2).getElementById(); 方法是通过id获取元素的,
             所以在<input/>中必须含有id
        3) onclick事件中可以是函数名称,然后再下面实现函数

猜你喜欢

转载自blog.csdn.net/qq_41307491/article/details/81169937
今日推荐