首页 > 代码库 > jQuery基础知识

jQuery基础知识

什么是jQuery,有什么特点,有什么好处


 

jQuery是一个js文件,它是一个JavaScript框架或脚本库。

特点是,将一些原始js脚本封装。利用选择器查找要操作的节点,并且将这些节点封装成jQuery对象,只需要调用jQuery对象的方法或者属性,就可以实现对节点的操作。

这样做的好处是:可以兼容不同的浏览器(解决了大部分的兼容性问题),另外,代码也得到简化。便于脚本开发。类似jQuery框架很多,例如prototype,ExtJs,yahoo,等都是JavaScript框架。

 

jQuery编程的基本步骤


 

1. 利用选择器查找要操作的节点。 var $obj=$(‘#d1’);

2. 调用jQuery对象的方法或者属性。 $obj.css(‘color’,’red’);

 

jQuery对象


 

什么是jQuery对象

利用jQuery选择器选出的对象才是jQuery对象。jQuery对象是一个集合,集合元素是原有js中DOM对象。注意:只有jQuery对象才可以使用jQuery提供的函数

 

对象类型的转换

1. 将一个DOM对象转换成jQuery对象  $(DOM对象)

//原始js实现
function f1(){
  var a1=document.getElementById("a1");
  alert(a1.innerHTML);
  var $a1=$(a1);//将dom a1对象转换成jQuery对象
  alert($a1.html());
}

2. 将一个jQuery对象转换成DOM对象

获取jQuery对象集合中的第一个DOM对象,jQuery对象[0] 或者jQuery对象.get(0)

//jQuery实现
function f2(){
  //获取id=a1的HTML元素
  var a1=$("#a1");//利用id选择器选择$("#id值")
  //获取a1中的html文本
  alert(a1.html());//利用html()函数获取信息
  //将jQuery对象转换成DOM对象
  alert(a1[0].innerHTML);//a1[0] dom对象
  //a1.get(0) jQuery函数,得到第一个元素 是DOM对象
  alert(a1.get(0).innerHTML);
}

3. 将一个字符串转换成jQuery对象   $(字符串)

function f3(){
    var opt=‘<option value="http://www.mamicode.com/1">北京</option>‘;
     var $opt=$(opt);//将一个字符串转换成jQuery对象
    alert($opt.html());
}

 

页面载入完毕执行指定函数fn

$(document).ready(function(){}); 或者 $(function(){});

//页面载入完毕后执行alert(),等价于onload事件
$(document).ready(function(){
    alert($("#a1").html());
});    
 //更简洁写法  在页面载入完毕后执行
$(function(){
    alert($("#a1").html());
})

 

jQuery选择器(参考文档)


 

什么是选择器?

jQuery借鉴了css选择器的语法,用来方便地查找要操作的节点。

 

基本选择器

1. 按id属性值选择    $("#id值")

2. 按class属性值选择 $(".class值")

3. 按元素名称选择    $("元素名称")

4. 选取所有元素      $(“*”)

5. 选取多个元素,用逗号隔开选择器  $("#c1,#c2")//选取id=c1和id=c2的元素

 

层级选择器

1. 父子关系           $("选择器1>选择器2")“>”代表父子关系

2. 祖先后代关系       $("选择器1 选择器2") ()

3. 前后关系           $("pre+next");(pre next紧挨着)

4. 兄弟关系(平级关系)  $("pre ~ siblings")

 

简单选择器

1. 选第一个      :first

2. 选最后一个    :last

3. 选基数元素    :even

4. 选偶数元素    :odd

5. 选指定元素    :eq(索引)

6. 选大于指定值的元素  :gt(索引)

7. 选小于指定值的元素  :lt(索引)//索引值从0开始

 

内容选择器

1. 根据指定文本信息选择          :contains(text);

2. 匹配没有子元素或者文本为空    :empty

        (6)可见性选择器

             a.选择不可见元素     :hidden  (input的type是hidden的,样式diplay:none的)

             b.选择可见元素       :visible

(7)属性选择器

             a.按属性值做条件选择   [属性名=属性值]

       (8)表单元素选择器

             a.选择所有表单元素,例如text,textarea,select    :input

             b.选择type="text"类型的输入框     :text

             c.选择type="checkbox"类型元素     :checkbox

             d.其他:password,:hidden,:radio,:button,:image,:file

        (9)表单对象属性选择器

             a.选择可用表单元素                 :enabled

             b.选择不可用表单元素               :disabled            <input type=”text” disabled=”disabled”/>

             c.选择被选中的checkbox,radio    :checked           <input type=”checkbox”  checked=”checked”/>

             d.选择被选中的select的option    :selected

   <option value=http://www.mamicode.com/”2” selected=”selected”>fdfgsgd

5、jQuerydom操作

(1)查询节点

 $(“选择器”);

 找到一个节点以后,可以通过以下四个方法来访问节点的html内容、文件内容、属性值、值。

 html()       text()          attr()          val()

(2)创建节点

$(html);

(3)插入节点

 append();作为最后一个孩子追加

 

5jQuery属性和样式函数

    (1)属性函数

             a.属性操作

                      attr(属性名);//返回属性值

                      attr(属性名,属性值);//设置属性名=属性值

             b.value属性操作

                      val();//返回value属性值

                      val(值);//设置value=http://www.mamicode.com/值

             c.获取div或span等元素文本信息操作 (纯文本(即字符串))

                      text();//返回元素中的文本内容    相当于属性innerText

                      text(值);//设置元素中的文本内容

             d.获取和设置div等元素的信息,内容当作HTML信息处理

                      html();        相当于属性innerHTML

                      html(值);

             e.class属性操作

                      addClass(值);//设置元素class="值"

                       removeClass(值);//删除class属性中的值

  2)css样式函数

    a.css样式控制

      css(样式属性)://获取样式属性的值

      css(样式属性,值);//设置样式属性值

    b.宽和高的控制

      width();//获取元素的宽

      width(值);//设置元素的宽度

      height();//获取元素的高

      height();//设置元素的高度

5.jQuery事件函数

  1)页面载入

    $(document).ready(function(){}) 或 $(function(){})

  2)基本事件

    click();//触发单击事件,执行单击事件

    click(fn);//为元素绑定一个单击处理

    focus();//获取焦点

    focus(fn);

    blur();//失去焦点

    blur(fn);

    change();//选项改变  用于select中option选项改变时发生该事件

    change(fn);

    unload(fn);//设置浏览器卸载页面前执行

    mouseover();//鼠标移上去

    mouseover(fn);

    mouseout();//鼠标移开

    mouseout(fn);

  3)事件切换函数

a.hover(over,out);鼠标移上去和移开两个事件,移上去执行over函数,移开执行

 out函数

    b.toggle(f1,f2,f3....);

      为一个元素绑定多个不同的单击处理事件,每次单击调用不同的fn

  4)事件处理函数

    a.bind("事件类型",fn);为元素绑定指定类型的事件处理事件

      $("#btn1").click(fn);

      $("#btn1").bind("click",fn);

    b.unbind("事件类型");为元素取消绑定的处理函数

      $("#btn1").unbind("click");//取消click事件

      $("#btn1").unbind();//取消绑定的所有事件

    c.trigger("事件类型");

      触发元素绑定的事件处理

      $("#btn1").click();

      $("#btn1").trigger("click");

    d.live("事件类型",fn);

      为现有和将来动态添加的元素绑定指定类型的事件

6.文档处理

  *1)创建文档对象

    $("字符串")

  *2)将文档对象添加到页面

    append(对象);//将对象值插入到元素内部末尾处

    prepend(对象);//将对象值插入到元素内部的前面

    after(对象);//将对象值插入到元素后面 作为兄弟

    before(对象);//将对象值插入到元素前面

  *3)将文档元素删除

    empty();//将元素内容清空

    remove();//将元素删除

  4)将文档元素复制

    clone();//复制元素

    clone(true);//深度复制,可以将关联时间复制

  5)将文档元素利用新元素包裹起来

    wrap(html);//利用指定的元素将文档元素包裹起来

  6)将文档元素替换

replaceWith(html);//利用html元素替换原有的

7.特效函数

  主要实现隐藏和显示功能.

  1)基本效果

    show();//将元素显示

    show(speed);//在指定speed时间内完成显示

        speed:参数值可以为‘slow‘,‘normal‘,‘fast‘

              也可以使用数字1000,2000(毫秒) 

    hide();//将元素隐藏  

    hide(speed);在指定时间内隐藏

    toggle();//切换隐藏和显示.

  2)滑动效果(改变元素高)

    slideDown(speed);//将元素显示

    slideUp(speed);//将元素隐藏

  3)淡入淡出效果(改变元素的透明度)

    fadeIn(speed);//将元素显示

    fadeOut(speed); //将元素隐藏

  4)自定义动画:animate();

8.筛选函数

         基于现有jQuery元素对象查找其他元素.

         1)过滤

           a.eq(索引)

             获取jQuery对象集合中某一个元素

           b.not(选择器)

             从jQuery对象集合中将符合选择器的元素排除

             返回剩下的元素.

           c.is(选择器)

             从jQuery对象集合中获取符合选择器的元素

           d.slice(begin,[end])

             从jQuery对象集合中获取begin-end的子元素      

          2)查找

                 a.find(选择器)

                   从当前jQuery集合中将符合选择器的后代元素

                   返回.

                 b.children(选择器)

                   从当前jQuery集合中将符合选择器的子元素返回

                 c.parent()

                   获取当前jQuery对象的父元素

                 d.siblings()

                   获取当前jQuery对象的兄弟

9.工具函数

  a.$.trim(str)

   字符串过滤空格,只过滤前后空格

  b.$.each(集合,fn)

   循环操作,每一个元素触发fn处理

 

===========================练习=======================

1.筛选表格中的内容

选择器  内容选择器  可见性选择器

 <body>:

<table>

                           <tr><td>魏晨参加了快乐男声</td><td>2009-9-14</td></tr>

                           <tr><td>我们都是乐橙</td><td>2009-9-14</td></tr>

                           <tr><td>魏晨在2007年出道</td><td>2009-9-14</td></tr>

                           <tr><td>love vision</td><td>2009-9-14</td></tr>

                           <tr><td>魏晨现在在韩国</td><td>2009-9-14</td></tr>

                  </table>

                  <input type="button" id="btn1" value="http://www.mamicode.com/筛选">

                  <input type="button" id="btn2" value="http://www.mamicode.com/恢复">

<script>: 

                  //将标题带有"魏晨"的加背景色

                  $(function(){$("td:contains(‘魏晨‘)").css("background-color","red");});

                 

//筛选按钮的处理

                  $(function(){

                           $("#btn1").click(function(){//单击处理

                                    $("tr").hide(2000);//将所有tr隐藏

                                    $("tr:contains(‘魏晨‘)").show(2000);//将带有魏晨的标题显示出来

                           });

                  });

                  //恢复按钮的处理

                  $(function(){

                           $("#btn2").click(function(){

                                    //$("tr").show();//将所有tr显示

                                    $("tr:hidden").show();//将所有隐藏的tr显示

                           });

                  });

 

2.多选框,点击全选实现全部选中或者全部不选的

选择器   属性选择器   表单元素选择器   表单对象属性选择器

<body>:

<input type="checkbox" id="checkall" name="checkall">全选<br/>

         <input type="checkbox" name="loves" value="http://www.mamicode.com/旅游">旅游

         <input type="checkbox" name="loves" value="http://www.mamicode.com/交友">交友

         <input type="checkbox" name="loves" value="http://www.mamicode.com/打游戏">打游戏

         <input type="checkbox" name="loves" value="http://www.mamicode.com/吃喝">吃喝<br>

         <input type="button"  id="btn1" value="http://www.mamicode.com/获取爱好"><br>

         <span id="s1"></span>

<script>:

$(function(){

                           //为全选checkbox追加单击处理

                           $("#checkall").click(function(){

                                    //单击处理逻辑,修改属性值

                                    var flag=$("#checkall").attr("checked");//读取checkall选中状态值

//为name=loves的设置状态值

                                    $(":checkbox[name=‘loves‘]").attr("checked",flag);

                           });

                  });

                  //为获取爱好按钮追加单击处理

                  $(function(){

                           $("#btn1").click(function(){

                                    //获取选中的checkbox,返回的是jquery对象   本质是DOM对象

                                    var $chks=$(":checkbox[name=‘loves‘]:checked");//获取信息

                                    //循环访问$chks中的DOM对象

                                    var str="";

                                    for(var i=0;i<$chks.length;i++){

                                              //$chks[i]是DOM对象,需要转换成jQuery对象才可以使用val()函数

                                             str+=$($chks[i]).val();

                                    }

                                    $("#s1").html(str);//设置信息

                           });

                  });

 

 

3.属性函数  attr(); val(); text(); html();

<body>:

         用户名:<input type="text" name="name" id="name"><br>

         爱好:

                  <select id="love">

                           <option value="http://www.mamicode.com/旅游">旅游</option>

                           <option value="http://www.mamicode.com/上网">上网</option>

                           <option value="http://www.mamicode.com/聊天">聊天</option>

                  </select><br>

                  <input type="button" id="btn2" value="http://www.mamicode.com/获取信息"><br>

                  <div id="d1"><span>你好!我是纯的文本</span></div>

                  <div id="d2"></div>

<script>:

         //获取信息按钮处理

         $(function(){

                           $("#btn2").click(function(){

                                    alert($("#name").val());//获取用户名

                                    $("#name").val("vision");//修改用户名

                                    alert($("#love").val());//获取爱好选中项的value

                                    $("#love").val("看电视");//修改选中项

                                    alert($("#d1").text());//获取纯文本

                                    alert($("#d1").html());//获取元素中的html

                                    //向设置id=d2的div中添加html信息

                                    $("#d2").html("<font color=‘red‘>你好,我是纯爷们</font>");

                                    //$("#d2").text("<font color=‘red‘>你好,我是纯爷们</font>");

                           });

                  });

<body>:

         <input type="button" id="btn1" value="http://www.mamicode.com/切换"><br/>

         <img id="image1" width="200" height="200" src="http://www.mamicode.com/images/001.jpg"/>

<script>:

         //切换按钮的处理

         $(function(){

                  //切换按钮的处理

                  $("#btn1").click(function(){

                           alert($("#image1").attr("src"));//获取元素的src属性值

                           //修改img的src属性值

                           //$("#image1").attr("width","300");

                           $("#image1").width(500);//修改宽

                           //$("#image1").attr("height","300");

                           $("#image1").height(500);//修改高

                           $("#image1").attr("src","images/002.jpg");

                  });

         });

4.表格隔行变色  鼠标一上去变色  移开恢复原来颜色

       addClass(); removeClass();

                mouseover(fn); mouseout(fn);

         hover(over,out); toggle(f1,f2,f3....);

 

<body>:

         <table border="1">

                  <tr><td>乐天派</td><td>2007-07-07</td></tr>

                  <tr><td>千方百计</td><td>2007-07-07</td></tr>

                  <tr><td>破晓</td><td>2007-07-07</td></tr>

                  <tr><td>分身情人</td><td>2007-07-07</td></tr>

                  <tr><td>疯人院</td><td>2007-07-07</td></tr>

         </table>

<style>:

         .t1 {background-color:#FFAACC;}

         .t2 {background-color:#AACCFF;}

         .t3 {background-color:#FFFF00;font-style:italic;}

<script>:

         //隔行变色

         $(function(){

                  $("tr:even").addClass("t1");

                  $("tr:odd").addClass("t2");

         });

         //鼠标移动背景色

         $(function(){

                  //移上tr的处理

                  $("tr").mouseover(function(){

                           //为鼠标移上去的tr追加t3样式

                           $(this).addClass("t3");

                  }).mouseout(function(){//移开tr的处理,去除t3样式

                           $(this).removeClass("t3");

                  });

         })

         //利用hover事件函数实现=mouseover+mouseout

         $(function(){

                  $("tr").hover(

                  function(){//over

                           $(this).addClass("t3");

                  },

                  function(){//out

                           $(this).removeClass("t3");

                  });

         })

         //toggle事件处理

         $(function(){

                  $("#btn1").toggle(

                           function(){

                                    alert("你敢点我,再点一次试试");

                           },

                           function(){

                                    alert("再点,有种再点一次");

                           },

                           function(){

                                    alert("再点一次,弄死你");

                           }

                  );

         });

 

5.文档处理   $("字符串")  append(对象)   after(对象)   remove();

<body>:

         <input type="text" name="content" id="content"/><br/>

         <input type="button" id="btn1" value="http://www.mamicode.com/添加"/><hr/>

         城市:<select id="c1"></select>

<script>:

         var cities = [

                  {"id":1,"name":"北京"},

                  {"id":2,"name":"上海"},

                  {"id":3,"name":"广州"}];

    $(function(){

             for(var i=0;i<cities.length;i++){

                      var opt_str = "<option

value=http://www.mamicode.com/‘"+cities[i].id+"‘>"+cities[i].name+"</option>";

                      var $opt = $(opt_str);//根据字符串创建一个option对象

                      $("#c1").append($opt);//将$opt添加到select内部末尾处

             }

    });

      //添加按钮的单击处理

    $(function(){

             $("#btn1").bind("click",function(){

                      //将文本框信息得到,添加到select中

                      var value = http://www.mamicode.com/$("#content").val();//获取文本框信息

                      //非空检查

                      $("#s1").remove();//清除输入框后面的span

                      if(value =http://www.mamicode.com/=""){

                               //提示错误

                               var $s1 = $("<span id=‘s1‘>不能为空!</span>");

                               $("#content").after($s1);//将$s1放到输入框后面

                               return;

                      }

                      var opt_str = "<option>"+value+"</option>";//拼成option

                      var $opt = $(opt_str);//将opt_str变成jQuery文档对象

                      $("#c1").append($opt);//将$opt追加到select

             });

         });

 

6.文档处理   clone();

<body>:

        <ul id="u1"><li>西瓜</li><li>苹果</li><li>草莓</li></ul>

<script>:

         为水果项添加单击处理  利用live实现

         $(function(){//为现有和将来生成的li元素添加单击处理

                  $("li").live("click",function(){

                           var $li = $(this).clone();

                           $("#u1").append($li);

                  });

         });

7.显示与隐藏功能

  <body>:

         <input type="button" id="btn1" value="http://www.mamicode.com/隐藏(基本)">

         <input type="button" id="btn2" value="http://www.mamicode.com/显示(基本)">

         <input type="button" id="btn3" value="http://www.mamicode.com/切换(基本)"><br>

         <input type="button" id="btn4" value="http://www.mamicode.com/隐藏(滑动)">

         <input type="button" id="btn5" value="http://www.mamicode.com/显示(滑动)"><br>

         <input type="button" id="btn6" value="http://www.mamicode.com/隐藏(淡入淡出)">

         <input type="button" id="btn7" value="http://www.mamicode.com/显示(淡入淡出)"><br>

         <img id="image1">

  <script>:

         //页面出现时,显示指定图片,设置大小.宽150,高200

         $(function(){

                  $("#image1").attr("src","images/002.jpg").width(150).height(200);

         });

         //基本特效

         $(function(){

                  //隐藏处理

                  $("#btn1").bind("click",function(){

                           $("#image1").hide(5000);//隐藏

                  });

                  //显示处理

                  $("#btn2").click(function(){

                           $("#image1").show(5000);//隐藏

                  });

                  //切换

                  $("#btn3").click(function(){

                           $("#image1").toggle(2000);

                  });

         });

         //滑动效果

         $(function(){

                  //隐藏

                  $("#btn4").click(function(){

                           $("#image1").slideUp(2000);

                  });

                  //显示

                  $("#btn5").click(function(){

                           $("#image1").slideDown(2000);

                  });

         });

         //淡入淡出

         $(function(){

                  //隐藏

                  $("#btn6").click(function(){

                           $("#image1").fadeOut(2000);

                  });

                  //显示

                  $("#btn7").click(function(){

                           $("#image1").fadeIn(5000);

                  });

         });

8.animate()函数

  (1)<body>:

             <input type="button" id="btn1" value="http://www.mamicode.com/放大"><br>

             <div id="d1">你好,要学好编程,需要不断学习!</div>

     <script>:

         $(function(){

                  $("#btn1").click(function(){

                           //经过5秒时间字体放大到10em

                           $("#d1").animate({fontSize:‘10em‘},5000)

                           .animate({fontSize:‘1em‘},5000);

                  });

         });

  (2)<body>:

            <input type="button" id="btn1" value="http://www.mamicode.com/开始运动"><br>

            <div id="d1" style="position: relative">

                  <img src="http://www.mamicode.com/images/002.jpg" border="5" width="50" height="50">      

            </div>

     <script>:

             $(function(){

                  $("#btn1").click(function(){

                           f1();

                           setInterval(f1,800);

                  });

             });

             function f1(){

                  $("#d1").animate({left:"500px"},200)

                           .animate({top:"200px"},200)

                           .animate({left:"5px"},200)

                           .animate({top:"5px"},200);

                  }

9.工具函数  $.trim(str)  $.each(集合,fn)

  <body>:

        <div>hello jQuery&nbsp;&nbsp;&nbsp;</div>

            <div>tom</div>

            <div>rose</div>

            <div>&nbsp;&nbsp;&nbsp;&nbsp;jack</div><br>

            <ul id="u1"></ul>

  <script>:

         //将div中的内容,生成li添加到ul列表中

         $(function(){

                  $.each(

                           $("div"),//div元素集合

                           function(i,div){//i:元素索引,div:循环的当前元素(DOM对象)

                           //将div中的文本获取,封装生成li对象

                           var txt=$(div).text();//获取文本

                           txt=$.trim(txt);//去掉空格

                           var $li=$("<li>"+txt+"</li>");//编程jQuert对象

                           $("#u1").append($li);//将li对象添加到ul内部

                  });

         });

10.not(选择器) find(选择器)  children(选择器)  parent()  siblings()

  (1)

     <style>:

         .h1 {background-color:#00BBBB;}

         .s1 {background-color:#FFAABB;}

         .s2 {background-color:#AAFFBB;}

         .selected {background-color:#AABBCC;}

     <body>:

         <table>

                  <tr class="h1">

                           <td></td><td>姓名</td><td>性别</td><td>年龄</td>

                  </tr>

                  <tr>

                           <td><input type="radio" name="id"></td>

                           <td>张三</td><td>男</td><td>20</td>

                  </tr>

                  <tr>

                           <td><input type="radio" name="id"></td>

                           <td>张三</td><td>男</td><td>20</td>

                  </tr>

                  <tr>

                           <td><input type="radio" name="id"></td>

                           <td>张三</td><td>男</td><td>20</td>

                  </tr>

                  <tr>

                           <td><input type="radio" name="id"></td>

                           <td>张三</td><td>男</td><td>20</td>

                  </tr>

         </table>

    <script>:

                  //隔行变色

                  $(function(){

                           //选择index>0的tr

                           //$("tr:gt(0):even").addClass("s1");//奇数行设置s1样式

                           //$("tr:gt(0):odd").addClas("s2");//偶数行设置s2样式

                           //选择所有tr,排除class="h1"

                           $("tr:not(.h1):even").addClass("s1");

                           $("tr:not(.h1):odd").addClass("s2");       

                  });

                  //选中效果

                  $(function(){

                           //如果有radio选中,将当前行设置selected样式

                           $(":radio:checked").parent().parent().addClass("selected");

                           //添加tr单击事件,第一行不加

                           $("tr:not(.h1)").click(function(){

                                    $("tr").removeClass("selected");//清除tr选中样式

                                    //为选中行设置selected样式,其他行清除selected样式

                                    $(this).addClass("selected").siblings().removeClass("selected");

                                    $(this).find(":radio").attr("checked",true);//将当前行的radio选中

                           });

                  });

   (2)

      <style>:

             #menu{width:300px;}

             .has_children{background:#555;color:#fff;cusor:pointer;}

             .highlight{color:#fff;background:green;}

             div{padding:0;}

             div a{background:#888;display:none;float:left;width:300px;}

      <body>:

             <div id="menu">

                  <div class="has_children">

                           <span>用户管理</span>

                           <a>添加用户</a><a>更新用户</a>

                           <a>删除用户</a><a>查询用户</a>

                  </div>

                  <div class="has_children">

                           <span>权限管理</span>

                           <a>创建权限</a><a>更改权限</a>

                           <a>分配权限</a><a>浏览权限</a>

                  </div>

                  <div class="has_children">

                           <span>产品管理</span>

                           <a>添加产品</a><a>删除产品</a>

                           <a>浏览产品</a><a>更新产品</a>

                  </div>

             </div>

      <script>:

               $(function(){

                           //为span添加单击处理

                           $(".has_children span").click(function(){

                                    //将span的兄弟元素a显示

                                    $(this).siblings().show();

                                    //隐藏其他div的a元素

                                    $(this).parent().siblings().find("a").hide();

                                    //为span父元素div添加hightlight样式

                                    $(this).parent().addClass("highlight");

                                    //将其他div的highlight样式取消

                                    $(this).parent().siblings().removeClass("highlight");

                           });

                  });

11.部门员工切换隐藏显示

  <style>:

         .dept{background-color:#AAFFCC;}

         .emp{background-color:#FFCCFF}

  <body>:

         <table>

                  <tr class="dept" id="1">

                           <td colspan="3">开发部</td>

                  </tr>

                  <tr class="emp e1">

                           <td>jack</td><td>男</td><td>5000</td>

                  </tr>

                  <tr class="emp e1">

                           <td>tom</td><td>男</td><td>4000</td>

                  </tr>

                  <tr class="dept" id="2">

                           <td colspan="3">测试部</td>

                  </tr>

                  <tr class="emp e2">

                           <td>tom</td><td>女</td><td>4000</td>

                  </tr>

                  <tr class="emp e2">

                           <td>tom</td><td>女</td><td>3500</td>

                  </tr>

                  <tr class="dept" id="3">

                           <td colspan="3">销售部</td>

                  </tr>

                  <tr class="emp e3">

                           <td>lily</td><td>女</td><td>6000</td>

                  </tr>

                  <tr class="emp e3">

                           <td>sisi</td><td>女</td><td>6500</td>

                  </tr>

         </table>

  <script>:

         $(function(){

                  //为部门tr添加单击事件

                  $(".dept").click(function(){

                           //将员工信息隐藏或显示

                           var id=this.id;//获取部门tr的id属性

                           var express=".e"+id;//拼成一个类选择器".e1",".e2"

                           $(express).toggle();//按".e1"格式选择员工tr,执行切换工作

                  });

         });

12.颜色变换

  <body>:

         <ul id="skin">

                  <li id="skin_0" title="灰色" class="selected">灰色</li>

                  <li id="skin_1" title="紫色" >紫色</li>

                  <li id="skin_2" title="红色" >红色</li>

                  <li id="skin_3" title="天蓝色" >天蓝色</li>

                  <li id="skin_4" title="橙色" >橙色</li>

                  <li id="skin_5" title="淡绿色" >淡绿色</li>

         </ul>

         <div id="div_side_0">

                  <div id="news">

                           <h1 class="title">体育新闻,南非世界杯,冷门不断</h1>

                  </div>

         </div>

         <div id="div_side_1">

                  <div id="game">

                           <h1 class="title">娱乐新闻,赵薇产后复出,片酬大涨</h1>

                  </div>

         </div>

  <script>:

         <script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.4.4.js"></script>

         <script type="text/javascript">

                  $(function(){

                           //li添加单击处理

                           $("#skin li").click(function(){

                                    //将当前li设置成selected,其他的取消selected

                                    $(this).addClass("selected").siblings().removeClass("selected");

                                    //引入li相应的css样式文件

                                    var file="css/"+this.id+".css";

                                    $("#cssfile").attr("href",file)

                           });

                  });

         </script>

  <link>:

         <link href="http://www.mamicode.com/css/default.css" rel="stylesheet" type="text/css" />

         <link href="http://www.mamicode.com/css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" />

13.图片变大

  <body>:

         <ul>

                  <li>

                           <a href="http://www.mamicode.com/images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod">

                                    <img src="http://www.mamicode.com/images/apple_1.jpg" alt="苹果 iPod" />

                           </a>

                  </li>

                  <li>

                           <a href="http://www.mamicode.com/images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano">

                                    <img src="http://www.mamicode.com/images/apple_2.jpg" alt="苹果 iPod nano"/>

                           </a>

                  </li>

                  <li>

                           <a href="http://www.mamicode.com/images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone">

                                    <img src="http://www.mamicode.com/images/apple_3.jpg" alt="苹果 iPhone"/>

                           </a>

                  </li>

                  <li>

                           <a href="http://www.mamicode.com/images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac">

                                    <img src="http://www.mamicode.com/images/apple_4.jpg" alt="苹果 Mac"/>

                           </a>

                  </li>

         </ul>

  <script>:

         $(function(){

                  //为a元素添加mouseover

                  $("img").mouseover(function(e){

                           //动态添加一个div,div中显示大图

                           //获取当前a元素的href值

                           var image_url = $(this).parent().attr("href");

                           var $div = $("<div id=‘tooltip‘><img src=http://www.mamicode.com/‘"+image_url+"‘/></div>");

                           //设置$div样式,指定显示的位置left,top

                           $div.css("left",e.pageX);//设置div显示的left值

                           $div.css("top",e.pageY);//设置div显示的top值

                           $("body").append($div);//将div添加chuch到页面中

                           $div.show();//将div大图显示

                  }).mouseout(function(){//鼠标移开mouseout事件处理

                           $("#tooltip").remove();//将动态添加的div删除

                           alert("affga");

                  });

         });

  <style>:

         /* tooltip */

         #tooltip{

                  position:absolute;

         }

 

jQuery基础知识