javascript
2019-01-28 14:07:35 32 举报AI智能生成
jascript
作者其他创作
大纲/内容
js库
jQuery
目前最受欢迎的库
提供companion ui（用户界面） 和插件
prototype
web任务的简单API
moo tools
是一个框架，包含一些轻量级的动画函数
YUI - Yahoo! User Interface Framework，涵盖大量函数的大型库，从简单的 JavaScript 功能到完整的 internet widget。
Ext JS - 可定制的 widget，用于构建富因特网应用程序（rich Internet applications）。
Dojo - 用于 DOM 操作、事件、widget 等的工具包。
script.aculo.us - 开源的 JavaScript 框架，针对可视效果和界面行为。
UIZE - Widget、AJAX、DOM、模板等等。
Ext JS - 可定制的 widget，用于构建富因特网应用程序（rich Internet applications）。
Dojo - 用于 DOM 操作、事件、widget 等的工具包。
script.aculo.us - 开源的 JavaScript 框架，针对可视效果和界面行为。
UIZE - Widget、AJAX、DOM、模板等等。
jQuery
添加js库 网址下载jQuery.com
选择器
元素选择器 $("p") $("p.inte") $("p#inte")
属性选择器 $("[href]") $("[href='#']")
css选择器 $("p").css("background","red")
事件
$(document).ready(function)
将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)
触发或将函数绑定到被选元素的点击事件
$(selector).bdlclick(function)
触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)
触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)
触发或将函数绑定到被选元素的鼠标悬停事件
效果
隐藏 hide();
$("p").click(function(){$(this).hide();})
速度
slow 慢
fast 快
数值越大越慢
显示 show();
切换 toggle();
切换显示与隐藏
$(selector).toggle(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。
滑动
slideDown()
用于向下滑动元素
slideUp()
向上滑动元素
slideToggle()
可以在 slideDown() 与 slideUp() 方法之间进行切换。
淡入淡出
fadeIn()
淡入已隐藏的元素
fadeOut()
淡出可见元素
fadeToggle()
切换效果
fadeTo
允许渐变给定的不透明度（介于0到1之间）
动画
animate() 方法允许您创建自定义的动画
默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
停止动画 stop()
用于停止动画或效果，在它们完成之前
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。
callback() 在动画完成后执行的操作
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
});
alert("The paragraph is now hidden");
});
});
HTML的操作
获得内容和属性
text()
设置或返回所选元素的文本内容
html()
设置或返回所选元素的内容（包括html标记）
val
设置或返回表单字段和值
attr()
用户获取属性值
alert($("#w3s").attr("href"));
设置内容和属性
同上
添加元素
append()
方法在被选元素的结尾插入内容。
prepend()
方法在被选元素的开头插入内容。
after()
方法在被选元素之后插入内容。
before()
方法在被选元素之前插入内容。
删除元素
remove()
删除被选元素
empty()
从被选元素中删除子元素内容
设置css类
addClass()
向被选元素添加一个或多个类
removeClass()
从被选元素删除一个或多个类
toggleClass()
对被选元素进行添加、删除类的切换操作
css()
设置或返回同样式属性
jquery css()
$("p").css("backgrund","red")
$("p").css({"background":"red","font-size":"12px"})
尺寸
width()
不包括内边距、边框、外边距
height()
innerWidth()
包括内边距
innerHeight()
outerWidth()
包括内边距、边框
outerHeight()
遍历
parent()
返回被选元素的直接父元素
parents()
被选元素的所有祖先元素，他一路向上知道文档的根元素（<html>）
parentsUntil()
返回介于两个给定元素之间的所有祖先元素。
后代
children()
方法返回被选元素的所有直接子元素。
find()
返回被选元素的后代元素，一路向下直到最后一个后代
同胞
siblings()
返回被选元素的所有同胞元素。
next()
返回被选元素的下一个同胞元素。
nextAll()
返回被选元素的所有跟随的同胞元素。
nextUntil()
返回介于两个给定参数之间的所有跟随的同胞元素。
prev()
prevAll()
prevUntil()
过滤
first()
返回被选元素的首个元素
last()
返回被选元素的最后一个元素
eq()
返回被选元素中带有指定索引号的元素
filter()
允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
not()
返回不匹配标准的所有元素。
AJAX
与服务器交换数据的艺术，他在不重载全部页面的情况下，实现了对部分网页的更新。
get
post
基础语法
<script></script>
使用var 声明变量
一次声明一个变量 var a="..";
一次声明多个变量 var text="hi", text2="hello";
用同一个var 语句定义的变量不必具有相同的类型 var name="aa", age=12;
初始化变量不一定要赋值
规则
第一个字符必须是字母、下划线_、或者美元符号$
Camel 标记法 ：首字母是小写的，接下来的字母都以大写字符开头
Pascal 标记法：首字母是大写的，接下来的字母都以大写字符开头
匈牙利类型标记法 ：在以 Pascal 标记法命名的变量前附加一个小写字母（或小写字母序列），说明该变量的类型。例如，i 表示整数，s 表示字符串，如下所示“
关键字
关键字是保留的，不能用作变量名或函数名。
break
case
catch
continue
default
delete
do
else
finally
for
function
if
in
instanceof
new
return
switch
this
throw
try
typeof
var
void
while
with
case
catch
continue
default
delete
do
else
finally
for
function
if
in
instanceof
new
return
switch
this
throw
try
typeof
var
void
while
with
保留字
保留字在某种意思上是为将来的关键字而保留的单词。因此保留字不能被用作变量名或函数名。
abstract
boolean
byte
char
class
const
debugger
double
enum
export
extends
final
float
goto
implements
import
int
interface
long
native
package
private
protected
public
short
static
super
synchronized
throws
transient
volatile
boolean
byte
char
class
const
debugger
double
enum
export
extends
final
float
goto
implements
import
int
interface
long
native
package
private
protected
public
short
static
super
synchronized
throws
transient
volatile
值
原始值
存储在栈（stack）中的简单数据段，也就是说，它们的值直接存储在变量访问的位置
引用值
存储在堆（heap）中的对象，也就是说，存储在变量处的值是一个指针（point），指向存储对象的内存处。
typeof 运算符查看数据类型（undefined/null/boolean/number/string）
undefined
只有一个值，即 undefined,当声明的变量未初始化时，该变量的默认值是 undefined。
null
另一种只有一个值的类型是 Null，它只有一个专用值 null，即它的字面量。值 undefined 实际上是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的。
boolean
即使 false 不等于 0，0 也可以在必要时被转换成 false，这样在 Boolean 语句中使用两者都是安全的。
number
这种类型既可以表示 32 位的整数，还可以表示 64 位的浮点数。
string
输出
document.write("aa"); 会覆盖整个页面
alert("aa"); 弹窗
xx.innerHTML=“aa”; 改变html的内容
变量
变量是存储信息的容器
var x=2;
var name="jon",age="12",job="CEO”;
var x; x的值为undefined
数据类型
字符串
一个字母，一个单词，一句话都是字符串
字符字面量
\n
换行
\t
制表符
\b
空格
\r
回车
\f
换页符
\\
反斜杠
\`
单引号
\"
双引号
\0nnn
八进制
\xnn
十六进制
\unnnn
十六进制代码
数字
整数（做多为15位）
带有小数点的数字（小数的最大数是17，但是浮点运算并不总是100%正确）
通过极大或极小表示的数字（123e5）
进制
二进制
以2为进制的计数单位，110000
八进制
以8为进制的计数单位，最大数为7 070
十进制
经常见到的计数单位
十六进制
以16为进制的计数单位，10~16为abcdef
boolean 布尔
true
false
array() 数组
["",""]
对象
由花括号分割 var person={};
null
清空变量
undefined
表示变量不含有值
转换
转换成数字
parseInt()
把值转换成整数
parseInt(string 【必须这个值是要转换的数据】, radix【2-36 基数】)
parseFloat()
把值转换成浮点数，必须是十进制的值
对象
所有事物都是对象
函数
函数是由事件驱动的或者当他被调用时执行的可重复使用的代码块
function functionname{...}
全局变量
网页上所有的脚本和函数都能访问他
页面关闭后被删除
局部变量
函数运行完毕，局部变量就会被删除
运算符
算术运算符
+ 加
- 减
* 乘
/ 除
% 求余数（保留整数）
++ 累加
-- 累减
赋值运算符
= 赋值
+=
-=
*=
/=
%=
比较运算符
== 等于
=== 全等（值和类型）
！= 不等于
> 大于
< 小于
>= 大于或等于
<= 小于或等于
逻辑运算符
&& and
|| or
! not
算术值
常数 Math.E
圆周率 Math.PI
2的平方根 Math.SQRT2
1/2的平方根 SQRT1_2
2的自然对数 Math.LN2
10的自然对数 Math.LN10
以2为底的e的对数 Math.LOG2E
以10为底的e的对数 Math.log10E
一元运算符
delete
运算符删除对以前定义的对象属性或方法的引用。
位运算符
逻辑运算符
not
and
or
语句
if 语句
只有当指定条件为true时，使用该语句来执行代码
if...else 语句
当条件为true时执行代码，当条件为false时执行的其他代码
if...else if...else语句
使用该语句来选择多个代码之一来执行
switch(){case:1...;default:..} 语句
使用该语句来选择多个代码之一执行
使用break来阻止代码自动的向下一个case运行。
default 规定不匹配不存在时做的事情
continue 中断循环中的迭代，继续下面的循环
for 循环
可以将代码执行指定的次数
for 循环代码块一定的次数
for/in 循环遍历对象的属性
while 当指定的条件为true时循环指定的代码块
do/while 同样当指定的条件为true时循环指定的代码块
错误
try 语句测试代码块的错误
catch 语句处理错误
throw 语句创建自定义的错误
DOM 文档对象模型
通过id找打html 元素
document.getElementById("id")；
改变内容
document.getElementById("id").innerHTML="new value"
改变css
document.getElementById("id").style.color="blue";
通过标签名找到html元素
document.getElementsByTagName("p")[0];
通过类名找到html元素
document.getElementsByClassName("class")[0];
事件 对事件作出反应
当用户点击鼠标时 onclick
当网页已加载时 onload
离开页面时 onunload
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时 onchange
当提交html表单时
当用户出发按键时
鼠标移入移出 onmouseover onmouseout
鼠标点击事件 onmousedown onmouseup
节点
添加
var para = document.createElement("p");
var node = document.createTextNode("这是新段落");
para.appendChild(node);
删除
parent.removeChild(child);
child.parentNode.removeChild(child); 删除父元素
正则表达式 RegExp
test()
方法检索字符串中的指定值。返回值是 true 或 false。
exec()
检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。
compile()
既可以改变检索模式，也可以添加或删除第二个参数
浏览器对象模型
尺寸
window.innerHeight 浏览器窗口的内部高度
ie(5,6,7,8) document.documentElement.clientHeight
document.body.clienHeight
window.innerWidth 浏览器窗口的内部宽度
ie(5,6,7,8) document.documentElement.clientWidth
document.body.clienWidth
打开新窗口
window.open()
关闭当前窗口
window.close()
移动当前窗口
window.moveTo()
调整当前窗口的尺寸
window.resizeTo()
可用的屏幕
宽度 screen.availWidth
高度 screen.availHeight
获取主机信息
location.hostname 返回web主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回web主机的端口（80 或 443）
location.protocol 返回所有使用的web协议（http:// https://）
location.href 返回当前页面的url地址
location.pathname 返回当前页面返回的文件路径
浏览器历史
window.history 对象在编写时可不使用window这个前缀
history.back() 与浏览器点击后退按钮相同
history.forward() 与浏览器中点击按钮向前相同
浏览器弹框
警告框
alert("文本");
用户需要点击确认按钮才能继续进行操作
带有折行的警告框
子主题
确认框
confirm("文本");
用户需要点击确认或者取消按钮才能继续进行操作
确认返回true, 点击取消返回false
提示框
prompt("文本","默认值");
点击确认返回输入值，点击取消返回null
cookie
名字cookie
密码cookie
日期cookie
0 条评论
下一页
