JavaScript：
前言：JS是目前对流行的脚本语言；用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。
可用于HTML、Web
1. 用处和目的：
(1) 写入HTML输出；
(2) 对时间做出反应；
(3) 改变HTML内容；
(4) 改变HTML图像；
(5) 改变HTML样式；
(6) 验证输入；
(7) ...
2. JS基础：
(1) 实现（标签<script></script>）：
① 放在<body>中；
② 放在<head>中；
③ 外部js： <script src=”myScript.js”></script>
(2) JS输出：
① 操作HTML元素：（document.getElementById(id) .innerHTML=”” 方法）
② 写到文档输出：
使用 document.write() 仅仅向文档输出写内容。
如果在文档已完成加载后执行 document.write，整个HTML 页面将被覆盖
(3) JS语句：代码/代码块（逐行执行），对大小写敏感；
(4) JS注释：//和/**/，与JAVA一致。
(5) JS变量（对大小写敏感）：var。
(6) JS数据类型：字符串、数字、布尔、数组、对象、Null、Undefined；
声明变量类型：
var carname = new String;
var x = new Number;
var y = new Boolean;
var cars = new Array;
var person = new Object;
(7) JS对象（拥有属性和方法的数据）：
(8) JS函数：function关键字。
(9) JS运算符：赋值和加值。
(10) JS比较运算符、逻辑运算符和条件运算符
(11) 其他语句：
① If() else{}；
② switch；
③ 循环：for、for/in、while、do/while；
④ break（跳出当前循环for）、continue（跳出当前迭代if、继续循环）
(12) 错误：try...catch / throws；
(13) JS表单验证/e-mail验证：
3. JS对象详细：
(1) 数字：
(2) 字符串：length()、indexOf()、match()、replace()方法等。
(3) 日期：定义->data()对象、操作->setFullYear()方法、比较
(4) 数组：定义->Array()对象、访问、修改（合并concat()、组成join()、排序sort()）
(5) 逻辑：
(6) 算数：math对象（方法：round()、random()、max()、min()）
(7) 正则表达式：RegExp()对象：test()方法、exec()方法和compile方法。
4. HTML DOM树
(1) 查找元素：
document.getElementById();
/ document.getElementById().getElementByTagName()
(2) 改变HTML元素中的内容（innerHTML）；
(3) 改变属性：.attribute；
(4) CSS改变HTML元素样式：
Document.getElementById().style.property = new style;
(5) DOM事件：onclick = ;
相应事件：用户点击鼠标、网页已加载、图像已加载、鼠标移到到元素上方、输入字段改变、提交HTML表单、用户触发按键...
(6) 添加和删除节点：
5. HTML Window：
(1) 说明：BOM（浏览器对象模型），window方法：open()、close()、moveTo()和resizeTo()。
(2) screen对象：包含有关用户屏幕的信息
可用高度：availHeight；可用宽度：availWidth。
(3) Location对象：获得当前页面的地址（url），并定义到新的页面
① .href：返回当前URL；
② .pathname：返回url的路径名；
③ .assign：加载到新的文档；
(4) history对象：包含浏览器的历史
① .back()：（与浏览器后退按钮一致）
② .forward()：（与浏览器前进按钮一致）
(5) navigator对象：包含有关访问者浏览器的信息
(6) JS消息框：
① 警告框alert(“文本”)
② 确认框comfirm(“文本”)
③ 提示框prompt(“”文本,”默认值”)
(7) 计时事件：
① 未来的某时执行代码：var t = setTimeout(“js语句”,毫秒);
② 取消：clearTimeout();
(8) 识别用户：cookie（名字、密码、日期）
6. JS库：
(1) jQuery（最流行）
(2) Prototype（执行常见web简单的api）
(3) MooTools（更为简单框架）
(4) 其他：YUI、Dojo等...
7. JQuery（客户端脚本，简写$）
(1) 说明：是一个js库，测试js框架库,“写的更少、做的更多”；
(2) 功能：如何选择HTML元素，以及执行类型隐藏、移动等操作。
(3) 下载和网页上直接访问（微软或谷歌加载CDN，会减少加载时间，提高加载速度）：
(4) 实例：
<html>
<head>
<script type=”text/javascript” src=”jQuery.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“p”).click(function(){
$(this).hide(); //隐藏
});
});
</head>
<body>
<p>...</p>
</body>
</html>
(5) 基础语法：
文档就绪函数：$(document).ready(function){}
基础语法：$(selector).action()
① $(this).hide()：隐藏当前的HTML元素；
② $(“p”).hide()：隐藏所有<p>元素；
③ $(“#test”).hide()：隐藏id=”test”的元素；
④ $(“.test”).hide()：隐藏class=”test”的元素；
(6) 选择器：
① 元素选择器（CSS选择器）：
1) $(“p”)：选择<p>元素；
2) $(“p.into”)：选择class=”into”的<p>元素；
3) $(“p#demo”)：选择id=”demo”的<p>元素；
4) $(“p”).css(“background-color”,”red”)：将所有p元素的背景颜色改为红色；
② 属性选择器（Xpath表达式）：
1) $("[href]")：选择带有href属性的元素；
2) $("[href]=”#”")：选择带有href属性等于”#”的元素；
(7) jQuery效果：
① 隐藏和显示：
1) hide()方法
2) show()方法
3) toggle()方法（可以切换）
② 淡入淡出：
1) fadeIn()方法：（时长slow、时间1000等）
2) fadeOut()方法：
3) fadeToggle()方法：（可以切换）
4) fadeTo()方法：渐变为不透明度；
③ 滑动：
1) slideDown()：向下滑动；
2) slideUp()：向上滑动；
3) slideToggle()：可以切换；
④ 动画：animate()方法；
⑤ stop()：滑动或动画；
⑥ Callback()：是一个在hide操作完成后被执行的函数；
⑦ 链接技术：
$(“#p1”).css(“color”,”red”).slideUp(2000).slideDown(2000);
(8) jQuery HTML：
① jQuery DOM操作（DOM定义了访问HTML和XML文档的标准）：
1) 获取（设置）内容：text()、html()和val()；
2) 获取（设置）属性：attr()。
② 添加：
1) append()：结尾插入内容；
2) prepend()：开头插入内容；
3) after()：
4) before()：
③ 删除：
1) 删除被选元素：remove()；
2) 删除被选元素子元素：empty()；
④ CSS类：
1) addClass()；
2) removeClass()；
3) toggleClass()；
4) css()
⑤ 尺寸：width()、height()...
(9) jQuery遍历：（多种遍历DOM的方法）
树遍历
向上遍历（parent()）、向下遍历(child())、水平遍历（siblings()、next()）
(10) jQuery AJAX（异步js+XML）：->谷歌地图、腾讯微博、优酷视频、人人网
① 功能：（在不重载整个网页的情况下，AJAX通过后台加载数据，实现对网页的更新）
② 方法：load()方法
$(selector).load(URL, data, callback);
③ get()方法和post()方法：（通过HTTP GET 或POST 请求从服务器请求数据）
(11) noConflict()方法：（在页面上同时使用jQuery和其他框架）
$.noConflict();
扫一扫
311
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
