一文带你解读​JavaScript的引用类型和函数对象

前言

相信做网站对JavaScript再熟悉不过了,它是一门脚本语言,不同于Python的是,它是一门浏览器脚本语言,而Python则是服务器脚本语言,我们不光要会Python,还要会JavaScript,因为它对做网页方面是有很大作用的。

1.引用类型

相当于Java中的类创建实例过程,比如我要创建个对象,可以这样做:

var ob = new Object();

其实它就是把JavaScript中的数据类型转换为Java中的类来进行操作。

2.函数对象

1).Arguments对象

这是个神奇的对象,无需指明参数就可以访问它,它无处不在,用好了将极大的提高你的工作效率。比如它可以检查函数中有多少个参数:

function aa() {
  console.log(arguments.length);
}


aa("fsdaf",324,42.434,'42342asff');
一文带你解读​JavaScript的引用类型和函数对象

2).Function对象

它可以十分方便的创建函数,并且有多种方法创建函数。

1)).对象实例化创建

var ff= new function(name,age,score,表达式)

2)). 函数关键字创建

function aa() {
  alert(111);
}
function aa(bb,cc) {
  alert(bb,cc);
}

Function有一个Length属性用来计算长度:

function aa() {
  alert(111);
}
aa.length

3).Constructor属性

看到这个长长的东西是不是感到特别陌生,它就是我们的构造函数,我们可以对此判断当前实例是否属于对象。

var aa=new Array()
if(aa.constructor==Array){
    console.log(11)
}
else{
    console.log(22)
}

4).Prototype属性

指对象的原型参数,实例化后的对象是没有Prototype属性的,只有对象本身才有这个属性。利用该属性创建的变量名和值并没有加入到实例对象中,只是创建了,如果你想访问它,可以使用:实例名.constructor.prototype来进行访问。

一文带你解读​JavaScript的引用类型和函数对象

一文带你解读​JavaScript的引用类型和函数对象

从上面可以看出,数组的实例化对象可以创建任意变量并且赋值,但是它的原型却不行,如果是数组本身那么就又可以了。而且要想访问原型的构造函数还得是对象本身,最后得到的结果也就是对象本身。可见虽然原型和构造函数换了个位置,但是意义完全不一样。

5).This 对象

其实就相当于Java中的This,Python 中的Self,可以看出它的重要性,无非就是指向一个实例对象。

一文带你解读​JavaScript的引用类型和函数对象

3.闭包

其实就是嵌套函数。

var aa= 10;
function s(cc,bb) {
  function sa() {
    return cc+bb;
  }
  return sa();
}

总结

这篇文章主要结束了JavaScript的引用类型、函数对象和闭包,下一篇文章继续给大家分享JavaScript知识,敬请期待!

一文带你解读​JavaScript的基本用法

前言

相信做网站对JavaScript再熟悉不过了,它是一门脚本语言,不同于Python的是,它是一门浏览器脚本语言,而Python则是服务器脚本语言,我们不光要会Python,还要会JavaScript,因为它对做网页方面是有很大作用的。

JavaScript的基本用法

1.如何使用Js脚本

1).引入Js文件

在头部标签中导入脚本标签并指明脚本文件路径

<head><script src="XXX.js"></script></head>

2).标签中使用

<body><script >javascript 语句</script></body>
<head><script >javascript 语句</script></head>

2.数据类型

JavaScript的数据类型分为:

string
number
boolean
array
object
null
undefined

3.注释

1).单行注释

以“//”开头,后面接注释语句,只能注释一行

2).多行注释

/* 注释语句,可注释多行 */

4.特殊符号

\n 换行
\t 制表符 
\b 空格 
\r 回车 
\f 换页符
\\ 反斜杠 
\' 单引号
\" 双引号
\0 x 八进制代码x表示的字符(n是0到7中的一个八进制数字)
\x x 十六进制代码x表示的字符(n是0到F 中的一个十六进制数字)
\u x 十六进制代码x表示的Unicode字符(n是0到F 中的一个十六进制数字)

5.变量声明

1).Var声明

var ss='fsdf'  外部声明的变量可在全局使用
var ss        也可以不声明值,也不会产生错误,唯一的遗憾是会产生变量提升

2).Const 声明

const ss=123   不存在变量提升,可生成块级作用域 ,常用于声明常量,声明后必须赋值

3).Let 声明

let ss=123   不存在变量提升,可生成块级作用域,常用于声明变量,

6.控制结构语句

1).If ……Else

var aa=12
if(aa>3){console.log(1)}
else{alert(1)}

可以看出与我们的Python语句略有不同。

2).Do…..While

var i=1
do
 {
 i++;
 console.log(i);
 }
while(i<5)

3).While

var i=1
while(i<5){
    i++;
    console.log(i)
}

4).For

for(let i=1;i<6;i++){
    console.log(i)
}

5).For….In…

#打印了document对象的所有方法
    for(y in document)
        {
            console.log(y)
        }

6.Break、Continue

break    立即终止循环
continue 退出当前循环进入下一个循环

7).标签语句

指的是标签后面的语句可由判断结果自行决定什么时候结束

var i=0
label:while(i<10){
    i++;
    if(i==5){
        break label;
}
    else{
        console.log(i)
}
}

8).With语句

相当于Python中的上下文管理器

var aa='fasdffsa'
        with(aa){
            console.log(aa)
        }

9).Switch语句

var aa=[1,2,3]
    switch(aa){
        case 1:console.log(1);
        break;
        case 2:console.log(2);
        break;
        case 3:console.log(3);
        break;
        default:console.log('fas');
}

10).For….of

for(let val of iterable){
console.log(val)
}

11).For each ….. in

var sum = 0;
var obj = {prop1: 5, prop2: 13, prop3: 8};
for each (var item in obj) {
  sum += item;
}
print(sum); // 输出"26",也就是5+13+8的值




obj.forEach(function(val,item,array){
      array[item]=val
})

总结

这篇文章主要结束了JavaScript的导入、数据类型、注释、变量和控制语句。下一篇文章,我们继续介绍JavaScript,敬请期待!

盘点JavaScript中5个常用的对象

大家好,我是IT共享者,人称皮皮。

前言

相信做网站对JavaScript再熟悉不过了,它是一门脚本语言,不同于Python的是,它是一门浏览器脚本语言,而Python则是服务器脚本语言,我们不光要会Python,还要会JavaScript,因为它对做网页方面是有很大作用的。

JavaScript对象

在JavaScript中有许多有用的对象,它们可以用来实现很多功能,除了我们之前接触到的,还有以下几种:

Date   日期
RegExp 正则
Error  错误

接下来我们就来具体了解下它们都有哪些用处:

1).Array对象

它就是我们熟知的数组对象了,它可以储存许多值并用下标访问,常见操作如下:

盘点JavaScript中5个常用的对象

2).Boolean对象

返回该对象的源代码。
b.toSource()




把逻辑值转换为字符串,并返回结果。
b.toString()




返回 Boolean 对象的原始值。
b.valueOf()

3).Date对象

这个对象主要对时间的操作,我们可以通过这个对象获取并且设置时间,如图:

盘点JavaScript中5个常用的对象

3).Math对象

这个对象就好比我们Python中的数学模块中的方法一样,两者了解一样即可,如图:

盘点JavaScript中5个常用的对象

4).Number对象

主要就是数字对象的一些操作,比较简单,方法不多,如图:

盘点JavaScript中5个常用的对象

5).String对象

主要是对字符串对象进行操作,比如字符串拼接,分割等,这是我们比较常用的对象,它的用法如下:

盘点JavaScript中5个常用的对象

总结

这篇文章主要介绍了JavaScript的对象知识。下一篇文章,我们继续介绍JavaScript,敬请期待!

一文解读JavaScript中的文档对象(DOM)

大家好,我是IT共享者,人称皮皮。

前言

相信做网站对JavaScript再熟悉不过了,它是一门脚本语言,不同于Python的是,它是一门浏览器脚本语言,而Python则是服务器脚本语言,我们不光要会Python,还要会JavaScript,因为它对做网页方面是有很大作用的。

1.文档对象(DOM)

1).Document对象

这是我们用的最普遍的一个文档对象了,专门用来操作DOM节点时用。

1)).获取元素

document.getElementById()           #通过id查找HTML元素
document.getElementsByName()        #通过name查找HTML元素
document.getElementsByTagName()     #通过标签名查找HTML元素
document.getElementsByClassName()   #通过类名查找HTML元素 
document.querySelector(".h")        #第一个类名为 "h" 的元素
document.querySelectorAll("div.no, div#h") #所有class为"no"或者id为"h"的div元素
document.body          #获取body标签
document.documentElement   #获取html标签

2)).获取网页内容

document.cookie        #网页cookie
document.domain        #文档的域名
document.lastModified  #文档被最后修改的日期和时间
document.referrer      #载入当前文档的文档的URL
document.title         #当前文档的标题
document.URL           #当前文档的URL
document.doctype       #当前文档的doctype
document.baseURI       #当前文档的绝对URI
document.documentMode   #浏览器使用的模式
document.documentURI    #文档的URI
document.implementation #DOM实现
document.inputEncoding  #文档的编码(字符集)
document.readyState     #文档的(加载)状态
document.strictErrorChecking    #是否强制执行错误检查

3)).文档写入

document.write('hello world')   向文档写入文本
document.writeln('hello world') 向文档写入文本并换行

4)).获取集合

document.all        #所有html元素
document.anchors    #所有Anchor引用
document.forms      #所有的表单引用
document.images     #所有的图片引用
document.links      #所有的超链接引用
document.scripts    #所有的脚本引用
document.embeds     #所有的流媒体引用

5)).获取节点

childNodes          #获取子节点的集合 ,返回数组 ,并把换行和空格也当成是节点信息。
children            #获取子节点的集合 ,返回数组   
firstChild          #获取第一个子元素  并把换行和空格也当成是节点信息
firstElementChild   #获取第一个子节点
lastChild           #获取最后一个子节点 并把换行和空格也当成是节点信息
lastElementChild    #获取最后一个子节点
parentNode          #获取父节点
parentElement       #获取父节点(IE)
offsetParent        #获取所有父节点  对应的值是body下的所有节点信息
previousSibling         #获取上一个兄弟节点  匹配字符,包括换行和空格,而不是节点
previousElementSibling  #获取上一个兄弟节点  直接匹配节点
nextSibling             #获取下一个兄弟节点  匹配字符,包括换行和空格,而不是节点
nextElementSibling      #获取下一个兄弟节点  直接匹配节点
ownerDocument           #元素的根节点

这里我们获取到了所有的Div元素,我们可以针对性的获取一个ID下的Div的子元素以及它的兄弟和父,子元素,如下:

6)).创建节点

我们可以自定义节点并添加值,不过要将它添加到文档中去,所以必须添加节点,一般和下方的增加节点配套使用。

document.createElement(标签)  #创建HTML元素
document.createTextNode(文本) #给文档添加文本
document.createComment(文本)  #创建一个注释节点
document.createDocumentFragment() #创建文档粉碎节点

7)).增加节点

appendChild(节点) #节点被添加到元素的末尾
insertBefore(a,b) #a节点会插入b节点的前面

8)).删除节点

removeChild(节点名)  #被移除的节点仍在文档中,只是文档中已没有其位置了

9)).替换节点

replaceChild(插入的节点,被替换的节点)

10)).复制节点

a.cloneChild() #复制a节点,复制出来的节点作为返回值为true时,则a元素后代也一并复制。否则,仅复制a元素本身

11)).节点属性

#节点类型 nodeType 有三种情况
#1.元素节点  2.属性节点  3.文本节点


#节点名称 nodeName 


#节点值 nodeValue 
#元素节点没节点值,为null 
#文本节点的节点值就是文本
#属性节点的节点值就是该属性值


#节点属性获取
a.width
a['width']
a.gerAttribute(属性名)  返回指定的属性值
a.gerAttributeNode(属性名) 返回指定的属性节点
节点属性设置
a.width=400
a['width']=400
a.attributes['width']=400
a.setAttribute('width',400) 添加指定的属性
a.setAttributeNode(b) 添加指定的属性节点


#节点属性删除
a.removeChild(子节点)    从元素中移除子节点
a.removeAttribute(属性)  从元素中移除指定属性
a.removeAttributeNode(属性) 移除指定的属性节点,并返回被移除的节点


a.id 获取当前元素的id
a.className  获取当前元素的class
a.classList  获取当前元素的class列表


a.accessKey='w'    设置或返回元素的快捷键
a.namespaceURI     返回指定节点的命名空间的 URI
a.dir              设置或返回元素的内容是否可编辑
a.normalize()      合并元素中相邻的文本节点,并移除空的文本节点
a.tabIndex='3'     设置或返回元素的tab键控制次序
a.tagName          返回元素的标签名
a.textContent      设置或返回节点及其子代的文本内容
a.title            设置或返回元素的标题属性
a.item(num)        返回节点列表中位于指定下标的节点
a.length           返回节点列表中的节点数

12)).获取元素文本

a.innerHTML  获取或者设置对象内的HTML
a.innerText  获取或者设置对象内的文本
a.outerHTML  获取或者设置对象外的HTML
a.outerText  获取或者设置对象外的文本
a.value      获取或者设置表单元素的值

总结

这篇文章主要介绍了JavaScript的文档对象。下一篇文章,我们继续介绍JavaScript,敬请期待!

一文解读JavaScript事件对象和表单对象

前言

相信做网站对JavaScript再熟悉不过了,它是一门脚本语言,不同于Python的是,它是一门浏览器脚本语言,而Python则是服务器脚本语言,我们不光要会Python,还要会JavaScript,因为它对做网页方面是有很大作用的。

1.事件对象(Event)

1).事件对象常量

bubbles         事件是否是起泡事件类型 
cancelable      事件是否可确定可取消的默认动作
currentTarget   事件监听器触发该事件的元素 
eventPhase      事件传播的当前阶段 
target          触发此事件的元素(事件的目标节点),srcElement(IE)
timeStamp       事件生成的日期和时间
type            当前Event对象表示的事件的名称 
initEvent()     初始化新创建的 Event 对象的属性
preventDefault() 不执行默认动作
stopPropagation()   停止冒泡 cancelBubble
x,y             元素的 x 坐标和 y 坐标
returnValue     设置或获取事件的返回值
fromElement  在IE中用于mouseover和mouseout 事件,可以引用移出鼠标的元素。
toElement  在IE中用于mouseover和mouseout 事件,该属性引用移入鼠标的元素。
returnValue 设置或获取事件的返回值
keyCode(IE) 键盘码 which()  charCode
offsetX,offsetY 事件在源元素的中的x坐标和y坐标。

这在后面的其它操作中我都有举例子,大家可以仔细看看。

2).键盘鼠标事件

altKey          判断"ALT" 是否被按下 
button          判断哪个鼠标按钮被点击 
clientX         判断鼠标指针的水平坐标
clientY         判断鼠标指针的垂直坐标
ctrlKey         判断"CTRL" 键是否被按下
keyIdentifier   按键的标识符  
keyLocation     按键在设备上的位置 
metaKey         判断"meta" 键是否被按下
relatedTarget   与事件的目标节点相关的节点
screenX         判断鼠标指针的水平坐标
screenY         判断鼠标指针的垂直坐标
shiftKey        判断"SHIFT" 键是否被按下

这个在后面也会提到,比如获取鼠标坐标:

2.表单对象

1).Form对象

document.forms['表单名']['text'].value #获取表单中的文本框的值
acceptCharset       服务器字符集 
action              设置或返回表单的action
enctype             设置或返回表单用来编码内容的MIME类型 
length              返回表单中的元素数目
method              设置或返回将数据发送到服务器的 HTTP 方法
name                设置或返回表单的名称
target              设置或返回表单提交结果的Frame或Window

2).Button对象(submit,hidden与它方法差不多)

b.accessKey                 设置或返回访问按钮的快捷键
b.alt                       设置或返回当浏览器无法显示按钮时供显示的替代文本 
b.disabled=true|false       设置或返回是否禁用按钮
b.form                      返回对包含该按钮的表单对象的引用
b.id                        设置或返回按钮的 id
b.name                      设置或返回按钮的名称 
b.tabIndex='3'              设置或返回按钮的 tab 键控制次序 
b.type                      返回按钮的表单元素类型 
b.value                     设置或返回在按钮上显示的文本

3).Checkbox 对象(Radio与它方法差不多)

和上面的对象差不多,唯一不同的便是多了一个默认值选中值:“defaultChecked”。

4).Select 对象

s.options  返回下拉列表数组
s.selectedIndex=num    设置或返回下拉列表中被选选项的索引号
s.multiple=true|false  设置或返回是否可有多个选项被选中
s.size                 设置或返回下拉列表中一次显示显示的选项数
s.add()       向下拉列表添加一个选项
s.remove()    从下拉列表中删除一个选项

总结

这篇文章主要介绍了JavaScript的事件对象和表单对象。下一篇文章,我们继续介绍JavaScript,敬请期待!

一文解读JavaScript中的事件知识

前言

相信做网站对JavaScript再熟悉不过了,它是一门脚本语言,不同于Python的是,它是一门浏览器脚本语言,而Python则是服务器脚本语言,我们不光要会Python,还要会JavaScript,因为它对做网页方面是有很大作用的。

1.事件

1).鼠标事件

onclick     #鼠标单击  
ondblclick  #双击鼠标
onmousedown #鼠标按钮被按下。
onmousemove #鼠标被移动。
onmouseover #鼠标移到某元素之上。
onmouseout  #鼠标从某元素移开。
onmouseup   #鼠标按键被松开。

2).键盘事件

onkeydown #按键被按下
onkeypress #按键被按下并松开
onkeyup #按键被松开

3)框架事件

onabort 图像的加载被中断 
onerror 在加载文档或图像时发生错误
onload  页面或图像完成加载  
onresize 窗口或框架被重新调整大小
onscroll 滚动事件
onunload 退出页面

可以看到一会儿就滚动了这么多下。

4).表单对象

onblur 元素失去焦点 
onchange 文本域的内容被改变
onfocus 元素获得焦点
onreset 重置按钮
onselect 文本选中
onsubmit 确认提交

总结

这篇文章主要结束了JavaScript的事件知识。下一篇文章,我们继续介绍JavaScript,敬请期待!

盘点 JavaScript 中那些进阶操作知识(下篇)

相信做网站对 JavaScript 再熟悉不过了,它是一门脚本语言,不同于 Python 的是,它是一门浏览器脚本语言,而 Python 则是服务器脚本语言,我们不光要会 Python,还要会 JavaScript,因为它对做网页方面是有很大作用的。

大家好,我是 IT 共享者,人称皮皮。上篇文章给大家分享了盘点 JavaScript 中那些进阶操作知识(上篇),这篇文章继续来看看趴!

前言

相信做网站对 JavaScript 再熟悉不过了,它是一门脚本语言,不同于 Python 的是,它是一门浏览器脚本语言,而 Python 则是服务器脚本语言,我们不光要会 Python,还要会 JavaScript,因为它对做网页方面是有很大作用的。

1.Javascript 刷新页面

history.go(0) 
location.reload() 
location=location 
location.assign(location) 
document.execCommand('Refresh') 
window.navigate(location) 
location.replace(location) 
document.URL=location.href

2.Js 浏览器兼容问题

1).浏览器事件监听

function addEventhandler(target,type,fn,cap){
            if(target.addEventListener)               /*添加监听事件*/
              {       
                target.addEventListener(type,fn,cap)
                }
            else{
                 target.attachEvent('on'+type,fn)  /*IE 添加监听事件*/
               }
          }
       function removeEventhandler(target,type,fn,cap){
            if(target.removeEventListener)            /*删除监听事件*/
             {
                target.removeEventListener(type,fn,cap)
                }
            else{
                 target.detachEvent('on'+type,fn)    /*IE 删除监听事件*/
               }
          }

2).鼠标键判断

function bu(event)
{
var bt= window.button || event.button;
if (bt==2)
  {
  x=event.clientX
  y=event.clientY   
  alert("您点击了鼠标右键!坐标为:"+x+','+y)
  }
else if(bt==0)
  {
    a=event.screenX
    b=event.screenY
  alert("您点击了鼠标左键!坐标为:"+a+','+b)
  }
else if(bt==1)
  {
  alert("您点击了鼠标中键!");
  }
}

3).判断是否按下某键

function k(event)
{
var ke=event.keyCode || event.which
if(event.shiftKey==1)
  {
  alert('您点击了 shift');
  }
 alert(ke)alert(event.type)
}

4).网页内容节点兼容性

1)).网页可视区域宽高

var w=document.body.offsetWidth|| document.documentElement.clientWidth|| document.body.clientWidth;
var h=document.body.offsetHeight|| document.documentElement.clientHeight || document.body.clientHeight;

2)).窗体宽度高度 比可视区域要大

window.innerHeight - 浏览器窗口的内高度(以像素计) 
window.innerWidth - 浏览器窗口的内宽度(以像素计)

3)).页面滚动条距离顶部的距离

var t=document.documentElement.scrollTop || document.body.scrollTop

4)).页面滚动条距离左边的距离

var s=document.documentElement.scrollLeft || document.body.scrollLeft

5)).元素到浏览器边缘的距离

  function off(o){   #元素内容距离浏览器边框的距离(含边框)var l=0,r=0;
        while(o){
            l+=o.offsetLeft+o.clientLeft;
            r+=o.offsetTop+o.clientTop;
            o=o.offsetParent;
        }
        return {left:l,top:r};
    }

6)).获取滚动条高度

// 滚动条的高度
function getScrollTop() {
var scrollTop = 0;
if (document.documentElement && document.documentElement.scrollTop) {
        scrollTop = document.documentElement.scrollTop;
    }
else if (document.body) {
        scrollTop = document.body.scrollTop;
    }
return scrollTop;
}

7)).DOM 节点操作

function next(o){//获取下一个兄弟节点 if (o.nextElementSibling) {
            return o.nextElementSibling;
        } else{
            return o.nextSibling;
        };
    }
    function pre(o){//获取上一个兄弟节点 if (o.previousElementSibling) {
            return o.previousElementSibling;
        } else{
            return o.previousSibling;
        };
    }
    function first(o){//获取第一个子节点 if (o.firstElementChild) {
            return o.firstElementChild;//非 IE678 支持
        } else{
            return o.firstChild;//IE678 支持
        };
    }
    function last(o){//获取最后一个子节点 if (o.lastElementChild) {
            return o.lastElementChild;//非 IE678 支持
        } else{
            return o.lastChild;//IE678 支持
        };
    }

8)).窗口的宽高

document.body.scrollWidth||document.docuemntElement.scrollWidth;//整个网页的宽
document.body.scrollHeight||document.docuemntElement.scrollHeight;//整个网页的高

9)).屏幕分辨率的宽高

window.screen.height;//屏幕分辨率的高
window.screen.width;//屏幕分辨率的宽

10)).坐标

window.screenLeft;//x 坐标
window.screenX;//X 坐标
window.screenTop;//y 坐标
window.screenY;//y 坐标

11)).屏幕可用工作区宽高

window.screen.availHeight 
window.screen.availWidth

5).事件源获取

e.target || e.srcElement

6).行外样式

funtion getStyle(obj,name){
   if(obj.currentStyle){
      //IE
    return obj.currentStyle[name];
    }else{
    //Chrom,FF
   return getComputedStyle(obj,false)[name];
      }
 }

7).阻止事件冒泡函数封装

function pre(event){

           var e = event || window.event;

           if(e.stopPropagation){   // 通用方式阻止冒泡行为

               e.stopPropagation();

           }else{    //IE 浏览器

               event.cancelBubble = true;

           }

8).阻止浏览器默认行为(例如点击右键出来菜单栏)

function stop(event) {

     var e = event || window.event;

     if (e.preventDefault){

         e.preventDefault();   // 标准浏览器

     }else{

         e.returnValue = false; // IE 浏览器

     }

}

3.严格模式

"use strict"

4.判断变量类型

typeof  variable
instance  instanceof  object
instance.constructor== object
Object.prototype.toString.call(instance)

5.下载服务器端文件

<a href="http://somehost/somefile.zip" download="myfile.zip">Download file</a>

总结

这篇文章主要介绍了 JavaScript 的进阶操作命令!希望对大家的学习有所帮助。


人生苦短,我用Python!

盘点JavaScript中那些进阶操作知识(上篇)

前言

相信做网站对JavaScript再熟悉不过了,它是一门脚本语言,不同于Python的是,它是一门浏览器脚本语言,而Python则是服务器脚本语言,我们不光要会Python,还要会JavaScript,因为它对做网页方面是有很大作用的。

1.进阶操作

这里列举了一些小编以前经常用到的一些例子以及一些经验,由于篇幅受限,这里我将会把部分执行结果的输出直接输入到代码下面。

1).浏览器输入

prompt('请输入') 返回一个字符串变量

2).浏览器输出

document.write('我被输出了') 返回一个字符串

3).浏览器弹框

alert('我是弹框')  返回一个字符串

4).浏览器交互

confirm("是否进入"); 返回一个比尔类型的值

5).控制台打印结果

console.log('显示在控制台的结果')

6).类型检查

typeof ss
ss instanceof string

7).转换为字符串

var ff=123
ff.toString()

8).转换为数字

parseInt(‘231fasd’) -->231  isNumeric 用来判断是否是数字
parseInt('df',num) --> num介于2~36之间,若省略则为10,若‘0x’开头,则为16,若小于2或大于36则为NAN
parseFloat('10') -->无法转换为数字将返回NaN,可通过isNan来判断是否为NaN

9).转换为原始对象

var ff=123
ff.ValueOf()

10).编解码函数

1))字符串编解码

escape(string)    # 编码
unescape(string)   #解码

2))URL编解码

encodeURI(URIstring)  #编码
decodeURI(URIstring)  #解码
encodeURIComponent(URIstring)   #把字符串编码为 URI 组件
decodeURIComponent(URIstring)   #解码一个编码的 URI 组件

11).Eval

可把里面的字符串当做Js代码来执行,犹如Python中的Eval。

eval("alert('fasd')")

12).Call

能够使用属于另一个对象的方法,可传多个参数,是经典的对象冒充方法。

function ss(a,b) {
    alert(a + this.val + b);
};
var o= new Object();
o.val = "123";
ss.call(o, "I am", "years old.");


output:
I am 123 years old

13).Apply

与Call差不多,前面是对象但是它后面的参数是一个数组。

function ss(a,b) {
    alert(a + this.val + b);
};
var o= new Object();
o.val = "123";
ss.apply(o, new Array("I am", "years old"));

14).Caller

返回一个对函数的引用,该函数调用了当前函数,caller 属性只有在函数执行时才有定义。

function aa() {
    if (aa.caller) {
       console.log(aa.caller);   
    } else {
        console.log("111");
     }
}
aa()
output: 111

15).Callee

返回正被执行的 Function 对象,表示对函数对象本身的引用,一般用在递归。

function ff(x){
    if(x==1)
{
        return 1;
}
    else{
        return x+arguments.callee(x-1)
}
}
ff(3);
output:6

总结

这篇文章主要介绍了JavaScript的进阶操作知识。下一篇文章,我们继续介绍JavaScript,敬请期待!

一篇文章带你了解CSS定位知识

大家好,我是IT共享者,人称皮皮。这篇我们来讲讲CSS定位。

一、Position(定位)

CSS定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么。

元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定position属性。他们也有不同的工作方式,这取决于定位方法。

二、属性

1. Static 定位(默认效果)

HTML元素的默认值,即没有定位,元素出现在正常的流中。

静态定位的元素不会受到top, bottom, left, right影响。

2. Fixed 定位

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动:

<!DOCTYPE html>
<html>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
    <head>
        <style>
            p.pos_fixed {
                position: fixed;
                top: 30px;
                right: 5px;
            }
</style>
    </head>


    <body>


        <p class="pos_fixed">Some more text</p>
        <p><b>Note:</b> 代码使人进步!!!.</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>


    </body>


</html>

注意:

Fixed定位使元素的位置与文档流无关,因此不占据空间。

Fixed定位的元素和其他元素重叠。

3. Relative 定位

相对定位元素的定位是相对其正常位置。

<!DOCTYPE html>
<html>
    <meta charset="utf-8">
    <meta name="viewport" content="width=640, user-scalable=no">
    <title> 定位</title>


    <head>
        <style>
            h2.pos_left {
                position: relative;
                left: -20px;
            }


            h2.pos_right {
                position: relative;
                left: 20px;
            }
</style>
    </head>


    <body style="background-color:azure;">


        <p>Some more text</p>
        <p><b>Note:</b> 代码使人进步!!!.</p>
        <h2 class="pos_left">This heading is moved left according to its normal position</h2>
        <h2 class="pos_right">This heading is moved right according to its normal position</h2>


    </body>


</html>

可以移动的相对定位元素的内容和相互重叠的元素,它原本所占的空间不会改变。

h2.pos_top{
    position:relative;
    top:-50px;
}

相对定位元素经常被用来作为绝对定位元素的容器块。

4. Absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>:

h2{
    position:absolute;
    left:100px;
    top:150px;
}

Absolutely定位使元素的位置与文档流无关,因此不占据空间。

Absolutely定位的元素和其他元素重叠。

三、重叠的元素

元素的定位与文档流无关,所以它们可以覆盖页面上的其它元素

z-index属性指定了一个元素的堆叠顺序(哪个元素应该放在前面,或后面)

一个元素可以有正数或负数的堆叠顺序:

img{
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
}

具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

注意: 如果两个定位元素重叠,没有指定z – index,最后定位在HTML代码中的元素将被显示在最前面。

四、总结

本文基于Html基础,主要介绍了CSS中四种定位的方式。对于四种的定位表现形式,用丰富的案例 ,代码效果图的展示,帮助大家更好理解 。

最后,希望可以帮助大家更好的学习CSS3。

Vue的学习笔记(中篇)

一、什么是Vue.js?

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。上篇文章我们讲述了基础,可以戳这里:Vue的学习笔记(上篇)。这篇文章我们继续捋一捋~

二、Vue中使用样式class

第一种使用方式,传递一个数组,这里的class需要使用v-bind的数据绑定;

<h1 :class="['thin', 'italic']">hello world1!</h1>

第二种使用方式,在数组中使用三元表达式;

<h1 :class="['thin', 'italic', flag?'active':'']">hello world2!</h1>

第三种使用方式,在数组中使用对象来代替三元表达式,来提高代码的可读性;

<h1 :class="['thin', 'italic', {'active':flag} ]">hello world3!</h1>

在为class使用v-bind绑定对象时候,对象的属性是一个类名,由于对象的属性可以带引号,也可以不带,属性的值是一个标识符;

<h1 :class="classObj">hello world!</h1>

在css的样式代码如下图:

在js的代码如下图

效果图如下图:

三、Vue中样式style:vue中样式是动态绑定style,对象是不需要键值对的集合。

第一种使用方式是将键值对的对象写在data中,直接的动态绑定;

<h1 :style="styleObj1">The first H!!</h1>

第二种使用方式是多个键值对对象,使用数组方式,依次写入;

<h1 :style="[ styleObj1, styleObj2 ]">The first H1!!</h1>

在js的代码如下图:

效果图如下图:

四、v-if和v-show的使用

v-if的特点:每次都会重新删除或创建元素,有较高的切换性能消耗。

v-show的特点:每次不会重新进行DOM的删除和创建操作,只是切换了元素的 display:none 样式,有较高的初始渲染消耗。

v-if和v-show的使用:

如果元素涉及到频繁的切换,最好不要使用 v-if, 而是使用 v-show,如果元素可能永远也不会被显示出来被用户看到,则使用v-if。

1.在html代码中,如以下的代码:

<input type="button" value="toggle" @click="flag=!flag">
<h3 v-if="flag">这是用v-if控制的元素</h3>
<h3 v-show="flag">这是用v-show控制的元素</h3>

2.在data中定义一个flag,如以下的代码;

data(){
      return{
        flag: false,
  }
}

3.效果图如下图:

五、总结

1.在vue中使用样式class,有三种方式传递一个数组、数组中的三元表达式、使用对象来代替三元表达式,在为class使用v-bind绑定对象,对象属性是一个类名,属性的值是一个标识符。

2.在vue中使用样式style,vue中样式动态绑定style,对象是不需要键值对的集合,有两种方式将键值对的对象写在data中直接的动态绑定、多个键值对对象,使用数组方式,依次写入。

3.vue-show本质是标签display设置为none,控制隐藏,vue-if是动态的向DOM树内添加或者删除DOM元素。

4.代码比较简单,希望对你有帮助!