jQuery10-18节笔记代码April5th

http://www.rupeng.com/forum/thread-45422-1-1.html jquery1-9 1:移除元素 $(‘div’).empty() 清空层中的元素 $(‘div’).remove(’.cls’) 清空层中运用cls样式的元素 $(‘div’).remove() 自我删除 2: select 下拉框的练习 单选移到另一个框 全选移到另一个框 option:selected表示已选中的元素 :selected表示所有选中的下列框元素,前提是select设置了 multiple=“multiple”

案例1:(单选和全选)

<Html>
  <Head>
    <Title>Test select and option </Title>
    <script type="text/javascript" src="jquery-2.1.3.js" ></script>
    <script type="text/javascript">
      $(function(){
        $('#btnLeft').click(function(){
          $('#sel2 option:selected').appendTo('#sel1');
          //$('#sel1 option:selected').appendTo($('#sel2'));
        });
        $('#btnRight').click(function(){
          $('#sel1 option:selected').appendTo('#sel2');
        });

        $('#btnAllRight').click(function(){
          $('#sel1 option').appendTo('#sel2');
        });

        $('#btnAllLeft').click(function(){
          $('#sel2 option').appendTo('#sel1');
        });

      })
    </script>
  </Head>


  <Body>
    <Select id="sel1" multiple="multiple" style="float:left; width:400px;height:100px;">
      <!--Multipel can show all the contains in the selector-->
      <Option > delete</Option>
      <Option > create</Option>
      <Option > check</Option>
      <Option > update</Option>
      <Option > select</Option>
    </Select>
    <!--In the div, the width:50px  then inside the div
    is 50px width,so it change the line!
    And because the float:left ,so it will try to align
    along the left-->
    <Div style="float:left;width:50px">
      <Input type="button" id="btnLeft" value="<" style="width:50px"/>
      <Input type="button" id="btnRight" value=">" "width:50px"/>
      <Input type="button" id="btnAllLeft" value="<<" "width:50px"/>
      <Input type="button" id="btnAllRight" value=">>" "width:50px"/>

    </Div>
    <Button type="button" id="btnLeft1" value="To the left">"To the left"</Button>
    <Button type="button" id="btnRight1" value="To the right"/>"To the right"</Button>
    <Button type="button" id="btnAllLeft1" value="All To the left"/>"All To the left"</Button>
    <Button type="button" id="btnAllRight1" value="All To the left"/>"All To the left"</Button>
    <!--Because of the float:left,so selector will focuse to
        take occupy of the left position-->
    <Select id="sel2" multiple="multiple" style="float:left; width:400px;height:100px;">
      <!--<Select id="sel2" multiple="multiple">-->
    </Select>


  </Body>

</Html>

案例2:计算器

使用switch …case 判断选中的计算器操作符 注意:输入参数的有效性的判断。

<Html>
  <Head>
    <Title>Test Calculator with the basic operator</Title>
    <script type="text/javascript" src="jquery-2.1.3.js" ></script>
    <script type="text/javascript">
      $(function(){
        $('#equal').click(function(){
          var leftvalue=$('#one').val();
          var rightvalue=$('#two').val();
          if(leftvalue=='')
          {
            console.log('The empty of the one!;');
            return;
          }
          if(rightvalue=='')
          {
            console.log('The empty of the two!;');
            return;
          }
          var result=0.0;
          //alert($('#operator :selected').val());
          //alert(typeof($('#operator :selected').val()));
          switch($('#operator :selected').val())
          {
            case '+':
              result=parseFloat(leftvalue)+parseFloat(rightvalue);
              break;
              case '-':
result=parseFloat(leftvalue)-parseFloat(rightvalue);
              break;
             case '*':
result=parseFloat(leftvalue)*parseFloat(rightvalue);
              break;
             case '/':
result=parseFloat(leftvalue)/parseFloat(rightvalue);
              break;

              default:
                break;
          }
          $('#result').val(result);
        })
      })
    </script>

  <Body>
    <Input type="text" id="one"/>
    <Select id="operator" style=" width:40px;height:30px;">
      <Option>+</Option>
      <Option>-</Option>
      <Option>*</Option>
      <Option>/</Option>
    </Select>
    <Input type="text" id="two"/>
    <Input type="button" id="equal"value="="/>
    <Input type="text" id="result"/>
  </Body>
</Html>

4: checkbox的练习

:disabled 属性的练习

案例1: 软件安装时需要提醒用户阅读协议,一般是5s,然后才可以点击同意。

注意:计时器setInterval和清除计时器clearInterval() . 回顾: setTimeout 和 clearTimeout

<Html>
  <Head>
    <Title>Test Time machine </Title>
    <script type="text/javascript" src="jquery-2.1.3.js" ></script>
    <script type="text/javascript">
      $(function(){
        var i =5;
        var timeMeter=setInterval(function(){
          if(i>0)
          {
            i--;
            $('#span1').text('Please read the agreement carefully('+i+'s)');
          }else
          {
            //forget clear The time meter
            clearInterval(timeMeter);
            $('#span1').text('Agree');
            $('#chk').attr('disabled',false);
          }
        },1000);
      })
    </script>
  </Head>

  <Body>
    <Input type="checkbox" id="chk" disabled="disabled"><Span id="span1">Please read the agreement carefully(5s)</Span>
  </Body>

</Html>

            $('#span1').text('Agree');
            $('#chk').attr('disabled',false);
          }
        },1000);
      })
    </script>
  </Head>

  <Body>
    <Input type="checkbox" id="chk" disabled="disabled"><Span id="span1">Please read the agreement carefully(5s)</Span>
  </Body>

</Html>

5:事件冒泡

取消事件冒泡的方法 arguments[0].stopPropagation 或者 function(e){e.stopPropagation();}

附加上图片的脱离文档流操作和一次事件

但是one在jquery-1.8.3.min.js 能够试验通过 ,在2.1.3.js新版本则不行。

<Html>
  <Head>
    <Title>Test select and option </Title>
    <script type="text/javascript" src="jquery-2.1.3.js" ></script>
    <script type="text/javascript">
      $(function(){
        $('#btn').click({'name':'xiaomin'},function(e){
          alert(e.data.name) ;
        });
        $('#dv').click(function(){
          alert($(this).attr('id'));
        });

        $('#ps').click(function(){
          alert($(this).attr('id'));
        });
        $('#sp1').click(function(){
          alert($(this).attr('id'));
          //如果加上这句话,事件就不会冒泡了
          //可不敢露了一个s
          //$(argument[0]).stopPropagation();//取消底层的事件冒泡
          arguments[0].stopPropagation();//取消底层的事件冒泡
          //方法2  function(e){e.stoppropagation();}
        });


        //Test Image
        $(document).mouseover(function(e){
          //1 脱离文档流
          //2 给定坐标
          $('img').css('position','absolute').css({"left":e.pageX,"top":e.pageY});
        });

        //一次事件
        $('#btnOnce').one(function(){
          alert('烟花总是灿烂,但是只开一次');
        });
      });
    </script>

    </Head>

  <Body>
    <Input type="button" name="name" value="getData" id="btn"/>
    <Div id="dv" style="width:300px; height:200px; border:1px solid red;">
      <P id="ps" >
        <Span id="sp1" style="width:200px; height:100px; border:1px solid yellow"> This is zone of span</Span>
      </P>
    </Div>

    <Input type="button" id="btnOnce" value="onceEvent"/>
    
    <Img src="2.png"/>
  </Body>

</Html>

7: replaceAll and replaceWith

repalceAll 把左边的标签替换包含右边文本的标签

replaceWith 把右边的标签替换左边文本的标签

    $('#btn').click({'name':'xiaomin'},function(e){
      alert(e.data.name) ;

7.1 标签包裹

1 wrap 每个p标签各自被一个 font包裹 2 wrapAll 所有p标签被一个font 包裹 3 wrapInner 每个P标签内部都有意个font标签

7.2 百度搜索框

focus blur

以及removeClass的操作

7.3 RadioButton 的选择 :checked

通过attr(‘checked’,true);进行设置

<Html>
  <Head>
    <Title></Title>
    <script type="text/javascript" src="jquery-2.1.3.js">
    </script>

    <script type="text/javascript">
      $(function(){
        //with all label
        $('#btn1').click(function(){
          $('br').replaceWith('<Hr/>')
        });

        //replaceAll with not all labels
        $('#btn2').click(function(){
          $('<br/>').replaceAll('hr');
        });

        $('#btn3').click(function(){
          //1wrap   每个p标签各自被一个 font包裹
          //2wrapAll  所有p标签被一个font 包裹
          //3wrapInner 每个P标签内部都有意个font标签
          //$('div p').wrap('<Font color="red" size="8" ></Font>');
          //$('div p').wrapAll('<Font color="red" size="8" ></Font>');
          $('div p').wrapInner('<Font color="red" size="8" ></Font>');
        });

        //你可以通过浏览器的探测功能,观察每一个过程html代码结构的
        //变化
        //下面代码适应所有的html文件!!!
        //只有body里面有东西都是可以的
        // 回顾: 聚焦控件联系    其实还包括focus and blur的联系
        /// 另外这些知识点统归为jQuery的时间编程
        /*
        $('body *').mouseover(function(){
          $(this).addClass('cls');
        }).mouseout(function(){
          $(this).removeClass('cls');
        });
        */


        //focus and blur
        //回顾了 事件编程 包括click  mouseover  mouseout hover悬停事件等

        // 百度搜索框的jquery实现
        //var contents=$(this).val();
        $('#baidu001').focus(function(){

          if($(this).val() =='Please input some value')
          {
            // 作用是如果当前的值为这个,那我就证明需要我输入什么
            //于是我就removeClass 然后开始写上值
            $(this).val('').removeClass('baidu');
          }
        }).blur(function(){
          if($(this).val().length==0)
          {
            //如果用户没有填写任何东西,就主动给他附上值
            $(this).val('Please input some value').addClass('baidu');
          }
        });

        $('#btnRadio').click(function(){
//          $(':radio[value=1]').attr('checked',true);
//          $('input[value=1]').attr('checked',true);
//          $('input[type=radio][value=1]').attr('checked',true);
            //$(':radio').val(['1','2','6']);  必须一一对应才会被选中?
            //$(':radio').val(['1','2','3']);
          $(':radio').val(['4','2','3']);// 哪个不对应上 则不选择哪个

          //也就是radiobutton是按照alue值来进行区分的


        })

      });
    </script>
    <style type="text/css">
      .cls
      {
        background-color:red;
      }
      .baidu
      {
        background-color:gray;
      }
      div
      {
        width:300px;
        height:200px;
        background-color:green;
      }
    </style>

  </Head>
  <Body>
    <Input type="button" id="btn1" value="with"/>
    <Input type="button" id="btn2" value="All"/>

    <P>Good morning 1</P>
    <Br/>
    <P>Good morning 2</P>
    <Br/>
    <P>Good morning 3</P>
    <Br/>
    <P>Good morning 4</P>
    <Br/>

    <Input type="button" id="btn3" value="packet with one font"/>
    <Div id="dv">
      <P> Good Afternoon</P>
      <P> Good Afternoon</P>
      <P> Good Afternoon</P>
      <P> Good Afternoon</P>
      <P> Good Afternoon</P>
    </Div>
    <Input type="text" id="baidu001" class="baidu" value="Please input some value">

    <Input type="button" id="btnRadio" value="selectTheRadio"/>
    <Input type="radio" name="1" value="1"> Man
    <Input type="radio" name="2" value="2"> Woman
    <Input type="radio" name="3" value="3"> Secret
  </Body>
</Html>

8:checkbox事件bind

属性选择器

attr 和prop的区别和联系:

attr: function( elem, name, value, pass ) { 
var ret, hooks, notxml, 
nType = elem.nodeType; 
// don't get/set attributes on text, comment and attribute nodes 
if ( !elem || nType === 3 || nType === 8 || nType === 2 ) { 
return; 
} 
if ( pass && jQuery.isFunction( jQuery.fn[ name ] ) ) { 
return jQuery( elem )[ name ]( value ); 
} 
// Fallback to prop when attributes are not supported 
if ( typeof elem.getAttribute === "undefined" ) { 
return jQuery.prop( elem, name, value ); 
} 
notxml = nType !== 1 || !jQuery.isXMLDoc( elem ); 
// All attributes are lowercase 
// Grab necessary hook if one is defined 
if ( notxml ) { 
name = name.toLowerCase(); 
hooks = jQuery.attrHooks[ name ] || ( rboolean.test( name ) ? boolHook : nodeHook ); 
} 
if ( value !== undefined ) { 
if ( value === null ) { 
jQuery.removeAttr( elem, name ); 
return; 
} else if ( hooks && "set" in hooks && notxml && (ret = hooks.set( elem, value, name )) !== undefined ) { 
return ret; 
} else { 
elem.setAttribute( name, value + "" ); 
return value; 
} 
} else if ( hooks && "get" in hooks && notxml && (ret = hooks.get( elem, name )) !== null ) { 
return ret; 
} else { 
ret = elem.getAttribute( name ); 
// Non-existent attributes return null, we normalize to undefined 
return ret === null ? 
undefined : 
ret; 
} 
}

prop:

```javascript
prop: function( elem, name, value ) { 
var ret, hooks, notxml, 
nType = elem.nodeType; 
// don't get/set properties on text, comment and attribute nodes 
if ( !elem || nType === 3 || nType === 8 || nType === 2 ) { 
return; 
} 
notxml = nType !== 1 || !jQuery.isXMLDoc( elem ); 
if ( notxml ) { 
// Fix name and attach hooks 
name = jQuery.propFix[ name ] || name; 
hooks = jQuery.propHooks[ name ]; 
} 
if ( value !== undefined ) { 
if ( hooks && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ) { 
return ret; 
} else { 
return ( elem[ name ] = value ); 
} 
} else { 
if ( hooks && "get" in hooks && (ret = hooks.get( elem, name )) !== null ) { 
return ret; 
} else { 
return elem[ name ]; 
} 
} 
}

attr方法里面,最关键的两行代码,elem.setAttribute( name, value + “” )和ret = elem.getAttribute( name ),很明显的看出来,使用的DOM的API setAttribute和getAttribute方法操作的属性元素节点。而prop方法里面,最关键的两行代码,return ( elem[ name ] = value )和return elem[ name ],你可以理解成这样document.getElementById(el)[name] = value,这是转化成JS对象的一个属性。(Perfect的确这样,有两种方法一种是[] 另外一种是get(0))

分别做了文本框和checkbox的测试: 1:在遇到要获取或设置checked,selected,readonly和disabled等属性时,用prop方法显然更好 2:需要true or false的时候 最好使用 prop ,因为他返回的是true or false 3:其他情况再考虑attr, checkbox返回的是checked

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

        .cls
        {
            width: 300px;
            height: 200px;
            background-color: red;
        }
    </style>
    <script type="text/javascript"src="jquery-2.1.3.js"></script>
    <script type="text/javascript">

$(function(){

    $('#btn').click(function(){

        //$('div').empty();//清空层中的元素
        //$('div').remove();//层没了,自杀


        $('div').remove('.cls');//移除应用了cls样式的层;
    });
    var el=$('#atr1');
    console.log('attr :'+el.attr('style')); //undefined 
    console.log('prop() :'+el.prop('style')); //CSSStyleDeclaration对象 
    console.log('prop() :'+document.getElementById('atr1').style); //CSSStyleDeclaration对象 
    //attr 定义 只能attr('')去掉用  attr是一种jQuery的对象操作
    //prop 定义 只能prop('')去掉用  prop是一种JSDom的对象操作
  el.attr('abc','111');
console.log('attr el:abc--------'+el.attr('abc'));
console.log('prop el:abc--------'+el.prop('abc'));
     el.prop('def','2222');
console.log('attr el:def--------'+el.attr('def'));
console.log('prop el:def--------'+el.prop('def'));

// prop显示的checked之类的是  true or false 而不是attr的undefined or checked
var ek=$('#chk1');
console.log('attr el:checked--------'+el.attr('checked'));
console.log('prop el:checked--------'+el.prop('checked'));
console.log('attr el:disabled--------'+el.attr('disabled'));
console.log('prop() 的方法叫合理些');
console.log('prop el:disabled--------'+el.prop('disabled'));



});
    </script>
</head>
<body>
<input type="button" name="name" value="删除元素" id="btn"/>
<div class="cls">

    <input type="text" name="name" value="文本框" id="atr1"/>
    <input type="checkbox" name="name" value="ceshi" id="chk1" checked="checked"/>
</div>
</body>
</html>

checkbox的测试案例:

<Html>
  <Head>
    <Title> </Title>
    <Meta charset="UTF-8">
    <script type="text/javascript" src="jquery-2.1.3.js"></script>
    <script type="text/javascript" >
      $(function(){
        $('#btnAll').click(function(){
          //可以但是不好用
          //$('#dv :checkbox').attr('checked','checked');
          //$('#dv :checkbox').attr('checked',true);
          //$('div :checkbox').attr('checked',true);
          $('div :checkbox').prop('checked',true);

        });
      $('#btnNot').click(function(){
        //1
          //$('#dv :checkbox').removeAttr('checked');
        //2
          //$('#dv :checkbox').attr('checked',false);
          //$('div :checkbox').attr('checked',false);
          $('div :checkbox').prop('checked',false);
        });
      $('#btnInverse').click(function(){
        //$('#dv :checkbox').each(function(){
        $('div :checkbox').each(function(){
          //错误1
          //$(this).setAttribute('checked',!$(this)['checked']);
          //不行
          //$(this).setAttribute('checked',!$(this).attr('checked'));
          //思路对了!!但是就是不行!!是不是跟编码有关系
          //$(this).attr('checked',!$(this).attr('checked'));
          $(this).prop('checked',!$(this).prop('checked'));
        });
      });

      });
    </script>
    <style type="text/css">
      /*
      div
      {
        margin:5px;
        background-color:green;
      }
      */
    </style>
  </Head>


  <Body>
    <Div id="btnDv">
      <Input type="button" value="allSelected" id="btnAll"/>
      <Input type="button" value="allNotSelected" id="btnNot"/>
      <Input type="button" value="allSelectedInverse" id="btnInverse"/>
    </Div>

    <Div id="dv">
      <Input type="checkbox" name="name" value="1" id="btnEat"/>eating
      <Input type="checkbox"  name="name" value="2" id="btnSleep"/>sleeping
      <Input type="checkbox"  name="name" value="3" id="btnPlay"/>playing
    </Div>
  </Body>

</Html>

最终通过prop解决了属性问题。attr在2.1.3.js是有问题的

另外2.1.3.js还存在toggle的点击切换问题,在1.8.3测试中未发现问题,类似先前的one点击事件

TestBind.html: 用于测试toggle

但是在2.1.3无法切换,在1.8.3可以

本想通过下述代码 实现toggle,却发现无法返回到first当中

    $('#btn').click()
     {
       alert('first');
       $(this).unbind().bind('click',function(){
         alert('second');
         $(this).unbind().bind('click',function(){
           alert('third');
      
         });
       });

9: 文本输入框的测试

1:如果文本框没有输入文本,那么鼠标离开变成红色

<Html>
  <Head>
    <Title>Test select and option </Title>
    <script type="text/javascript" src="jquery-2.1.3.js" ></script>
    <script type="text/javascript">
      $(function(){
        $('input[type=text]').blur(function(){
          if($(this).val().length==0)
          {
            $(this).css('backgroundColor','red');
          }else
          {
            $(this).css('backgroundColor','');
          }
        });
      });
    </script>
    <style type="text/css">
      div
      {
        width:100px;
        float:left;
      }
      input
      {
        width:100px;
        margin:10px;
      }
    </style>

  </Head>
  <Body>
      
  <Div id="dv" >
    <Input type="text"/>
    <Input type="text"/>
    <Input type="text"/>
    <Input type="text"/>
    <Input type="text"/>
  </Div>
  </Body>
</Html>

10:获取鼠标的点击

左键:1 中键:2 右键:3 e.which 返回其值

注意:js中使用 backgroundColor:pink css中使用background-color:pink;

<Html>
  <Head>
    <Title>Test select and option </Title>
    <script type="text/javascript" src="jquery-2.1.3.js" ></script>
    <script type="text/javascript">
      $(function(){

        $('#countMouse').click(function(e){
          //获得鼠标敲击的值
          //左键 1
          //中键 2
          //右键 3
          alert(e.which);
        });
    });
    </script>

  </Head>

  <Body>

    <!--可不敢再犯这种backgroundColor:pink的错误-->
<Div id="countMouse" style="width:300px;height:200px;background-color:pink">
    </Div>
  </Body>

</Html>
  1. 隐藏和显示

1: 标签显示和隐藏 show hide toggle 在2.1.3中不行

2:slide 幻灯片 slideDown slideUp slideToggle

3: Fade 渐进 FadeIn FadeOut FadeToggle

1000 代表1000ms
一般分为三等 slow normal fast ,默认是normal

<Html>
  <Head>
    <Meta charset="utf-8">
    <script type="text/javascript" src="jquery-2.1.3.js"></script>

    <script type="text/javascript">
      $(function(){
        $('#btnShow').click(function(){
         // $('div').show(1000);
         //slide 分为三个 
         $('div').slideDown(1000);
         //$('div').fadeIn(1000);
        });
        $('#btnHide').click(function(){
         // $('div').hide(1000);
          //在1.8.3.min效果一样

          $('div').slideUp(1000);

         //Fade in out toggle 都可以实现
         //$('div').fadeOut(1000);
        });
        $('#btnToggle').click(function(){
          $('div').slideToggle(1000);
          //$('div').fadeToggle(1000);
        });

      });
    </script>
  </Head>
  <Body>
      <Input type="button" id="btnShow" value="show"/>
      <Input type="button" id="btnHide" value="hide"/>
      <Input type="button" id="btnToggle" value="toggle"/>
      <Div id="dv" style="width:400px;height:400px;background-color:pink">
      </Div>
  </Body>
</Html>

12.NBA东西部篮球队

a.通过unbind().bind()来绑定已经解绑的标签事件 b.attr 包含很多属性 比如style(主要是一些背景颜色 border width heigth 等)

功能是: a.鼠标经过时候变沉红色 其他的为白色背景 b.鼠标点击后则把该只球队剔除,并放在退赛球队中

bug: 东部球队在剔除后,分配到outEast中,mouseover的鼠标移动事件无法实现,然而西部却是可以。。。。

<Html>
  <Head>
    <Meta charset="utf-8">
    <script type="text/javascript" src="jquery-2.1.3.js"></script>

    <script type="text/javascript">
      $(function(){
        $('#east li').mouseover(function(){
          $(this).css('backgroundColor','red').siblings().css('backgroundColor','');
          //alert($(this).style);
        }).click(function()
           {
             //$(this).removeAttr('style').unbind().appendTo('#outerEast');
             //$(this).attr('backgroundColor','blue').appendTo('#outerEast');
             //$(this).css('backgroundColor','blue').unbind().appendTo('#outerEast');
             //$(this).attr('backgroundColor','blue').unbind().appendTo('#outerEast');
             //可不敢犯这个错误,如果不加end()的断链操作,会把所有的siblings()元素
             //提交到下边哐当中!
             //$(this).css('backgroundColor','blue').siblings().css('backgroundColor','').end().unbind().appendTo('#outerEast');
             //在appendTo的事件发生之后(发展的角度来看)
             //但是发现不行,于是留下一个疑问

             //现在明白了既然unbind就得需要用bind()来解决
             //$(this).unbind().appendTo('#outerEast').attr('onmouseover','').mouseover(function(){
             $(this).css('backgroundColor','blue').siblings().css('backgroundColor','').end().unbind().appendTo('#outerEast').bind('mouseover',function(){
               //错误阿!!!居然把所有的其他都给功能禁用了!
             //$(this).css('backgroundColor','blue').siblings().css('backgroundColor','').unbind().end().appendTo('#outerEast').bind('mouseover',function(){
               $(this).css('backgroundcolor','blue').siblings().css('backgroundColor','');
             });
           });
        $('#west li').mouseover(function(){
          $(this).css('backgroundColor','red').siblings().css('backgroundColor','');
        }).click(function()
           {
             //可不敢再犯这个错误
             //attr不止一个属性,不仅仅是style
             //而css只是设置界面属性
             //$(this).removeAttr('style').unbind().appendTo('#outeWest');

             //可行阿!!!试验了一个小时   bind之后再到之后的地方unbind即可
             //$(this).unbind().appendTo('#outerWest').bind('mouseover',function(){
             //好处是直接显示蓝色
             $(this).css('backgroundColor','blue').siblings().css('backgroundColor','').end().unbind().appendTo('#outerWest').bind('mouseover',function(){
              $(this).css('backgroundColor','blue').siblings().css('backgroundColor','');
             });
             //$(this).attr('backgroundColor','blue').unbind().appendTo('#outerWest');
             //attr只会保存着第一个backgroundcolor的值!
           });

           //增加一个功能,可以返回到原先的竞争队列中
           // 先清空一下试试
         //$('#outerEast li').click(function(){

         /*
         $('#outerEast li').attr('onclick','').click(function(){
           $(this).css('backgroundColor','blue').bind('click',function(){
            $(this).css('backgroundColor','red').appendTo($('#east'));
           });
         });

         $('#outerEast li').attr('onclick','').click(function(){
           $(this).css('backgroundColor','blue').bind('click',function(){
            $(this).css('backgroundColor','red').appendTo($('#east'));
           });
         });
         */

//如果onclick事件原先有值,要先清空,再用click( 
//为什么?
      });
    </script>

  </Head>

  <Body>
    <H2>The basketball team</H2>
    <Ol id="east">
      <H3>The East Basketbal Teams</H3>
      <Li>亚特兰大 老鹰</Li>
      <Li>芝加哥 公牛</Li>
      <Li>波士顿 凯尔特人</Li>
      <Li>夏洛特 黄蜂</Li>
      <Li>克利夫兰 骑士</Li>
      <Li>布鲁克林 篮网</Li>
      <Li>迈阿密 热火</Li>
      <Li>底特律 活塞</Li>
      <Li>纽约 尼克斯</Li>
      <Li>奥兰多 魔术</Li>
      <Li>印第安纳 步行者</Li>
      <Li>费城 76人</Li>
      <Li>华盛顿 奇才</Li>
      <Li>密尔沃基 雄鹿</Li>
      <Li>多伦多 猛龙</Li>
    </Ol>
    <Ol id="west">
      <H3>The West Basketbal Teams</H3>
      <Li>金州 勇士</Li>
      <Li>丹佛 掘金</Li>
      <Li>达拉斯 小牛</Li>
      <Li>洛杉矶 快船</Li>
      <Li>明尼苏达 森林狼</Li>
      <Li>休斯顿 火箭</Li>
      <Li>洛杉矶 湖人</Li>
      <Li>奥克兰陈马成 雷霆</Li>
      <Li>孟菲斯 灰熊</Li>
      <Li>菲尼克斯 太阳</Li>
      <Li>波特兰 开拓者</Li>
      <Li>新奥尔良 鹈鹕</Li>
      <Li>萨克拉门托 国王</Li>
      <Li>犹他 爵士</Li>
      <Li>圣安东尼奥 马刺</Li>
    </Ol>
    <Ul id="other">
      <Li>步行者</Li>
      <Li>山猫</Li>
    </Ul>

    <H2>The basketball team which have been out of the game.</H2>

    <Hr color="red"/>
    <H3>The team of the west</H3>
    <Ol id="outerWest">

    </Ol>

    <Hr color="red"/>
    <H3>The team of the east</H3>
    <Ol id="outerEast">

    </Ol>

  </Body>
</Html>

12:逐帧变化Animate

    //animate的作用其实就是动态的改变效果
    // 比如从某个点 移动某个点
    //     慢慢的拉伸长度  高度  模仿人的动作,并可以通过设置
    //     ms数 

会飞的鸟: 功能: 1 先让他从(0,0)移动到 (200,50) 1s移动时间 2 再让其从(200,50) 移动到(700,150) 2s移动时间(可以使用+= 注意了)

<Html>
  <Head>
    <Title>Test select and option </Title>
    <script type="text/javascript" src="jquery-2.1.3.js" ></script>
    <script type="text/javascript">
      $(function(){
        //animate的作用其实就是动态的改变效果
        // 比如从某个点 移动某个点
        //     慢慢的拉伸长度  高度  模仿人的动作,并可以通过设置
        //     ms数 
        $('#btn1').click(function(){
          //按照 默认的正常速度 延长高度到300px
          $('#box').animate({height:"300px"});
        });
        $('#fly').click(function(){
          //1000ms 从(0 0)  运行到200 50 的位置 时间1s
          //可不敢犯这个错误
          //$('#bird').animate('{"left":"200px","top":"500px"}',1000);
          $('#bird').animate({"left":"200px","top":"50px"},1000);
          // 加一个变小飞退的效果
          $('#bird').animate({"left":"+=500px","top":"+=100px","width":"40px","height":"30px"},2000);
        })
      })
    </script>
  </Head>


  <Body>
    <Input type="button" id="btn1" value="animate"/>
    <Div id="box" style="width:300px;height:200px ;background-color:red"> 
    </Div>
    <Input type="button" value="let me fly" id="fly">
    <Img src="2.png" style="position:absolute;" id="bird"/>
  </Body>

</Html>

13: Cookie

    //突然明白  cookie只不过是一堆hashmap  临时存储在浏览器当中哦 

定义:

$.cookie(‘uName’, $(’#YourName’).val());

使用:

$.cookie(‘uName’)

作用:

当刷新页面仍然会保存uName的值!

需要加载jquery.cookie.js 插件

<Html>
  <Head>
    <Title>Test select and option </Title>
    <script type="text/javascript" src="jquery-2.1.3.js" ></script>
    <!--$.cookie有效必须加载 jquery.cookie.js-->
    <script type="text/javascript" src="jquery.cookie.js" ></script>
    <script type="text/javascript">
      $(function(){
        $('#btn').click(function(){
            $.cookie('uName', $('#YourName').val());
            alert('I browser have record your name');
        });
        //突然明白  cookie只不过是一堆hashmap  临时存储在浏览器当中哦 
        if($.cookie('uName'))
        {
            $('span').text('welcome  Mr/Mrs '+$.cookie('uName')+' coming back');
        }else
        {
          $('span').text('welcome you !Little Bird . ')
        }
      });

    </script>

  </Head>

  <Body>
      <Input type="text" name="name" value="" id="YourName"/>
      <INput type="button" name="name" value="record" id="btn"/>
      <Span></Span>
  </Body>


</Html>

14:jqZoom局部放大器

注意点1:jqZoom在2.1.3测试失败! 但在1.8.3.min.js测试通过

注意点2: 要
连接上css否则效果不好:

注意点3: jqzoom()失效写的

注意点4: 大图片是放在一个

<Html>
  <Head>
    <Title>Test select and option </Title>
    <script type="text/javascript" src="jquery-1.8.3.min.js" ></script>
    <script type="text/javascript" src="jquery.jqzoom-core.js" ></script>
    <!-- 可不敢犯这个错误
    <script type="text/css" src="jquery.jqzoom.css" ></script>
    -->
    <LINK rel=stylesheet  type=text/css href="jquery.jqzoom.css" />
    <script type="text/javascript">
      $(function(){
      //$(document).ready(function(){
      //可不敢写错函数 z不可以大写
        //$('.MYCLASS').jqZoom();
        $('.MYCLASS').jqzoom();
            /*
          {
                zoomType: 'standard',
                lens:true,
                zoomWidth: 300,
                zoomHeight:450,
                xOffset:90,
                yOffset:30,
                preloadImages: true,
                alwaysOn:false
          });
              */
      });
    </script>

  </Head>

  <Body>
    <!--可不敢把 </A>放在 IMg标签外了-->
    <A class=MYCLASS  title=MYTITLE href="triumph_big1.jpg">
      <Img title="IMAGE TITLE" src="triumph_small1.jpg">
</A>
  </Body>


</Html>

15 qq微博案例

模拟微博140个字的提交案例

1: html部分 加载weibo.css 加载weibo.js 加载logo 加载textarea文本框 加载附件区 加载按钮 2: css部分 no-repeat 不进行平铺

3: js部分

3.1需要着重掌握 拓展的写法 3.2通过脱离文档流 来加在朋友列表和表情列表 3.3 学习广播的 追踪显示部分图片的功能 配合 background background-position 以及坐标进行设置 当然背景框是有大小限制的 no-repeat不平铺 利用css进 如果超出多少个字 则变红色警告

3.4 有三个地方 Please write down the topic 为什么? 1: 为了添加Topic 点击事件需要 2:在朋友列表和表情列表 第二个是因为当没有只有#Please write..# 则使用val()进行替换

    但是当textarea原先有内容时候,如果直接使用val(新内容)则会覆盖原先的旧内容 ,所以需要进行判断

3.5 selectRange的作用就是选择掉从第一个字符到最后一个字符,但是我的测试结果变成了选择 3.6 朋友列表,表情列表 都是通过建立一个新的层来设置 注意添加完close 标签后,在添加 朋友列表的时候需要在style属性中添加clear:both来清除 float:right的属性 3.7 表情层中 显示的文件夹路径得设置正确 注意 1: userFaces[key]在 表情上面的title 2: 小手功能 // 3: 点击功能 单机事件 鼠标mouseover的事件 会显示文字信息

weibo.html:

<Html>
  <Head>
    <Title>Test select and option </Title>
    <Link rel=stylesheet href="weibo.css" type="text/css">
    <script type="text/javascript" src="jquery-2.1.3.js" ></script>
    <script type="text/javascript" src="weibo.js">
    </script>

  </Head>

  <Body>

    <Img id="logo" src="weiboPic/b3_100901.png" alt="log"/>
    <!--让评论居中-->
    <Center>
      <Div id="Weibo">
        <Div id="WL">
          <Div id="Talking">
            <H2><A>Weibo Title: communication</A></H2>
            <Textarea id="Msg"></Textarea>
            <Div id="Attach">
              <A href="javascript:void();" class="NewTopic">Topic</A>
              <A href="javascript:void();" class="Friend">Friends</A>
              <A href="javascript:void();" class="Face">Face</A>
              <A href="javascript:void();" class="Pic">Picture</A>
              <A href="javascript:void();" class="Video">Video</A>
            </Div>
            <Div id="Send">
              <Input type="button" class="sendBtn" value=""/>
              <Span class="CountTxt">You can still write<Em>140</Em>words</Span>
            </Div>

        </Div>
        <!--
        <Div id="WR">

        </Div>
        -->
      </Div> 
    </Center>
  </Body>

</Html>

weibo.css:

        body
        {
            margin: 0px;
            background: url('weiboPic/wrapBg.jpg') no-repeat #EBF1F1;
        }
        #logo
        {
            margin: 30px 0 0 300px;
        }
        #Weibo
        {
            width: 800px;
            height: 200px;
            border: 1px solid #000;
        }
        /* WL: weiboLeft*/
        #WL
        {
            width: 590px;
            height: 100%;
            background: #fff;
            float: left;
        }
        /* WR: weiboLeft */
        #WR
        {
            background: #CCEBF4;
            width: 210px;
            height: 100%;
            float: right;
        }

        #Talking
        {
            text-align: left;
            margin: 0 0 0 25px;
        }
        /*增加文本框的大小*/
        #Msg
        {
            width: 540px;
            height: 80px;
            overflow: hidden;
            font-family: Tahoma, Arial;
            font-size: 14px;
            border: 1px solid gray;
        }
        #Talking H2
        {
            text-align: left;
            padding: 0px;
            margin: 0px;
            font: normal normal normal 18px/29px 'MicroSoft YaHei' , SimHei;
        }
        #Attach
        {
            width: 540px;
        }
        #Attach a
        {
            color: #000;
            text-decoration: none;
            font-size: 14px;
        }
        .NewTopic, .Friend, .Face, .Pic, .Video
        {
            background-position: -170px -33px;
            display: inline-block;
            height: 16px;
            padding-left: 18px;
        }
        .CountTxt
        {
            color: #999;
            float: right;
            line-height: 33px;
            margin: 0 15px 0 0;
        }
        .CountTxt em
        {
            font-family: Georgia, Tahoma, Arial;
            font-size: 26px;
            position: relative;
            top: -5px;
            vertical-align: middle;
        }
        .sendBtn
        {
            float: right;
            margin: 0 20px 0 0;
            padding: 0px;
            background: url(weiboPic/bg1.png) -117px -165px no-repeat;
            line-height: 33px;
            margin-left: 14px;
            height: 30px;
            width: 112px;
            border: 0px;
            cursor: pointer;
        }
        #btnCloFri
        {
            cursor: pointer;
        }
        

weibo.js: //1。扩展jQuery //需要着重掌握 拓展的写法 //通过脱离文档流 来加在朋友列表和表情列表 //学习广播的 追踪显示部分图片的功能 配合 background background-position // 以及坐标进行设置 当然背景框是有大小限制的 no-repeat不平铺 利用css进行 // 切换 //如果超出多少个字 则变红色警告

        $.fn.selectRange = function (start, end) 
        {
          //please write down the topic 高亮显示
          //转化为 js对象
            var curObj = $(this).get(0);
            if (!curObj)
              return;
            else if (curObj.setSelectionRange) 
            {
                curObj.focus(); curObj.setSelectionRange(start, end);
            } /* WebKit */
            else if (curObj.createTextRange) 
            {
                var range = curObj.createTextRange();
                range.collapse(true);
                range.moveEnd('character', end);
                range.moveStart('character', start);
                range.select();
            } /* IE */
            else if (curObj.selectionStart) 
            {
                curObj.selectionStart = start;
                curObj.selectionEnd = end;
            }
        };
        //====上面的代码是扩展的

    $(function()
    {

        //按钮高亮显示
        $('#Send .sendBtn').mouseover(function(){
          $(this).css('backgroundPosition','0 -195px');
        }).mouseout(function(){
            $(this).css('backgroundPosition','-117px -165px');
//-117px -165px
        });
        //计算文本框还能输入多少个字
        $('#Msg').change(function(){
            //还能输入多少个字
           var len= 140- $(this).val().length;
           if(len>=0){
                $('#Send .CountTxt').html('You can still write down<em>'+len+'</em>words');
            }else{
              //设置 变成高亮的红色
                $('#Send .CountTxt').html('Already exceed <em><font color="red">'+Math.abs(len)+'</font></em>words');
            }

        });
        setInterval(function(){
            $('#Msg').change();
        },500);


     //显示话题
        ////有三个地方 Please write down the topic  为什么?  1: 为了添加Topic 点击事件需要 2:在朋友列表和表情列表
        //为什么?
        $('#Attach .NewTopic').click(function(){

            if($('#Msg').val().length==0){
              //selectRange的作用就是去除掉 从第一个字符到最后一个字符
              //已方便我们输入话题
                $('#Msg').val('#Please write down the topic#').selectRange(1,28);
            }
        });
//显示朋友
        $('#Attach .Friend').click(function(){
            var friendsList = ['Foleide', 'Risse', 'LiLei','HanMeiMei','Tom','Turkkey','John'];
            if($('#dvF').length>0){
                $('#dvF').remove();
            }
            //增加了一个 朋友层 用于选择!!
            var dvFriends=$('<div id="dvF" style="width:100px;border:1px solid blue;background-color:white;position: absolute;"></div>').appendTo($('body'));
            //设置完层的脱离文档流 后,设置他的偏移
            var dvX=$(this).offset().left+'px';//层距离左侧的像素 注意 height() 有圆括号包裹
            var dvY=$(this).offset().top+$(this).height()+'px';
            //设置他的上和左的坐标
            dvFriends.css({"left":dvX,"top":dvY});
            //添加一个关闭按钮
            //float:right 向右浮动
            $('<span style="background-color: gray;cursor: pointer; float: right;">Close</span>').click(function(){
                $(this).parent().remove();
            }).appendTo(dvFriends);

            //显示朋友列表
            //clear:both 清除掉 span所具有的float效果!!
            //    规律: 如果同一级的元素有浮动的,就需要用clear:both来清除
            //否则 ulobj会跟close处在同一行当中
            //list-style-type:square
           var ulObj= $('<Ul style="clear: both; list-style-type: square; margin: 0;padding: 0;"></Ul>').appendTo(dvFriends);
            for(var i=0;i<friendsList.length;i++){
              //设置移到的鼠标为手型
               $('<Li style="margin-bottom: 5px; cursor: pointer;">@'+friendsList[i]+'</Li>').mouseover(function(){
                 //鼠标进入时候的高亮显示
                   $(this).css('backgroundColor','yellow');

                   //鼠标离开又得恢复过来
               }).mouseout(function(){
                   $(this).css('backgroundColor','');
               }).click(function(){
                 //不太明白这边的写法 ok
                 //如果用户没有输入任何内容 则替换掉原先的内容
                   if($('#Msg').val()=='##'){
                       $('#Msg').val($(this).text());
                   }else{
                     //如果用户已经输入了,则必须保证用户的数据不被覆盖
                       $('#Msg').val($('#Msg').val()+$(this).text());
                   }


               }).appendTo(ulObj);
            }
        });

        //显示表情
        var userFaces = { '0.gif': '微笑', '1.gif': '撇嘴', '2.gif': '色', '3.gif': '发呆', '4.gif': '得意', '5.gif': '流泪', '6.gif': '害羞', '7.gif': '闭嘴', '8.gif': '睡', '9.gif': '大哭', '10.gif': '尴尬', '11.gif': '发怒', '12.gif': '调皮', '13.gif': '呲牙', '14.gif': '惊讶', '15.gif': '难过', '16.gif': '酷', '17.gif': '冷汗', '18.gif': '抓狂', '19.gif': '吐', '20.gif': '偷笑', '21.gif': '可爱', '22.gif': '白眼', '23.gif': '傲慢', '24.gif': '饥饿', '25.gif': '困', '26.gif': '惊恐', '27.gif': '流汗', '28.gif': '憨笑', '29.gif': '大兵', '30.gif': '奋斗', '31.gif': '咒骂', '32.gif': '疑问', '33.gif': '嘘', '34.gif': '晕', '35.gif': '折磨', '36.gif': '衰', '37.gif': '骷髅', '38.gif': '敲打', '39.gif': '再见', '40.gif': '擦汗', '41.gif': '抠鼻', '42.gif': '鼓掌', '43.gif': '糗大了', '44.gif': '坏笑', '45.gif': '左哼哼', '46.gif': '右哼哼', '47.gif': '哈欠', '48.gif': '鄙视', '49.gif': '委屈', '50.gif': '快哭了', '51.gif': '阴险', '52.gif': '亲亲', '53.gif': '吓', '54.gif': '可怜', '55.gif': '菜刀', '56.gif': '西瓜', '57.gif': '啤酒', '58.gif': '篮球 ', '59.gif': '乒乓', '60.gif': '咖啡', '61.gif': '饭', '62.gif': '猪头', '63.gif': '玫瑰', '64.gif': '凋谢', '65.gif': '示爱', '66.gif': '爱心', '67.gif': '心碎', '68.gif': '蛋糕', '69.gif': '闪电', '70.gif': '炸弹', '71.gif': '刀', '72.gif': '足球', '73.gif': '瓢虫', '74.gif': '便便', '75.gif': '月亮', '76.gif': '太阳', '77.gif': '礼物', '78.gif': '拥抱', '79.gif': '强', '80.gif': '弱', '81.gif': '握手', '82.gif': '胜利', '83.gif': '抱拳', '84.gif': '勾引', '85.gif': '拳头', '86.gif': '差劲', '87.gif': '爱你', '88.gif': 'NO', '89.gif': 'OK', '90.gif': '爱情', '91.gif': '飞吻', '92.gif': '跳跳', '93.gif': '发抖', '94.gif': '怄火', '95.gif': '转圈', '96.gif': '磕头', '97.gif': '回头', '98.gif': '跳绳', '99.gif': '挥手', '100.gif': '激动', '101.gif': '街舞', '102.gif': '献吻', '103.gif': '左太极', '104.gif': '右太极', '105.gif': '淡定', '106.gif': '晕', '107.gif': '不满', '108.gif': '睡觉', '109.gif': '小调皮', '110.gif': '咒骂', '111.gif': '发怒', '112.gif': '偷笑', '113.gif': '微笑', '114.gif': '震惊', '115.gif': '囧' };
        $('#Attach .Face').click(function(){

            if($('#dvfaceImg').length>0){
                $('#dvfaceImg').remove();
            }
           var dvFace= $('<div id="dvfaceImg" style="width:370px;border:1px solid blue;background-color: white;position: absolute;"></div>').appendTo($('body'));
           //和朋友列表相同的操作过程!!!
            var dvXX=$(this).offset().left-100+'px';
            var dvYY=$(this).offset().top+$(this).height()+'px';
            //最终设置他的坐标
            dvFace.css({"left":dvXX,"top":dvYY});
            //显示 表情  关闭
            $('<Span style="float: left;">Expression</Span>').appendTo(dvFace);
            $('<Span style="float: right;cursor: pointer; background-color: gray;">close</Span>').click(function(){

                $(this).parent().remove();//删除层
            }).appendTo(dvFace);

            //显示表情
           var dvfaceimage= $('<div style="clear: both;"></div>').appendTo(dvFace);
            for(var key in userFaces){
              //显示的文件夹路径得设置正确
              //注意 1: userFaces[key]在 表情上面的title
              //     2: 小手功能
              //     3: 点击功能  单机事件
                $('<Img src="weiboPic/faces/'+key+'" title="'+userFaces[key]+'" />').mouseover(function(){
                    $(this).css('cursor','pointer');

                }).click(function(){
                  //不清楚 这边为什么这样写  同样的 在friend也是如此
                    //if($('#Msg').val()=='#Please write down the topic#'){
                    if($('#Msg').val()=='##'){
                        $('#Msg').val( '['+$(this).attr('title')+']');
                    }else{
                        $('#Msg').val($('#Msg').val()+'['+$(this).attr('title')+']');
                    }


                }).appendTo(dvfaceimage);
            }
        });

    });

令狐冲
令狐冲
Engineer of offshore wind turbine technique research

My research interests include distributed energy, wind turbine power generation technique , Computational fluid dynamic and programmable matter.

Related

本站访问量: