异步编程，即非阻塞地执行代码，其实可以用来加载一些附属功能的代码，比如分享按钮代码、GA分析代码等。
建议将script标签放置在就是为了不让JS代码阻塞DOM的渲染，不会在JS执行期间，网页一片空白卡顿的糟糕体验。
今天学习到GA的异步加载代码：
[javascript]
(function() {
var ga = document.createElement(‘script’); ga.type = ‘text/javascript’; ga.async = true;
ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl‘ : ‘http://www‘) + ‘.google-analytics.com/ga.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(ga, s);
})();
[/javascript]
动态生成script标签并利用HTML5才新增的async属性设置为异步(可不写，但最好加上)，加上用匿名函数封装，避免了内部变量泄露到外部污染全局。
这份代码可以兼容不支持HTML5中async属性的浏览器，而如果只考虑现代浏览器的话，其实可以偷懒，直接给要异步加载的script一个async属性即可实现上述异步加载的效果了：
jQuery碎片积累
-
td:last与td:last-child的区别
$(‘td:last’）选择所有td元素中的最后一个
$(‘td:last-child’)选择tr下最后一个子元素td，有多个
-
让页面内所有的外链都是在新窗口中打开
[javascript]
$(‘a[href^="http://"]').attr("target","_blank");
[/javascript]
-
禁用表单的提交按钮
[javascript]
$("form").submit(function(){
$(":submit",this).attr("disabled","disabled");
});
[/javascript]
-
绝对定位与相对定位
W3CFUNS解释
属性为relative的元素可以用来布局页面，属性为absolute的元素用来定位某元素在父级中的位置
W3CFUNS实例
-
如果用定位来布局页面，父级元素的position属性必须为relative，而定位于父级内部某个位置的元素，最好用absolute，因为它不受父级元素的padding的属性影响，当然你也可以用 relative，计算的时候不要忘记计算padding的值。
-
-
$(“#test”).each(i,item)方法:
函数中的this关键字指向一个不同的DOM元素
返回 ‘false’ 将停止循环 (就像在普通的循环中使用 ‘break’)。返回 ‘true’ 跳至下一个循环(就像在普通的循环中使用’continue’)。
利用each给元素设置不同样式：
$(“.laispace”).each(function(i){this.style.color=[‘#f00’,’#0f0’,’#00f’][i]});
$.each(obj, fn)
通用例遍方法，可用于例遍对象和数组。
-DOM和JQ对象互转时要注意：
$(document.getElementById(‘test’)) 相当于$(“#test”);
$(“#test”)[0]或者$(“#test”).get(0)
注意：eq()返回JQ对象，get()返回DOM对象，而JQ对象只能调用JQ方法，DOM对象同理
$(“div”).eq(2).html();//调用jquery对象的方法
$(“div”).get(2).innerHTML;//调用dom的方法属性-$(“$bt1”).click(function(){
$(“#bt2”).click(); //点击按钮1时也触发按钮2
})
-
扩展自定义功能:
[javascript]
$.extend({
min: function(a, b){return a < b?a:b; },
max: function(a, b){return a > b?a:b; }
});//为在jquery的命名空间中扩展了min,max两个方法
//可以像下面这样使用
var a = 10,b=20;
var max = $.max(a,b);//20
var min = $.min(a.b);//10
[/javascript]
Javascript碎片积累
-
JS中的Image对象：
[javascript]
function getImageSize(imageEl) {
var i = new Image();
i.src = imageEl.src;
return new Array(i.width, i.height);
}
[/javascript]
image对象现在一般常用来预加载一些图片，先将其装入 DOM，等到需要的时候，直接调用，省掉等待的时间，直接显示出来。
需要注意的是：src 属性一定要写到 onload 的后面，否则程序在 IE 中会出错。
-
for 和 class 是 JavaScript 中的关键字，所以在 JavaScript 中这两个属性名称分别用 htmlFor 和 className 代替。
[javascript]
function getAttr(el, attrName){
var attr = {‘for’:’htmlFor’, ‘class’:’className’}[attrName] || attrName;
}
[/javascript]
-
交换两个变量值的巧妙方法，利用数组：
foo = [bar, bar=foo][0]; // 多巧妙啊！编程的时候不要忘记思考，否则你就只是一个完成工作的机器。
-
双感叹号的用法：!! 一般用来将后面的表达式强制转换为布尔类型的数据（boolean），也就是只能是true或者false。
-
注意一些类型转换：
[javascript]
a=parseInt(“1234″)
a=”1234″-0 //转换为数字
b=1234+”" //转换为字符串
c=someObject.toString() //将对象转换为字符串
[/javascript]
其中第1种、第4种为显式转换，2、3为隐式转换
布尔型的转换，javascript约定规则为
false、undefinded、null、0、”” 为 false
true、1、”somestring”、[Object] 为 true
-
在标准的事件绑定中绑定事件的方法函数为 addEventListener,而IE使用的是attachEvent
-
jQuery.trim()去除字符串前后的空格
-
jQuery.inArray()判断元素是否在数组中
[javascript]
var arr = ["html", "css", "js", "jquery"];
$.inArray(‘js’,arr);
[/javascript]
-
编写一个简单的 jQuery 插件（模板）
[javascript]
//You need an anonymous function to wrap around your function to avoid conflict
(function($){
//Attach this new method to jQuery
$.fn.extend({
//This is where you write your plugin’s name
pluginname: function() {
//options
var defaults = {
option1: "default_value"
}
var options = $.extend(defaults, options);
//a public method
this.methodName: function () {
//call this method via $.pluginname().methodName();
}
//Iterate over the current set of matched elements
return this.each(function() {
var o = options;
//code to be inserted here
});
}
});
//pass jQuery to the function,
//So that we will able to use any valid Javascript variable name
//to replace "$" SIGN. But, we’ll stick to $ (I like dollar sign: ) )
})(jQuery);
[/javascript]
-
小技巧：在浏览器地址栏中输入一行代码：data:text/html, <html contenteditable> ，回车即可把浏览器变临时编辑器（需要浏览器支持 HTML5 属性 contenteditable） 原文
-
所有JS对象共享的方法是toString()，返回该对象序列化格式后的字符串
-
元素的client属性(只读)指元素的内容部分再加上padding的大小，不包括border和滚动条占用的空间，故document元素的clientHeight和clientWidth属性，就代表了网页的相对大小。
[javascript]
// 获得网页的相对大小
function getViewport(){ // 页面加载完成后才能运行
if (document.compatMode == "BackCompat"){
return {
// IE6 quirks模式
width: document.body.clientWidth,
height: document.body.clientHeight
}
} else {
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
}
[/javascript]
[javascript]
// 获取网页的绝对大小
// 如果网页内容能够在浏览器窗口中全部显示,不同浏览器有不同的处理，这两个值未必相等,要取它们之中较大的那个值
function getPagearea(){
if (document.compatMode == "BackCompat"){
return {
width: Math.max(document.body.scrollWidth,
document.body.clientWidth),
height: Math.max(document.body.scrollHeight,
document.body.clientHeight)
}
} else {
return {
width: Math.max(document.documentElement.scrollWidth,
document.documentElement.clientWidth),
height: Math.max(document.documentElement.scrollHeight,
document.documentElement.clientHeight)
}
}
}
[/javascript]
-
每个元素都有offsetTop和offsetLeft属性，表示该元素的左上角与父容器（offsetParent对象）左上角的距离。所以，只需要将这两个值进行累加，就可以得到该元素的绝对坐标。
// 获取绝对位置的横坐标和纵坐标
// 由于在表格和iframe中，offsetParent对象未必等于父容器，所以以下函数对于表格和iframe中的元素不适用。
[javascript]
function getElementLeft(element){
var actualLeft = element.offsetLeft;
var current = element.offsetParent;
while (current !== null){
actualLeft += current.offsetLeft;
current = current.offsetParent;
}
return actualLeft;
}
function getElementTop(element){
var actualTop = element.offsetTop;
var current = element.offsetParent;
while (current !== null){
actualTop += current.offsetTop;
current = current.offsetParent;
}
return actualTop;
}
[/javascript]
// 获取网页元素的相对位置:绝对坐标减去滚动条滚动的距离
[javascript]
function getElementViewLeft(element){
var actualLeft = element.offsetLeft;
var current = element.offsetParent;
while (current !== null){
actualLeft += current.offsetLeft;
current = current.offsetParent;
}
if (document.compatMode == "BackCompat"){
var elementScrollLeft=document.body.scrollLeft;
} else {
var elementScrollLeft=document.documentElement.scrollLeft;
}
return actualLeft-elementScrollLeft;
}
function getElementViewTop(element){
var actualTop = element.offsetTop;
var current = element.offsetParent;
while (current !== null){
actualTop += current. offsetTop;
current = current.offsetParent;
}
if (document.compatMode == "BackCompat"){
var elementScrollTop=document.body.scrollTop;
} else {
var elementScrollTop=document.documentElement.scrollTop;
}
return actualTop-elementScrollTop;
}
// scrollTop和scrollLeft属性是可以赋值的
[/javascript]
-
-
object.prop和object[‘prop’]是等价的，当属性是带空格的string时就只能用方括号了：person[‘first name’];
-
for…in 循环输出的属性名顺序不可预测,使用之前先检测对象是否为null 或者 undefined
-
hasOwnProperty是js中唯一一个处理属性但是不查找原型链的函数
[javascript]
Object.prototype.prop = ‘propsss’;
var obj = {und:undefined};
obj.prop; // propsss
‘und’ in obj; // true
obj.hasOwnProperty(‘prop’); // false
obj.hasOwnProperty(‘und’); // true
//只有hasOwnProperty可以给出正确和期望的结果，尤其在遍历一个对象时
//除了hasOwnProperty外，没有其他方法可以排除原型链上的属性（不是定义在对象自身上的属性）
//如果hasOwnProperty被占用呢？来看：
var obj = {
hasOwnProperty: function(){
return false;
},
prop: ‘this is bad…’
};
obj.hasOwnProperty(‘prop’); // 总是返回false
//这样解决：
{}.hasOwnProperty.call(obj,’prop’); // 返回true
[/javascript]
-
Object的每个实例都具有下列属性方法：
1.Constructor：保存着用于创建当前对象的函数 上面例子 构造函数就是 Object()
2.hasOwnProperty(prop):检查给定的属性是否在当前对象实例中（而不是在实例的原型中）。作为参数的属性必须以string形式指定
3.isPrototypeOf(object):用于检查传入的对象是否是另一个对象的原型。
4.propertyIsEnumerable(propertyName)：用于检查给定的属性是否能够使用for in语句
5.toLocaleString():返回对象的字符串表示，与环境的地区对应
6.toString():同上
7.valueOf(): 返回对象的字符串、number、Boolean表示。通常与toString()相同
-
javascript中的乘法问题：
可用 10000 作为基数确保精度，如 31.12 10000 9.7 / 10000
-
function语句在解析时会被提升，对代码求值时js引擎在第一遍会声明函数并将它们放到源代码树的顶部。
[javascript]
alert(sum(10,10))
function sum(n1,n2){
return n1+n2;
}
//单独使用下面代码时，函数表达式会出错：
alert(sum(10,10));
var sum = function (n1,n2){
return n1+n2;
}
[/javascript]
命名函数表达式即被认为是函数声明也被认为是函数表达式
[javascript]
typeof g; // "function"
var f = function g(){};
//上面这个例子论证了 jScript 是如何把一个命名函数表达式处理成一个函数声明的
//在函数声明发生之前就把 g 给解析了 【在IE中检测】
[/javascript]
-
this是在函数调用时才被确定的而不是定义的时候
[javascript]
var Dog = {
toString: function() { return ‘dog’;},
fn: function() { alert(this);},
};
var Cat = {
toString: function() { return ‘cat’;}
};
Dog.fn(); // dog
Dog‘fn’ // dog
Cat.fn = Dog.fn;
Cat.fn(); // cat
var func = Dog.fn;
func(); // window
[/javascript]
-
apply和call的区别，在于apply用数组传递参数，而call用多参数逗号传递参数：
[javascript]
function myFunc(arg1,arg2,arg3){
// code …
}
myFunc.apply(null,[arg1,arg2,aeg3]);
myFunc.call(null,arg1,arg2,arg3);
// 第一个参数指定调用函数myFunc的对象
[/javascript]
-
构造函数的理解：当new修饰符修饰函数时，this就会指向新对象，该对象会自动返回，称之为构造函数：
[javascript]
function Person(name){
this.name = name;
this.sayName = function(){
alert("我的大名是：" + this.name);
}
}
var person1 = new Person("xiaolai"); // 构造函数返回一个对象，赋值给变量 xiaolai
person1.sayName(); // 『我的大名是：xiaolai』
[/javascript]
-
March 6, 2014—添加—
- 获取元素的classList:
[javascript]
selector.classList 获取所有的class
selector.clasList.add(value); // 添加类
selector.clasList.remove(value); // 删除类
selector.clasList.toggle(value); // 切换类
selector.clasList.contains(value); // 判断是否包含类
[/javascript]
- 获取DOM中获得了焦点的元素
[javascript]
document.activeElement
[/javascript]
- 判断DOM是否加载完成
[javascript]
document.readyState // ‘complete’ or ‘loading’
[/javascript]
- 判断浏览器采用了哪种渲染模式
[javascript]
document.compatMode // ‘CSS1Compat’ 为标准模式，’BackCompat’ 为混杂模式
[/javascript]
- 判断浏览器采用的字符集
[javascript]
document.defaultCharset // 默认字符集
document.charset // 采用的字符集
[/javascript]
- 访问所有自定义属性
[javascript]
selector.dataset.myid; // 获取div[data-myid=‘100’]中的100
[/javascript]
- 将某个元素调入视窗内
[javascript]
selector.scrollIntoView()
[/javascript]
- 返回元素的子元素节点（不包括其他节点）
[javascript]
selector.children // 是HTMLCollection的一个实例
[/javascript]
获取视窗大小
[javascript]
function getViewport() {
// 判断是否混杂模式
if (document.compatMode == ‘BackCompat’) {
return {
width: document.body.clientWidth,
height: document.body.clientHeight
}
} else {
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
}
[/javascript]获取元素在视窗内的位置
[javascript]
selector.getBoundingClientRegt() // 返回对象含属性 left right top bottom
[/javascript]获取页面的样式表
[javascript]
document.styleSheets;
document.styleSheets[0].disabled = true; // 禁用第一个样式表
[/javascript]
JSON数据类型的学习
初学AJAX，今天写一个表单验证，发现$.ajax()的success回调函数总是不会执行，而error毁掉函数则总是执行。
我是先POST表单账号密码给php文件，该php文件返回数据（我直接返回了常量供自己测试），然后在JS里获得data.login_email。
发现data.login_email得到的总是undefined，为什么呢？由于对JSON格式不是很熟悉，所以不断调试不断查资料，最后发现：
原来自1.4版本的jQuery开始,JSON写的不规范可能导致错误!
“json”: Evaluates the response as JSON and returns a JavaScript object. In jQuery 1.4 the JSON data is parsed in a strict manner; any malformed JSON is rejected and a parse error is thrown. (See json.org for more information on proper JSON formatting.
查资料学习了JSON格式后，修改后台php代码为：
[php]
<?php
header(‘Content-type: text/json’);
$results = array (
"login_email" => "0",
"login_password" =>" 0"
);
echo json_encode($results);
?>
[/php]
再修改前台代码则为：
[javascript]
$(‘#login-btn’).click(function(){
var emailVal = $(‘#login-email’).val();
var passwordVal = $(‘#login-password’).val();
//点击登陆按钮时进行验证
$.ajax({
type: "POST",
data:{"emailVal":emailVal,"passwordVal":passwordVal},
dataType: "JSON",//原来声明了json数据类型就必须严格书写JSON！
url: "login_check.php",
success: function(data){
if(data.login_email==0){//邮箱错误
$(‘#login #login-email’).prev().show();
$(‘#login #login-email’).parent().parent().addClass(‘warning’);
}
if(data.login_password==0){//密码错误
$('#login #login-password').prev().show();
$(‘#login #login-password’).parent().parent().addClass(‘error’);
}
},error:function(XMLResponse){
alert("出错！错误信息为"+XMLResponse.responseText)}
});
return false;//禁止登陆按钮的默认行为
});//click（）结束
[/javascript]
总结出一点JSON规范为：
1）名称：用双引号引起，如[javascript]
data:{"emailVal":emailVal,"passwordVal":passwordVal}
[/javascript]
2）字符串：用用双引号引起，如下：
[php]
<?php
header(‘Content-type: text/json’);
$results=array("a" => "apple", "b" => "banana", "o" => "orange");
echo json_encode($results);
?>
[/php]
3）boolean类型不加引号，其他都要加（包括数字）
4）前后台使用的数据类型应该一致，如后台使用json_encode($results);前台使用dataType:JSON;来声明
5）若定义了dataType为JSON就必须使用严格语法的JSON，否则success回调函数就不执行！
— 2013-10-05 更新—-
注意JSON字符串与JSON对象的区分：
[javascript]
// 这是JSON字符串
var foo = ‘{ "prop": "val" }’;
// 这是对象字面量
var bar = { "prop": "val" };
[/javascript]
JSON有非常严格的语法，在string上下文里{ “prop”: “val” } 是个合法的JSON，但{ prop: “val” }和{ ‘prop’: ‘val’ }确实不合法的。所有属性名称和它的值都必须用双引号引住，不能使用单引号。另外，即便你用了转义以后的单引号也是不合法的。
参考：根本没有”JSON”对象这回事
web前端开发入门提高 js书籍
WEB前端研发工程师，在国内算是一个朝阳职业，这个领域没有学校的正规教育，大多数人都是靠自己自学成才。本文主要介绍一些web开发的书籍，目的是给想了解JavaScript或者是刚接触JavaScript的朋友，介绍如何通过循序渐进的看书来学习javascript。
一. 入门级 ：就是有一定的基础(比如最常见的HTML标签及其属性、事件、方法;最常见的CSS属性;基础的JavaScript编程能力)，能够完成一些简单的WEB前端需求。
推荐：《JavaScript dom 编程艺术》
理由：此书绝对是入门的好书，本人也是在接触JS一段时间后才看的这本书。此书从JS的历史 – JS基础语法知识 – DOM介绍和简单的使用。
评价：简洁，实用，详细，易懂，书不厚，相信很快就能看完。
下载地址:http://www.kuaipan.cn/file/id_66867997939073035.html
二.初级开发：不要苛责代码的对错严谨，毕竟每个程序员都有这样的一个过程，就是这个级别的特征。
推荐：《javascript高级程序设计》(第二版)
理由：这本书的作者是 Nicholas C.Zakas ,博客地址是 http://www.nczonline.net/ ,大家可以去多关注，雅虎的前端工程师，是YUI的代码贡献者，可想而知这本书得含金量，他出的书都广受好评。这本书已经出了第二版，而且与第一版相比内容更新很大，直接第二版就行。不要被书名的“高级”唬住，只要有JS基础语法知识和DOM基础知识就行，而且本书开始阶段还是介绍JS和DOM的语法知识。
评论：重点推荐一下第五章(类型),第六章(OOP),第七章(匿名),多看几遍,至少要完全看明白，能为以后进阶打好基础，个人感觉这几章是本书的精华所在。这本书在入门的时候看节奏会快了一些，所以不建议初学者看，可是相对于我一会要介绍的书又算基础一点，所以建议先阅读完这本书，对浏览器兼容和语法知识有一定了解之后再往下阅读。
下载地址:http://www.kuaipan.cn/file/id_66867997939073036.htm
推荐：《高性能 JavaScript》《JavaScript语言精粹》
理由：先看的是《高性能JS》，这本书还是 Nicholas C.Zakas 所著，经典之作，书中大量举例了各种不同写法的JavaScript在浏览器中的性能情况，对规范JavaScript代码和提升性能有很好的帮助，最后提到了很多工具和性能测试的方法，都是灰常灰常有实际作用的，看得出作者很厚道(好吧,偶承认了,偶是他的粉丝)^_^,记忆最深的一句话:”如果 JavaScript 执行了几秒钟,那么很可能是你做错了什么”;；
《语言精髓》和《高性能》有少部分关键知识都重复提到了，可是为什么要推荐这本书，因为本书对JS语言本质的描述太棒了，这是一本介绍JavaScript语言本质的权威书籍，从 “对象”，“函数”，“继承”，“数组”等等多个重要知识着手。我补一句话 – 本书需要反复阅读。
评论：都是好书，都很薄，而且所说的内容只要有基础都不难。相信读完之后会对JS又有新的认识，且对以后的代码规范和浏览器差异性等高级问题有了新的认识，如果读完之后会有种被灌顶的感觉，那么恭喜你，你离中级不远了。
下载地址:http://www.kuaipan.cn/file/id_66867997939073044.html
三.中级开发：“中级开发人员的标志就是在高级开发或架构师较少的指导下高质量的完成工作，并对产品或项目有自己的想法与理解”。
强烈推荐：《JavaScript DOM高级程序设计》
理由：此书灰常犀利，本人一共看了近半年的时间，已反复阅读多次。说实话，这本书的翻译一般，代码也有少许错误，可是这不影响这本书的强大，通过学习本书，可以理解一个JS的库如何产生，自己动手写一个简单的自己的JS库，如果你打算研究其他的JS库或者正在研究其他的JS库，那么这本书会使你的理解达到新的高度，进阶高级必读，写库必读。
评论：异常强大的一本JS巨作，此书不薄，强烈推荐。
下载地址: 收集中
强烈推荐：《JavaScript设计模式》
理由：异常生猛的一本书，看书名带“设计模式”就知道，这本书想要读明白有点困难，本人自己感觉，只要某书一带“模式”这两字，反正就简单不了。本书对JS的“模仿接口”，“封装”，“继承”，“链式调用”，“工厂模式”等各种具体的设计模式及其在JavaScript 语言中的应用进行了详细的介绍，运用设计模式使代码更模块化、更高效并且更易维护。
评论：书不厚，可真的是内容丰富且高深，强烈建议购买。
下载地址:http://www.kuaipan.cn/file/id_66867997939073049.html
推荐：《高性能网站建设指南》《高性能网站建设进阶指南》
理由：在读完前几本书之后我们对前端的性能和自己的代码的效率已经达到相当的高度了，然后我们在接触一些前端工程师的一些精髓。本书对HTTP请求，CDN，内容缓存和一些web开发中常见问题进行讲解。
评论：书都不厚，可是说的都是比较实用的东西，可是用不用的上还得看个人和项目需要了。
以上就是整理WEB前端开发前辈们的一些JS相关书籍，朋友会问，为什么就只介绍的中级的，那么高级看的书在哪？有木有高级的书？进阶高级程序员之路又在哪？说下我自己的看法和对年轻朋友的建议吧，说的不好或不对请原谅，其实我也才真正工作两年多：
1.主要是工作经验问题。达到一定程度以后真的合适的书很难找了，更多只有在工作中总结和积累。工作的越久碰到过的问题也就越多，^_^。所以一般说高级程序员一般都是至少都3年以上的工作经验，没办法，实践才出真理。
2.我觉得高级web前端灰常有必要总结一个自己的JS库，不管大小，总归有一套自己的东西（嘿嘿，如果认真的实践过《JS DOM高级》的内容，估计有一套JS库的原型了）。
3.前端有必要懂得和熟悉一本服务端语言，其实计算机语言很多语法大致都差不多，不同的就是内置的方法和属性，所以去熟悉一门语言并不难。
4.许多年轻人都有眼高手低的毛病，我也一样，例如，有的人认为自己编起程序来很顺手，不用查手册，说写就写，很熟练，几乎什么程序都能编出来，就认为自己对这种语言很精通了。其实对于一门语言的掌握程度是不可深测的，对于语言掌握其实是一个无止尽的过程，没有终点。编写时间的长短和编写熟练程度，仅仅是精通语言表现的一个方面。更重要的是程序员要掌握这个语言的适用范围，整体构架，语法规则、功能分类等基础理论方面的知识，并能利用这方面的知识，用最科学的方法去解决现实中各种项目的各个问题。
《JavaScript精粹》笔记
- 1. 2.1空白
- 2. 2.2标示符
- 3. 2.3数字
- 4. 2.4字符串
- 5. 2.5语句
- 6. 2.6表达式
- 7. 2.7字面量
- 8. 2.8函数
- 9. 3对象
- 10. 3.1对象字面量
- 11. 3.2检索
- 12. 3.3更新
- 13. 3.4引用
- 14. 3.5原型
- 15. 3.6反射
- 16. 3.7枚举
- 17. 3.8删除
- 18. 3.9减少全局变量污染
- 19. 4
- 20. 4.1函数对象
- 21. 4.2函数字面量
- 22. 4.3调用
- 23. 4.4参数
- 24. 4.5返回
- 25. 4.6异常
2.1空白
用空格来分隔字符序列,使代码美观
var that = this;
javascript的两种注释，注释一定要精确地描述代码。
javascript中的/注释/对代码来说并不安全，故用//来代替。
2.2标示符
javascript不允许用保留字来命名变量、参数和属性。
即标示符用于语句、变量、参数、属性名和标记。
2.3数字
1.javascript只有单一的数字类型（64位的浮点数），避免了短整数溢出的问题和音数字类型导致的错误。
NaN不等于任何值，可用函数isNaN(number)来检测。
2.数字拥有方法。Math包含一套作用于数字的方法。
2.4字符串
1.javascript创建的字符都是16位的（Unicode字符集）。
2.javascript没有字符类型，要显示一个字符，只需要创建一个仅包含字符的字符串。
3.转义字符允许把正常情况下不被允许的字符插入到字符串中，如”\u0041”代表十六进制的数字
4.字符串是不可变的，一旦被创建就无法改变，但能通过 + 运算符去连接其他字符串而得到新的字符串
‘c’ + ‘a’ + ‘t’ === ‘cat’是true（包含完全相同的字符且字符顺序相同）
5.字符串存在一些方法，如：
‘ cat ‘.toUpperCase() === ‘CAT’
2.5语句
web浏览器缺少链接器，故javascript把语句抛入一个公共的全局名字空间中。
1.var语句呗用在函数内部时，定义了这个函数的私有变量。
2.switch、while、for和do语句允许有一个可选的前置标签（label），配合break使用
3.javascript的代码块不会创建新的作用域，因此变量应该被定义在函数的顶端而不是代码块中
4.以下值为假值（falsy）:
false/null/undefined/空字符串 ‘ ‘ /数字 0 /数字 NaN
其余所有值当做真值，包括true/“false”以及所有的对象
2.6表达式
2.7字面量
2.8函数
3对象
数字/字符串/布尔值拥有方法,但都是不可变的.
javascript中的对象是可变的键控集合(keyed collections)
javascript中的对象是无类别的(class-free),对新属性的名字和值没有约束.
对象适合收集和管理数据,可包含其他对象,容易表示成树形或图形结构.
javascript包括一个原型链特性,允许对象继承.正确使用它能减少对象初始化的时间和内存消耗.
3.1对象字面量
1.对象字面量就是包围在一对花括号中的 “ 名/值 “ 对.
2.对象字面量中，若属性名是一个合法的标示符且不是保留字，并不强制要求用引号括住属性名。故用“first-name”是必须的，但是否括住first_name则是可选的。
3.逗号用来分隔多个”名/值”对.
4.属性的值可以从包括另一个对象字面量在内的任意表达式中获得，对象是可嵌套的：
var flight = {
airline: “Oceanic”,
number: 815,
departure: {
IATA: “SYD”,
time: “2012-08-25 11:12”,
city: “Guangzhou”
},
arrial: {
IATA: “LAX”,
time: “2012-08-25 23:24”,
city: “Nanjing”
}
};
3.2检索
1.采用在[ ]后缀中括住一个字符串表达式的方式。
2.优先考虑 . 表示法（更紧凑且可读性好）。
stooges[“first-name”]
flight.departure.IATA
3.检索一个并不存在的成员元素的值，则返回undefined值。
4.||运算符可用来填充默认值
var middle = stooges[“middle-name”] || “(none)”;
var status = flight.status || “unknown”;
5.检索一个undefined值会导致TypeError异常，但可用 && 运算符来避免错误
flight.equipment //undefined
flight.equipment.model //throw “TypeError”
flight.equipment && flight.equipment.model //undefined
3.3更新
对象中的值通过赋值语句来更新。
3.4引用
对象通过引用来传递，但永远不会被拷贝。
3.5原型
1.所有通过对象字面量创建的对象都连接到Object.prototype这个对象。
2.javascript提供的实现机制复杂而杂乱，但其实可以被明显地简化 。
3.给Object增加一个beget方法，创建一个使用原对象作为其原型的新对象。
4.原型连接在更新时是不起作用的，当对某个对象做出改变时，不会触及该对象的原型。
5.原型连接只在检索值的时候才被用到。
6.若想要的属性完全不存在于原型链中，结果就是undefined值，这个过程称为【委托】
7.原型关系是动态的，若将新属性添加到原型中，该属性会立刻对所有基于该原型创建的对象可见。
3.6反射
1.typeof操作确定属性的类型：
typeof flight.number // ‘ number ‘
typeof flight.status // ‘ string ‘
typeof flight.arrival // ‘ object ‘
typeof flight.manifest // ‘ undefined ‘
2.做反射的目标是数据，故应意识到一些值可能会是函数
3.hasOwnProperty方法：若对象拥有独有的属性，将返回true。该方法不会检查原型链。
flight.hasOwnProperty( ‘number’ ) //true
flight.hasOwnProperty(‘constructor’) //false
3.7枚举
1.for in 语句用来遍历对象中的所有属性名。
2.for in 语句会枚举所有属性，包括原型中的属性
3.用hasOwnProperty方法做过滤器过滤掉不想要的值，用typeof来排除函数：
var name;
for (name in another_stooge) {
if (typeof another_stooge[name] !== ‘function’) {
document.writeln(name + ‘: ‘ + another_stooge[name]);
}
}
4.属性名出线的顺序是不确定的，故要对任何可能出线的顺序有所准备。
5.要以特定顺序出线，则避免使用for in 语句，而是创建一个数组，在其中以正确的顺序包含属性名：
var i;
var properties = [‘first-name’,’middle-name’,’last-name’,’profession’];
for (i=0;i<properties.length; i +=1) {
document.writeln(properties[i] + ‘: ‘ +another_stooge[properties[i]]);
}
3.8删除
delete运算符用来删除对象的属性，移除对象中确定包含的属性，不会触及原型链中的任何对象。
删除对象的属性可能会让来自原型链中的属性浮现出来:
another_stooge.nickname //‘nickname1’
//删除another_stooge中的nickname属性，从而暴露出原型的nickname属性
delete another_stooge.nickname;
another_stooge.nickname //‘nickname0’
3.9减少全局变量污染
全局变量削弱的程序的灵活性，故应该避免。
1.最小化使用全局变量的一个方法是在应用中值创建唯一一个全局变量：
var MYAPP = {};该变量此时变成应用的容器，只要把多个全局变量都整理在一个名称空间下，将能降低一其他应用程序、组建或类库之间产生糟糕的相互影响。
2.用闭包来进行信息隐藏的方式，是另一个减少全局污染的方法。
4
4.1函数对象
1.对象是”名/值”对的集合并拥有一个连到原型对象的隐藏连接。
2.对象字面量产生的对象连接到Object.prototype,函数对象连接到Function.prototype.
3.每个函数在创建时附有两个隐藏属性：函数的上下文和实现函数行为的代码。
4.每个函数对象创建时也附带有一个prorotype属性，它的值是一个拥有construction属性并且值为该函数的对象。
5.注意函数是对象，拥有对象的一些性质如方法等。
6.函数的与众不同之处在于它们可以被调用。javascript在创建一个函数对象时，会设置一个“调用”属性。
4.2函数字面量
1.通过函数字面量来创建函数对象：
var add = function (a,b) {
return a + b;
};//创建一个名为add得到变量并把两个数字相加的函数赋值给它。
2.通过函数字面量创建的函数对象包含一个连到外部上下文的连接，这称为闭包——javascript强大表现力的根基！
4.3调用
1.调用一个函数将暂停当前函数的执行，传递控制权和参数给新函数。
2.每个函数接受两个附加的参数：this 和 argument 。
3.this 的四种调用模式：方法调用模式、函数调用模式、构造器调用模式和 apply 调用模式。
4.当实参个数与形参个数不匹配时并不导致运行错误，而是忽略超出的实参或将缺失的实参替换为undefined。
3.1)方法调用模式（函数是对象的一个属性时，即称为方法）
1.当方法被调用时，this被绑定到该对象。
2.方法可以使用this去访问对象，故它能从对象中取值或修改该对象。
3.this到对象的绑定发生在调用的时候，使得函数可以对this高度复用。通过this可取得它们所属对象的上下文的方法称为【公共方法】。
3.2）函数调用模式（函数并非一个对象的属性时，当做一个函数来调用）
var sum = add (3,4);
1.当函数以此模式调用时，this被绑定到全局对象。（这是语言设计上的一个错误）
这个错误的后果是方法不能利用内部函数来帮助它工作。
解决方案：该方法定义一个变量并赋值为this，则内部函数可以通过那个变量访问到this。
3.3）构造器调用模式
1.在一个函数前面带上new来调用，将创建一个隐藏连接到该函数的prototype成员的新对象，同时this将会绑定到那个新对象上。
2.new前缀也会改变return语句的行为
3.4）Apply调用模式
1.javascript是一门函数式的面向对象编程语言，故函数可以拥有方法。
2.apply方法让我们构建一个参数组并用其去调用函数，允许选择this的值。
3.apply方法接收两个参数，第一个是将被绑定给this的值，第二个是一个参数数组：
4.4参数
1.当函数被调用时，会得到一个附带参数，即argument数组。通过它函数可以访问所有被它调用时传递给它的参数列表，包括那么没有被分配给函数声明时定义的形式参数的多余参数。这使得可以编写一个无须指定参数个数的函数。
2.arguments并不是一个真正的数组，只是一个类似数组（array-like）的对象，它拥有一个length的属性，但缺少所有的数组方法。
4.5返回
1.return语句可使函数提前返回，return被执行时函数立即返回而不执行余下的语句。
2.一个函数总会返回一个值，若没有指定返回的值，则返回undefined。
3.若函数以在前面加上new前缀的方式来调用，且返回值不是一个对象，则返回this（该新对象）。
4.6异常
throw语句中断函数的执行，抛出一个exception对象，该对象包含可识别异常类型的name属性和一个描述性的message属性。
该exception对象将被传递到一个try语句的catch从句：
try代码块中抛出异常，控制权就会跳转到catch从句。
未完待续。。。
《锋利的JQuery》笔记
#1.2 JQ的特点
1.轻量级—压缩后只有30K（用Packer）、18K（用Gzip）2.强大的选择器—兼容CSS1到CSS3的选择器并可自定义选择器3.出色的DOM操作的封装
4.可靠的事件处理机制
5.完善的Ajax—所有Ajax操作封装到了函数$.ajax()里
6.不污染顶级变量—JQ只建立一个Jquery的对象，所有函数都在该对象下
7.出色的浏览器兼容性
8.链式操作方式—一组操作，可以直接连写而无重复获取对象
9.隐式迭代
10.行为层与结构层的分离—可用选择器选中元素直接添加事件；后期维护方便
11.丰富的插件支持
12.完善的文档
13.开源
1.DOM对象
每一份DOM都可以表示成一棵树。
DOM对象可以使用JS中的方法，通过getElementsByTagName或getElementById来获取元素节点（DOM对象）
2.JQ对象
JQ对象就是通过JQ包装DOM对象后产生的对象。
只有JQ对象才能使用JQ的方法。
在JQ对象中不能使用DOM对象的任何方法，反之亦然。
约定定义变量的风格是：获取的对象是JQ对象，则加前缀$.
获取的对象是DOM对象不加前缀$.
1.JQ对象转换成DOM对象
1）若JQ对象是一个数组对象，则通过[index]的方法得到相应的DOM对象
2）通过get(index)方法得到相应的DOM对象
2.DOM对象转换成JQ对象
用$()将DOM对象包装就可以获得相应的JQ对象
我们平时用到的JQ对象都是通过$()函数制造的。
JQ中的选择器完全继承了CSS的风格
简洁写法：$()作为一个选择器函数
如$(“#ID”)代替了document.ElementsByTagName()
扩浏览器兼容：不像CSS，JQ选择器不用考虑浏览器是否支持这些选择器
1)基本选择器/
通过id/class/标签名来查找DOM元素
注意id只能使用一次
2）层次选择器/
3）过滤选择器/
以冒号（：）开头，分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤盒表单对象过滤
4）表单选择器
#2.5.1 选择器中含有特殊符号的注意事项
1）.选择器中含有”.” “#” “(“ “]”等字符时,需要用转义字符”\“(注意是两个反斜杠)
2).JQ1.3.1以后的版本都不能在属性名前加“@”
3)选择器中添加空格可能产生严重错误
1.JQ选择器是可以进一步拓展的
1）MoreSelectors for jQuery 这插件用于增加更多的选择器
2）Basic XPath插件（使用人数不多且降低了选择器匹配的效率）
2.使用其他CSS选择器的方法
1）document.getElementsBySelector()—-通过选择器来获取文档元素
2）cssQuery()——-通过CSS选择器查找元素
1.DOM core
2.HTML_DOM
获取某些对象、属性可用这两个来实现，但显然HTML_DOM比较简短，但只能用来处理WEB文档
3.CSS_DOM用来获取和设置style对象的各种属性
jquery对DOM的各种操作都围绕DOM树展开
1.查找元素节点
2.查找属性节点
用attr()方法来获取各种属性的值
创建节点
1.创建节点，建议添加顺序为：元素-文本-属性
var $li_1= $(“<li title=”属性1”>文本1</li>”);
var $li_2= $(“<li title=”属性2”>文本2</li>”);
将新元素插入到节点ul中
$(“ul”).append($li_1);
$(“ul”).append($li_2);（或采用链式写法：$(“ul”).append($li_1).append($li_2);）
注意：1）动态创建的新元素节点需要使用方法才能插入文档中而不会自动添加
2）创建元素时，注意书写的规范性（注意闭合标签和使用标准的XHTML格式）
2.插入节点
几种插入节点的方法——-$(“节点”).方法(“元素”)
1）append()
向每个匹配的元素内部后置内容
2）appendTo()
后置追加到指定的元素中
3）prepend()
向每个匹配的元素内部前置内容
4）prependTo()
后置追加到指定的元素中
5）after()
在每个匹配的元素后插入内容
6）insertAfter()
将所有匹配的元素插入到指定元素的后面
7）before()
在每个匹配的元素之前插入内容
8）insertBefore()
将所有匹配的元素插入到指定的元素的前面
1）remove()
从DOM中删除所有匹配的元素
该方法返回的是一个指向已被删除的节点的引用，因而可以在以后使用这些元素
2）empty()
清空节点，清空元素的所有后代节点
复制节点后，新元素并不具有任何行为
注意：若传递true为参数，则表示复制元素的同时复制元素中所绑定的事件
$(this).clone(true).appendTo(“body”);//注意参数true
replaceWith()
将所有匹配的元素都换成指定的HTML或DOM元素
replaceAll()
与replaceWith()作用相同但颠倒了操作
注意：如果在替换之前已经为元素绑定事件，替换后原先绑定的事件将会与被替换的元素一起消失，需要在新元素上重新绑定事件。
6.包裹节点
wrap()
将某个节点用其他标记包裹起来，不破坏原始文档的语义
wrapAll()
将所有匹配的元素用一个元素来包裹
与wrap()不同，wrap()是将所有的元素进行单独的包裹
wrapInner()
将每一个匹配的元素的子内容（包括文本节点）用其他结构化的标记包裹起来
wrap是外包，wrapInner是内包
#3.2.8 属性操作
在JQ中，用attr()方法来获取和设置元素属性，removeAttr()方法来删除元素属性
1.获取属性和设置属性
$(“p”).attr(“title”,”my title”);
同时设置多个属性
$(“p”).attr({“title”:”my title”,”name”:”test”});
2.删除属性
用removeAttr()方法删除某个元素的特定属性
$(“p”).removeAttr(“title”);
1.获取样式和设置样式
获取
var p_class$=$(“p”).attr(“class”);
设置
$(“p”).attr(“class”,”high”);
2.追加样式
用addClass()方法
区别：attr()设置样式会覆盖替换，而addClass()则是追加兼并
3.移除样式
用removeClass()方法
$(“p”).removeClass(“high”);//移除<p>元素中值为”high”的class
若要删除多个class，则
$(“p”).removeClass(“high another”);
或者直接使用
$(“p”).removeClass();//默认移除所有class
4.切换样式
toggle()
交替执行代码③、④函数，控制行为上的重复切换
$toggleBtn.toggle(
function(){
//显示元素 代码③
},
function(){
//显示元素 代码④
}
)
toggleClass()
如果类型存在则删除，否则添加。控制样式上的重复切换。
5.判断是否含有某个样式
hasClass()方法，若有则返回true，否则返回false
$(“p”).hasClass(“another”);
等价于：
$(“p”).is(“.another”);
1.html()
读取或者设置某个元素中的HTML内容（与javascript中的innerHTML属性类似）
2.text()
读取或者设置某个元素中的文本内容（与javascript中的innerRext属性类似）
3.val()
读取或者设置元素的值(与javascript中的value属性类似)
元素师文本框、下拉列表、单选框都能返回，若元素为多选，则返回包含所有选择的值的数组
val()方法还能使select、checkbox、radio相应的选项被选中，在表单操作中会经常用到
1.children()
取得匹配元素的子元素的集合
2.next()
取得匹配元素后面紧邻的同辈元素
3.prev()
取得匹配元素前面紧邻的同辈元素
4.siblings()
取得元素前后所有的同辈元素
5.closest()
取得最近的匹配元素
6.其他方法
find()/filter()/nextAll()/preAll()/parent()/parents()等
#3.2.12 CSS-DOM操作
css()
获取元素的样式属性
设置某个元素的样式
$(“p”).css(“color”); //获取<p>元素的样式颜色
$(“p”).css(“color”,”red”);//设置<p>元素的样式颜色为红色
$(“p”).css({“fontSize”:”30px”,”backgroundColor”:”#888888”});//同时设置字体颜色和背景色
height()
取得匹配元素当前计算的高度值
$(“p”).height(100);//设置高度值为100px
$(“p”).height(“10em”);//设置高度值为10em
css()获得的高度值与样式的设置有关，可能得到“auto”“10px”之类的字符串，而height()方法获得的则是在页面中的实际高度，与样式设置无关且不带单位
width()
取得匹配元素的宽度值（px）
$(“p”).width();//获取宽度值
$(“p”).width(“40px”);设置宽度值
几个常用方法
1.offset()
获取元素在当前视窗的相对位移，返回top和left属性，只对可见元素有效
var offset=$(“p”).offset();//获取offset
var left=offset.left;//获取左偏移
var top=offset.top;//获取上偏移
2.position()
获取元素相对于最近一个position样式属性设置为relative或者absolute的祖父节点的相对位移，也返回top和left属性
var position=$(“p”).position();//获取offset
var left=position.left;//获取左偏移
var top=position.top;//获取上偏移
3.scrollTop()
scrollLeft()
获取元素的滚动条距顶端和左侧的距离
var $p=$(“p”);
var scolltop=$p.scollTop();
var scollleft=$p.scollLeft();
另外，可指定参数让滚动条滚动到指定位置
$(“textarea”).scollTop(300);//元素的垂直滚动条滚动到指定位置
$(“textarea”).scollLeft(300);//元素的横向滚动条滚动到指定位置
1.轻量级—压缩后只有30K（用Packer）、18K（用Gzip）2.强大的选择器—兼容CSS1到CSS3的选择器并可自定义选择器3.出色的DOM操作的封装
4.可靠的事件处理机制
5.完善的Ajax—所有Ajax操作封装到了函数$.ajax()里
6.不污染顶级变量—JQ只建立一个Jquery的对象，所有函数都在该对象下
7.出色的浏览器兼容性
8.链式操作方式—一组操作，可以直接连写而无重复获取对象
9.隐式迭代
10.行为层与结构层的分离—可用选择器选中元素直接添加事件；后期维护方便
11.丰富的插件支持
12.完善的文档
13.开源
#1.32 在JQ库中，$就是JQ一个简写形式，如$(“#foo”)就代表JQuery(“#foo”)
$(document).ready(function(){
//…
});
可简写为：
$(function(){
//…
});
1.3.3统一代码风格，方便日后维护
1.链式操作风格
1）对于同一个对象不超过三个操作的，直接写成一行。
如$(“li”).show().unbind(“click”);
2)对于同一个对象的较多操作，建议每行写一个操作。
行数过多则可以功能块来换行
3）对于多个对象的少量操作，可以每个对象写一行，若涉及子元素则适当缩进。
4）对于多对象的较多操作，则结合第2、3条。
2.给代码添加注释，否则很难看懂代码
#1.4.1了解区分JQ和DOM对象的区别
1.DOM对象
每一份DOM都可以表示成一棵树。
DOM对象可以使用JS中的方法，通过getElementsByTagName或getElementById来获取元素节点（DOM对象）
2.JQ对象
JQ对象就是通过JQ包装DOM对象后产生的对象。
只有JQ对象才能使用JQ的方法。
在JQ对象中不能使用DOM对象的任何方法，反之亦然。
#1.4.2 JQ对象和DOM对象的相互转换
约定定义变量的风格是：获取的对象是JQ对象，则加前缀$.
获取的对象是DOM对象不加前缀$.
1.JQ对象转换成DOM对象
1）若JQ对象是一个数组对象，则通过[index]的方法得到相应的DOM对象
2）通过get(index)方法得到相应的DOM对象
2.DOM对象转换成JQ对象
用$()将DOM对象包装就可以获得相应的JQ对象
我们平时用到的JQ对象都是通过$()函数制造的。
#1.6 开发工具推荐
1.DW
支持提示JQ代码,在http://xtnd.us/dreamweaver/jquery下载插件Jquery...API.MXP
2.Aptana
是Ajax开发IDE
3.JQueryWTP和Spket插件
装在Eclipse上的插件
4.Visual Studio 2008
1.7
1）CSS选择器复习
标签选择器
E{
CSS规则
}
ID选择器
ID{
CSS规则
}
类选择器
E.className{
CSS规则
}
群组选择器
E1，E2，E3{
CSS规则
}
后代选择器
E F{
CSS规则
}
通配符
*{
CSS规则
}
其他选择器：伪类选择器
E：Pseudo-Elements{
CSS规则
}
子选择器
E>F{
CSS规则
}
临近选择器
E+F{
CSS规则
}
属性选择器
E[attr]{
CSS规则
}
注意，目前并不是所有的浏览器都支持【其他选择器】
2）学习JQ选择器
JQ中的选择器完全继承了CSS的风格
简洁写法：$()作为一个选择器函数
如$(“#ID”)代替了document.ElementsByTagName()
扩浏览器兼容：不像CSS，JQ选择器不用考虑浏览器是否支持这些选择器
JQ选择器的分类
1)基本选择器/
通过id/class/标签名来查找DOM元素
注意id只能使用一次
2）层次选择器/
3）过滤选择器/
以冒号（：）开头，分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤盒表单对象过滤
4）表单选择器
#2.5.1 选择器中含有特殊符号的注意事项
1）.选择器中含有”.” “#” “(“ “]”等字符时,需要用转义字符”\“(注意是两个反斜杠)
2).JQ1.3.1以后的版本都不能在属性名前加“@”
3)选择器中添加空格可能产生严重错误
#2.7其他选择器
1.JQ选择器是可以进一步拓展的
1）MoreSelectors for jQuery 这插件用于增加更多的选择器
2）Basic XPath插件（使用人数不多且降低了选择器匹配的效率）
2.使用其他CSS选择器的方法
1）document.getElementsBySelector()—-通过选择器来获取文档元素
2）cssQuery()——-通过CSS选择器查找元素
3.querySelectorAll()也是用于实现通过CSS选择器来获取元素的（W3C在Selectors API中的方法）
#3.1 jquery中的DOM操作
1.DOM core
2.HTML_DOM
获取某些对象、属性可用这两个来实现，但显然HTML_DOM比较简短，但只能用来处理WEB文档
3.CSS_DOM用来获取和设置style对象的各种属性
jquery对DOM的各种操作都围绕DOM树展开
1.查找元素节点
2.查找属性节点
用attr()方法来获取各种属性的值
创建节点
1.创建节点，建议添加顺序为：元素-文本-属性
var $li_1= $(“<li title=”属性1”>文本1</li>”);
var $li_2= $(“<li title=”属性2”>文本2</li>”);
将新元素插入到节点ul中
$(“ul”).append($li_1);
$(“ul”).append($li_2);（或采用链式写法：$(“ul”).append($li_1).append($li_2);）
注意：1）动态创建的新元素节点需要使用方法才能插入文档中而不会自动添加
2）创建元素时，注意书写的规范性（注意闭合标签和使用标准的XHTML格式）
2.插入节点
几种插入节点的方法——-$(“节点”).方法(“元素”)
1）append()
向每个匹配的元素内部后置内容
2）appendTo()
后置追加到指定的元素中
3）prepend()
向每个匹配的元素内部前置内容
4）prependTo()
后置追加到指定的元素中
5）after()
在每个匹配的元素后插入内容
6）insertAfter()
将所有匹配的元素插入到指定元素的后面
7）before()
在每个匹配的元素之前插入内容
8）insertBefore()
将所有匹配的元素插入到指定的元素的前面
3.删除节点
1）remove()
从DOM中删除所有匹配的元素
该方法返回的是一个指向已被删除的节点的引用，因而可以在以后使用这些元素
2）empty()
清空节点，清空元素的所有后代节点
4.复制节点
复制节点后，新元素并不具有任何行为
注意：若传递true为参数，则表示复制元素的同时复制元素中所绑定的事件
$(this).clone(true).appendTo(“body”);//注意参数true
5.替换节点
replaceWith()
将所有匹配的元素都换成指定的HTML或DOM元素
replaceAll()
与replaceWith()作用相同但颠倒了操作
注意：如果在替换之前已经为元素绑定事件，替换后原先绑定的事件将会与被替换的元素一起消失，需要在新元素上重新绑定事件。
6.包裹节点
wrap()
将某个节点用其他标记包裹起来，不破坏原始文档的语义
wrapAll()
将所有匹配的元素用一个元素来包裹
与wrap()不同，wrap()是将所有的元素进行单独的包裹
wrapInner()
将每一个匹配的元素的子内容（包括文本节点）用其他结构化的标记包裹起来
wrap是外包，wrapInner是内包
#3.2.8 属性操作
在JQ中，用attr()方法来获取和设置元素属性，removeAttr()方法来删除元素属性
1.获取属性和设置属性
获取用attr()方法
也可以直接设置
$(“p”).attr(“title”,”my title”);
同时设置多个属性
$(“p”).attr({“title”:”my title”,”name”:”test”});
2.删除属性
用removeAttr()方法删除某个元素的特定属性
$(“p”).removeAttr(“title”);
#3.2.9 样式操作
1.获取样式和设置样式
获取
var p_class$=$(“p”).attr(“class”);
设置
$(“p”).attr(“class”,”high”);
2.追加样式
用addClass()方法
区别：attr()设置样式会覆盖替换，而addClass()则是追加兼并
3.移除样式
用removeClass()方法
$(“p”).removeClass(“high”);//移除<p>元素中值为”high”的class
若要删除多个class，则
$(“p”).removeClass(“high another”);
或者直接使用
$(“p”).removeClass();//默认移除所有class
4.切换样式
toggle()
交替执行代码③、④函数，控制行为上的重复切换
$toggleBtn.toggle(
function(){
//显示元素 代码③
},
function(){
//显示元素 代码④
}
)
toggleClass()
如果类型存在则删除，否则添加。控制样式上的重复切换。
5.判断是否含有某个样式
hasClass()方法，若有则返回true，否则返回false
$(“p”).hasClass(“another”);
等价于：
$(“p”).is(“.another”);
#3.2.10 设置和获取HTML、文本和值
1.html()
读取或者设置某个元素中的HTML内容（与javascript中的innerHTML属性类似）
2.text()
读取或者设置某个元素中的文本内容（与javascript中的innerRext属性类似）
3.val()
读取或者设置元素的值(与javascript中的value属性类似)
元素师文本框、下拉列表、单选框都能返回，若元素为多选，则返回包含所有选择的值的数组
val()方法还能使select、checkbox、radio相应的选项被选中，在表单操作中会经常用到
#3.2.11 遍历节点
1.children()
取得匹配元素的子元素的集合
2.next()
取得匹配元素后面紧邻的同辈元素
3.prev()
取得匹配元素前面紧邻的同辈元素
4.siblings()
取得元素前后所有的同辈元素
5.closest()
取得最近的匹配元素
6.其他方法
find()/filter()/nextAll()/preAll()/parent()/parents()等
#3.2.12 CSS-DOM操作
css()
获取元素的样式属性
设置某个元素的样式
$(“p”).css(“color”); //获取<p>元素的样式颜色
$(“p”).css(“color”,”red”);//设置<p>元素的样式颜色为红色
$(“p”).css({“fontSize”:”30px”,”backgroundColor”:”#888888”});//同时设置字体颜色和背景色
height()
取得匹配元素当前计算的高度值
$(“p”).height(100);//设置高度值为100px
$(“p”).height(“10em”);//设置高度值为10em
css()获得的高度值与样式的设置有关，可能得到“auto”“10px”之类的字符串，而height()方法获得的则是在页面中的实际高度，与样式设置无关且不带单位
width()
取得匹配元素的宽度值（px）
$(“p”).width();//获取宽度值
$(“p”).width(“40px”);设置宽度值
几个常用方法
1.offset()
获取元素在当前视窗的相对位移，返回top和left属性，只对可见元素有效
var offset=$(“p”).offset();//获取offset
var left=offset.left;//获取左偏移
var top=offset.top;//获取上偏移
2.position()
获取元素相对于最近一个position样式属性设置为relative或者absolute的祖父节点的相对位移，也返回top和left属性
var position=$(“p”).position();//获取offset
var left=position.left;//获取左偏移
var top=position.top;//获取上偏移
3.scrollTop()
scrollLeft()
获取元素的滚动条距顶端和左侧的距离
var $p=$(“p”);
var scolltop=$p.scollTop();
var scollleft=$p.scollLeft();
另外，可指定参数让滚动条滚动到指定位置
$(“textarea”).scollTop(300);//元素的垂直滚动条滚动到指定位置
$(“textarea”).scollLeft(300);//元素的横向滚动条滚动到指定位置