Web阶段：第五章：JQuery库（下）-阿里云开发者社区

CSS样式操作

addClass() 添加样式

removeClass() 删除样式

toggleClass() 有就删除，没有就添加

offset() 设置和获取标签和坐标

案例：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
  div{
    width:100px;
    height:260px;
  }
  div.whiteborder{
    border: 2px white solid;
  }
  div.redDiv{
    background-color: red;
  }
  div.blueBorder{
    border: 5px blue solid;
  }
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
  $(function(){
    var $divEle = $('div:first');
    $('#btn01').click(function(){
      //addClass() - 向被选元素添加一个或多个类
      $divEle.addClass("redDiv blueBorder");
    });
    $('#btn02').click(function(){
      //removeClass() - 从被选元素删除一个或多个类 
      $divEle.removeClass();
    });
    $('#btn03').click(function(){
      //toggleClass() - 对被选元素进行添加/删除类的切换操作 
      $divEle.toggleClass("redDiv");
    });
    $('#btn04').click(function(){
      //offset() - 返回第一个匹配元素相对于文档的位置。
      var pos = $divEle.offset();
      console.log(pos);
      // 设置坐标
      $divEle.offset({
        top: 110, left: 384
      });
    });
  })
</script>
</head>
<body>
  <table align="center">
    <tr>
      <td>
        <div class="border">
        </div>
      </td>
      <td>
        <div class="btn">
          <input type="button" value="addClass()" id="btn01"/>
          <input type="button" value="removeClass()" id="btn02"/>
          <input type="button" value="toggleClass()" id="btn03"/>
          <input type="button" value="offset()" id="btn04"/>
        </div>
      </td>
    </tr>
  </table>
</body>
</html>

Jquery动画

基本动画

show() 显示隐藏的元素

第一个参数是动画执行的时候，（单位是毫秒）

第二个参数是动画执行完成时的回调函数

hide() 隐藏可见的元素

第一个参数是动画执行的时候，（单位是毫秒）

第二个参数是动画执行完成时的回调函数

toggle() 可见就隐藏，隐藏状态就显示

第一个参数是动画执行的时候，（单位是毫秒）

第二个参数是动画执行完成时的回调函数

淡入淡出动画

fadeIn() 淡入让隐藏可见

fadeOut() 淡出让可见消失

fadeTo()

fadeToggle() 让消失的可见，让可见的慢慢消失

案例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
  $(function(){
    //显示   show()
    $("#btn1").click(function(){
      $("#div1").show(1000);
    });   
    //隐藏  hide()
    $("#btn2").click(function(){
      $("#div1").hide(1000);
    }); 
    //切换   toggle()
    $("#btn3").click(function(){
      $("#div1").toggle(1000);
    }); 
    //淡入   fadeIn()
    $("#btn4").click(function(){
      $("#div1").fadeIn(500);
    }); 
    //淡出  fadeOut()
    $("#btn5").click(function(){
      $("#div1").fadeOut(500);
    }); 
    //淡化到  fadeTo()
    $("#btn6").click(function(){
      $("#div1").fadeTo("slow",Math.random());
    }); 
    //淡化切换  fadeToggle()
    $("#btn7").click(function(){
      $("#div1").fadeToggle("slow","linear");
    }); 
  })
</script>
</head>
<body>
  <table style="float: left;">
    <tr>
      <td><button id="btn1">显示show()</button></td>
    </tr>
    <tr>
      <td><button id="btn2">隐藏hide()</button></td>
    </tr>
    <tr>
      <td><button id="btn3">显示/隐藏切换 toggle()</button></td>
    </tr>
    <tr>
      <td><button id="btn4">淡入fadeIn()</button></td>
    </tr>
    <tr>
      <td><button id="btn5">淡出fadeOut()</button></td>
    </tr>
    <tr>
      <td><button id="btn6">淡化到fadeTo()</button></td>
    </tr>
    <tr>
      <td><button id="btn7">淡化切换fadeToggle()</button></td>
    </tr>
  </table>
  <div id="div1" style="float:left;border: 1px solid;background-color: blue;width: 300px;height: 200px;">
    jquery动画定义了很多种动画效果，可以很方便的使用这些动画效果
  </div>
</body>
</html>

练习：CSS_动画品牌展示

需求：

1.点击按钮的时候，隐藏和显示卡西欧之后的品牌。

2.当显示全部内容的时候，按钮文本为“显示精简品牌”

然后，小三角形向上。所有品牌产品为默认颜色。

3.当只显示精简品牌的时候，要隐藏卡西欧之后的品牌，按钮文本为“显示全部品牌”

然后小三形向下。并且把佳能，尼康的品牌颜色改为红色（给li标签添加promoted样式即可）

案例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>品牌展示练习</title>
<style type="text/css">
*{ margin:0; padding:0;}
body {font-size:12px;text-align:center;}
a { color:#04D; text-decoration:none;}
a:hover { color:#F50; text-decoration:underline;}
.SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;}
.SubCategoryBox ul { list-style:none;}
.SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;}
.showmore { clear:both; text-align:center;padding-top:10px;}
.showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;}
.showmore a span { padding-left:15px; background:url(img/down.gif) no-repeat 0 0;}
.promoted a { color:#F50;}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
  $(function() {
    // 初始化隐藏
    $("li:gt(5):not(:last)").hide();
    // 给按钮绑定单击事件
    $("div div a").click(function(){
      // 点击的时候，让卡西欧之后的品牌，要么显示，要么隐藏
      $("li:gt(5):not(:last)").toggle();
      if ($("li:gt(5):not(:last)").is(":hidden")) {
      // 如果品牌隐藏了，要显示的【显示全部品牌】
        $("div div a span").html("显示全部品牌");
        //角标向下showmore
        $("div div").removeClass();//先删除原来的样式
        $("div div").addClass("showmore");//先删除原来的样式
        //去掉高亮，广告
        $("li:contains('爱国者'),li:contains('明基')").removeClass();
      } else {
      //如果品牌都可见了，要显示【显示精简品牌】
        $("div div a span").html("显示精简品牌");
        //角标向上showless
        $("div div").removeClass();//先删除原来的样式
        $("div div").addClass("showless");//先删除原来的样式
        //加高亮，广告
        $("li:contains('爱国者'),li:contains('明基')").addClass("promoted");
      }
      // 阻止 a的默认 跳转
      return false;
    });
  });
</script>
</head>
<body>
  <div class="SubCategoryBox">
    <ul>
      <li><a href="#">佳能</a><i>(30440) </i></li>
      <li><a href="#">索尼</a><i>(27220) </i></li>
      <li><a href="#">三星</a><i>(20808) </i></li>
      <li><a href="#">尼康</a><i>(17821) </i></li>
      <li><a href="#">松下</a><i>(12289) </i></li>
      <li><a href="#">卡西欧</a><i>(8242) </i></li>
      <li><a href="#">富士</a><i>(14894) </i></li>
      <li><a href="#">柯达</a><i>(9520) </i></li>
      <li><a href="#">宾得</a><i>(2195) </i></li>
      <li><a href="#">理光</a><i>(4114) </i></li>
      <li><a href="#">奥林巴斯</a><i>(12205) </i></li>
      <li><a href="#">明基</a><i>(1466) </i></li>
      <li><a href="#">爱国者</a><i>(3091) </i></li>
      <li><a href="#">其它品牌相机</a><i>(7275) </i></li>
    </ul>
    <div class="showmore">
      <a href="more.html"><span>显示全部品牌</span></a>
    </div>
  </div>
</body>
</html>

$(function(){});和window.onload = function(){}的区别？

window.onload是js原生的事件，$(function(){})是Jquery的方法(等价于$(document).ready(function(){}) )，两者主要有以下几点差别：

1、window.onload：在页面所有资源加载完后执行，如果有多个定义则只执行最后一个

2、$(function(){})：在Dom节点创建完成后执行，如果有多个定义则依次执行

可以看出$(function(){})在window.onload前执行

他们分别是在什么时候触发？

jquery页面加载完成之后的触发时间点：

// jquery的页面加载完成之后。只是等浏览器内核解析完html标签，创建好dom对象之后。就马上执行了

原生js页面加载完成之后的触发时间是：

// 原生js除了要等浏览器内核解析完标签，创建好dom对象之外，

// 还需要等页面中所有元素去准备好自己显示时需要的数据。完成之后才会执行。

他们触发的顺序？

jquery的页面加载完成之后先执行，

js原生的页面加载完成之后后执行。

他们执行的次数？

window.onload只可以使用一次

$(function(){})可以使用多次

原生js只会执行最后一次的赋值函数。

而jquery的页面加载完成之后，会把所有注册了函数都按照注册的顺序，依次全部执行。

事件

click()

绑定单击事件。触发单击事件

mouseover()

绑定鼠标移入事件。

mouseout()

绑定鼠标移出事件。

bind()

可以同时给标签绑定一个或多个事件

one()

给标签绑定只响应一次的事件

live()

live可以给匹配了选择器的所有元素都绑定事件，哪怕这个元素是后面动态创建的。

unbind()

跟bind做相反的操作。解除绑定事件

事件绑定案例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
  $(function(){
    //*1.通常绑定事件的方式
    //给元素绑定事件  
    //jquery对象.事件方法(回调函数(){ 触发事件执行的代码 }).事件方法(回调函数(){ 触发事件执行的代码 }).事件方法(回调函数(){ 触发事件执行的代码 })
    //绑定事件可以链式操作
    $(".head").click(function(){
      $(".content").toggle();
    }).mouseover(function(){
      $(".content").toggle();
    }); 
    //*2.jQuery提供的绑定方式：bind(type,[data],fn)函数把元素和事件绑定起来
    //type表示要绑定的事件   [data]表示传入的数据   fn表示事件的处理方法
    //bind(事件字符串,回调函数),后来添加的元素不会绑定事件
    //使用bind()绑定多个事件   type可以接受多个事件类型，使用空格分割多个事件
    /* $(".head").bind("click mouseover",function(){
      $(".content").toggle();
    }); */
    //3.one()只绑定一次,绑定的事件只会发生一次one(type,[data],fn)函数把元素和事件绑定起来
    //type表示要绑定的事件   [data]表示传入的数据   fn表示事件的处理方法
  /*  $(".head").one("click mouseover",function(){
      $(".content").toggle();
    }); */
    //4.live方法会为现在及以后添加的元素都绑定上相应的事件
  /** $(".head").live("click",function(){
      $(".content").toggle();
    });
    $("#panel").before("<h5 class='head'>什么是jQuery?</h5>");
  */
  });
</script>
</head>
<body>
  <div id="panel">
    <h5 class="head">什么是jQuery?</h5>
    <div class="content">
      jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
    </div>
  </div>
</body>
</html>

事件移除案例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
  $(function() {
    //给li绑定两种事件：单击和鼠标移入
    $("li").bind("click mouseenter", function() {
      alert(this.innerHTML);
    });
    //点击第一个button，将#bj上的mouseenter事件移除
    //unbind()可以移除指定的事件，只需要传一个事件名作为参数
    //unbind(type,[data|fn]])
    //type事件类型  当传入type的时候会解除type事件
    //如果没有传入type值，会移除所有事件
    $("button:eq(0)").click(function() {
      $("li").unbind("click mouseenter");
    });
    //点击第二个button，将#rl上的所有事件移除,没有传入type值,移除所有事件
    $("button:eq(1)").click(function() {
      $("#rl").unbind();
    });
  });
</script>
</head>
<body>
  <div id="total">
    <div class="inner">
      <p>你喜欢哪个城市?</p>
      <ul id="city">
        <li id="bj">北京</li>
        <li>上海</li>
        <li>东京</li>
        <li>首尔</li>
      </ul>
      <br> <br>
      <p>你喜欢哪款单机游戏?</p>
      <ul id="game">
        <li id="rl">红警</li>
        <li>实况</li>
        <li>极品飞车</li>
        <li>魔兽</li>
      </ul>
    </div>
    <button>移除#bj的mouseenter事件</button>
    <button>移除#rl所有事件</button>
  </div>
</body>
</html>

事件的冒泡

什么是事件的冒泡？

事件的冒泡是指，父子元素同时监听同一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应。

那么如何阻止事件冒泡呢？

在子元素事件函数体内，return false; 可以阻止事件的冒泡传递。

事件冒泡案例：

 <script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
  $(function() {
    $("#content").click(function() {
      alert("div说哥很帅！");
    });
    $("span").click(function() {
      alert("span也说哥很帅！");
      // 阻止事件冒泡 
      return false;
    });
  })
</script>
</head>
<body>
  <div id="content">
    外层div元素 <span>内层span元素</span> 外层div元素
  </div>
  <div id="msg"></div>
  <a href="http://www.hao123.com">WWW.HAO123.COM</a>
</body>

javaScript事件对象

事件对象，是封装有触发的事件信息的一个javascript对象。

我们重点关心的是怎么拿到这个javascript的事件对象。以及使用。

如何获取呢javascript事件对象呢？

在给元素绑定事件的时候，在事件的function( event ) 参数列表中添加一个参数，这个参数名，我们习惯取名为event。

这个event就是javascript传递参事件处理函数的事件对象。

事件对象案例：

<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
//1.原生javascript获取 事件对象
//  window.onload = function(){
//    document.getElementById("areaDiv").onclick = function(event){
//      console.log(event);
//    }
//  }
//2.JQuery代码获取 事件对象
//  $(function(){
//    $("#areaDiv").click(function(event){
//      console.log(event);
//    });
//  });
  //3.使用bind同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件。
  $(function(){
    $("#areaDiv").bind("mouseout mouseover",function(event){
      if (event.type == "mouseover") {
        console.log("进来了");
      } else if (event.type == "mouseout") {
        console.log("我走了");
      }
    });
  });
</script>
</head>
<body>
  <div id="areaDiv"></div>
  <div id="showMsg"></div>
</body>

练习-图片跟随

需求：

案例：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
  body {
    text-align: center;
  }
  #small {
    margin-top: 150px;
  }
  #showBig {
    position: absolute;
    display: none;
  }
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
  $(function(){
    $("#small")
      .mouseover(function(event){
        $("#showBig")
          .show()
          .css("left",event.pageX+10)
          .css("top",event.pageY+10);
      })
      .mousemove(function(event){
        $("#showBig")
          .css("left",event.pageX+10)
          .css("top",event.pageY+10);
      })
      .mouseout(function(){
        $("#showBig").hide();
      });
  });
</script>
</head>
<body>
  <img id="small" src="img/small.jpg" />
  <div id="showBig">
    <img src="img/big.jpg">
  </div>
</body>
</html>

Web阶段：第五章：JQuery库（下）

热门文章

最新文章

相关课程

相关电子书

相关实验场景