jQuery10-18节笔记代码April5th

Reading time: 33 minutes and 38 seconds with 7401 words. 本文总阅读量

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

html <!DOCTYPE html>



10:获取鼠标的点击

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

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

html Test select and option

<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>


12.NBA东西部篮球队 

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

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

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

html

<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( //为什么? });

The basketball team

    The East Basketbal Teams

  1. 亚特兰大 老鹰
  2. 芝加哥 公牛
  3. 波士顿 凯尔特人
  4. 夏洛特 黄蜂
  5. 克利夫兰 骑士
  6. 布鲁克林 篮网
  7. 迈阿密 热火
  8. 底特律 活塞
  9. 纽约 尼克斯
  10. 奥兰多 魔术
  11. 印第安纳 步行者
  12. 费城 76人
  13. 华盛顿 奇才
  14. 密尔沃基 雄鹿
  15. 多伦多 猛龙

    The West Basketbal Teams

  1. 金州 勇士
  2. 丹佛 掘金
  3. 达拉斯 小牛
  4. 洛杉矶 快船
  5. 明尼苏达 森林狼
  6. 休斯顿 火箭
  7. 洛杉矶 湖人
  8. 奥克兰陈马成 雷霆
  9. 孟菲斯 灰熊
  10. 菲尼克斯 太阳
  11. 波特兰 开拓者
  12. 新奥尔良 鹈鹕
  13. 萨克拉门托 国王
  14. 犹他 爵士
  15. 圣安东尼奥 马刺
  • 步行者
  • 山猫

<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>




12:逐帧变化Animate

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


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

html Test select and option


13: Cookie



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


定义:

$.cookie('uName', $('#YourName').val());


使用:



$.cookie('uName')



作用:

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



需要加载jquery.cookie.js 插件


html Test select and option




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 Test select and option

<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>




weibo.css:

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进行
//   切换
//如果超出多少个字  则变红色警告

javascript $.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’+len+’words’); }else{ //设置 变成高亮的红色 $(‘#Send .CountTxt’).html(‘Already exceed ’+Math.abs(len)+’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=$(’

’).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 向右浮动 $(’Close’).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);
        }
    });

});

```

Avatar
Ye Zhaoliang
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

本站访问量: