博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Python学习笔记第二十四周(JavaScript补充)
阅读量:5105 次
发布时间:2019-06-13

本文共 6038 字,大约阅读时间需要 20 分钟。

目录:

   一、JS补充

    1、函数类型

    2、string对象

    3、instanceof

    4、Array 数组对象

    5、Date对象

    6、RegExp 正则表达式

    7、Math对象

  二、BOM补充

    1、window对象

    2、histroy对象

    3、location对象

  三、DOM补充

  四、替换clear:both撑开页面的方法

  五、show hide toggle方法

内容:

  类型函数:

  1、typeof

  只能判断基本数据类型,对于引用数据类型,只能判断它为object 

var s=8;console.log(typeof(s));
var s2=new String('hello2');console.log(typeof(s2));  //没法判断它的具体类型

 

  2、instanceof

var s3= new String('hello')console.log(s3 instanceof(String));//判断s3是否为String实例化的对象

 

  3、String对象

  String有两种创建方式:

    1) var s=“hello”;

    2)var s=new String(‘hello’);

  String可以操作的方法:

    1)length

    2)字体:

      s.italics()  斜体

      s.bold()     加粗

      s.anchor()  链接,正确写法:s.anchor(‘alex’)

    3)大小写转换:

      s.toUpperCase();都变大写

      s.toLowerCase();都变小写

    4)获取指定字符:

      s.charAt(1) 根据索引取值

    5)查询字符串:

      match();

      search();

      s.search('h'); 返回第一个匹配结果的索引值  

      s.match('l');   返回所有的匹配结果的数组

    6)replace

      s.replace(‘e’,'E')

    7)  split

      s.split('e')

    8)   concat   拼接

      s.concat('world')  

 

    9) substr   sbustring slice 截取字符串

      s.substr(1,2)  

      s.slice(1,-2)  slice可以倒着取

    10)Indexof

      s.IndexOf(‘h’)

      s.lastIndexOf('h')

 

  4、Array 数组对象

    var arr=[]; 

    var arr=[1,2,3,4,5];

    var arr=new Array(1,2,3,4,5)

    var arr2 = new   Array(3) 表示占了3个位置,三个值都是undefined,如果采用初始化对象的方式创建数组

                如果里面只有一个值还是数字,那么数字表示长度而不是内容

    Array的方法:

    1、join方法

      var ret = ['hello', 'world'].join('+++++')

    2、shift  unshift   pop  push方法(栈方法)

      补充:

        栈操作:

          先进后出,有压栈和弹栈两个操作

        队列操作:

          先进先出

       var arr1=[1,4,6];

       arr1.push(13);

       console.log(arr1) 发现13放在最后面

       arr1.pop() 弹最后的数值

       arr1.shift(45);从前面插入

       arr1.unshift() 从前面移除

      3、sort和reverse方法

         arr1.reverse();反转

       arr1.sort(); 排序

             

    4、Date对象

      创建方式:

      var date_obj=new Date()

      console.log(date_obj.toLocaleString())

      var date_obj = new Date('017/07/20 16:30')

      console.log(date_obj.toLocaleString())

      date_obj.getFullYear();

      date_obj.getZMonth();

      date_obj.getDate();

      date_obj.getDay();

      date_obj.getHours();

      date_obj.getSeconds();

      date_obj.getMinutes();

      date_obj.getHourMinuteSecond();

      date_obj.getMilliseconds();

     

  5、RegExp 正则表达式

    var re_obj=new RegExp("\d+","g");

    console.log(re_obj.test('asdf2345dk'))

    
Title
View Code

 

  

  6、Math对象

    console.log(Math.random()); 随机小数

    console.log(Math.round(2.8)); 取四舍五入值

    console.log(100*Math.pow(2,3));2的3次方

  

 

 二、BOM对象

  BOM浏览器对象模型,可以对浏览器窗口进行访问和操作,使用BOM,开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作

  使JavaScript有能力与浏览器对话

  1、window对象

    所有浏览器都支持window对象

    概念上将一个html文档对应一个window对象

    功能上讲控制浏览器窗口的

    使用上讲,window对象不需要创建对象,直接使用即可

    例如:window.alert()   是window对象,前面的值可以不写

    window对象方法:

    1、alert()显示带有一段消息和一个确认按钮的警告框

    2、confirm()显示带有一段消息以及确认按钮和取消按钮的对话框

    3、prompt()  显示可提示用户输入的对话框

    4、open() 打开一个新的浏览器窗口或查找一个已命名的窗口

    5、close()关闭浏览器窗口

    6、setInterval()按照指定周期(以毫秒计)

    7、clearInterval()取消由setInterval()设置的timeout

    8、setTimeout()在指定的毫秒数后调用函数或计算表达式

    9、clearTimeout()取消setTimeout()方法设置的timeout

    10、scrollTo()把内容滚动到指定的坐标

 

     例子: 

var ret=confirm('是否保存');alert(ret)if(ret == true{}{    }else{}//可以根据返回值来进行后面的操作
confirm方法
var ret=prompt('hello')alert(ret)返回值是用户输入的内容如果什么都不输入,就返回空,如果选择取消,就返回null
prompt操作

 

  2、history对象

 能够知道用户上一次从哪来,下一次往哪去,也就是浏览器的前进和回退按钮

 

    
Title lesson2
histroy1
    
Title
histroy2

 

 

  3、location对象

  方法:

    1、locatin.reload()   重新加载界面

  

 三、DOM对象

  DOM是W3C的标准,定义了访问HTML和XML文档的标准

  推荐:

    parentElement       父节点标签元素

    children        所有子标签

    firstElementChild    第一个子标签元素

    lastElementchild   最后一个子标签元素

    nextElementSibing   下一个兄弟标签元素

    previousElementSibing  上一个兄弟标签元素             

 

 

  DOM Event(事件)

  1、onclick

  2、ondblclick  当用户双击某对象时调用的事件句柄

  3、onfoucs     元素获取焦点 ,input点击输入框时获取焦点

  例子:   

     function func1(){      alert(111)    }  
View Code

  4、onblur     失去焦点时触发的事件

  5、onchange      一旦内容改变就触发

  备注:input标签的DOM对象,判断非空字符是通过Document.getElementzByid('xx').value.trim().length==0,其中trim()表示去掉空格

  6、onkeydown  某个键盘按键被按下触发

  7、keyCode   对于keypress事件,虚拟键盘码不同,对于不同的键盘码可以区别不同的按键

  8、onkeyup    当按键松开时触发

  9、onmousedown  鼠标按键按下

  10、onmousemove 鼠标被移动

  11、onmouseout   鼠标从某元素移开

  12、onmouseover   鼠标移到某元素之上

    13、onsubmit   只能用于form表单

  14、onselect    文本被选中

  例子:判断并阻止表单提交内容

  

    
Title
View Code

 

  标签的增删改查:

  1、增加:

    document.createElement('p') 创建一个p标签

    例子:

      var ele = document.getElementById('div1');

      var son=document.createElement('p')

      son.innerHTML='<em>hello world</em>'

      ele.appendChild(son);

   2、移除:

    removeChild();

    例子:

      var ele = document.getElementById('div1');

      var last_son = ele.lastElementChild;

      ele.removeChild(last_son);

  3、修改:

    例子:

      var ele = documnt.getElementById('div1');

      ele.style.fontSize ="30px";

    

    关于class操作:

    elementNode.className

      var ele = documnt.getElementById('div1');

      ele.className 查找这个标签对应的class的名称

    elementNode.classList.add

    elementNode.classList.remove

    

    改变HTML属性:  

     getAttribute()获取属性

    setAttribute()设置属性

    例子:

    var ele=document.getElementById('add')

    ele.οnclick=function(){

      var div1=document.getElementByClassName('div1')[0]

      var img=document.createElement('img')

      img.src='a.jpg'    这个方式是dynmic html语法,动态html

      这个也可以写成 img.setAttribute('src','a.jpg')  a.jpg是一张图片

      div1.appendChild(img);

}

   

  四、替换clear:both方法:

  使用class名:after{

    content:ooo;必须的

    display:block;

    clear:both;

    visibility:hidden;

    height:0;

}    

  五、jQuery动画效果

  $('#id1').show(1000) 会显示display:none的标签,1000表示1s后执行该动作

  $('#id1').hide() 会隐藏display:block的标签

  $('#id1').toggle() 会判断标签属性然后做相反的动作 

      $('#id1').fadein(1000) 会将display:none的标签显示

  $('#id1').fadeout(1000) 会将display:block的标签隐藏

  $('#id1').fadetoggle(1000)  判断并进行相反的操作

      $('#id1').fadeto(1000,0.3) 会调整透明度

      

转载于:https://www.cnblogs.com/xiaopi-python/p/7246561.html

你可能感兴趣的文章
leetcode 459. 重复的子字符串(Repeated Substring Pattern)
查看>>
CABasicAnimation animationWithKeyPath Types
查看>>
JavaScript--eval
查看>>
iOS6与iOS7屏幕适配技巧
查看>>
获取视图尺寸大小方法
查看>>
mysql 历史记录查询
查看>>
sqoop连接Oracle数据库错误异常
查看>>
伪类与超链接
查看>>
HTML语言的一些元素(二)
查看>>
一段js代码的分析
查看>>
centos 7 redis-4.0.11 主从
查看>>
Java的基本数据类型与转换
查看>>
博弈论 从懵逼到入门 详解
查看>>
永远的动漫,梦想在,就有远方
查看>>
springboot No Identifier specified for entity的解决办法
查看>>
慵懒中长大的人,只会挨生活留下的耳光
查看>>
"远程桌面连接--“发生身份验证错误。要求的函数不受支持
查看>>
【BZOJ1565】 植物大战僵尸
查看>>
视频:"我是设计师"高清完整版Plus拍摄花絮
查看>>
VALSE2019总结(4)-主题报告
查看>>