目录：

　　一、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'))

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <script>

        //方法一

        var re_obj = new RegExp('\d+','g')//定义规则,后面的g表示全局通用，如果是i表示不区分大小写，可以写成gi

        console.log(re_obj.test('abd345adf234dg'))//test方法表示测试，匹配成功返回true

        //方法二

        var reg2 =  /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/g;

        console.log(reg2.test('ste11345'));

        //匹配的内容：

        var s='helee2234o2351'

        console.log(s.match(/\d+/g))//取出所有匹配的内容放到数组中去

        console.log(s.search(/\d+/g))//匹配第一个结果的索引值，只能取一个

        console.log(s.split(/\d+/g))//取出数据分割值

        console.log(s.replace(/\d+/g,"*"))//替换匹配出来的数字

    </script>

</body>

</html>

　　

　　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对象

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <input type="button" value="前进" onclick="func1();"/>

    <a href="histroy2.html">lesson2</a>

    <script>

        function func1() {

            history.forward();

        }

    </script>

</body>

</html>

histroy1

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <input type="button" value="后退" onclick="func2();"/>

    <a href="histrory1.html"></a>

    <script>

        //history内部有三种方法：forward    back    go

        function func2() {

            history.back();

        }

    </script>

</body>

</html>

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点击输入框时获取焦点

　　例子：　　　

<input type='text'/ onfouce="func1();"> 

　　　　function func1(){

　　　　　　alert(111)

　　　　}　　

　　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 　　 文本被选中

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

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <form onsubmit="return check();">

        <input type="text" name="username"/>

        <input type="submit" value="submit"/>

    </form>

    <script>

        function check() {

            alert('123');

            return false;

        }

    </script>

</body>

</html>

　　标签的增删改查:

　　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.onclick=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) 会调整透明度

Python学习笔记第二十四周（JavaScript补充）的更多相关文章

  1. Python学习笔记第二十六周（Django补充）

    一.基于jQuery的ajax实现(最底层方法:$.jax()) $.ajax( url: type:''POST“ ) $.get(url,[data],[callback],[type])  #c ...

  2. Python学习笔记第二十五周（Django补充）

    1.render_to_reponse() 不同于render,render_to_response()不用包含request,直接写template中文件 2.locals() 如果views文件中 ...

  3. Python学习笔记第二十二周（前端知识点补充）

    目录: 一.伪类 二.样式 1.字体 2.背景图片 3.margin和padding 4.列表属性 5.float 6.clear 7.position 8.text-decoration(a标签下划 ...

  4. Python学习笔记第十四周

    目录: 一.HTML 1.概述 2.HTML 二.CSS 一.HTML 1.概述 HTML是英文Hyper Text Mark-up Lang(超文本标记语言)的缩写,他是一种制作万维网页面的标准语言 ...

  5. Python学习笔记第二十周

    目录: 一.ORM 1.查询补充 备注:forloop.counter介绍 二.Ajax 三.ORM多对多操作 内容: 一.ORM 1.查询补充: 1.models.USR.objects.all() ...

  6. Python学习笔记（十四）

    Python学习笔记(十四): Json and Pickle模块 shelve模块 1. Json and Pickle模块 之前我们学习过用eval内置方法可以将一个字符串转成python对象,不 ...

  7. Python学习笔记（十）

    Python学习笔记(十): 装饰器的应用 列表生成式 生成器 迭代器 模块:time,random 1. 装饰器的应用-登陆练习 login_status = False # 定义登陆状态 def ...

  8. Python学习笔记第十六周

    目录: 一.CSS补充 1.页面布局 二.JavaScript补充 1.条件判断 2.函数分类 3.序列化 4.转义 5.eval 6.时间 7.作用域 三.DOM 1.间接查找 文本操作 样式操作 ...

  9. Python学习笔记（十五）：类基础

    以Mark Lutz著的<Python学习手册>为教程,每天花1个小时左右时间学习,争取两周完成. --- 写在前面的话 2013-7-24 23:59 学习笔记 1,Python中的大多 ...

随机推荐

  1. 509. Fibonacci Number斐波那契数列

    网址:https://leetcode.com/problems/fibonacci-number/ 原始的斐波那契数列 运用自底向上的动态规划最佳! 可以定义vector数组,但是占用较多内存空间 ...

  2. Oracle 11.2.0.4.0 Dataguard部署和日常维护(1)-数据库安装篇

    本次测试环境 系统版本 CentOS release 6.8 主机名 ec2t-userdata-01 ec2t-userdata-01 IP地址 10.189.102.118 10.189.100. ...

  3. Spring ApplicationListener使用方法及问题

    使用场景 在一些业务场景中,当容器初始化完成之后,需要处理一些操作,比如一些数据的加载.初始化缓存.特定任务的注册等等.这个时候我们就可以使用Spring提供的ApplicationListener来 ...

  4. 浅谈MVVM

    MVVM 模式将 Presenter 改名为 ViewModel,基本上与 MVP 模式完全一致. 唯一的区别是,它采用双向绑定(data-binding):View的变动,自动反映在 ViewMod ...

  5. dubbo源码分析(一)-从xml到我们认识的Java对象

    项目中用的dubbo的挺多的,然后随着自己对dubbo的慢慢深入,自己也希望能够了解dubbo的底层实现,这半年来一直在看dubbo的源码,有点断断续续的,于是准备写一个dubbo源码系列的分析文章, ...

  6. 使用Redis数据库（1）（三十三）

    Spring Boot中除了对常用的关系型数据库提供了优秀的自动化支持之外,对于很多NoSQL数据库一样提供了自动化配置的支持,包括:Redis, MongoDB, Elasticsearch, So ...

  7. sqlcipher 数据库解密

    使用 sqlcipher.exe 可以在输入密码后,查看加密数据库的内容. 但是要编码查询数据库的内容,还要另寻方法.(相关的工具和库在我的百度网盘中) 使用sqlcipher windows 命令工 ...

  8. windows 文件/文件夹操作

    move命令 命令作用:移动某个文件到指定的文件夹下 将D:\file\abc.zip 移动到 E:\test\文件夹下 move d:\file\abc.zip e:\test\ 移动之后再原来的文 ...

  9. Saiku的下载与安装（一）

    Saiku- 数据可视化的工具,连接数据源展示数据,并且可方便导出xls/csv/pdf等文件的工具 一.Saiku下载 社区网址:https://community.meteorite.bi/ 二. ...

  10. 国内npm镜像使用

    淘宝npm镜像 搜索地址:http://npm.taobao.org/ registry地址:http://registry.npm.taobao.org/ cnpmjs镜像 搜索地址:http:// ...