前端遇到的关键词

在javascript，id选择器和name属性可以直接获取、使用，不需要getElementById。两者容易冲突，不推荐使用。

  • margin
1
2
3
4
5
6
7
8
9
10
11
margin:10px 5px 15px 20px;
上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px
如果有两参数，就是上下边距是第一个，左右边距是第二个。
如果只有一个，则所有边距都是一样的。
auto(自动居中)
length(规定以具体单位计的外边距值，比如像素、厘米等。默认值是0px)
%(规定基于父元素的宽度的百分比的外边距)
这些单词是参数，直接使用。
  • add()方法

用于向select添加一个option元素。

1
2
3
4
5
6
7
8
9
10
11
12
selectObject.add(option,before)
 option	必需。要添加选项元素。必需是option或optgroup元素。
 before	必需。在选项数组的该元素之前增加新的元素。如果该参数是null，元素添加到选项数组的末尾。
 var y=document.createElement('option');
 y.text='Kiwi'
 var x=document.getElementById("mySelect");
 try{
   x.add(y,null); // standards compliant
 }
 catch(ex){
   x.add(y); // IE only
 }
  • 新建option
1
2
var option = new Option("Option text","Option value");
Option()构造函数接受两个参数：文本(text)和值(value);第二个参数可选
  • checkbox的勾选
1
2
var input=document.getElementsByTagName('input');可返回带有指定标签名的对象的集合。
input[i].checked=true;表示被勾选上。
  • onblur 事件
1
2
当用户离开input输入框时执行一段Javascript代码：
<input type="text" onblur="myFunction()">
  • name属性
1
2
getElementsByName() 方法可返回带有指定名称的对象的集合。
document.getElementsByName(name)
  • form表单的提交
1
2
3
onsubmit="return checkForm()"
return false时阻止提交表单
return 时提交表单
  • match() 方法

可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。

1
2
3
该方法类似indexOf()和lastIndexOf()，但是它返回指定的值，而不是字符串的位置。
stringObject.match(searchvalue)
stringObject.match(regexp)
  • substring()和substr()

两者都是截取字符串。

1
2
3
4
相同点:如果只是写一个参数，两者的作用都一样：都是是截取字符串从当前下标以后直到字符串最后的字符串片段。
不同点:
substr（startIndex,lenth)：第二个参数是截取字符串的长度（从起始点截取某个长度的字符串）；
substring（startIndex, endIndex）：第二个参数是截取字符串最终的下标（截取2个位置之间的字符串,‘含头不含尾’）。
  • css的clear属性
1
2
3
4
5
left  在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both  在左右两侧均不允许浮动元素。
none  默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。
  • Math 对象
1
2
3
4
5
6
7
8
9
10
11
12
Math 对象用于执行数学任务
var pi_value=Math.PI;
var sqrt_value=Math.sqrt(15);

abs(x)  返回数的绝对值。
floor(x)  对数进行下舍入。
ceil(x) 对数进行上舍入。
round(x)  把数四舍五入为最接近的整数。
sqrt(x) 返回数的平方根
max(x,y)  返回 x 和 y 中的最高值。
min(x,y)  返回 x 和 y 中的最低值。
random()  返回 0 ~ 1 之间的随机数。
  • box-shadow
1
2
3
4
5
6
7
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow           -必需的。水平阴影的位置。允许负值
v-shadow           -必需的。垂直阴影的位置。允许负值
blur               -可选。模糊距离
spread             -可选。阴影的大小
color              -可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset              -可选。从外层的阴影（开始时）改变阴影内侧阴影
  • oncontextmenu事件

当用户在div元素上右击鼠标时执行 JavaScript ：

1
2
<div oncontextmenu="myFunction()" contextmenu="mymenu">
οncοntextmenu="return false" ：禁止右键
  • event对象
1
2
3
x,y               鼠标相对于当前浏览器的位置   px  只读
clientX,clientY   鼠标当前相对于网页的位置  px  只读
offsetX,offsetY   鼠标当前相对于网页中的某一区域的位置  px  只读
  • charAt()方法

可返回指定位置的字符。

1
2
请注意，JavaScript并没有一种有别于字符串类型的字符数据类型，所以返回的字符是长度为 1 的字符串。
stringObject.charAt(index)
  • oninput事件
1
2
当用户向input中尝试输入时执行 JavaScript：
<input type="text" oninput="myFunction()">
  • onmouseup事件
1
2
在用户鼠标按键被松开时执行Javascript代码：
<p onmouseup="mouseUp()">Click the text!</p>
  • onmousedown事件
1
2
当用户按下鼠标按钮执行Javascript代码：
<p onmousedown="myFunction()">Click the text!</p>
  • document.documentElement

x.innerHTML=document.documentElement.nodeName;返回的是html标签名。

  • offsetWidth和clientWidth

offsetWidth为元素的width+元素的padding+边框的宽度。
clientWidth为元素的width+元素的padding。

  • offsetLeft和clientX

offsetLeft为元素的左边框到浏览器左边界的距离。
clientX为鼠标在浏览器的横坐标。

  • offsetTop和clientY

offsetRight为元素的上边框到浏览器上边界的距离。
clientY为鼠标在浏览器的纵坐标。

  • 新建cookie
1
2
3
4
5
6
7
8
9
10
$.cookie('the_cookie','the_value',{
    expires:7,
    path:'/',
    domain:'jquery.com',
    secure:true
})　
expires：（Number|Date）有效期；设置一个整数时，单位是天；也可以设置一个日期对象作为Cookie的过期日期；
path：（String）创建该Cookie的页面路径；
domain：（String）创建该Cookie的页面域名；
secure：（Booblean）如果设为true，那么此Cookie的传输会要求一个安全协议，例如：HTTPS；
  • fadeTo() 方法

逐渐改变被选元素的不透明度为指定的值（褪色效果）。

1
2
3
4
5
6
7
8
9
$(selector).fadeTo(speed,opacity,easing,callback)
speed       必需。规定褪色效果的速度。
 -"slow"
 -"fast"
opacity     必需。规定要淡入或淡出的透明度。必须是介于0.00与1.00之间的数字。
easing      可选。规定在动画的不同点上元素的速度。默认值为"swing"。
 -"swing" - 在开头/结尾移动慢，在中间移动快
 -"linear" - 匀速移动。
callback    可选。fadeTo() 方法执行完之后，要执行的函数。
  • prependTo() 方法

在被选元素的开头插入HTML元素。
如需在被选元素的结尾插入 HTML 元素，请使用appendTo()方法。

1
2
3
4
$(content).prependTo(selector)
content 必需。规定要插入的内容（必须包含 HTML 标签）。
注意：如果 content 是已存在的元素，它将从当前位置被移除，并在被选元素的开头被插入。
selector  必需。规定把内容预加到哪个元素上。
  • slideDown() 方法

通过使用滑动效果，显示隐藏的被选元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
$(selector).slideDown(speed,callback)
speed     可选。规定元素从隐藏到可见的速度（或者相反）。默认为 "normal"。
毫秒 （比如 1500）
"slow"
"normal"
"fast"
在设置速度的情况下，元素从隐藏到可见的过程中，会逐渐地改变其高度。
callback  可选。slideDown 函数执行完之后，要执行的函数。

设置水平滚动条位置
设置所有匹配元素的水平滚动条位置。
$(selector).scrollLeft(position)
position  可选。规定以像素计的新位置。
  • insertBefore() 方法
1
2
3
4
5
6
7
8
node.insertBefore(newnode,existingnode)
newnode 节点对象  必须。要插入的节点对象
existingnode  节点对象  必须。要添加新的节点前的子节点。

replaceChild() 方法可将某个子节点替换为另一个。
node.replaceChild(newnode,oldnode)
newnode Node 对象 必须。你要插入的节点对象。
oldnode Node object 必须。你要移除的节点对象。
  • node.cloneNode(deep)
1
2
deep  Boolean 可选。该方法将复制并返回调用它的节点的副本。如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。否则，它只复制当前节点。
返回值为拷贝的节点