Python学习笔记第二十四周（JavaScript补充）

　　一、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补充）的更多相关文章

Python学习笔记第二十六周（Django补充）
一.基于jQuery的ajax实现(最底层方法:$.jax()) $.ajax( url: type:''POST“ ) $.get(url,[data],[callback],[type]) #c ...
Python学习笔记第二十五周（Django补充）
1.render_to_reponse() 不同于render,render_to_response()不用包含request,直接写template中文件 2.locals() 如果views文件中 ...
Python学习笔记第二十二周（前端知识点补充）
目录: 一.伪类二.样式 1.字体 2.背景图片 3.margin和padding 4.列表属性 5.float 6.clear 7.position 8.text-decoration(a标签下划 ...
Python学习笔记第十四周
目录: 一.HTML 1.概述 2.HTML 二.CSS 一.HTML 1.概述 HTML是英文Hyper Text Mark-up Lang(超文本标记语言)的缩写,他是一种制作万维网页面的标准语言 ...
Python学习笔记第二十周
目录: 一.ORM 1.查询补充备注:forloop.counter介绍二.Ajax 三.ORM多对多操作内容: 一.ORM 1.查询补充: 1.models.USR.objects.all() ...
Python学习笔记（十四）
Python学习笔记(十四): Json and Pickle模块 shelve模块 1. Json and Pickle模块之前我们学习过用eval内置方法可以将一个字符串转成python对象,不 ...
Python学习笔记（十）
Python学习笔记(十): 装饰器的应用列表生成式生成器迭代器模块:time,random 1. 装饰器的应用-登陆练习 login_status = False # 定义登陆状态 def ...
Python学习笔记第十六周
目录: 一.CSS补充 1.页面布局二.JavaScript补充 1.条件判断 2.函数分类 3.序列化 4.转义 5.eval 6.时间 7.作用域三.DOM 1.间接查找文本操作样式操作 ...
Python学习笔记（十五）：类基础
以Mark Lutz著的<Python学习手册>为教程,每天花1个小时左右时间学习,争取两周完成. --- 写在前面的话 2013-7-24 23:59 学习笔记 1,Python中的大多 ...

随机推荐

JAVA正则表达式：Pattern、Matcher、String
java.util.regex是一个用正则表达式所订制的模式来对字符串进行匹配工作的类库包.它包括两个类:Pattern和Matcher Pattern 一个Pattern是一个正则表达式经编译后的表 ...
nginx是什么，如何使用
一:nginx是什么? 二:nginx作为网关,需要具备什么?(nginx可以作为web服务器,但更多的时候,我们把它作为网关,因为它具备网关必备的功能:) 反向代理(反向代理就是服务器找来一个机器代 ...
【Python】基础知识
一.基本概念 1.变量与运算符 Python允许给多个变量同时赋值,等号 (=) 右边的值将赋予左边对应位置的变量. # 将a, b, c的值依次赋予b, c, a b, c, a = a, b, c ...
Physical Limits of ASM
Oracle version 7, only 1,022 datafiles per database could be used. Oracle version 11g, support 65,5 ...
mysql5.6主从配置
在windows 7系统上安装mysql5.6, 主库: 安装目录为:D:\Program Files\MySQL\MySQL Server 5.6 从库: 对安装目录进行拷贝,重命名:D:\Prog ...
动态规划入门——数字三角形（Java）
动态规划的概念对于新手来说枯燥难懂,就算看懂了,做题的时候依旧抓耳挠腮的毫无头绪,这些比较难理解的算法,还是需要根据例子来一步步学习和理解,从而熟练掌握,下面,咱们就通过一个简单的小例子来学习动态规划 ...
Oracle多个字段如何合并成一个字段显示
今天记录一下在oracle中多个字段如何和合并成一个字段,使用到符号“||” 1.组合查询的数据 1)组合前查询的语句 -- 组合前数据的字段 -- select A.MID CATE_ID,A.Co ...
html 多媒体使用
HTML插件辅助应用程序(helper application)是由浏览器启动的程序,辅助应用程序也称为插件. 辅助应用程序可用于播放音频和视频(或其他 ).辅助程序是使用<Object> ...
learning shell display alert function
[Purpose] Shell print function base on err info wrn ext output level [Eevironment] U ...
1.3 CPU简介
目录 CPU的功能模块 cpu总线 CPU寄存器 16位cpu的寄存器组 32位cpu的寄存器组 64位cpu的寄存器组 CPU的功能模块 CPU从逻辑上可以划分成3个模块,分别是控制单元.运算单元和 ...

Python学习笔记第二十四周（JavaScript补充）

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

随机推荐

热门专题