Web阶段：第五章：JQuery库

Jquery介绍
1.什么是JQuery ?
jQuery，顾名思义，也就是JavaScript和查询（Query），它就是辅助JavaScript开发的js类库。

2.JQuery核心思想:
它的核心思想是write less,do more(写得更少,做得更多)，所以它实现了很多浏览器的兼容问题。

3.JQuery流行程度
jQuery现在已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。

4.JQuery好处:
jQuery是免费、开源的，jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。

Jquery 的初体验
需求：使用Jquery和javascript给一个按钮绑定单击事件
注意：使用Jquery之前要将第三方jar包导入

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.         <title>Insert title here</title>
  6.         <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
  7.         <script type="text/javascript">
  8.             //使用javaScript给一个按钮绑定单击事件
  9.             window.onload = function() {
  10.                 //1 获取标签对象
  11.                 var btnObj = document.getElementById("btnId");
  12.                 //2 通过标签对象.事件名 = function(){}
  13.                 btnObj.onclick = function() {
  14.                     alert("js原生绑定的单击事件");
  15.                 }
  16.             }
  17.             //使用Jquery给一个按钮绑定单击事件，Jquery中的$()代替window.onload
  18.             // alert($); // 测试jquery引入是否成功！$是jquery的核心函数
  19.             $(function(){ // 页面加载完成之后====>>>>window.onload = function()功能一样
  20.                 var $btnObj = $("#btnId");// 根据id属性值查询标签对象
  21.                 $btnObj.click( function(){    // 绑定事件
  22.                     alert("这是jquery绑定的单击事件");
  23.                 } );
  24.             });
  25.         </script>
  26.     </head>
  27.     <body>
  28.         <button id="btnId">SayHello</button>
  29.     </body>
  30. </html>

 

常见问题？
1、使用jquery一定要引入jquery库吗？ 答案： 是
2、jquery中的$到底是什么？ 答案： 核心函数
3、怎么为按钮添加点击响应函数的？ 答案： 操作如下：
①获取标签对象 var $btnObj = $("#btnId");// 根据id属性值查询标签对象
②通过标签对象.click( function(){} ) 绑定了函数

Jquery 核心函数 $()
$ 是jquery的核心函数，能完成jquery的很多功能。$()就是调用$这个函数
1、传入参数为 [ 函数 ] 时：
$( function(){} ); 功能跟 window.onload一样。都是页面加载完成之后。
2、传入参数为 [ HTML 字符串 ] 时：
$(“我是span标签”); 创建一个标签对象
相当于如下代码：
var spanObj = document.createElement(“span”);
spanObj.innerHTML = “我是span标签”;
document.body.appendChild( spanObj );
3、传入参数为 [ 选择器字符串 ] 时：$(“#id”)
$("#div01");// 根据id查询标签对象，跟document.getElementById()一样
4、传入参数为 [ DOM对象 ] 时： $(this)
var divObj = document.getElementById(“div01”); // dom对象
alert( $( divObj ) ); // jquery对象

Jquery对象和dom对象区分
什么是jquery对象，什么是dom对象?
Dom对象
1.通过getElementById()查询出来的标签对象是Dom对象
2.通过getElementsByName()查询出来的标签对象是Dom对象
3.通过getElementsByTagName()查询出来的标签对象是Dom对象
4.通过createElement() 方法创建的对象，是Dom对象
JQuery对象
5.通过JQuery提供的API创建的对象，是JQuery对象。
例如：$("<span>我是span标签</span>");是jquery对象
6.通过JQuery包装的Dom对象，也是JQuery对象
7.通过JQuery提供的API查询到的对象，是JQuery对象

Jquery对象的本质是什么？
jquery对象是一个Dom对象的数组 + jquery 的一系列功能函数的总和。

Jquery对象和Dom对象使用区别？
jquery对象不能使用dom对象的属性和方法

var divObj = document.getElementById("testDiv");
// jquery对象也不能使用dom对象的属性和方法
var $divObj = $( divObj );
alert( $divObj.innerHTML );

  

dom对象也不能使用jquery对象的属性的方法

var divObj = document.getElementById("testDiv");
//dom对象不能使用jquery对象的方法
divObj.onclick = function(){
    alert(1);
}

  

Dom对象和Jquery对象互转
dom对象转化为jquery对象：var $jqueryObj = $(dom对象)
1、先有dom对象
var divObj = document.getElementById(“testDiv”); // dom对象
2、通过核心函数转成jquery对象
$( divObj ); //jquery对象
jquery对象转为dom对象：var dom = $jqueryObj[下标];
1、先有jquery对象
2、通过下标取出需要的dom对象

jquery选择器

基本选择器
1.#ID 选择器：根据id查找标签对象
2…class 选择器：根据class查找标签对象
3.element 选择器：根据标签名查找标签对象
4.* 选择器：表示任意的，所有的元素
5.selector1，selector2 组合选择器：合并选择器1，选择器2的结果并返回
案例：

$(document).ready(function(){
    //1.选择 id 为 one 的元素  #id
    $("#btn1").click(function(){
        $("#one").css("background-color","#bbffaa");
    });
    //2.选择 class 为 mini 的所有元素  .class
    $("#btn2").click(function(){
        $(".mini").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的元素    [所有的 span 元素:标签选择器  标签名]
    //                                [id为two的元素:id选择器  #id]
    //                                组选择器  $(s1,s2...)
    $("#btn5").click(function(){
        $("span,#two").css("background-color","#bbffaa");
    });
});

   

p.myClass
p是标签名
.myClass是类型
要求的结果必须是：标签名必须是p标签，而且这个标签还要有myClass的类型

层级选择器
1.ancestor descendant 后代选择器 ：在给定的祖先元素下匹配所有的后代元素
2.parent > child 子元素选择器：在给定的父元素下匹配所有的子元素
3.prev + next 相邻元素选择器：匹配所有紧接在 prev 元素后的 next 元素
4.prev ~ sibings 之后的兄弟元素选择器：匹配 prev 元素之后的所有 siblings 元素
案例：

//$(document).ready(function(){});全写       跟 $(function(){}); 一样。简写
$(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");
    });
});

过滤选择器
基本过滤器
:first 获取第一个元素
:last 获取最后个元素
:not(selector) 去除所有与给定选择器匹配的元素
:even 匹配所有索引值为偶数的元素，从 0 开始计数
:odd 匹配所有索引值为奇数的元素，从 0 开始计数
:eq(index) 匹配一个给定索引值的元素
:gt(index) 匹配所有大于给定索引值的元素
:lt(index) 匹配所有小于给定索引值的元素
:header 匹配如 h1, h2, h3之类的标题元素
:animated 匹配所有正在执行动画效果的元素
案例：

$(document).ready(function(){
    //1.选择第一个 div 元素  
    $("#btn1").click(function(){
        $("div:first").css("background", "#bbffaa");
    });
    //2.选择最后一个 div 元素
    $("#btn2").click(function(){
        $("div:last").css("background", "#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");
    });
});

 

内容过滤器
:contains(text) 匹配包含给定文本的元素
:empty 匹配所有不包含子元素或者文本的空元素
:parent 匹配含有子元素或者文本的元素
:has(selector) 匹配含有选择器所匹配的元素的元素
案例：

$(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");
    });
});

  

属性过滤器
[attribute] 匹配包含给定属性的元素。
[attribute=value] 匹配给定的属性是某个特定值的元素
[attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素。
[attribute^=value] 匹配给定的属性是以某些值开始的元素
[attribute$=value] 匹配给定的属性是以某些值结尾的元素
[attribute*=value] 匹配给定的属性是以包含某些值的元素
[attrSel1][attrSel2][attrSelN] 复合属性选择器，需要同时满足多个条件时使用。
案例：

$(function() {
    //1.选取含有 属性title 的div元素
    $("#btn1").click(function() {
        $("div[title]").css("background", "#bbffaa");
    });
    //2.选取 属性title值等于'test'的div元素
    $("#btn2").click(function() {
        $("div[title='test']").css("background", "#bbffaa");
    });
    //3.选取 属性title值不等于'test'的div元素(没有属性title的也将被选中)
    $("#btn3").click(function() {
        $("div[title!='test']").css("background", "#bbffaa");
    });
    //4.选取 属性title值 以'te'开始 的div元素
    $("#btn4").click(function() {
        $("div[title^='te']").css("background", "#bbffaa");
    });
    //5.选取 属性title值 以'est'结束 的div元素
    $("#btn5").click(function() {
        $("div[title$='est']").css("background", "#bbffaa");
    });
    //6.选取 属性title值 含有'es'的div元素
    $("#btn6").click(function() {
        $("div[title*='es']").css("background", "#bbffaa");
    });      
    //7.首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素
    $("#btn7").click(function() {
        $("div[id][title*='es']").css("background", "#bbffaa");
    });
    //8.选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素
    $("#btn8").click(function() {
        $("div[title][title!='test']").css("background", "#bbffaa");
    });
});

   

[attribute!=value]补充：

  1. <head>
  2.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  3.     <title>Insert title here</title>
  4.     <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
  5.     <script type="text/javascript">
  6.         $(function(){
  7.             alert( $("div[id!='div01']").length );//2,没有属性id的也将被选中
  8.         });
  9.     </script>
  10. </head>
  11. <body>
  12.     <div id="div01"></div>
  13.     <div></div>
  14.     <div id="div03"></div>
  15. </body>

  

可见性过滤选择器
:hidden 所有隐藏的元素
:visible 所有可见元素
案例：

$(document).ready(function(){
    //1.选取所有可见的  div 元素
    $("#btn1").click(function(){
        $("div:visible").css("background", "#bbffaa");
    });
    //2.选择所有不可见的 div 元素
    //不可见：display属性设置为none，或visible设置为hidden
    $("#btn2").click(function(){
        $("div:hidden").show("slow").css("background", "#bbffaa");
    });
    //3.选择所有不可见的 input 元素
    $("#btn3").click(function(){
        alert($("input:hidden").attr("value"));
    });    
});

 

表单过滤器
:input 匹配所有 input, textarea, select 和 button 元素
:text 匹配所有 文本输入框
:password 匹配所有的密码输入框
:radio 匹配所有的单选框
:checkbox 匹配所有的复选框
:submit 匹配所有提交按钮
:image 匹配所有img标签
:reset 匹配所有重置按钮
:button 匹配所有input type=button 按钮
:file 匹配所有input type=file文件上传
:hidden 匹配所有不可见元素display:none 或 input type=hidden
表单对象的属性
:enabled 可用的
:disabled 不可用的
:checked 选择的，checkbox或者单选按钮的选择 复选框、单选框等
:selected 选择的，下拉列表的选择 匹配所有选中的option元素
案例：

  1. <head>
  2.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  3.     <title>Untitled Document</title>
  4.     <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
  5.     <script type="text/javascript">
  6.         $(function(){
  7.             //1.对表单内 可用 文本输入框 赋值操作
  8.             $("#btn1").click(function(){
  9.                 // .val() 方法 专门用来操作表单项的value属性
  10.                 $(":text:enabled").val("国哥太帅！");
  11.             });
  12.             //2.对表单内 不可用input 赋值操作
  13.             $("#btn2").click(function(){
  14.                 $(":text:disabled").val("不可用，我也可以改");
  15.             });
  16.             //3.获取多选框选中的个数  使用size()方法获取选取到的元素集合的元素个数
  17.             $("#btn3").click(function(){
  18.                 alert( $(":checkbox:checked").length );
  19.             });
  20.             //4.获取多选框，每个选中的value值
  21.             $("#btn4").click(function(){
  22.                 //1 获取全部选中的复选框
  23.                 var $checkedObjs = $(":checkbox:checked");
  24.                 //2 遍历所有复选框。转成dom对象。就可以使用.value
  25.                     //for (var i = 0; i < $checkedObjs.length; i++) {
  26.                         //alert( $checkedObjs[i].value );
  27.                     //}
  28.                 // each 方法   用来遍历jquery的每个元素
  29.                 $checkedObjs.each(function(){
  30.                         //在jquery对象的each遍历的function函数中，有一个this对象
  31.                     //这个this对象，是当前正在遍历到的dom对象
  32.                     alert( this.value );
  33.                 });
  34.             });
  35.             //5.获取下拉框选中的内容  
  36.             $("#btn5").click(function(){
  37.                 //1 获取全部选中的option标签对象
  38.                 $(":selected").each(function(){
  39.                     //在jquery的each遍历的function函数中，有一个this对象，这个this对象是当前正在遍历到的dom对象
  40.                     alert(this.innerHTML)
  41.                 });
  42.             });
  43.         })    
  44.     </script>
  45. </head>
  46. <body>
  47.     <h3>表单对象属性过滤选择器</h3>
  48.      <button id="btn1">对表单内 可用文本输入框 赋值操作.</button>
  49.           <button id="btn2">对表单内 不可用文本输入框 赋值操作.</button><br /><br />
  50.      <button id="btn3">获取多选框选中的个数.</button>
  51.      <button id="btn4">获取多选框选中的内容.</button><br /><br />
  52.         <button id="btn5">获取下拉框选中的内容.</button><br /><br />    
  53.     <form id="form1" action="#">            
  54.         可用元素: <input name="add" value="可用文本框1"/><br>
  55.         不可用元素: <input name="email" disabled="disabled" value="不可用文本框"/><br>
  56.         可用元素: <input name="che" value="可用文本框2"/><br>
  57.         不可用元素: <input name="name" disabled="disabled" value="不可用文本框"/><br>
  58.         <br>    
  59.         多选框: <br>
  60.         <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
  61.         <input type="checkbox" name="newsletter" value="test2" />test2
  62.         <input type="checkbox" name="newsletter" value="test3" />test3
  63.         <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
  64.         <input type="checkbox" name="newsletter" value="test5" />test5            
  65.         <br><br>
  66.         下拉列表1: <br>
  67.         <select name="test" multiple="multiple" style="height: 100px" id="sele1">
  68.             <option>浙江</option>
  69.             <option selected="selected">辽宁</option>
  70.             <option>北京</option>
  71.             <option selected="selected">天津</option>
  72.             <option>广州</option>
  73.             <option>湖北</option>
  74.         </select>
  75.         <br><br>
  76.         下拉列表2: <br>
  77.         <select name="test2">
  78.             <option>浙江</option>
  79.             <option>辽宁</option>
  80.             <option selected="selected">北京</option>
  81.             <option>天津</option>
  82.             <option>广州</option>
  83.             <option>湖北</option>
  84.         </select>
  85.     </form>        
  86. </body>

  

补充：下拉列表多项选择：multiple=“multiple”

  1. <select name="test" multiple="multiple" style="height: 100px" id="sele1">
  2.     <option>浙江</option>
  3.     <option selected="selected">辽宁</option>
  4.     <option>北京</option>
  5.     <option selected="selected">天津</option>
  6.     <option>广州</option>
  7.     <option>湖北</option>
  8. </select>

  

补充：checked选择的，checkbox或者单选按钮的选择 复选框、单选框等

  1. <head>
  2.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  3.     <title>Insert title here</title>
  4.     <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
  5.     <script type="text/javascript">
  6.         $(function(){
  7.                 //alert( $(":checked").length );//3
  8.             var $checkedObjs = $(":selected");//建议使用:selected代替:checked
  9.             for (var i = 0; i < $checkedObjs.length; i++) {
  10.                 alert($checkedObjs[i]);
  11.             }
  12.         });
  13.     </script>
  14. </head>
  15. <body>
  16.     <input type="radio" checked="checked" />
  17.     <input type="checkbox" checked="checked" />
  18.     <select>
  19.         <option>xxxx</option>
  20.         <option selected="selected">aaaa</option>
  21.         <option>bbbb</option>
  22.     </select>
  23. </body>

   

元素筛选
过滤
eq(index|-index)
选出索引为index 的元素（0开始） ,负号表示可以倒着选（-1开）和:eq()功能一样
first()
选出第一个元素 和:first功能一样
last()
选出最后一个元素 和:last功能一样
hasClass(class)
是否含有class值
filter(expr|obj|ele|fn)
按照表达式过滤
is(expr|obj|ele|fn)1.6*
是否满足表达式
has(expr|ele)
是否含有表达式的元素
not(expr|ele|fn)
判断一个元素是不是符合表达式
slice(start,[end])
表示从start开始选择直到end,只传递一个start表示从start开始直至结束
查找
children([expr]) 查找所有子元素，传入表达式，表示满足表达式的子元素
closest(expr,[con]|obj|ele)1.6* 表示查找和当前元素最接近的元素
find(expr|obj|ele) 表示查找元素，查找的是后代元素
next([expr]) 查找下一个元素
nextall([expr]) 查找下面所有的元素
nextUntil([exp|ele][,fil])1.6* 查找相邻相邻元素一致到结束
offsetParent() 返回第一个匹配元素用于定位的父节点。这返回父元素中第一个其position设为relative或者absolute的元素。此方法仅对可见元素有效。
parent([expr]) 返回父元素
parents([expr]) 返回所有祖先元素
parentsUntil([exp|ele][,fil])1.6* 返回所有祖先元素直到满足表达式为止
prev([expr]) 返回之前的那个元素
prevall([expr]) 返回之前所有的兄弟元素
prevUntil([exp|ele][,fil])1.6* 返回之前所有兄弟元素直到满足表达式为止
siblings([expr]) 返回满足表达式的同辈元素
串联
add(expr|ele|html|obj[,con]) 并联关系。选择当前的元素和add条件中的元素，返回的是这些元素的集合
案例：

  1. <head>
  2.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  3.     <title>DOM查询</title>
  4.     <style type="text/css">
  5.         div, span, p {
  6.             width: 140px;
  7.             height: 140px;
  8.             margin: 5px;
  9.             background: #aaa;
  10.             border: #000 1px solid;
  11.             float: left;
  12.             font-size: 17px;
  13.             font-family: Verdana;
  14.         }
  15.         div.mini {
  16.             width: 55px;
  17.             height: 55px;
  18.             background-color: #aaa;
  19.             font-size: 12px;
  20.         }
  21.         div.hide {
  22.             display: none;
  23.         }            
  24.     </style>
  25.     <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
  26.     <script type="text/javascript">
  27.         $(document).ready(function(){
  28.             function anmateIt(){
  29.                 $("#mover").slideToggle("slow", anmateIt);
  30.             }
  31.             anmateIt();
  32.             //(1)eq()  选择索引值为等于 3 的 div 元素
  33.             $("#btn1").click(function(){
  34.                 $("div").eq(3).css("background-color","#bfa");
  35.             });
  36.             //(2)first()选择第一个 div 元素
  37.              $("#btn2").click(function(){
  38.                  //first()   选取第一个元素
  39.                 $("div").first().css("background-color","#bfa");
  40.             });
  41.             //(3)last()选择最后一个 div 元素
  42.             $("#btn3").click(function(){
  43.                 //last()  选取最后一个元素
  44.                 $("div").last().css("background-color","#bfa");
  45.             });
  46.             //(4)filter()在div中选择索引为偶数的
  47.             $("#btn4").click(function(){
  48.                 //filter()  过滤   传入的是选择器字符串
  49.                 $("div").filter(":even").css("background-color","#bfa");
  50.             });
  51.              //(5)is()判断#one是否为:empty或:parent
  52.             //is用来检测jq对象是否符合指定的选择器
  53.             $("#btn5").click(function(){
  54.                 alert( $("#one").is(":parent") );
  55.             });
  56.             //(6)has()选择div中包含.mini的
  57.             $("#btn6").click(function(){
  58.                 //has(selector)  选择器字符串    是否包含selector
  59.                 $("div").has(".mini").css("background-color","#bfa");
  60.             });
  61.             //(7)not()选择div中class不为one的
  62.             $("#btn7").click(function(){
  63.                 //not(selector)  选择不是selector的元素
  64.                 $("div").not(".one").css("background-color","#bfa");
  65.             });
  66.             //(8)children()在body中选择所有class为one的div子元素
  67.             $("#btn8").click(function(){
  68.                 //children()  选出所有的子元素
  69.                 $("body").children("div.one").css("background-color","#bfa");
  70.             });
  71.             //(9)find()在body中选择所有class为mini的div元素
  72.             $("#btn9").click(function(){
  73.                 //find()  选出所有的后代元素
  74.                 $("body").find("div.mini").css("background-color","#bfa");
  75.             });
  76.             //(10)next() #one的下一个div
  77.             $("#btn10").click(function(){
  78.                 //next()  选择下一个兄弟元素
  79.                 $("#one").next("div").css("background-color","#bfa");
  80.             });
  81.             //(11)nextAll() #one后面所有的span元素
  82.             $("#btn11").click(function(){
  83.                 //nextAll()   选出后面所有的元素
  84.                 $("#one").nextAll("span").css("background-color","#bfa");
  85.             });
  86.             //(12)nextUntil() #one和span之间的元素
  87.             $("#btn12").click(function(){
  88.                 $("#one").nextUntil("span").css("background-color","#bfa")
  89.             });
  90.             //(13)parent() .mini的父元素
  91.             $("#btn13").click(function(){
  92.                 $(".mini").parent().css("background-color","#bfa");
  93.             });
  94.             //(14)prev() #two的上一个div
  95.             $("#btn14").click(function(){
  96.                 //prev()  
  97.                 $("#two").prev().css("background-color","#bfa")
  98.             });
  99.             //(15)prevAll() span前面所有的div
  100.             $("#btn15").click(function(){
  101.                 //prevAll()   选出前面所有的元素
  102.                 $("span").prevAll("div").css("background-color","#bfa")
  103.             });
  104.             //(16)prevUntil() span向前直到#one的元素
  105.             $("#btn16").click(function(){
  106.                 //prevUntil(exp)   找到之前所有的兄弟元素直到找到exp停止
  107.                 $("span").prevUntil("#one").css("background-color","#bfa")
  108.             });
  109.             //(17)siblings() #two的所有兄弟元素
  110.             $("#btn17").click(function(){
  111.                 //siblings()    找到所有的兄弟元素，包括前面的和后面的
  112.                 $("#two").siblings("div").css("background-color","#bfa")
  113.             });
  114.             //(18)add()选择所有的 span 元素和id为two的元素
  115.             $("#btn18").click(function(){
  116.                 //   $("span,#two,.mini,#one")
  117.                 $("span").add("#two").add("#one").css("background-color","#bfa");
  118.             });
  119.         });
  120.     </script>
  121. </head>
  122. <body>        
  123.     <input type="button" value="eq()选择索引值为等于 3 的 div 元素" id="btn1" />
  124.     <input type="button" value="first()选择第一个 div 元素" id="btn2" />
  125.     <input type="button" value="last()选择最后一个 div 元素" id="btn3" />
  126.     <input type="button" value="filter()在div中选择索引为偶数的" id="btn4" />
  127.     <input type="button" value="is()判断#one是否为:empty或:parent" id="btn5" />
  128.     <input type="button" value="has()选择div中包含.mini的" id="btn6" />
  129.     <input type="button" value="not()选择div中class不为one的" id="btn7" />
  130.     <input type="button" value="children()在body中选择所有class为one的div子元素" id="btn8" />
  131.     <input type="button" value="find()在body中选择所有class为mini的div后代元素" id="btn9" />
  132.     <input type="button" value="next()#one的下一个div" id="btn10" />
  133.     <input type="button" value="nextAll()#one后面所有的span元素" id="btn11" />
  134.     <input type="button" value="nextUntil()#one和span之间的元素" id="btn12" />
  135.     <input type="button" value="parent().mini的父元素" id="btn13" />
  136.     <input type="button" value="prev()#two的上一个div" id="btn14" />
  137.     <input type="button" value="prevAll()span前面所有的div" id="btn15" />
  138.     <input type="button" value="prevUntil()span向前直到#one的元素" id="btn16" />
  139.     <input type="button" value="siblings()#two的所有兄弟元素" id="btn17" />
  140.     <input type="button" value="add()选择所有的 span 元素和id为two的元素" id="btn18" />
  141.     <h3>基本选择器.</h3>
  142.     <br /><br />
  143.     文本框<input type="text" name="account" disabled="disabled" />
  144.     <br><br>
  145.     <div class="one" id="one">
  146.         id 为 one,class 为 one 的div
  147.         <div class="mini">class为mini</div>
  148.     </div>
  149.     <div class="one" id="two" title="test">
  150.         id为two,class为one,title为test的div
  151.         <div class="mini" title="other"><b>class为mini,title为other</b></div>
  152.         <div class="mini" title="test">class为mini,title为test</div>
  153.     </div>
  154.     <div class="one">
  155.         <div class="mini">class为mini</div>
  156.         <div class="mini">class为mini</div>
  157.         <div class="mini">class为mini</div>
  158.         <div class="mini"></div>
  159.     </div>
  160.     <div class="one">
  161.         <div class="mini">class为mini</div>
  162.         <div class="mini">class为mini</div>
  163.         <div class="mini">class为mini</div>
  164.         <div class="mini" title="tesst">class为mini,title为tesst</div>
  165.     </div>
  166.     <div style="display:none;" class="none">style的display为"none"的div</div>
  167.     <div class="hide">class为"hide"的div</div>
  168.     <span id="span1">^^span元素 111^^</span>
  169.     <div>
  170.         包含input的type为"hidden"的div<input type="hidden" size="8">
  171.     </div>
  172.     <span id="span2">^^span元素 222^^</span>
  173.     <div id="mover">正在执行动画的div元素.</div>
  174. </body>

  

Jquery 的属性操作
html() 跟innerHTML一样。 设置和获取起始标签和结束标签中的内容
text() 跟innerText一样。 设置和获取起始标签和结束标签中的文本
val() 跟value属性一样。 专门用来操作表单项的value属性。
案例：

  1. <head>
  2.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  3.     <title>Insert title here</title>
  4.     <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
  5.     <script type="text/javascript">
  6.         $(function() {
  7.             // val()方法来操作
  8.             //val()方法除了可以设置表单项的value属性值之外。
  9.             // 还可以批量操作表单项的选中状态
  10.             // $(":radio").val(["radio2"]);// 操作单选
  11.             // $(":checkbox").val(["checkbox3","checkbox2","checkbox1"]);//批量操作复选框被选中
  12.             // $("#multiple").val(["mul1","mul3","mul4"]);// 批量操作多选的下拉列表，多个被选中
  13.             // $("#single").val(["sin3"]);// 操作单选的下拉列表，一个被选中
  14.             $(":radio,:checkbox,#multiple,#single").val(["checkbox3","radio2","checkbox2","mul2","mul3","sin2"]);
  15.         });
  16.     </script>
  17. </head>
  18. <body>
  19.     单选：
  20.     <input name="radio" type="radio" value="radio1" />radio1
  21.     <input name="radio" type="radio" value="radio2" />radio2
  22.     <br/>
  23.     多选：
  24.     <input name="checkbox" type="checkbox" value="checkbox1" />checkbox1
  25.     <input name="checkbox" type="checkbox" value="checkbox2" />checkbox2    
  26.     <input name="checkbox" type="checkbox" value="checkbox3" />checkbox3
  27.     <br/>
  28.     下拉多选 ：
  29.     <select id="multiple" multiple="multiple" size="4">
  30.         <option value="mul1">mul1</option>
  31.         <option value="mul2">mul2</option>
  32.         <option value="mul3">mul3</option>
  33.         <option value="mul4">mul4</option>
  34.     </select>    
  35.     <br/>
  36.     下拉单选 ：
  37.     <select id="single">
  38.         <option value="sin1">sin1</option>
  39.         <option value="sin2">sin2</option>
  40.         <option value="sin3">sin3</option>
  41.     </select>    
  42. </body>

 

attr() attr可以设置和获取属性的值。
prop() prop可以设置和获取属性的值。

prop方法它可以忽略undefined错误。checked属性、selected属性、disalbed属性，readonly属性，等。这些属性在dom对象中都会有true和false值的情况。
并且使用attr操作有返回undefined的情况下。使用prop方法。prop方法只推荐用来操作dom属性中值是true和false的属性。其他的属性都使用attr方法。

attr还有它强大的地方。它可以操作非标准的属性（自定义的属性）。
需求：

 


案例：

  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  3. <title>Insert title here</title>
  4. <script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
  5. <script type="text/javascript">
  6.     $(function(){
  7.         // 全选
  8.         $("#checkedAllBtn").click(function(){
  9.             $(":checkbox").prop("checked",true);
  10.         });
  11.         // 全不选
  12.         $("#checkedNoBtn").click(function(){
  13.             $(":checkbox").prop("checked",false);
  14.         });
  15.         // 反选
  16.         $("#checkedRevBtn").click(function(){
  17.             // 全部球类的复选框
  18.             $(":checkbox[name='items']").each(function(){
  19. //                 在遍历的each方法的function函数中，有一个this对象，
  20. //                 这个this对象是当前正在遍历到的dom对象
  21.                 this.checked = !this.checked;
  22.             });
  23.             // 需要检查一下，是否全部的球类复选框都选中了
  24.             // 如果都选中了，设置【全选/全不选 】也选中，反之亦然
  25.             // 获取全部的球类的个数
  26.             var allCount = $(":checkbox[name='items']").length;
  27.             // 获取选中的球类的个数
  28.             var checkedCount = $(":checkbox[name='items']:checked").length;
  29.             if (allCount == checkedCount) {
  30.                 // 全选啦
  31.                 $("#checkedAllBox").prop("checked",true);
  32.             } else {
  33.                 // 还没选满
  34.                 $("#checkedAllBox").prop("checked",false);
  35.             }
  36.         });
  37.         // 提交按钮
  38.         $("#sendBtn").click(function(){
  39.             // 选中的全部和复选框
  40.             $(":checkbox[name='items']:checked").each(function(){
  41.                 alert(this.value);
  42.             });
  43.         });
  44.         // 给【全选/全不选 】复选框绑定单击事件
  45.         $("#checkedAllBox").click(function(){
  46.             // 在事件的function函数中，也有一个this对象。这个this对象是当前正在响应事件的dom对象
  47.             // 1 获取【全选/全不选 】的选中状态
  48. //             alert( this.checked );
  49.             // 2 把【全选/全不选 】的选中状态。设置给全部的球类
  50.             $(":checkbox[name='items']").prop("checked",this.checked );
  51.         });
  52.         // 给每一个球类都要绑定单击事件
  53.         $(":checkbox[name='items']").click(function(){
  54.             // 在事件的function函数中，也有一个this对象。这个this对象是当前正在响应事件的dom对象
  55.             // 需要检查一下，是否全部的球类复选框都选中了
  56.             // 如果都选中了，设置【全选/全不选 】也选中，反之亦然
  57.             // 获取全部的球类的个数
  58.             var allCount = $(":checkbox[name='items']").length;
  59.             // 获取选中的球类的个数
  60.             var checkedCount = $(":checkbox[name='items']:checked").length;
  61.             if (allCount == checkedCount) {
  62.                 // 全选啦
  63.                 $("#checkedAllBox").prop("checked",true);
  64.             } else {
  65.                 // 还没选满
  66.                 $("#checkedAllBox").prop("checked",false);
  67.             }
  68.         })
  69.     });
  70. </script>
  71. </head>
  72. <body>
  73.     <form method="post" action="">
  74.         你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选
  75.         <br />
  76.         <input type="checkbox" name="items" value="足球" />足球
  77.         <input type="checkbox" name="items" value="篮球" />篮球
  78.         <input type="checkbox" name="items" value="羽毛球" />羽毛球
  79.         <input type="checkbox" name="items" value="乒乓球" />乒乓球
  80.         <br />
  81.         <input type="button" id="checkedAllBtn" value="全 选" />
  82.         <input type="button" id="checkedNoBtn" value="全不选" />
  83.         <input type="button" id="checkedRevBtn" value="反 选" />
  84.         <input type="button" id="sendBtn" value="提 交" />
  85.     </form>
  86. </body>

   

Dom的增删改
内部插入

appendTo(content)
a.appendTo(b); 把a加到b里面 添加到最后面
prependTo(content)
a.prependTo(b); 把a添加到b里面 添加到最前面

外部插入
insertAfter(content)
a.insertAfter(b); 把a插入到b的后面
insertBefore(content)
a.insertBefore(b); 把a插入到b的前面

替换
replaceWith(content|fn)
a.replaceWith(b) 把a用b替换
replaceAll(selector)
a.replaceAll(b) 用a替换所有的b

删除
empty()
a.empty() 把a掏空，把a里面的所有元素都删除 （内容）
remove([expr])
a.remove(b) 所有的a，是b的话就会删除 a.remove()删除a （内容和结构）
案例：

  1. <head>
  2.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  3.     <title>DOM增删改</title>
  4.     <link rel="stylesheet" type="text/css" href="style/css.css" />
  5.     <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
  6.     <script type="text/javascript">
  7.     $(function(){
  8.         $("#btn01").click(function(){
  9.             //创建一个"广州"节点,添加到#city下[appendTo()]
  10.             //子节点.appendTo(父节点)
  11.             $("<li>广州</li>").appendTo($("#city"))
  12.         });
  13.         $("#btn02").click(function(){
  14.             //创建一个"广州"节点,添加到#city下[prependTo()]
  15.             $("<li>广州</li>").prependTo($("#city"));
  16.         });
  17.         $("#btn03").click(function(){
  18.             //将"广州"节点插入到#bj前面[insertBefore()]
  19.             //前边.insertBefore(后边的)
  20.             $("<li>广州</li>").insertBefore($("#bj"));
  21.         });
  22.         $("#btn04").click(function(){
  23.             //将"广州"节点插入到#bj后面[insertAfter()]
  24.             //后边.insertAfter(前边的)
  25.             $("<li>广州</li>").insertAfter($("#bj"));
  26.         });
  27.         $("#btn05").click(function(){
  28.             //使用"广州"节点替换#bj节点[replaceWith()]
  29.             //被替换的.replaceWith()
  30.             $("#bj").replaceWith("<li>广州</li>")
  31.         });
  32.         $("#btn06").click(function(){
  33.             //使用"广州"节点替换#bj节点[replaceAll()]
  34.             //新的节点.replaceAll(旧的节点)
  35.             $("<li>广州</li>").replaceAll($("#bj"));
  36.         });
  37.         $("#btn07").click(function(){
  38.             //删除#rl节点[remove()]
  39.             //$("ul").remove("#rl");
  40.             //$("#rl").remove();
  41.             $("li").remove("#rl");
  42.         });
  43.         $("#btn08").click(function(){
  44.             //掏空#city节点[empty()]
  45.             $("#city").empty();
  46.         });
  47.         $("#btn09").click(function(){
  48.             //读取#city内的HTML代码
  49.             alert($("#city").html())
  50.         });
  51.         $("#btn10").click(function(){
  52.             //设置#bj内的HTML代码
  53.             alert($("#bj").text())
  54.         });
  55.     });
  56. </script>
  57. </head>
  58. <body>
  59.     <div id="total">
  60.         <div class="inner">
  61.             <p>你喜欢哪个城市?</p>
  62.             <ul id="city">
  63.                 <li id="bj">北京</li>
  64.                 <li>上海</li>
  65.                 <li>东京</li>
  66.                 <li>首尔</li>
  67.             </ul>
  68.             <p>你喜欢哪款单机游戏?</p>
  69.             <ul id="game">
  70.                 <li id="rl">红警</li>
  71.                 <li>实况</li>
  72.                 <li>极品飞车</li>
  73.                 <li>魔兽</li>
  74.             </ul>
  75.             <p>你手机的操作系统是?</p>
  76.             <ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
  77.         </div>
  78.         <div class="inner">
  79.             gender:
  80.             <input type="radio" name="gender" value="male"/>
  81.             Male
  82.             <input type="radio" name="gender" value="female"/>
  83.             Female
  84.             <br>
  85.             <br>
  86.             name:
  87.             <input type="text" name="name" id="username" value="abcde"/>
  88.         </div>
  89.     </div>
  90.     <div id="btnList">
  91.         <div><button id="btn01">创建一个"广州"节点,添加到#city下[appendTo()]</button></div>
  92.         <div><button id="btn02">创建一个"广州"节点,添加到#city下[prependTo()]</button></div>
  93.         <div><button id="btn03">将"广州"节点插入到#bj前面[insertBefore()]</button></div>
  94.         <div><button id="btn04">将"广州"节点插入到#bj后面[insertAfter()]</button></div>
  95.         <div><button id="btn05">使用"广州"节点替换#bj节点[replaceWith()]</button></div>
  96.         <div><button id="btn06">使用"广州"节点替换#bj节点[replaceAll()]</button></div>
  97.         <div><button id="btn07">删除#rl节点[remove()]</button></div>
  98.         <div><button id="btn08">掏空#city节点[empty()]</button></div>
  99.         <div><button id="btn09">读取#city内的HTML代码</button></div>
  100.         <div><button id="btn10">设置#bj内的HTML代码</button></div>
  101.     </div>
  102. </body>

 

JQuery练习
从左到右，从右到左练习
需求：

 








案例代码：

  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  3. <title>Insert title here</title>
  4. <style type="text/css">
  5.     select {
  6.         width: 100px;
  7.         height: 140px;
  8.     }
  9.     div {
  10.         width: 130px;
  11.         float: left;
  12.         text-align: center;
  13.     }
  14. </style>
  15. <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
  16. <script type="text/javascript">
  17.     $(function(){
  18.         //【选中添加到右边】单击事件
  19.         $("button:eq(0)").click(function(){
  20.             // 先查找出左边下拉列表中哪些option被选中
  21.             // 调用appendTo()
  22.             $("select:eq(0) option:selected").appendTo( $("select:eq(1)") );
  23.         });
  24.         //【全部添加到右边】单击事件
  25.         $("button:eq(1)").click(function(){
  26.             // 先查找出左边下拉列表中哪些option被选中
  27.             // 调用appendTo()
  28.             $("select:eq(0) option").appendTo( $("select:eq(1)") );
  29.         });
  30.         //【选中删除到左边】单击事件
  31.         $("button:eq(2)").click(function(){
  32.             // 先查找出左边下拉列表中哪些option被选中
  33.             // 调用appendTo()
  34.             $("select:eq(1) option:selected").appendTo( $("select:eq(0)") );
  35.         });
  36.         //【全部删除到左边】单击事件
  37.         $("button:eq(3)").click(function(){
  38.             // 先查找出左边下拉列表中哪些option被选中
  39.             // 调用appendTo()
  40.             $("select:eq(1) option").appendTo( $("select:eq(0)") );
  41.         });
  42.     });
  43. </script>
  44. </head>
  45. <body>
  46.     <div id="left">
  47.         <select multiple="multiple" name="sel01">
  48.             <option value="opt01">选项1</option>
  49.             <option value="opt02">选项2</option>
  50.             <option value="opt03">选项3</option>
  51.             <option value="opt04">选项4</option>
  52.             <option value="opt05">选项5</option>
  53.             <option value="opt06">选项6</option>
  54.             <option value="opt07">选项7</option>
  55.             <option value="opt08">选项8</option>
  56.         </select>
  57.         <button>选中添加到右边</button>
  58.         <button>全部添加到右边</button>
  59.     </div>
  60.     <div id="rigth">
  61.         <select multiple="multiple" name="sel02">
  62.         </select>
  63.         <button>选中删除到左边</button>
  64.         <button>全部删除到左边</button>
  65.     </div>
  66. </body>

  

动态添加、删除表格记录（绝对的重点）
需求：

 


























案例代码：

 

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>Untitled Document</title>
  6. <link rel="stylesheet" type="text/css" href="styleB/css.css" />
  7. <script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
  8. <script type="text/javascript">
  9. // 页面加载完成之后
  10. $(function(){
  11.     // 定义删除的函数，重复使用
  12.     var deleteAFun = function(){
  13.         var $trObj = $(this).parent().parent();
  14.         // find 查找后代
  15.         var name = $trObj.find("td:first").text();
  16.         // confirm是javaScript中提供的一个确认提示框函数，
  17.         // 它接收的参数就是提示框的提示文本内容
  18.         // 这个确认提示框有两个按钮，一个确认，一个取消
  19.         // 用户点击确认，就返回true
  20.         // 用户点击取消，就返回false
  21.         if( confirm("是否需要删除【" + name + "】吗?") ){
  22.             $trObj.remove();
  23.         }
  24.         // 在事件的function函数中，有一个this对象，这个this对象是当前正在响应事件的dom对象
  25.         // 删除点击所在行
  26.         // 不希望跳转怎么办？
  27.         // return false 可以阻止元素的默认行为。
  28.         return false;            
  29.     }
  30.     //提交按钮绑定单击事件
  31.     $("#addEmpButton").click(function(){
  32.         // 获取输入框中，名称，邮箱，工资
  33.         var nameText = $("#empName").val();
  34.         var emailText = $("#email").val();
  35.         var salaryText = $("#salary").val();
  36.         // 创建一个行对象
  37.         var $trObj = $("<tr>"
  38.             + "<td>" + nameText + "</td>"
  39.             + "<td>" + emailText + "</td>"
  40.             + "<td>" + salaryText + "</td>"
  41.             + "<td><a href=\"deleteEmp?id=003\">Delete</a></td>"
  42.             + "</tr>");
  43.         // 找到创建出来的a标签，再给它绑定单击事件
  44.         $trObj.find("a").click(deleteAFun);
  45.         // 添加表表格中
  46.         $trObj.appendTo( $("#employeeTable") );
  47.     });
  48.     // 给删除的a标签绑定单击事件
  49.     $("a").click( deleteAFun );
  50. });
  51. </script>
  52. </head>
  53. <body>
  54. <table id="employeeTable">
  55.     <tr>
  56.         <th>Name</th>
  57.         <th>Email</th>
  58.         <th>Salary</th>
  59.         <th>&nbsp;</th>
  60.     </tr>
  61.     <tr>
  62.         <td>Tom</td>
  63.         <td>tom@tom.com</td>
  64.         <td>5000</td>
  65.         <td><a href="deleteEmp?id=001">Delete</a></td>
  66.     </tr>
  67.     <tr>
  68.         <td>Jerry</td>
  69.         <td>jerry@sohu.com</td>
  70.         <td>8000</td>
  71.         <td><a href="deleteEmp?id=002">Delete</a></td>
  72.     </tr>
  73.     <tr>
  74.         <td>Bob</td>
  75.         <td>bob@tom.com</td>
  76.         <td>10000</td>
  77.         <td><a href="deleteEmp?id=003">Delete</a></td>
  78.     </tr>
  79. </table>
  80. <div id="formDiv">
  81.     <h4>添加新员工</h4>
  82.     <table>
  83.         <tr>
  84.             <td class="word">name: </td>
  85.             <td class="inp">
  86.                 <input type="text" name="empName" id="empName" />
  87.             </td>
  88.         </tr>
  89.         <tr>
  90.             <td class="word">email: </td>
  91.             <td class="inp">
  92.                 <input type="text" name="email" id="email" />
  93.             </td>
  94.         </tr>
  95.         <tr>
  96.             <td class="word">salary: </td>
  97.             <td class="inp">
  98.                 <input type="text" name="salary" id="salary" />
  99.             </td>
  100.         </tr>
  101.         <tr>
  102.             <td colspan="2" align="center">
  103.                 <button id="addEmpButton" value="abc">
  104.                     Submit
  105.                 </button>
  106.             </td>
  107.         </tr>
  108.     </table>
  109. </div>
  110. </body>
  111. </html>

   

CSS样式操作
addClass() 添加样式
removeClass() 删除样式
toggleClass() 有就删除，没有就添加
offset() 设置和获取标签和坐标
案例：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>Insert title here</title>
  6. <style type="text/css">
  7.     div{
  8.         width:100px;
  9.         height:260px;
  10.     }
  11.     div.whiteborder{
  12.         border: 2px white solid;
  13.     }
  14.     div.redDiv{
  15.         background-color: red;
  16.     }
  17.     div.blueBorder{
  18.         border: 5px blue solid;
  19.     }
  20. </style>
  21. <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
  22. <script type="text/javascript">
  23.     $(function(){
  24.         var $divEle = $('div:first');
  25.         $('#btn01').click(function(){
  26.             //addClass() - 向被选元素添加一个或多个类
  27.             $divEle.addClass("redDiv blueBorder");
  28.         });
  29.         $('#btn02').click(function(){
  30.             //removeClass() - 从被选元素删除一个或多个类
  31.             $divEle.removeClass();
  32.         });
  33.         $('#btn03').click(function(){
  34.             //toggleClass() - 对被选元素进行添加/删除类的切换操作
  35.             $divEle.toggleClass("redDiv");
  36.         });
  37.         $('#btn04').click(function(){
  38.             //offset() - 返回第一个匹配元素相对于文档的位置。
  39.             var pos = $divEle.offset();
  40.             console.log(pos);
  41.             // 设置坐标
  42.             $divEle.offset({
  43.                 top: 110, left: 384
  44.             });
  45.         });
  46.     })
  47. </script>
  48. </head>
  49. <body>
  50.     <table align="center">
  51.         <tr>
  52.             <td>
  53.                 <div class="border">
  54.                 </div>
  55.             </td>
  56.             <td>
  57.                 <div class="btn">
  58.                     <input type="button" value="addClass()" id="btn01"/>
  59.                     <input type="button" value="removeClass()" id="btn02"/>
  60.                     <input type="button" value="toggleClass()" id="btn03"/>
  61.                     <input type="button" value="offset()" id="btn04"/>
  62.                 </div>
  63.             </td>
  64.         </tr>
  65.     </table>
  66. </body>
  67. </html>

  

Jquery动画
基本动画
show() 显示隐藏的元素
第一个参数是 动画执行的时候，（单位是毫秒）
第二个参数是 动画执行完成时的回调函数

hide() 隐藏可见的元素
第一个参数是 动画执行的时候，（单位是毫秒）
第二个参数是 动画执行完成时的回调函数

toggle() 可见就隐藏，隐藏状态就显示
第一个参数是 动画执行的时候，（单位是毫秒）
第二个参数是 动画执行完成时的回调函数

淡入淡出动画
fadeIn() 淡入 让隐藏可见
fadeOut() 淡出 让可见消失
fadeTo()
fadeToggle() 让消失的可见，让可见的慢慢消失
案例：

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>Untitled Document</title>
  6. <link href="css/style.css" type="text/css" rel="stylesheet" />
  7. <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
  8. <script type="text/javascript">
  9.     $(function(){
  10.         //显示   show()
  11.         $("#btn1").click(function(){
  12.             $("#div1").show(1000);
  13.         });        
  14.         //隐藏  hide()
  15.         $("#btn2").click(function(){
  16.             $("#div1").hide(1000);
  17.         });    
  18.         //切换   toggle()
  19.         $("#btn3").click(function(){
  20.             $("#div1").toggle(1000);
  21.         });    
  22.         //淡入   fadeIn()
  23.         $("#btn4").click(function(){
  24.             $("#div1").fadeIn(500);
  25.         });    
  26.         //淡出  fadeOut()
  27.         $("#btn5").click(function(){
  28.             $("#div1").fadeOut(500);
  29.         });    
  30.         //淡化到  fadeTo()
  31.         $("#btn6").click(function(){
  32.             $("#div1").fadeTo("slow",Math.random());
  33.         });    
  34.         //淡化切换  fadeToggle()
  35.         $("#btn7").click(function(){
  36.             $("#div1").fadeToggle("slow","linear");
  37.         });    
  38.     })
  39. </script>
  40. </head>
  41. <body>
  42.     <table style="float: left;">
  43.         <tr>
  44.             <td><button id="btn1">显示show()</button></td>
  45.         </tr>
  46.         <tr>
  47.             <td><button id="btn2">隐藏hide()</button></td>
  48.         </tr>
  49.         <tr>
  50.             <td><button id="btn3">显示/隐藏切换 toggle()</button></td>
  51.         </tr>
  52.         <tr>
  53.             <td><button id="btn4">淡入fadeIn()</button></td>
  54.         </tr>
  55.         <tr>
  56.             <td><button id="btn5">淡出fadeOut()</button></td>
  57.         </tr>
  58.         <tr>
  59.             <td><button id="btn6">淡化到fadeTo()</button></td>
  60.         </tr>
  61.         <tr>
  62.             <td><button id="btn7">淡化切换fadeToggle()</button></td>
  63.         </tr>
  64.     </table>
  65.     <div id="div1" style="float:left;border: 1px solid;background-color: blue;width: 300px;height: 200px;">
  66.         jquery动画定义了很多种动画效果，可以很方便的使用这些动画效果
  67.     </div>
  68. </body>
  69. </html>

 

练习：CSS_动画 品牌展示
需求：
1.点击按钮的时候，隐藏和显示卡西欧之后的品牌。
2.当显示全部内容的时候，按钮文本为“显示精简品牌”
然后，小三角形向上。所有品牌产品为默认颜色。
3.当只显示精简品牌的时候，要隐藏卡西欧之后的品牌，按钮文本为“显示全部品牌”
然后小三形向下。并且把 佳能，尼康的品牌颜色改为红色（给li标签添加promoted样式即可）

 


案例：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>品牌展示练习</title>
  7. <style type="text/css">
  8. *{ margin:0; padding:0;}
  9. body {font-size:12px;text-align:center;}
  10. a { color:#04D; text-decoration:none;}
  11. a:hover { color:#F50; text-decoration:underline;}
  12. .SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;}
  13. .SubCategoryBox ul { list-style:none;}
  14. .SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;}
  15. .showmore { clear:both; text-align:center;padding-top:10px;}
  16. .showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;}
  17. .showmore a span { padding-left:15px; background:url(img/down.gif) no-repeat 0 0;}
  18. .promoted a { color:#F50;}
  19. </style>
  20. <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
  21. <script type="text/javascript">
  22.     $(function() {
  23.         // 初始化隐藏
  24.         $("li:gt(5):not(:last)").hide();
  25.         // 给按钮绑定单击事件
  26.         $("div div a").click(function(){
  27.             // 点击的时候，让卡西欧之后的品牌，要么显示，要么隐藏
  28.             $("li:gt(5):not(:last)").toggle();
  29.             if ($("li:gt(5):not(:last)").is(":hidden")) {
  30.             // 如果品牌隐藏了，要显示的【显示全部品牌】
  31.                 $("div div a span").html("显示全部品牌");
  32.                  //角标向下showmore
  33.                 $("div div").removeClass();//先删除原来的样式
  34.                 $("div div").addClass("showmore");//先删除原来的样式
  35.                  //去掉高亮，广告
  36.                 $("li:contains('爱国者'),li:contains('明基')").removeClass();
  37.             } else {
  38.             //如果品牌都可见了，要显示【显示精简品牌】
  39.                 $("div div a span").html("显示精简品牌");
  40.                  //角标向上showless
  41.                 $("div div").removeClass();//先删除原来的样式
  42.                 $("div div").addClass("showless");//先删除原来的样式
  43.                  //加高亮，广告
  44.                 $("li:contains('爱国者'),li:contains('明基')").addClass("promoted");
  45.             }
  46.             // 阻止 a的默认 跳转
  47.             return false;
  48.         });
  49.     });
  50. </script>
  51. </head>
  52. <body>
  53.     <div class="SubCategoryBox">
  54.         <ul>
  55.             <li><a href="#">佳能</a><i>(30440) </i></li>
  56.             <li><a href="#">索尼</a><i>(27220) </i></li>
  57.             <li><a href="#">三星</a><i>(20808) </i></li>
  58.             <li><a href="#">尼康</a><i>(17821) </i></li>
  59.             <li><a href="#">松下</a><i>(12289) </i></li>
  60.             <li><a href="#">卡西欧</a><i>(8242) </i></li>
  61.             <li><a href="#">富士</a><i>(14894) </i></li>
  62.             <li><a href="#">柯达</a><i>(9520) </i></li>
  63.             <li><a href="#">宾得</a><i>(2195) </i></li>
  64.             <li><a href="#">理光</a><i>(4114) </i></li>
  65.             <li><a href="#">奥林巴斯</a><i>(12205) </i></li>
  66.             <li><a href="#">明基</a><i>(1466) </i></li>
  67.             <li><a href="#">爱国者</a><i>(3091) </i></li>
  68.             <li><a href="#">其它品牌相机</a><i>(7275) </i></li>
  69.         </ul>
  70.         <div class="showmore">
  71.             <a href="more.html"><span>显示全部品牌</span></a>
  72.         </div>
  73.     </div>
  74. </body>
  75. </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做相反的操作。解除绑定事件

事件绑定案例：

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

   

事件移除案例：

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>Untitled Document</title>
  6. <link rel="stylesheet" type="text/css" href="style/css.css" />
  7. <script type="text/javascript" src="jquery-1.7.2.js"></script>
  8. <script type="text/javascript">
  9.     $(function() {
  10.         //给li绑定两种事件：单击和鼠标移入
  11.         $("li").bind("click mouseenter", function() {
  12.             alert(this.innerHTML);
  13.         });
  14.         //点击第一个button，将#bj上的mouseenter事件移除
  15.         //unbind()可以移除指定的事件，只需要传一个事件名作为参数
  16.         //unbind(type,[data|fn]])
  17.         //type事件类型  当传入type的时候会解除type事件
  18.         //如果没有传入type值，会移除所有事件
  19.         $("button:eq(0)").click(function() {
  20.             $("li").unbind("click mouseenter");
  21.         });
  22.         //点击第二个button，将#rl上的所有事件移除,没有传入type值,移除所有事件
  23.         $("button:eq(1)").click(function() {
  24.             $("#rl").unbind();
  25.         });
  26.     });
  27. </script>
  28. </head>
  29. <body>
  30.     <div id="total">
  31.         <div class="inner">
  32.             <p>你喜欢哪个城市?</p>
  33.             <ul id="city">
  34.                 <li id="bj">北京</li>
  35.                 <li>上海</li>
  36.                 <li>东京</li>
  37.                 <li>首尔</li>
  38.             </ul>
  39.             <br> <br>
  40.             <p>你喜欢哪款单机游戏?</p>
  41.             <ul id="game">
  42.                 <li id="rl">红警</li>
  43.                 <li>实况</li>
  44.                 <li>极品飞车</li>
  45.                 <li>魔兽</li>
  46.             </ul>
  47.         </div>
  48.         <button>移除#bj的mouseenter事件</button>
  49.         <button>移除#rl所有事件</button>
  50.     </div>
  51. </body>
  52. </html>

  

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

那么如何阻止事件冒泡呢？
在子元素事件函数体内，return false; 可以阻止事件的冒泡传递。
事件冒泡案例：

  1.  <script type="text/javascript" src="jquery-1.7.2.js"></script>
  2. <script type="text/javascript">
  3.     $(function() {
  4.         $("#content").click(function() {
  5.             alert("div说哥很帅！");
  6.         });
  7.         $("span").click(function() {
  8.             alert("span也说哥很帅！");
  9.             // 阻止事件冒泡
  10.             return false;
  11.         });
  12.     })
  13. </script>
  14. </head>
  15. <body>
  16.     <div id="content">
  17.         外层div元素 <span>内层span元素</span> 外层div元素
  18.     </div>
  19.     <div id="msg"></div>
  20.     <a href="http://www.hao123.com">WWW.HAO123.COM</a>
  21. </body>

  

javaScript事件对象
事件对象，是封装有触发的事件信息的一个javascript对象。
我们重点关心的是怎么拿到这个javascript的事件对象。以及使用。

如何获取呢javascript事件对象呢？
在给元素绑定事件的时候，在事件的function( event ) 参数列表中添加一个参数，这个参数名，我们习惯取名为event。
这个event就是javascript传递参事件处理函数的事件对象。
事件对象案例：

  1. <script type="text/javascript" src="jquery-1.7.2.js"></script>
  2. <script type="text/javascript">
  3. //1.原生javascript获取 事件对象
  4. //     window.onload = function(){
  5. //         document.getElementById("areaDiv").onclick = function(event){
  6. //             console.log(event);
  7. //         }
  8. //     }
  9. //2.JQuery代码获取 事件对象
  10. //     $(function(){
  11. //         $("#areaDiv").click(function(event){
  12. //             console.log(event);
  13. //         });
  14. //     });
  15.     //3.使用bind同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件。
  16.     $(function(){
  17.         $("#areaDiv").bind("mouseout mouseover",function(event){
  18.             if (event.type == "mouseover") {
  19.                 console.log("进来了");
  20.             } else if (event.type == "mouseout") {
  21.                 console.log("我走了");
  22.             }
  23.         });
  24.     });
  25. </script>
  26. </head>
  27. <body>
  28.     <div id="areaDiv"></div>
  29.     <div id="showMsg"></div>
  30. </body>

  

练习-图片跟随
需求：

 


案例：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>Insert title here</title>
  6. <style type="text/css">
  7.     body {
  8.         text-align: center;
  9.     }
  10.     #small {
  11.         margin-top: 150px;
  12.     }
  13.     #showBig {
  14.         position: absolute;
  15.         display: none;
  16.     }
  17. </style>
  18. <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
  19. <script type="text/javascript">
  20.     $(function(){
  21.         $("#small")
  22.             .mouseover(function(event){
  23.                 $("#showBig")
  24.                     .show()
  25.                     .css("left",event.pageX+10)
  26.                     .css("top",event.pageY+10);
  27.             })
  28.             .mousemove(function(event){
  29.                 $("#showBig")
  30.                     .css("left",event.pageX+10)
  31.                     .css("top",event.pageY+10);
  32.             })
  33.             .mouseout(function(){
  34.                 $("#showBig").hide();
  35.             });
  36.     });
  37. </script>
  38. </head>
  39. <body>
  40.     <img id="small" src="img/small.jpg" />
  41.     <div id="showBig">
  42.         <img src="img/big.jpg">
  43.     </div>
  44. </body>
  45. </html>