每日一发21

2012-10-30-CSS3写动态进度条

1.进度条效果

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

 

2.chrome云语音输入

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

每日一发21

2012-10-24-改变光标的样式

今天查阅资料学习怎样改变光标的样式，制作一些炫丽的光标效果。
第一种方法：改变光标样式的方法无非就是利用第三方控件或者利用CSS样式。

1.查阅相关属性：
















































































默认default
文字/编辑text
自动auto
手形pointer, hand(hand是IE专有)
可移动对象move
不允许not-allowed
无法释放no-drop
等待/沙漏wait
帮助help
十字准星crosshair
向上改变大小(North)n-resize
向下改变大小(South)s_resize 与n-resize效果相同
向左改变大小(West)w-resize
向右改变大小(East)e-resize 与w-resize效果相同
向左上改变大小（NorthWest）nw-resize
向左下改变大小（SouthWest）sw-resize
向右上改变大小（NorthEast）ne-resize 与sw-resize效果相同
向右下改变大小（SouthEast）se-resize 与nw-resize效果相同
自定义光标
url(‘光标地址’)

2. 测试表中所有的属性
.png).png).png).png)


第二种方法：利用第三方控件的方法

将以下代码加到网页文件的<head></head>之间：

<script language=javascript>var Loaded=false;var Flag=false;</script>

<script src=’http://files.cometsystems.com/javascript/lc2000.js‘ language=javascript></script>

<script language=javascript>if(Loaded&&Flag)TheCometCursor(‘cd_electric’,0,626);</script>
修改后，浏览此网页的时候浏览器会弹出一个“安全设置警告”，点击“是”，系统自动安装控件，鼠标就可以按照你的需要显示了。
选择需要的鼠标样式：登陆网站http://www.cometzone.com （14个大类4000多种鼠标，制作精美，点击相应的鼠标图片就可预览到不同的效果。）
选中鼠标后，点击网页左边导航的“GET CURSOR CODE”链接，转到下一页，再点击“Select Code”按钮，按钮下这个多行文本框里面的内容就是上面提供的代码，只是代码中TheCometCursor(‘cd_electric’,0,626)部分不同，显示的鼠标状态也不同.





碎片积累1

JQuery常用方法

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

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

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

$(‘div’).filter(‘.selected’);//选择含有.selected类的匹配元素

$(‘div’).not(‘.selected’);//选择不含有.selected类的匹配元素


$(‘div’).children();//选择div的第一代（孩子）

$(‘div’).find(‘span’);//选择div的span后代


$(‘div’).parent();//选择div的上一代（父亲）

$(‘div’).parents();//选择div的前代（祖宗）


$(‘h2’).closest(‘h1’);//选择离h2最近的h1


$(‘div’).siblings();//选择div的同级兄弟元素


$(‘div’).html();//得到div的值

$(‘div’).html(‘xiao’);//修改div的值


addClass();

removeClass();

toggleClass();

hasClass();


$.isArray(object);//检查object是否为数组，返回布尔值



jQuery处理CSS

使用.css()方法

使用.addClass()和.removeClass()方法

使用.toggleClass()方法


jQuery处理特效和动画

使用.animate() 方法

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

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

使用.stop() 方法


$(‘#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
    });});

使用setinterval()和clearinterval()方法


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);});



使用.delay()方法

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

jQuery DOM操作

使用.html()，.Text()和.empty()方法

//.html()设置或者取得特定标签中的内容

.text()设置或者取得文本而非标签的内容，返回一个字符串。


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

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



使用.append()，prepend()，after()和.before()方法


$(‘#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(‘’);});


使用jQuery的AJAX方法[使用指南]

使用get方法可以快速使用HTTP的get方法来取得页面内容

使用.load()方法

使用.post()方法



## jQuery处理事件


使用bind和unbind方法

//.click() 其实和bind(‘click’)方法是一样的。 当然，使用unbind方法我们可以将事件触发删除。

$(‘.item’).bind(‘click’, function(){//bind

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

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

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

使用live()，on()，off()方法

$(‘.item’).live(‘click’, function(){//live

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

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

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

很多老的方法像.live()，.bind()和.delegate()都可以使用最新的on()方法来实现，所有其它方法最后都是调用on方法，所以这里我们也可以将以上代码如下书写：

$(‘#container’).on(‘click’,‘.item’, function(){//on

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

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

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

使用delegate方法

//老版本的jQuery中，我们应该尽量使用delegate方法而不是live方法，你会发现delegate方法的性能要优于live方法，因为live方法将会从document层次来搜索元素，这会带来性能损失。

$(‘#container’).delegate(‘.item’,‘click’, function(){

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

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

使用one()方法

//需要元素只执行一次事件

$(‘#container’).one(‘mouseleave’,‘.item’, function(){

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

使用preventDefault()方法

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

$(‘#prevent’).click(function(e){

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

使用.stopPropagation()方法

//和preventDefault()方法类似，这个方法也可以阻止缺省行为，但区别是阻止上层元素的事件。注意不能和live方法联用，因为如果父元素是document会处理一次事件。

$(‘#prevent’).click(function(e){

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

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

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




使用.stopImmediatePropagation()方法

//使用这个方法将立刻阻止所有相关绑定事件。

$(‘#prevent’).click(function(e){

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

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

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




## jQuery DOM操作，循环和过滤


使用$.each()和.each() 方法

//$.each()方法是jQuery的一般性方法用来处理javascript对象或者数组。而.each()方法用来处理jQuery的自有对象。

//使用$.each()方法：

var gb_array = [‘jquery’, ‘javascript’, ‘java’, ‘jsp’, ‘java’, ‘c#’, ‘c’, ‘cpp’, ‘node.js’, ‘struts’, ‘spring’];


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


//使用.each()方法：

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

$(this).css({color:‘red’});})

使用$.data()，.data()，$.hasData()和 $.removeData()方法

     var $p = $(“p”),p = $p[0];

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

使用slice()方法

     //选择一系列元素中的特定区域，注意你可以输入负值，这样会从后面计算：

     $(‘div’).slice(-4,-1).css(‘background-color’, ‘red’);

使用.filter()方法

  $(‘div’).filter(‘:even’).css(‘background-color’, ‘red’);

使用.prev()和.next()方法

     在同一类的元素中选取前一个或者后一个元素：

     $(‘div:first’).addClass(‘selected’);var $cur = $(‘div.selected’);

$(‘#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’);
    }});


使用.find()，.children()，.parent()，.parents()，closest()方法

     //查询DOM中的元素


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