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中的大多 ...

随机推荐

杂记-格式化Date默认格式,日期加一天,jstl判断字符类型,ajax模拟from表单后台跳转页面,jstl访问数据库并在页面显示
1.格式化Date默认格式 String str="Sun Oct 08 22:36:45 CST 2017"; SimpleDateFormat sdf = new Simple ...
TP5+jquery即点既改
//表单 {volist name="date" id="v"}<tr id="{$v.id}"> <td>< ...
Oracle 11.2.0.4.0 Dataguard部署和日常维护(6)-Active Dataguard篇
1. 检查主备库的状态 on primary column DATABASE_ROLE format a20 column OPEN_MODE format a15 column PROTECTION ...
RocketMQ安装教程
1.下载 http://mirror.bit.edu.cn/apache/rocketmq/ 2.安装 .tar.gz cd alibaba-rocketmq/bin chmod u+x * 3.配置 ...
redis集群搭建教程（以3.2.2为例）
redis从3.0版本开始支持集群,2.X版本主支持sentinel主从模式:所以要搭建集群务必下载3.0以上版本,本教程以3.2.2版本为例. redis集群最少要有3个主节点,最典型的是3主3从组 ...
redis sentinel哨兵模式集群搭建教程
1.环境说明我们将使用192.168.220.128.192.168.220.129两台机器搭建sentinel交叉主从为例当前我们已在192.168.220.128上按redis安装教程安装了r ...
Linux CPU信息和使用情况查看（CentOS）
一.CPU信息查看 cat /proc/cpuinfo| grep "physical id"| sort -u | wc -l #查看是物理CPU个数,-u和uniq都是去重作用 ...
EventBus简单封装
前言以前每个页面与每个页面业务逻辑传递让你不知所措,一个又一个接口回调,让你晕头转向,一个又一个参数让你混乱不堪.EventBus一个耦合度低的让你害怕的框架. 什么是EventBus EventB ...
python http 请求响应 post表单提交
1. 查看请求响应情况 print(response.text) print(response.headers) print(response.request.body) print(respons ...
[IOS微信] 查看微信原始数据（含沙盒中的数据）
1.下载PP助手,将苹果手机连接到电脑上, 2.备份数据备份还原——备份数据——全新备份 3.导出数据备份还原——还原数据,在右边的列表中找到备份记录,点击“查看”, 在弹出窗口的右侧,找到“Ap ...

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

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

随机推荐

热门专题