JavaWeb（三）jQuery

最新推荐文章于 2023-06-01 18:34:12 发布

梓阡

最新推荐文章于 2023-06-01 18:34:12 发布

阅读量183

点赞数 2

分类专栏： java 文章标签： js html css javascript dom

本文链接：https://blog.youkuaiyun.com/m0_38143506/article/details/116454502

版权

java 专栏收录该内容

41 篇文章

订阅专栏

本文详细介绍了jQuery的基本概念和使用，包括选择器、事件处理、动画效果、DOM操作等核心功能。通过实例展示了如何利用jQuery实现元素的显示、隐藏、淡入淡出、滑动等动画效果，以及如何绑定事件、操作DOM节点。此外，还探讨了jQuery在页面加载完成后的执行时机，以及如何阻止事件冒泡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery介绍

离线帮助文档：https://wwa.lanzous.com/iDqwdov6hmf

什么是jQuary
JavaScript和查询Query，辅助JavaScript开发的js类库
jQuery初体验

<!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>
  <!--引入jQuery文件-->
  <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
  <script type="text/javascript">
    $(function(){  //表示页面加载完成之后，相当于window.onload = function(){};
      var $btnObj = $("#btnId");//表示按id查询标签对象
      $btnObj.click(function (){//绑定单击事件
        alert("jQuery的单击事件");
      });
    });
  </script>
</head>
<body>

	<button id="btnId">SayHello</button>

</body>
</html>

$（）函数

$的本质
$是 j Q u e r y 的核心函数，能完成 j Q u e r y 的很多功能，$ ()就是调用$这个函数
当传入的参数为【函数】时
表示页面加载完成之后，相当于window.οnlοad=function(){}
当传入的参数为【HTML字符串时】
会创建这个html标签对象

$("<div>"+"$的参数为div字符串"+"</div>").appendTo("body");

当传入的参数为【选择器字符串】
(1) $KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲id属性值"); (2)$ (“标签名”);
(3)$(".class"属性值);
当传入的参数为【DOM对象】
会将dom对象转换为jQuery对象

jQuery对象和DOM对象区分

Dom对象

通过三个查询方法查询出来的对象
通过createElement（）创建出来的对象

jQuery对象

通过jQuery提供的API创建的对象
通过jQuery包装的Dom对象
通过jQuery提供的API查询到的对象

jQuery选择器

https://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

基本选择器

#id
element
.class
多选择器，中间用逗号分隔 $(“选择器1，选择器2，选择器3”)
p.myClass表示既要满足p标签，又要满足class=“myClass"
练习：

<!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>
  <style type="text/css">
    div, span, p {
      width: 140px;
      height: 140px;
      margin: 5px;
      background: #aaa;
      border: #000 1px solid;
      float: left;
      font-size: 17px;
      font-family: Verdana;
    }

    div.mini {
      width: 55px;
      height: 55px;
      background-color: #aaa;
      font-size: 12px;
    }

    div.hide {
      display: none;
    }
  </style>
  <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
  <script type="text/javascript">
    $(function () {
      //1.选择 id 为 one 的元素 "background-color","#bbffaa"
      $("#btn1").click(function () {
        //css()方法可以设置和获取样式
        $("#one").css("background-color", "#bbffaa");
      });
      //2.选择 class 为 mini 的所有元素
      $("#btn2").click(function () {
        var miniObjs = $(".mini");
        miniObjs.css("background-color", "#bbffaa");
      });
      //3.选择 元素名是 div 的所有元素
      $("#btn3").click(function () {
        $("div").css("background-color", "#bbffaa");
      });
      //4.选择所有的元素
      $("#btn4").click(function () {
        $("*").css("background-color", "#bbffaa");
      });
      //5.选择所有的 span 元素和id为two的元素
      $("#btn5").click(function () {
        $("span,#two").css("background-color", "#bbffaa");
      });

    })

  </script>
</head>
<body>
<!-- 	<div>
		<h1>基本选择器</h1>
	</div>	 -->
<input type="button" value="选择 id 为 one 的元素" id="btn1"/>
<input type="button" value="选择 class 为 mini 的所有元素" id="btn2"/>
<input type="button" value="选择 元素名是 div 的所有元素" id="btn3"/>
<input type="button" value="选择 所有的元素" id="btn4"/>
<input type="button" value="选择 所有的 span 元素和id为two的元素" id="btn5"/>

<br>
<div class="one" id="one">
  id 为 one,class 为 one 的div
  <div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
  id为two,class为one,title为test的div
  <div class="mini" title="other">class为mini,title为other</div>
  <div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
  <div class="mini">class为mini</div>
  <div class="mini">class为mini</div>
  <div class="mini">class为mini</div>
  <div class="mini"></div>
</div>
<div class="one">
  <div class="mini">class为mini</div>
  <div class="mini">class为mini</div>
  <div class="mini">class为mini</div>
  <div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
  包含input的type为"hidden"的div<input type="hidden" size="8">
</div>
<span class="one" id="span">^^span元素^^</span>
</body>
</html>

层级选择器

ancestor descendant
（1）在给定的祖先元素下匹配所有的后代元素
parent>child
（1）在给定的父元素下匹配所有的子元素
prev + next
（1）匹配所有紧接在pre元素后的next元素
prev ~ siblings
（1）匹配prev元素之后的所有siblings元素
练习

<!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>
		<style type="text/css">
			div, span, p {
			    width: 140px;
			    height: 140px;
			    margin: 5px;
			    background: #aaa;
			    border: #000 1px solid;
			    float: left;
			    font-size: 17px;
			    font-family: Verdana;
			}

			div.mini {
			    width: 55px;
			    height: 55px;
			    background-color: #aaa;
			    font-size: 12px;
			}

			div.hide {
			    display: none;
			}
		</style>
		<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				//1.选择 body 内的所有 div 元素
				$("#btn1").click(function(){
					$("body div").css("background", "#bbffaa");
				});

				//2.在 body 内, 选择div子元素
				$("#btn2").click(function(){
					$("body > div").css("background", "#bbffaa");
				});

				//3.选择 id 为 one 的下一个 div 元素
				$("#btn3").click(function(){
					$("#one + div").css("background", "#bbffaa");
				});

				//4.选择 id 为 two 的元素后面的所有 div 兄弟元素
				$("#btn4").click(function(){
					$("#two ~ div").css("background", "#bbffaa");
				});
			});
		</script>
	</head>
	<body>

<!-- 	<div>
		<h1>层级选择器:根据元素的层级关系选择元素</h1>
		ancestor descendant  ：
		parent > child 		   ：
		prev + next 		   ：
		prev ~ siblings 	   ：
	</div>	 -->
		<input type="button" value="选择 body 内的所有 div 元素" id="btn1" />
		<input type="button" value="在 body 内, 选择div子元素" id="btn2" />
		<input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3" />
		<input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4" />
		<br><br>
		<div class="one" id="one">
			id 为 one,class 为 one 的div
			<div class="mini">class为mini</div>
		</div>
		<div class="one" id="two" title="test">
			id为two,class为one,title为test的div
			<div class="mini" title="other">class为mini,title为other</div>
			<div class="mini" title="test">class为mini,title为test</div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini"></div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini" title="tesst">class为mini,title为tesst</div>
		</div>
		<div style="display:none;" class="none">style的display为"none"的div</div>
		<div class="hide">class为"hide"的div</div>
		<div>
			包含input的type为"hidden"的div<input type="hidden" size="8">
		</div>
		<span id="span">^^span元素^^</span>
	</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>
  <style type="text/css">
    div, span, p {
      width: 140px;
      height: 140px;
      margin: 5px;
      background: #aaa;
      border: #000 1px solid;
      float: left;
      font-size: 17px;
      font-family: Verdana;
    }

    div.mini {
      width: 55px;
      height: 55px;
      background-color: #aaa;
      font-size: 12px;
    }

    div.hide {
      display: none;
    }
  </style>
  <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      function anmateIt() {
        $("#mover").slideToggle("slow", anmateIt);
      }

      anmateIt();
    });

    $(document).ready(function () {
      //1.选择第一个 div 元素
      $("#btn1").click(function () {
        $("div:first").css("background", "#bbffaa");
      });

      //2.选择最后一个 div 元素
      $("#btn2").click(function () {
        $("div:last").css("background-color", "#bbffaa");
      });

      //3.选择class不为 one 的所有 div 元素
      $("#btn3").click(function () {
        $("div:not(.one)").css("background", "#bbffaa");
      });

      //4.选择索引值为偶数的 div 元素
      $("#btn4").click(function () {
        $("div:even").css("background", "#bbffaa");
      });

      //5.选择索引值为奇数的 div 元素
      $("#btn5").click(function () {
        $("div:odd").css("background", "#bbffaa");
      });

      //6.选择索引值为大于 3 的 div 元素
      $("#btn6").click(function () {
        $("div:gt(3)").css("background", "#bbffaa");
      });

      //7.选择索引值为等于 3 的 div 元素
      $("#btn7").click(function () {
        $("div:eq(3)").css("background", "#bbffaa");
      });

      //8.选择索引值为小于 3 的 div 元素
      $("#btn8").click(function () {
        $("div:lt(3)").css("background", "#bbffaa");
      });

      //9.选择所有的标题元素
      $("#btn9").click(function () {
        $(":header").css("background", "#bbffaa");
      });

      //10.选择当前正在执行动画的所有元素
      $("#btn10").click(function () {
        $(":animated").css("background", "#bbffaa");
      });
      //11.选择没有执行动画的最后一个div元素
      $("#btn11").click(function () {
        $("div:not(:animated):last").css("background", "#bbffaa");
      });

    });
  </script>
</head>
<body>
<!-- 	<div>
	:first
	:last
	:not(selector)
	:even
	:odd
	:eq(index)
	:gt(index)
	:lt(index)
	:header
	:animated
	</div> -->
<input type="button" value="选择第一个 div 元素" id="btn1"/>
<input type="button" value="选择最后一个 div 元素" id="btn2"/>
<input type="button" value="选择class不为 one 的所有 div 元素" id="btn3"/>
<input type="button" value="选择索引值为偶数的 div 元素" id="btn4"/>
<input type="button" value="选择索引值为奇数的 div 元素" id="btn5"/>
<input type="button" value="选择索引值为大于 3 的 div 元素" id="btn6"/>
<input type="button" value="选择索引值为等于 3 的 div 元素" id="btn7"/>
<input type="button" value="选择索引值为小于 3 的 div 元素" id="btn8"/>
<input type="button" value="选择所有的标题元素" id="btn9"/>
<input type="button" value="选择当前正在执行动画的所有元素" id="btn10"/>
<input type="button" value="选择没有执行动画的最后一个div" id="btn11"/>

<h3>基本选择器.</h3>
<br><br>
<div class="one" id="one">
  id 为 one,class 为 one 的div
  <div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
  id为two,class为one,title为test的div
  <div class="mini" title="other">class为mini,title为other</div>
  <div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
  <div class="mini">class为mini</div>
  <div class="mini">class为mini</div>
  <div class="mini">class为mini</div>
  <div class="mini"></div>
</div>
<div class="one">
  <div class="mini">class为mini</div>
  <div class="mini">class为mini</div>
  <div class="mini">class为mini</div>
  <div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
  包含input的type为"hidden"的div<input type="hidden" size="8">
</div>
<div id="mover">正在执行动画的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>
  <style type="text/css">
    div, span, p {
      width: 140px;
      height: 140px;
      margin: 5px;
      background: #aaa;
      border: #000 1px solid;
      float: left;
      font-size: 17px;
      font-family: Verdana;
    }

    div.mini {
      width: 55px;
      height: 55px;
      background-color: #aaa;
      font-size: 12px;
    }

    div.hide {
      display: none;
    }
  </style>
  <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      function anmateIt() {
        $("#mover").slideToggle("slow", anmateIt);
      }

      anmateIt();
    });

    /**
     :contains(text)
     :empty
     :has(selector)
     :parent
     */
    $(document).ready(function () {
      //1.选择 含有文本 'di' 的 div 元素
      $("#btn1").click(function () {
        $("div:contains('di')").css("background", "#bbffaa");
      });

      //2.选择不包含子元素(或者文本元素) 的 div 空元素
      $("#btn2").click(function () {
        $("div:empty").css("background", "#bbffaa");
      });

      //3.选择含有 class 为 mini 元素的 div 元素
      $("#btn3").click(function () {
        $("div:has(.mini)").css("background", "#bbffaa");
      });

      //4.选择含有子元素(或者文本元素)的div元素
      $("#btn4").click(function () {
        $("div:parent").css("background", "#bbffaa");
      });
    });
  </script>
</head>
<body>
<input type="button" value="选择 含有文本 'di' 的 div 元素" id="btn1"/>
<input type="button" value="选择不包含子元素(或者文本元素) 的 div 空元素" id="btn2"/>
<input type="button" value="选择含有 class 为 mini 元素的 div 元素" id="btn3"/>
<input type="button" value="选择含有子元素(或者文本元素)的div元素" id="btn4"/>

<br><br>
<div class="one" id="one">
  id 为 one,class 为 one 的div
  <div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
  id为two,class为one,title为test的div
  <div class="mini" title="other">class为mini,title为other</div>
  <div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
  <div class="mini">class为mini</div>
  <div class="mini">class为mini</div>
  <div class="mini">class为mini</div>
  <div class="mini"></div>
</div>
<div class="one">
  <div class="mini">class为mini</div>
  <div class="mini">class为mini</div>
  <div class="mini">class为mini</div>
  <div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
  包含input的type为"hidden"的div<input type="hidden" size="8">
</div>
<div id="mover">正在执行动画的div元素.</div>
</body>
</html>

属性过滤选择器

在这里插入图片描述
练习：略

表单过滤器

在这里插入图片描述
练习：略

jQuery元素筛选

在这里插入图片描述

jQuery属性操作

html()：和dom属性innerHTML一样
text():和dom属性innerText一样
var:针对表单项，和dom属性value一样
不传参数是获取，有参数是设置

DOM的增删改

添加

A.appendTo(B) A插入到B子元素末尾，成为最后一个子元素
A.prependTo(B) A插入到所有子元素前面，成为第一个子元素

外部插入

A.insertAfter（B） A插入到B元素的后面：BA
A.insertBefore（B）A插入到B元素的前面：AB

替换

A.replaceWith（B）用B替换A
A.replaceAll（B）用A替换所有的B

删除

A.remove（）删除A标签
A.empty（）清空A标签内的所有内容，包含子标签

练习

从左到右，从右到左

<!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">
    select {
      width: 100px;
      height: 140px;
    }

    div {
      width: 130px;
      float: left;
      text-align: center;
    }
  </style>
  <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
  <script type="text/javascript">
    $(function () {
      //1. 选中添加到右侧
      $("button:eq(0)").click(function () {
        $("select:eq(0) option:selected").appendTo($("select:eq(1)"));
      });
      //2. 全部添加到右边
      $("button:eq(1)").click(function () {
        $("select:eq(0) option").appendTo($("select:eq(1)"));
      });
      //3. 选中删除到左边
      $("button:eq(2)").click(function () {
        $("select:eq(1) option:selected").appendTo($("select:eq(0)"));
      });
      //4. 全部删除到左边
      $("button:eq(3)").click(function () {
        $("select:eq(1) option").appendTo($("select:eq(0)"));
      });

    });


  </script>
</head>
<body>

<div id="left">
  <select multiple="multiple" name="sel01">
    <option value="opt01">选项1</option>
    <option value="opt02">选项2</option>
    <option value="opt03">选项3</option>
    <option value="opt04">选项4</option>
    <option value="opt05">选项5</option>
    <option value="opt06">选项6</option>
    <option value="opt07">选项7</option>
    <option value="opt08">选项8</option>
  </select>

  <button>选中添加到右边</button>
  <button>全部添加到右边</button>
</div>
<div id="rigth">
  <select multiple="multiple" name="sel02">
  </select>
  <button>选中删除到左边</button>
  <button>全部删除到左边</button>
</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="styleB/css.css"/>
  <script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
  <script type="text/javascript">
    $(function () {
      //将删除方法提取出来
      var deleteFun = function () {
        //获取要删除的行
        var $delRow = $(this).parent().parent();
        var $delName = $delRow.find("td:first").text();
        //提示是否删除
        var conFlag = confirm("确认删除:" + $delName);
        if (conFlag) {
          //删除行
          $delRow.remove();
        }
        //阻止超链接的跳转
        return false;
      };

      $("#addEmpButton").click(function () {
        //获取输入框的姓名、邮箱、薪资
        var name = $("#empName").val();
        var mail = $("#email").val();
        var salary = $("#salary").val();
        //创建一个单元格
        var $newItem = $("<tr>" +
          "<td>" + name + "</td>" +
          "<td>" + mail + "</td>" +
          "<td>" + salary + "</td>" +
          "<td><a href=\"deleteEmp?id=004\">Delete</a></td>" +
          "</tr>"
        );
        //添加到表格中
        $newItem.appendTo($("#employeeTable"));
        //动态绑定删除事件

        $newItem.find("a").click(function () {
          //获取要删除的行
          var $delRow = $(this).parent().parent();
          var $delName = $delRow.find("td:first").text();
          //提示是否删除
          var conFlag = confirm("确认删除:" + $delName);
          if (conFlag) {
            //删除行
            $delRow.remove();
          }
          //阻止超链接的跳转
          return false;
        });

        //删除方式二
        //$newItem.find("a").click(deleteFun);
      });
      //删除按钮的绑定事件

      $("a").click(function () {
        //获取要删除的行
        var $delRow = $(this).parent().parent();
        var $delName = $delRow.find("td:first").text();
        //提示是否删除
        var conFlag = confirm("确认删除:" + $delName);
        if (conFlag) {
          //删除行
          $delRow.remove();
        }
        //阻止超链接的跳转
        return false;
      });

      //删除方式二
      //$("a").click(deleteFun)

    });


  </script>
</head>
<body>

<table id="employeeTable">
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th>Salary</th>
    <th>&nbsp;</th>
  </tr>
  <tr>
    <td>Tom</td>
    <td>tom@tom.com</td>
    <td>5000</td>
    <td><a href="deleteEmp?id=001">Delete</a></td>
  </tr>
  <tr>
    <td>Jerry</td>
    <td>jerry@sohu.com</td>
    <td>8000</td>
    <td><a href="deleteEmp?id=002">Delete</a></td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>bob@tom.com</td>
    <td>10000</td>
    <td><a href="deleteEmp?id=003">Delete</a></td>
  </tr>
</table>

<div id="formDiv">

  <h4>添加新员工</h4>

  <table>
    <tr>
      <td class="word">name:</td>
      <td class="inp">
        <input type="text" name="empName" id="empName"/>
      </td>
    </tr>
    <tr>
      <td class="word">email:</td>
      <td class="inp">
        <input type="text" name="email" id="email"/>
      </td>
    </tr>
    <tr>
      <td class="word">salary:</td>
      <td class="inp">
        <input type="text" name="salary" id="salary"/>
      </td>
    </tr>
    <tr>
      <td colspan="2" align="center">
        <button id="addEmpButton" value="abc">
          Submit
        </button>
      </td>
    </tr>
  </table>

</div>

</body>
</html>

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("redDiv blueBorder");
        //$divEle.removeClass();
      });


      $('#btn03').click(function () {
        //toggleClass() - 对被选元素进行添加/删除类的切换操作
        $divEle.toggleClass("redDiv");
      });


      $('#btn04').click(function () {
        //offset() - 返回第一个匹配元素相对于文档的位置。
        var pos = $divEle.offset();
        //console.log(pos);
        $divEle.offset({
          top: 100,
          left: 50
        });
      });


    })
  </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>


<br/> <br/>


<br/> <br/>


</body>
</html>

jQuery动画

基本动画

show()：显示
hide()：隐藏
toggle()：显/隐切换
第一个参数：可以把动画时间作为参数，单位：毫秒
第二个参数：回调函数，动画完成后自动调用的函数

淡入淡出动画

fadeIn()：慢慢可见
fadeOut()：慢慢消失
fadeToggle()：切换
fadeTo()：在指定时长内慢慢将透明度修改到指定的值。0：透明，1：完全可见
fadeIn()、fadeOut()、fadeToggle() 第一个参数：可以把动画时间作为参数，单位：毫秒；第二个参数：回调函数，动画完成后自动调用的函数
fadeTo()参数有三个，第一个：执行时间；第二个：透明度，第三个：回调函数
示例：

<!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>动画</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">
	/*
		基本
		show([speed,[easing],[fn]])
		hide([speed,[easing],[fn]])
		toggle([speed],[easing],[fn])
		滑动
		slideDown([spe],[eas],[fn])
		slideUp([speed,[easing],[fn]])
		slideToggle([speed],[easing],[fn])
		淡入淡出
		fadeIn([speed],[eas],[fn])
		fadeOut([speed],[eas],[fn])
		fadeTo([[spe],opa,[eas],[fn]])
		fadeToggle([speed,[eas],[fn]])
		*/
		$(function(){
			//显示   show()
			$("#btn1").click(function(){
				//$("#div1").show();
				$("#div1").show(1000);

			});
			//隐藏  hide()
			$("#btn2").click(function(){
				//$("#div1").hide();
				$("#div1").hide(2000);
			});
			//切换   toggle()
			$("#btn3").click(function(){
			  //$("#div1").toggle();
				$("#div1").toggle(2000);
			});

			//淡入   fadeIn()
			$("#btn4").click(function(){
        $("#div1").fadeIn(1000);
			});
			//淡出  fadeOut()
			$("#btn5").click(function(){
        $("#div1").fadeOut(1000);
			});

			//淡化到  fadeTo()
			$("#btn6").click(function(){
        $("#div1").fadeTo(1000,0.5);
			});
			//淡化切换  fadeToggle()
			$("#btn7").click(function(){
        $("#div1").fadeToggle(1000);
			});
		})
</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>

品牌展示：

<!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, .showless {
      clear: both;
      text-align: center;
      padding-top: 10px;
    }

    .showmore a, .showless 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;
    }

    .showless a span {
      padding-left: 15px;
      background: url(img/up.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:not(:last):gt(5)").hide();
      //绑定单击事件
      $("div div a").click(function () {
        $("li:not(:last):gt(5)").toggle();
        if ($("li:not(:last):gt(5)").is(":hidden")) {
          $("div div span").text("显示全部品牌");//修改文本
          $("div div").removeClass();
          $("div div").addClass("showmore");//修改角标
          //去掉高亮
          $("li:contains('佳能')").removeClass("promoted");
          $("li:contains('尼康')").removeClass("promoted");
          $("li:contains('奥林巴斯')").removeClass("promoted");
        } else {
          $("div div span").text("显示精简品牌");
          $("div div").removeClass();
          $("div div").addClass("showless");
          //添加高亮
          $("li:contains('佳能')").addClass("promoted");
          $("li:contains('尼康')").addClass("promoted");
          $("li:contains('奥林巴斯')").addClass("promoted");
        }
        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>

jQuery事件操作

页面加载完成

jQuery：$(function(){});
JS：window.onload = function(){}
触发时间：
（1）jQuery的页面加载完成之后是浏览器的内核解析完页面的标签创建好DOM对象之后就会马上执行
（2）原生js的页面加载完成之后，除了要等浏览器内核解析完标签创建好DOM对象，还要等标签显示时需要的内容加载完成，比如图片等
触发顺序：jQuery在前，原生js在后
执行次数：原生js只会执行最后一次的赋值函数；jQuery一次顺序执行

其他事件处理

在这里插入图片描述

事件的冒泡

事件的冒泡是指，父子元素同时监听同一个事件，当触发子元素的事件的时候，同一个事件也被传递到父元素的父元素的事件里去响应。
如何阻止事件的冒泡：在事件函数体内，return false；

获取事件对象event

原生JS和jQuery的方式都在事件绑定的函数function()中加入参数event
可以通过event.type获取事件类型

练习

图片跟随

<!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").bind("mouseover mouseout mousemove", function (event) {
        if (event.type == "mouseover") {
          $("#showBig").show();
        } else if (event.type == "mouseout") {
          $("#showBig").hide();
        } else {
          $("#showBig").offset({
            left: event.pageX + 10,//+10的目的时为了保持一个安全距离，否则当鼠标移到大图片时，会消失，导致闪烁
            top: event.pageY + 10
          })
        }
      });
    });
  </script>
</head>
<body>

<img id="small" src="img/small.jpg"/>

<div id="showBig">
  <img src="img/big.jpg">
</div>

</body>
</html>