JQuery 入门 - 附案例代码

/*
* 1. 查找元素的方法多种多样，非常灵活
* 2. 拥有隐式迭代特性，因此不再需要手写for循环了。
* 3. 完全没有兼容性问题。
* 4. 实现动画非常简单，而且功能更加的强大。
* 5. 代码简单、粗暴。
* */
$(document).ready(function () {
    $("#btn1").click(function () {
        $("div").show(200);
    });
    $("#btn2").click(function () {
        $("div").text("我是内容");
    });
});

   jQuery is a fast, small, and feature-rich JavaScript library. 
   It makes things like HTML document traversal and manipulation, 
   event handling, animation, and Ajax 
   much simpler with an easy-to-use API that works across a multitude of browsers. 
   With a combination of versatility and extensibility, 
   jQuery has changed the way that millions of people write JavaScript. 

//第一种写法
$(document).ready(function() {

<script>
  //1.$是什么?
  //如果报了这个错误:$ is not defined,就说明没有引入jQuery文件.
  // $(function () {
  //
  // });

var $obj = $(domObj);
// $(document).ready(function(){});就是典型的DOM对象转jQuery对象

var $li = $("li");
//第一种方法（推荐使用）
$li[0]
//第二种方法
$li.get(0)

    /*1.设置一个样式*/
    //两个参数  设置的样式属性,具体样式
    $('li').css('color','red');
    //传入对象（设置的样式属性:具体样式）
    $('li').css({'color':'red'});
    /*2.设置多个样式*/
    $('li').css({
        'color':'green',
        'font-size':'20px'
    });

    /*1.添加一个类*/
    $('li').addClass('now');
    /*2.删除一个类*/
    $('li').removeClass('now');
    /*3.切换一个类  有就删除没有就添加*/
    $('li').toggleClass('now');
    /*4.匹配一个类  判断是否包含某个类  如果包含返回true否知返回false*/
    $('li').hasClass('now');

    /*1.获取属性*/
    $('li').attr('name');
    /*2.设置属性*/
    $('li').attr('name','tom');
    /*3.设置多个属性*/
    $('li').attr({
        'name':'tom',
        'age':'18'
    });
    /*4.删除属性*/
    $('li').removeAttr('name');

    /*对于布尔类型的属性，不要attr方法，应该用prop方法 prop用法跟attr方法一样。*/
    $("#checkbox").prop("checked");
    $("#checkbox").prop("checked", true);
    $("#checkbox").prop("checked", false);
    $("#checkbox").removeProp("checked

    /*注意：动画的本质是改变容器的大小和透明度*/
    /*注意：如果不传参数是看不到动画*/
    /*注意：可传入特殊的字符  fast normal slow*/
    /*注意：可传入数字 单位毫秒*/
    /*1.展示动画*/
    $('li').show();
    /*2.隐藏动画*/
    $('li').hide();
    /*3.切换展示和隐藏*/
    $('li').toggle();

    /*注意：动画的本质是改变容器的高度*/
    /*1.滑入动画*/
    $('li').slideDown();
    /*2.滑出动画*/
    $('li').slideUp();
    /*3.切换滑入滑出*/
    $('li').slideToggle();

    /*注意：动画的本质是改变容器的透明度*/
    /*1.淡入动画*/
    $('li').fadeIn();
    /*2.淡出动画*/
    $('li').fadeOut();
    /*3.切换淡入淡出*/
    $('li').fadeToggle();
    $('li').fadeTo('speed','opacity');

    /*
    * 自定义动画
    * 参数1：需要做动画的属性
    * 参数2：需要执行动画的总时长
    * 参数3：执行动画的时候的速度
    * 参数4：执行动画完成之后的回调函数
    * */
    $('#box1').animate({left:800},5000);
    $('#box2').animate({left:800},5000,'linear');
    $('#box3').animate({left:800},5000,'swing',function () {
        console.log('动画执行完成');
    });

    /*
    jQuery中有个动画队列的机制。
    当我们对一个对象添加多次动画效果时后添加的动作就会被放入这个动画队列中，  
    等前面的动画完成后再开始执行。
    可是用户的操作往往都比动画快，  
    如果用户对一个对象频繁操作时不处理动画队列就会造成队列堆积，
    影响到效果。
    */

    /*1.停止当前动画  如果动画队列当中还有动画立即执行*/
    //$('div').stop();
    /*2.和stop()效果一致  说明这是默认设置*/
    //$('div').stop(false,false);
    /*3.停止当前动画  清除动画队列*/
    //$('div').stop(true,false);
    /*4.停止当前动画并且到结束位置  清除了动画队列*/
    //$('div').stop(true,true);
    /*5.停止当前动画并且到结束位置  如果动画队列当中还有动画立即执行*/
    $('div').stop(false,tr

    /*创建节点*/
    var $a = $('<a href="http://www.baidu.com" target="_blank">百度1</a>');

    /*如果想克隆事件  false  true克隆事件*/
    var $cloneP = $('p').clone(true);

    /*追加自身的最后面  传对象和html格式代码*/
    $('#box').append('<a href="http://www.baidu.com" target="_blank"><b>百度3</b></a>');
    $('#box').append($('a'));
    /*追加到目标元素最后面  传目标元素的选择器或者对象*/
    $('<a href="http://www.baidu.com" target="_blank"><b>百度3</b></a>').appendTo($('#box'));
    $('a').appendTo('#box');
<span class="token function">prepend</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">prependTo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">after</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">before</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    /*1.清空box里面的元素*/
    /* 清理门户 */
    $('#box').empty();
    /*2.删除某个元素*/
    /* 自杀 */
    $('#box').remove();

    //设置值
    $("#name").val('张三');
    //获取值
    $("#name").val();

    //设置内容
    $('div').html('<span>这是一段内容</span>');
    //获取内容
    $('div').html()
<span class="token comment">//设置内容</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string">'&lt;span&gt;这是一段内容&lt;/span&gt;'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//获取内容</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

    //带参数表示设置高度
    $('img').height(200);
    //不带参数获取高度
    $('img').height();

    //获取可视区宽度
    $(window).width();
    //获取可视区高度
    $(window).height();

    //获取页面被卷曲的高度
    $(window).scrollTop();
    //获取页面被卷曲的宽度
    $(window).scrollLeft();

    //获取元素距离document的位置,返回值为对象：{left:100, top:100}
    $(selector).offset();
    //获取相对于其最近的有定位的父元素的位置。
    $(selector).position();

    click(handler)			//单击事件
    mouseenter(handler)		//鼠标进入事件
    mouseleave(handler)		//鼠标离开事件

    //第一个参数：事件类型
    //第二个参数：事件处理程序
    $("p").bind("click mouseenter", function(){
        //事件响应方法
    });

    // 第一个参数：selector，要绑定事件的元素
    // 第二个参数：事件类型
    // 第三个参数：事件处理函数
    $(".parentBox").delegate("p", "click", function(){
        //为 .parentBox下面的所有的p标签绑定事件
    });

    // 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定。
    $(selector).on( "click", function() {});

    // 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定
    $(selector).on( "click",'span', function() {});

    // 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
    // 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
    // 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
    // 第四个参数：handler，事件处理函数
    $(selector).on(events,[selector],[data],handler);

    $(selector).unbind(); //解绑所有的事件
    $(selector).unbind("click"); //解绑指定的事件

    $( selector ).undelegate(); //解绑所有的delegate事件
    $( selector).undelegate( 'click' ); //解绑所有的click事件

    // 解绑匹配元素的所有事件
    $(selector).off();
    // 解绑匹配元素的所有click事件
    $(selector).off("click");

    $(selector).click(); //触发 click事件
    $(selector).trigger("click");

    //screenX和screenY	对应屏幕最左上角的值
    //clientX和clientY	距离页面左上角的位置（忽视滚动条）
    //pageX和pageY	距离页面最顶部的左上角的位置（会计算滚动条的距离）
<span class="token comment">//event.keyCode	按下的键盘代码</span>
<span class="token comment">//event.data	存储绑定事件时传递的附加数据</span>

<span class="token comment">//event.stopPropagation()	阻止事件冒泡行为</span>
<span class="token comment">//event.preventDefault()	阻止浏览器默认行为</span>
<span class="token comment">//return false:既能阻止事件冒泡，又能阻止浏览器默认行为。</span>

    end(); // 筛选选择器会改变jQuery对象的DOM对象，想要回复到上一次的状态，并且返回匹配元素之前的状态。

    // 参数一表示当前元素在所有匹配元素中的索引号
    // 参数二表示当前元素（DOM对象）
    $(selector).each(function(index,element){});

     作
    
    
     为
    
    
     标
    
    
     示
    
    
     符
    
    
     ，
    
    
     但
    
    
     是
    
    
     如
    
    
     果
    
    
     与
    
    
     其
    
    
     他
    
    
     框
    
    
     架
    
    
     中
    
    
     的
    
   
   
    作为标示符，但是如果与其他框架中的
   
  
 </span><span class="katex-html"><span class="base"><span class="strut" style="height: 0em; vertical-align: 0em;"></span><span class="mord cjk_fallback">作</span><span class="mord cjk_fallback">为</span><span class="mord cjk_fallback">标</span><span class="mord cjk_fallback">示</span><span class="mord cjk_fallback">符</span><span class="mord cjk_fallback">，</span><span class="mord cjk_fallback">但</span><span class="mord cjk_fallback">是</span><span class="mord cjk_fallback">如</span><span class="mord cjk_fallback">果</span><span class="mord cjk_fallback">与</span><span class="mord cjk_fallback">其</span><span class="mord cjk_fallback">他</span><span class="mord cjk_fallback">框</span><span class="mord cjk_fallback">架</span><span class="mord cjk_fallback">中</span><span class="mord cjk_fallback">的</span></span></span></span></span>冲突时，jQuery可以释放$符的控制权.</p> 

    var c = $.noConflict();//释放$的控制权,并且把$的能力给了c

    //1. 引入jQuery文件
    //2. 引入插件（如果有用到css的话，需要引入css）
    //3. 使用插件

    //1.	引入jQueryUI的样式文件
    //2.	引入jQuery
    //3.	引入jQueryUI的js文件
    //4.	使用jQueryUI功能

//通过给$.fn添加方法就能够扩展jquery对象
$.fn. pluginName = function() {};

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
    ul {
        list-style: none;
    }

    .wrap {
        width: 330px;
        height: 30px;
        margin: 100px auto 0;
        padding-left: 10px;
        background-image: url(images/bg.jpg);
    }

    .wrap li{
        background-image: url(images/libg.jpg);
    }

    .wrap &gt; ul &gt; li {
        float: left;
        margin-right: 10px;
        position: relative;
    }

    .wrap a {
        display: block;
        height: 30px;
        width: 100px;
        text-decoration: none;
        color: #000;
        line-height: 30px;
        text-align: center;
    }

    .wrap li ul {
        position: absolute;
        top: 30px;
        display: none;
    }
&lt;/style&gt;

</head>
 <body>
 <div class=“wrap”>
 <ul>
 <li>
 <a href=“javascript:void(0);”>一级菜单1</a>
 <ul>
 <li><a href=“javascript:void(0);”>二级菜单1</a></li>
 <li><a href=“javascript:void(0);”>二级菜单2</a></li>
 <li><a href=“javascript:void(0);”>二级菜单3</a></li>
 </ul>
 </li>
 <li>
 <a href=“javascript:void(0);”>一级菜单1</a>
 <ul>
 <li><a href=“javascript:void(0);”>二级菜单1</a></li>
 <li><a href=“javascript:void(0);”>二级菜单2</a></li>
 <li><a href=“javascript:void(0);”>二级菜单3</a></li>
 </ul>
 </li>
 <li>
 <a href=“javascript:void(0);”>一级菜单1</a>
 <ul>
 <li><a href=“javascript:void(0);”>二级菜单1</a></li>
 <li><a href=“javascript:void(0);”>二级菜单2</a></li>
 <li><a href=“javascript:void(0);”>二级菜单3</a></li>
 </ul>
 </li>
 </ul>
 </div>
 </body>
 </html>
 <script src=“jquery-1.12.4.js”></script>
 <script>
 $(function () {
 //需求: 给一级菜单li设置鼠标移入事件，二级菜单显示。
 // 给一级菜单li设置鼠标离开事件，二级菜单隐藏。

//获取一级菜单li的方式:
//$('li');//不行
//$('ul>li');//不行
//$('.wrap li');//不行
//$('.wrap>ul>li')//可行的.


//1.给一级菜单li设置鼠标移入事件，二级菜单显示。
$('.wrap>ul>li').mouseover(function () {
  //console.log(this);//谁触发了鼠标移入事件,那这个this就是谁,this还是一个dom对象.
  // $(this).children('ul').css('display','block');//显示就是更改display属性为block.
  $(this).children('ul').show();//show()方法本质上还是更新display属性为block.
});

//2.给一级菜单li设置鼠标离开事件，二级菜单隐藏。
$('.wrap>ul>li').mouseout(function () {
  $(this).children('ul').hide(); //hide()方法本质上还是更新display属性为none
});



//3.思考题:
//为什么不给一级菜单a标签设置鼠标移入和离开事件?
//因为这样的话,选不到二级菜单.
// $('.wrap>ul>li>a').mouseover(function () {
//   $(this).siblings('ul').show();
// });
// $('.wrap>ul>li>a').mouseout(function () {
//   $(this).siblings('ul').hide();
// });
 </script>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
    ul {
        list-style: none;
    }

    body {
        background: #000;
    }

    .wrap {
        margin: 100px auto 0;
        width: 630px;
		      height: 394px;
        padding: 10px 0 0 10px;
        background: #000;
        overflow: hidden;
        border: 1px solid #fff;
    }

    .wrap li {
        float: left;
        margin: 0 10px 10px 0;
    }

    .wrap img {
        display: block;
		      border: 0;
    }
&lt;/style&gt;

</head>
 <body>
 <div class=“wrap”>
 <ul>
 <li><a href="#"><img src=“images/01.jpg” alt=""/></a></li>
 <li><a href="#"><img src=“images/02.jpg” alt=""/></a></li>
 <li><a href="#"><img src=“images/03.jpg” alt=""/></a></li>
 <li><a href="#"><img src=“images/04.jpg” alt=""/></a></li>
 <li><a href="#"><img src=“images/05.jpg” alt=""/></a></li>
 <li><a href="#"><img src=“images/06.jpg” alt=""/></a></li>
 </ul>
 </div>
 </body>
 </html>
 <script src=“jquery-1.12.4.js”></script>
 <script>
 $(function () {
 //需求1:给小人物所在的li标签设置鼠标移入事件:当前li标签透明度为1,其他的兄弟li标签透明度为0.4
 //需求2:鼠标离开大盒子,所有的li标签的透明度改成1.

//获取小人物们所在的li
//$('.wrap li')//可以的
//console.log($('.wrap').find('li'));//可以的

//需求1:
$('.wrap').find('li').mouseenter(function () {
    console.log($(this).css('opacity', 1));//这个css方法有返回值,返回值就是设置这个方法的元素本身.
    console.log($(this).css('opacity', 1).siblings('li'));
    
    $(this).css('opacity', 1).siblings('li').css('opacity',0.4);
});

//需求2:
$('.wrap').mouseleave(function () {
    //$('.wrap').find('li').css('opacity',1);

    //console.log($(this));//在这个离开事件中,this是这整个大盒子.
    $(this).find('li').css('opacity',1);
});
 </script>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
    ul {
        list-style-type: none;
    }

    .parentWrap {
        width: 200px;
        text-align: center;

    }

    .menuGroup {
        border: 1px solid #999;
        background-color: #e0ecff;
    }

    .groupTitle {
        display: block;
        height: 20px;
        line-height: 20px;
        font-size: 16px;
        border-bottom: 1px solid #ccc;
        cursor: pointer;
    }

    .menuGroup &gt; div {
        height: 200px;
        background-color: #fff;
        display: none;
    }

&lt;/style&gt;

</head>
 <body>
 <ul class=“parentWrap”>
 <li class=“menuGroup”>
 <span class=“groupTitle”>标题1</span>
 <div>我是弹出来的div1</div>
 </li>

    <li class="menuGroup">
        <span class="groupTitle">标题2</span>
        <div>我是弹出来的div2</div>
    </li>

    <li class="menuGroup">
        <span class="groupTitle">标题3</span>
        <div>我是弹出来的div3</div>
    </li>

    <li class="menuGroup">
        <span class="groupTitle">标题4</span>
        <div>我是弹出来的div4</div>
    </li>
</ul>

</body> </html> <script src=“jquery-1.12.4.js”></script> <script> 
});
</script>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-size: 12px;
        }
        ul {
            list-style: none;
        }
        a {
            text-decoration: none;
        }
    .wrapper {
        width: 298px;
        height: 248px;
        margin: 100px auto 0;
        border: 1px solid pink;
        overflow: hidden;
    }
    #left,#center,#right{
        float: left;
    }
    #left li , #right li{
        background: url(images/lili.jpg) repeat-x;
    }
    #left li a,#right li a{
        display: block;
        width: 48px;
        height: 27px;
        border-bottom: 1px solid pink;
        line-height: 27px;
        text-align: center;
        color: black;
    }
    #left li a:hover,#right li a:hover{
        background-image: url(images/abg.gif);
    }
    #center {
        border-left: 1px solid pink;
        border-right: 1px solid pink;
    }
&lt;/style&gt;
&lt;script src="jquery-1.12.4.js"&gt;&lt;/script&gt;
&lt;script&gt;
  $(function () {
      //需求1:给左边的li标签们设置鼠标移入事件,让中间索引对应的li显示,其他的li隐藏.
      //需求2:给右边的li标签们设置鼠标移入事件,让中间索引对应的li显示,其他的li隐藏.

      //需求1:
      $('#left&gt;li').mouseenter(function () {
          //获取当前鼠标移入的这个li标签的索引.
          var idx = $(this).index();//索引:表示的是这个元素在他兄弟元素间的排行.
          //console.log(idx);
          //让中间索引对应的li显示,其他的li隐藏.
          //$('#center&gt;li:eq('+idx+')'); //字符串的拼接
          $('#center&gt;li').eq(idx).show().siblings('li').hide();
      });

      //需求2:
      $('#right&gt;li').mouseenter(function () {
          //获取当前鼠标移入的这个li标签的索引.
          var idx = $(this).index();
          idx += 9;//9不要写死,9是左边li标签的个数.
          //让中间索引对应的li显示,其他的li隐藏.
          $('#center&gt;li').eq(idx).show().siblings('li').hide();
      });




      //因为age已经成为字符串的一部分了.不能拿到age变量的值.
      // var age = 18;
      // console.log("我的名字是age");


      //思考题:
      //为什么是给li标签设置鼠标移入事件,而不是给a标签设置鼠标移入事件?
      //因为给a标签设置的话,不能拿到正确的索引.
      // $('#left a').mouseenter(function () {
      //    var idx =  $(this).index();
      //     console.log(idx);
      // });

  });
&lt;/script&gt;
</head>
 <body>
 <div class=“wrapper

<ul id="left">
    <li><a href="#">女靴</a></li>
    <li><a href="#">雪地靴</a></li>
    <li><a href="#">冬裙</a></li>
    <li><a href="#">呢大衣</a></li>
    <li><a href="#">毛衣</a></li>
    <li><a href="#">棉服</a></li>
    <li><a href="#">女裤</a></li>
    <li><a href="#">羽绒服</a></li>
    <li><a href="#">牛仔裤</a></li>
</ul>
<ul id="center">
    <li><a href="#"><img src="images/女靴.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/雪地靴.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/冬裙.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/呢大衣.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/毛衣.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/棉服.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/女裤.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/羽绒服.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/牛仔裤.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/女包.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/男包.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/登山鞋.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/皮带.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/围巾.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/皮衣.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/男毛衣.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/男棉服.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/男靴.jpg" width="200" height="250" /></a></li>
</ul>
<ul id="right">
    <li><a href="#">女包</a></li>
    <li><a href="#">男包</a></li>
    <li><a href="#">登山鞋</a></li>
    <li><a href="#">皮带</a></li>
    <li><a href="#">围巾</a></li>
    <li><a href="#">皮衣</a></li>
    <li><a href="#">男毛衣</a></li>
    <li><a href="#">男棉服</a></li>
    <li><a href="#">男靴</a></li>
</ul>
</div>
 </body>
 </html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
    ul {
        list-style: none;
    }

    .wrapper {
        width: 1000px;
        height: 475px;
        margin: 0 auto;
        margin-top: 100px;
    }

    .tab {
        border: 1px solid #ddd;
        border-bottom: 0;
        height: 36px;
        width: 320px;
    }

    .tab li {
        position: relative;
        float: left;
        width: 80px;
        height: 34px;
        line-height: 34px;
        text-align: center;
        cursor: pointer;
        border-top: 4px solid #fff;
    }

    .tab span {
        position: absolute;
        right: 0;
        top: 10px;
        background: #ddd;
        width: 1px;
        height: 14px;
        overflow: hidden;
    }

    .products {
        width: 1002px;
        border: 1px solid #ddd;
        height: 476px;
    }

    .products .main {
        float: left;
        display: none;
    }

    .products .main.selected {
        display: block;
    }

    .tab li.active {
        border-color: red;
        border-bottom: 0;
    }

&lt;/style&gt;

</head>
 <body>
 <div class=“wrapper”>
 <ul class=“tab”>
 <li class=“tab-item active”>国际大牌<span>◆</span></li>
 <li class=“tab-item”>国妆名牌<span>◆</span></li>
 <li class=“tab-item”>清洁用品<span>◆</span></li>
 <li class=“tab-item”>男士精品</li>
 </ul>
 <div class=“products”>
 <div class=“main selected”>
 <a href="###"><img src=“images/guojidapai.jpg” alt=""/></a>
 </div>
 <div class=“main”>
 <a href="###"><img src=“images/guozhuangmingpin.jpg” alt=""/></a>
 </div>
 <div class=“main”>
 <a href="###"><img src=“images/qingjieyongpin.jpg” alt=""/></a>
 </div>
 <div class=“main”>
 <a href="###"><img src=“images/nanshijingpin.jpg” alt=""/></a>
 </div>
 </div>
 </div>
</body>
 </html>
<script src=“jquery-1.12.4.js”></script>
 <script>
 $(function () {
 //需求:给tab栏的每一个li标签设置鼠标移入事件: 当前li添加active类,其他的兄弟li移除active类.
 // 找到当前tab栏索引一致的div,让他添加 selected类,其他的兄弟div移除selected类.

    //需求1
    $('.tab>.tab-item').mouseenter(function () {
        $(this).addClass('active').siblings('li').removeClass('active');

        //获取鼠标当前移入的这个li标签的索引
        var idx = $(this).index();

        //需求2:
        $('.products>.main').eq(idx).addClass('selected').siblings('div').removeClass('selected');
    });

});

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
    ul {
        list-style: none;
    }

    .wrap {
        width: 330px;
        height: 30px;
        margin: 100px auto 0;
        padding-left: 10px;
        background-image: url(images/bg.jpg);
    }

    .wrap li{
        background-image: url(images/libg.jpg);
    }

    .wrap &gt; ul &gt; li {
        float: left;
        margin-right: 10px;
        position: relative;
    }

    .wrap a {
        display: block;
        height: 30px;
        width: 100px;
        text-decoration: none;
        color: #000;
        line-height: 30px;
        text-align: center;
    }

    .wrap li ul {
        position: absolute;
        top: 30px;
        display: none;
    }
&lt;/style&gt;

</head>
 <body>
 <div class=“wrap”>
 <ul>
 <li>
 <a href=“javascript:void(0);”>一级菜单1</a>
 <ul>
 <li><a href=“javascript:void(0);”>二级菜单1</a></li>
 <li><a href=“javascript:void(0);”>二级菜单2</a></li>
 <li><a href=“javascript:void(0);”>二级菜单3</a></li>
 </ul>
 </li>
 <li>
 <a href=“javascript:void(0);”>一级菜单1</a>
 <ul>
 <li><a href=“javascript:void(0);”>二级菜单1</a></li>
 <li><a href=“javascript:void(0);”>二级菜单2</a></li>
 <li><a href=“javascript:void(0);”>二级菜单3</a></li>
 </ul>
 </li>
 <li>
 <a href=“javascript:void(0);”>一级菜单1</a>
 <ul>
 <li><a href=“javascript:void(0);”>二级菜单1</a></li>
 <li><a href=“javascript:void(0);”>二级菜单2</a></li>
 <li><a href=“javascript:void(0);”>二级菜单3</a></li>
 </ul>
 </li>
 </ul>
 </div>
 </body>
 </html>
 <script src=“jquery-1.12.4.js”></script>
 <script>
 $(function () {
 //需求: 给一级菜单的li标签设置鼠标移入事件，二级菜单ul显示。
 // 给一级菜单li设置鼠标离开事件，二级菜单隐藏。

//鼠标移入事件.
$('.wrap>ul>li').mouseenter(function () {
  //$(this).children('ul').css('display','block');
  //简写
  $(this).children('ul').stop(true,false).slideDown(300);
});

//鼠标移出事件.
$('.wrap>ul>li').mouseleave(function () {
  //$(this).find('ul').css('display','none');
  //简写
  $(this).find('ul').stop(true,false).slideUp(150);
});
 </script>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 322px;
            position: fixed;
            bottom: 0;
            right: 0;
            overflow: hidden;
        }
    span {
        position: absolute;
        top: 0;
        right: 0;
        width: 30px;
        height: 20px;
        cursor: pointer;
    }
&lt;/style&gt;

</head>
 <body>
<div class=“box” id=“box”>
 <span id=“closeButton”></span>
 <div class=“hd” id=“headPart”>
 <img src=“images/t.jpg” alt=""/>
 </div>
 <div class=“bd” id=“bottomPart”>
 <img src=“images/b.jpg” alt=""/>
 </div>
 </div>
</body> </html> <script src=“jquery-1.12.4.js”></script> <script> (’#bottomPart’).animate({ height:0 },500, function () { //3.让整个大盒子的宽度动画变为0 (’#box’).animate({ width:0 },1000); }); });
});
 </script>

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>标题</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: red;
      display: none;
    }
  </style>
</head>
<body>
  <input type="button" value="淡入" id="fadeIn"/>
  <input type="button" value="淡出" id="fadeOut"/>
  <input type="button" value="切换" id="fadeToggle"/>
  <input type="button" value="淡入到那里" id="fadeTo"/><br/><br/>
  <div id="div1"></div>
</body>
</html>
<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    //1.淡入 fadeIn
    $('#fadeIn').click(function () {
      //让id为div1的这个元素淡入.
      //$('#div1').fadeIn(); //不给参数相当于给了一个默认的动画时长,mormal400毫秒
      $('#div1').fadeIn(1000);
      // $('#div1').fadeIn(2000, function () {
      //   alert('淡入完成了...');
      // });
    });
//2.淡出 fadeOut
$('#fadeOut').click(function () {
  //让id为div1的这个元素淡出
  $('#div1').fadeOut(1000);
  // $('#div1').fadeOut(1000, function () {
  //   alert('淡出完成了');
  // });
});


//3.切换 fadeToggle
$('#fadeToggle').click(function () {
  $('#div1').fadeToggle(1000);
});


//4.淡入到那里 fadeTo
$('#fadeTo').click(function () {
  $('#div1').fadeTo(1000,0.5);
});
 </script>

<!DOCTYPE html>
<html>

<head lang=“en”>
 <meta charset=“UTF-8”>
 <title></title>
 <style>
 * {
 padding: 0;
 margin: 0;
 }

    .wrap {
        width: 410px;
        margin: 100px auto 0;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
        border: 1px solid #c0c0c0;
    }

    th,
    td {
        border: 1px solid #d0d0d0;
        color: #404060;
        padding: 10px;
    }

    th {
        background-color: #09c;
        font: bold 16px "΢ÈíÑźÚ";
        color: #fff;
    }

    td {
        font: 14px "΢ÈíÑźÚ";
    }

    td a.get {
        text-decoration: none;
    }

    a.del:hover {
        text-decoration: underline;
    }

    tbody tr {
        background-color: #f0f0f0;
    }

    tbody tr:hover {
        cursor: pointer;
        background-color: #fafafa;
    }

    .btnAdd {
        width: 110px;
        height: 30px;
        font-size: 20px;
        font-weight: bold;
    }

    .form-item {
        height: 100%;
        position: relative;
        padding-left: 100px;
        padding-right: 20px;
        margin-bottom: 34px;
        line-height: 36px;
    }

    .form-item > .lb {
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        width: 100px;
        text-align: right;
    }

    .form-item > .txt {
        width: 300px;
        height: 32px;
    }

    .mask {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background: #000;
        opacity: 0.15;
        display: none;
    }

    .form-add {
        position: fixed;
        top: 30%;
        left: 50%;
        margin-left: -197px;
        padding-bottom: 20px;
        background: #fff;
        display: none;
    }

    .form-add-title {
        background-color: #f7f7f7;
        border-width: 1px 1px 0 1px;
        border-bottom: 0;
        margin-bottom: 15px;
        position: relative;
    }

    .form-add-title span {
        width: auto;
        height: 18px;
        font-size: 16px;
        font-family: ËÎÌå;
        font-weight: bold;
        color: rgb(102, 102, 102);
        text-indent: 12px;
        padding: 8px 0px 10px;
        margin-right: 10px;
        display: block;
        overflow: hidden;
        text-align: left;
    }

    .form-add-title div {
        width: 16px;
        height: 20px;
        position: absolute;
        right: 10px;
        top: 6px;
        font-size: 30px;
        line-height: 16px;
        cursor: pointer;
    }

    .form-submit {
        text-align: center;
    }

    .form-submit input {
        width: 170px;
        height: 32px;
    }
</style>

</head>
<body>
<div class=“wrap”>
<input type=“button” value=“清空内容” id=“btn”>
<table>
<thead>
<tr>
<th>课程名称</th>
<th>所属学院</th>
<th>操作</th>
</tr>
</thead>
<tbody id=“j_tb”>
<tr>
<!-- <td><input type=“checkbox”/></td> -->
<td>JavaScript</td>
<td>传智播客-前端与移动开发学院</td>
<td><a href=“javascrip:;” class=“get”>DELETE</a></td>
</tr>
<tr>
<!-- <td><input type=“checkbox”/></td> -->
<td>css</td>
<td>传智播客-前端与移动开发学院</td>
<td><a href=“javascrip:;” class=“get”>DELETE</a></td>
</tr>
<tr>
<!-- <td><input type=“checkbox”/></td> -->
<td>html</td>
<td>传智播客-前端与移动开发学院</td>
<td><a href=“javascrip:;” class=“get”>DELETE</a></td>
</tr>
<tr>
<!-- <td><input type=“checkbox”/></td> -->
<td>jQuery</td>
<td>传智播客-前端与移动开发学院</td>
<td><a href=“javascrip:;” class=“get”>DELETE</a></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<script src=“jquery-1.12.4.js”></script>
<script>
$(function () {
//1.清空内容
$(’#btn’).click(function () {
//找到tbody,清空他的内容.
$(’#j_tb’).empty();
});

    //2.删除对应的行.
    $('#j_tb .get').click(function () {
        //点击a标签,删除a标签对应的那一行.
        $(this).parent().parent().remove();
    });
});
</script>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body {
            font-family: "Helvetica","Arial",serif;
            color: #333;
            background-color: #ccc;
            margin: 1em 10%;
        }
        h1 {
            color: #333;
            background-color: transparent;
        }
        a {
            color: #c60;
            background-color: transparent;
            font-weight: bold;
            text-decoration: none;
        }
        ul {
            padding: 0;
        }
        li {
            float: left;
            padding: 1em;
            list-style: none;
        }
        #imagegallery {
        list-style: none;
    }

    #imagegallery li {
        margin: 0px 20px 20px 0px;
        padding: 0px;
        display: inline;
    }

    #imagegallery li a img {
        border: 0;
    }
&lt;/style&gt;

</head>
 <body>
 <h2>
 美女画廊
 </h2>
<ul id=“imagegallery”>
 <li><a href=“images/meinv/1.jpg” title=“美女A”>
 <img src=“images/meinv/1-small.jpg” width=“100” alt=“美女1” />
 </a></li>
 <li><a href=“images/meinv/2.jpg” title=“美女B”>
 <img src=“images/meinv/2-small.jpg” width=“100” alt=“美女2” />
 </a></li>
 <li><a href=“images/meinv/3.jpg” title=“美女C”>
 <img src=“images/meinv/3-small.jpg” width=“100” alt=“美女3” />
 </a></li>
 <li><a href=“images/meinv/4.jpg” title=“美女D”>
 <img src=“images/meinv/4-small.jpg” width=“100” alt=“美女4” />
 </a></li>
 </ul>
 <div style=“clear:both”></div>
 <img id=“image” src=“images/meinv/placeholder.png” alt="" width=“450px” />
 <p id=“des”>选择一个图片</p>
 <script src=“jquery-1.12.4.js”></script>
 <script>
 $(function () {
 //1.需求
 //给小图片a标签设置一个单击事件.
 //让id为image的img标签修改src属性为当前点击的a标签的href属性的值
 //让id为des的这个p标签的文本设置为当前点击的这个a标签的title属性的值.

  $('#imagegallery>li>a').click(function () {
      //获取当前点击的a标签的href属性的值和title属性的值。
      var srcValue = $(this).attr('href');
      var contentValue = $(this).attr('title');
      //给img标签的src属性赋值，以及给p标签的内容赋值。
      $('#image').attr('src',srcValue);
      $('#des').text(contentValue);
      //阻止a标签的跳转
      return false;
  });
 </script>
 </body>
 </html

<!DOCTYPE html>
<html>

<head lang=“en”>
 <meta charset=“UTF-8”>
 <title></title>
 <style>
 * {
 padding: 0;
 margin: 0;
 }
 .wrap {
 width: 300px;
 margin: 100px auto 0;
 }

    table {
        border-collapse: collapse;
        border-spacing: 0;
        border: 1px solid #c0c0c0;
    }

    th,
    td {
        border: 1px solid #d0d0d0;
        color: #404060;
        padding: 10px;
    }

    th {
        background-color: #09c;
        font: bold 16px "微软雅黑";
        color: #fff;
    }

    td {
        font: 14px "微软雅黑";
    }

    tbody tr {
        background-color: #f0f0f0;
    }

    tbody tr:hover {
        cursor: pointer;
        background-color: #fafafa;
    }
</style>

</head>
<body>
 <div class=“wrap”>
 <table>
 <thead>
 <tr>
 <th>
 <input type=“checkbox” id=“j_cbAll”/>
 </th>
 <th>课程名称</th>
 <th>所属学院</th>
 </tr>
 </thead>
 <tbody id=“j_tb”>
 <tr>
 <td>
 <input type=“checkbox”/>
 </td>
 <td>JavaScript</td>
 <td>前端与移动开发学院</td>
 </tr>
 <tr>
 <td>
 <input type=“checkbox”/>
 </td>
 <td>css</td>
 <td>前端与移动开发学院</td>
 </tr>
 <tr>
 <td>
 <input type=“checkbox”/>
 </td>
 <td>html</td>
 <td>前端与移动开发学院</td>
 </tr>
 <tr>
 <td>
 <input type=“checkbox”/>
 </td>
 <td>jQuery</td>
 <td>前端与移动开发学院</td>
 </tr>
 </tbody>
 </table>
 </div>
 <div id=“one”></div>
 </body>
 <script src=“jquery-1.12.4.js”></script>
 <script>
 $(function () {
 //需求1:上面的多选框选中,下面的多选框们跟着选中,上面的多选框没有选中,下面的多选框们跟着不选中.
 //需求2:下面的多选框们,都有单击事件:
 //如果下面的多选框们都选中了,那么上面的那个多选框跟着选中,如果下面多选框有一个没有选中,那么上面的多选框就不选中.

  //需求1：
  $('#j_cbAll').click(function () {
      //获取这多选框的checked值。
      var checkedValue = $(this).prop('checked');
      //console.log(checkedValue);
      //让下面的多选框们的checked跟随这个checkedValue
      $('#j_tb input').prop('checked',checkedValue);
  });

  //需求2：
  $('#j_tb input').click(function () {
      //判断下面的那四个多选框是否都被选中了。
      var numOfAll = $('#j_tb input').length; //获取到下面所有多选框的个数。
      var numOfSelect = $('#j_tb input:checked').length; //获取到下面被选中的多选框的个数。
      console.log(numOfAll + ":" + numOfSelect);
      //判断
      // if(numOfAll == numOfSelect){
      //     //全部被选中。
      //     $('#j_cbAll').prop('checked',true);
      // }else {
      //     //有的有没选中。
      //     $('#j_cbAll').prop('checked',false);
      // }

      //上面这个判断其实可以优化。
      $('#j_cbAll').prop('checked',numOfAll == numOfSelect);
  });
 </script>
 </html>