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

最新推荐文章于 2023-10-11 22:35:25 发布

weixin_30786617

最新推荐文章于 2023-10-11 22:35:25 发布

阅读量109

点赞数

原文链接：http://www.cnblogs.com/xiaopi-python/p/7246561.html

版权

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

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

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

<!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)
　　　　}

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

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

<!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>

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

weixin_30786617

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Python学习笔记第二十四周（JavaScript补充）

目录：　　一、JS补充　　　　1、函数类型　　　　2、string对象　　　　3、instanceof　　　　4、Array 数组对象　　　　5、Date对象　　　　6、RegExp 正则表达式　　　　7、Math对象　　二、BOM补充　　　　1、window对象　　　　2、histroy对象　　　　3、location对象　　三、DOM补充...
复制链接

扫一扫