目录：

　　一、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. github上fork了别人的项目后，再同步更新别人的提交(转)

    原文地址:github上fork了别人的项目后,再同步更新别人的提交 我从github网站和用git命令两种方式说一下. github网站上操作 打开自己的仓库,进入code下面. 点击new pul ...

  2. QString 的用法

    C++语言提供了两种字符串的实现:C风格的字符串,以'\0‘结尾;std::string,即标准模版库中的类.Qt则提供了自己的字符串实现:QString,QString不用担心内存分配以及关于'\0 ...

  3. 通过BeanPostProcessor理解Spring中Bean的生命周期

    通过BeanPostProcessor理解Spring中Bean的生命周期及AOP原理 Spring源码解析(十一)Spring扩展接口InstantiationAwareBeanPostProces ...

  4. jetty隐藏版本号教程

    一.查看版本号 直接访问端口不像apache/tomcat/nginx会直接有版本号 但实际查看返回http头时还是带着版本号 二.隐藏版本号操作 编缉$JETTY_HOME/start.ini将je ...

  5. Java Web(六) JSP

    现在的Java Web开发已经很少使用JSP脚本了,业务逻辑都交给Servlet处理,JSP只负责显示视图,所以接下来的内容就对JSP脚本不做叙述了... JSP概述 JSP全名为Java Serve ...

  6. learning shell display alert function

    [Purpose]        Shell print function base on err info wrn ext output level   [Eevironment]        U ...

  7. 架构之路：nginx与IIS服务器搭建集群实现负载均衡（一）

    最近亮亮在研究IIS的负载均衡!本人由于初出茅庐,防骗意识薄弱,一不小心被亮亮坑上了IIS负载均衡之路(亮亮是真黑哈!).前车之鉴啊!小伙伴们要小心.不过既上了贼船,便决定一条道走到黑.于是乎从大前天 ...

  8. [Leetcode 122]买股票II Best Time to Buy and Sell Stock II

    [题目] Say you have an array for which the ith element is the price of a given stock on day i. Design ...

  9. 不管你是否已经准备面试, 这45道Python面试题都对你非常有帮助!（mark！）

    1)什么是Python?使用Python有什么好处? Python是一种编程语言,包含对象,模块,线程,异常和自动内存管理.蟒蛇的好处在于它简单易用,可移植,可扩展,内置数据结构,并且它是一个开源的. ...

  10. SQL-26 (二次分组)汇总各个部门当前员工的title类型的分配数目，结果给出部门编号dept_no、dept_name、其当前员工所有的title以及该类型title对应的数目count

    题目描述 汇总各个部门当前员工的title类型的分配数目,结果给出部门编号dept_no.dept_name.其当前员工所有的title以及该类型title对应的数目countCREATE TABLE ...