1.进度条效果

在一个div内包含空的span元素，通过CSS3来控制这个属性的背景以及宽度，就写出了进度条的效果，页面加载时进度条滚动使用的新属性animation并自定义了关键帧，demo

2.chrome云语音输入

只能在webkit内核的浏览器中使用，貌似是使用了谷歌的云语音功能，但是语音识别效果并不理想额，demo

光标悬浮时显示figcaption图片说明，并将其余图片变暗，demo

实现了简单的功能，CSS还未优化。

1.纵向和横向下拉菜单，demo/2012-10-26/1.html

是个二级菜单，多级菜单原理相同，按需要再制作。

2.标签页效果，demo/2012-10-26/2.html

看似简单，但细节倒是不少。

目前学习jquery还很吃力，但一定得坚持多做练习！

郁闷死了，刚打好字浏览器就突然崩溃，就不再重新写了，直接上Demo。

1.模拟投票

2.改变选中文字的样式

3.改变提示信息的样式

4.鼠标悬浮放大图片

5.可编辑的表格

$(‘div’).last();//选择最后一个匹配元素

$(‘div’).eq(1);//选择第二个匹配元素

$(‘div’).eq(-1);//选择倒数第一个匹配元素

 $(‘#demo’).animate({‘font-size’:‘18’,‘width’:‘+=300’//注意这行});}); $(‘#reset’).click(function(){ $(‘#demo’).animate({‘font-size’:‘14px’,‘width’:‘-=300’//注意这行});});

$(‘#run’).click(function(){
    $(‘#demo’).animate({
        ‘width’: ‘-=128px’,
        ‘height’: ‘-=128px’,
        ‘opacity’:0.2,
        ‘padding-top’: ‘-=10px’
    }, 5000);});

$(‘#reset’).click(function(){
    $(‘#demo’).stop().animate({
        ‘width’: ‘128px’,
        ‘height’: ‘128px’,
        ‘opacity’: 1
    });});

var progressbar;
$(‘#run’).click(function(){
    progressbar = setInterval(function () {
        $(‘#demo’).animate({
          ‘width’: ‘+=10’
        });
    }, 1000);
    $(this).attr(“disabled”, true);
    $(‘#reset’).attr(“disabled”, false);});

$(‘#reset’).click(function(){
    clearTimeout(progressbar);
    $(‘#run’).attr(“disabled”, false);
    $(this).attr(“disabled”, true);}); 

$(‘#run’).click(function(){
    $(‘#demo’).html(‘2秒后消失’);
    $(‘#demo’).show(200).delay(2000).hide(200);//hide()和show()方法要带参数，否则不能正常运行的[原因]。
});

jQuery DOM操作

$(‘#run’).click(function(){
    var ct = $(‘#container’);
    ct.append(ct.prev().html()).append(‘<br/>’).append(ct.prev().text());});

$(‘#reset’).click(function(){
    $(‘#container’).empty(‘’);});

$(‘#run’).click(function(){
    var ct = $(‘#container’);
    ct.append(‘append添加的内容’).prepend(‘prepend添加的内容’).before(‘before添加的内容’).after(‘after添加的内容</br>’);});

$(‘#reset’).click(function(){
    $(‘#container’).empty(‘&nbsp;www.gbin1.com&nbsp;’);});

使用.clone()方法

$(‘#run’).click(function(){

var ct = $(‘#container’);

    ct.append(ct.prev().html()).append(‘<br/>’).append(ct.prev().text());});

$(‘#reset’).click(function(){
    $(‘#container’).empty(‘’);});

    $(this).html(“clicked”);});

$(‘.item’).bind(‘dblclick’, function(){
    $(this).html(“dblclicked”);});

$(‘.item’).clone().appendTo(‘#container’);//添加新元素

    $(this).html(“clicked”);});

$(‘.item’).live(‘dblclick’, function(){
    $(this).html(“dblclicked”);});

$(‘.item’).clone().appendTo(‘#container’);

    $(this).html(“clicked”);});

$(‘#container’).on(‘dblclick’,‘.item’, function(){
    $(this).html(“dblclicked”);});

$(‘.item’).clone().appendTo(‘#container’);

    $(this).html(“clicked”);});

$(‘#container’).delegate(‘.item’, ‘dblclick’, function(){
    $(this).html(“dblclicked”);});

    $(this).html(“mouseleave once”);});

使用preventDefault()方法

阻止缺省的事件触发，例如，你点击 <a href=”http://www.gbin1.com">gbin1.com</a&gt; 将会转向对应的页面，如果你使用preventDefault()方法，将阻止页面加载：

  e.preventDefault();
  $(this).html(‘阻止访问gbin1.com’);
});

  e.stopPropagation();
  $(this).html(‘阻止父元素事件’);
});

$(‘#normal’).click(function(e){
  $(this).html(‘不阻止任何父元素事件’);
});

$(‘.wp’).click(function(e){
  $(this).append(‘触发父元素事件’);
});

  e.stopImmediatePropagation();
  $(this).html(‘阻止父元素事件’);
});

$(‘#normal’).click(function(e){
  e.stopPropagation();
  $(this).html(‘不阻止任何父元素事件’);
});

$(‘button’).click(function(e){
  $(this).append(‘-button触发事件’);
});

$.each(gb_array,function(i, v){ $(‘#langlist’).append(‘<li id=”‘+ i +‘“>’+ v +‘</li>’);})

$(‘#langlist’).each(function(i) {

$.data(p,“site”,“gbin1.com”); $p.append($.hasData(p)+“ “); $.removeData(p); $p.append($.hasData(p)+“ “);

$(‘#prev’).live(‘click’, function(){
    if ($cur.prev(‘div’).html()) {
        $cur.removeClass(‘selected’).prev(‘div’).addClass(‘selected’);
        $cur = $cur.prev(‘div’);
    }});

$(‘#next’).live(‘click’,function(){
    console.log($cur.next(‘div’));
    if ($cur.next(‘div’).html()) {
        $cur.removeClass(‘selected’).next(‘div’).addClass(‘selected’);
        $cur = $cur.next(‘div’);
    }});

$(‘#level1’).find(‘#level3’).css({‘border’:‘1px solid #ccc’}).append(‘- 使用find找到元素’);
$(‘#level1’).children(‘div’).css({‘border’:‘1px solid red’}).append(‘- 使用children找到子元素’); 

1. 1. 2.1空白
2. 2. 2.2标示符
3. 3. 2.3数字
4. 4. 2.4字符串
5. 5. 2.5语句
6. 6. 2.6表达式
7. 7. 2.7字面量
8. 8. 2.8函数
9. 9. 3对象
10. 10. 3.1对象字面量
11. 11. 3.2检索
12. 12. 3.3更新
13. 13. 3.4引用
14. 14. 3.5原型
15. 15. 3.6反射
16. 16. 3.7枚举
17. 17. 3.8删除
18. 18. 3.9减少全局变量污染
19. 19. 4
20. 20. 4.1函数对象
21. 21. 4.2函数字面量
22. 22. 4.3调用
23. 23. 4.4参数
24. 24. 4.5返回
25. 25. 4.6异常

2.1空白

用空格来分隔字符序列,使代码美观

var that = this;

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从句。

未完待续。。。

营会终于告一段落了，翻看了自七月以来的所有工作备忘、邮件。此时回顾，文教你又锻炼了我。回想电话联络学生的场景、营会四天三夜的每个细节，以及我坚持在写的营会日记，突然感觉自己矫情了。** **

竟然有六天没写日记了。今天比较烦躁，今晚也不想看书，那就做个流水账放在来思碑吧。

1.暑假当家

2号考完试3号下午奔回家，4号去了医院，一直呆到8号奶奶出院，期间在医院病床边寸步不离，再一次感受到了健康的珍贵。

这半个月以来，包揽家务，负责三餐（厨艺见长了哈哈）。白天基本是忙碌的，晚上闲下来看点书玩点电脑打个盹也就过去了。

第一次深深感受到爷爷奶奶当家带大我们的艰辛。

害怕的是【树欲静而风不止，子欲养而亲不待。】但愿二老安好，等到我立业的那天，用我挣的钱享福。

2.CCPS&&UC

a）前天收到燕妮姐的邮件，叫我重新考虑宣传组组长一职，我竟然当即回复：接受挑战，尽力做好。

之前之所以推脱，是因为刚加入新创办的UC俱乐部担任宣传部副部长，恐不能两头兼顾，担当不起。

但其实就像当初犹豫再三才申请加入俱乐部一样，【与其后悔，不如遗憾。】

也正如结果—成为UC的成员参与俱乐部创办初期的建设，【机会是自己把握的。】

身兼二职，也就是说暑假回去，将会有很多事得承担。但希望自己的尽心投入，能收获汇报。

【不逼自己一把，就不知道自己有多优秀。】对吧？

我不能很自信我能做好，但我一定不能退缩不去尝试。

所以，干吧！

b）文教夏令营在即，但联络校方确定营会时间的事迟迟未定，让人着急。

想起去年八月才加入文教，而今年却已经成为活动的负责人了。没有太多资深义工的帮助，校方联络、学生挑选面试、营会开展的工作由我们全

权负责 的确是一个巨大的挑战，但也只能硬着头皮去完成了。

谁知道我的成长少了这步，会有多么残缺呢？希望明后两天搞定校方的事，就全力开展工作。

绝不能退缩，绝不能把活动搞砸，绝不能让文教失望！

3.前端||网络

打开Evernote的《2012暑假计划》，一一列举了期末写好计划在暑假完成的事项，明显感觉力不从心了。

大一下没有专心学课内的东西，一天到晚净面对着电脑，查阅了很多资料、刷了很多的知乎、浏览了很多的招聘网站，试着去规划自己的职业方

向。花了时间尝试了NA、前端，终于发现了自己喜欢的东西。但在这二者之间选择，却又有很多的东西需要去权衡。

【喜欢一件事，心里总会惦记着。】期末面临挂科的风险，却还想把复习的时间拿来学习前端。现在回想起来，也许这就是与职业理想相关的内心渴望吧。

在忙家务的间隙里，坚持多看书吧—争取暑假学完前端基础，多多实践。争取开学前完成自己的个人网站并坚持长期维护。

HTML5，我来了！

1. 1. 1.3.3统一代码风格，方便日后维护
2. 2. 1.7
3. 3. ID{

 子选择器

 临近选择器

 属性选择器