jQuery学习笔记

1. jQuery的属性操作

1.1. html()、text()、val()

day04_jQuery学习笔记(下) - 图1

html() 它可以设置和获取起始标签和结束标签中的内容。 跟 dom 属性 innerHTML 一样。

text() 它可以设置和获取起始标签和结束标签中的文本。 跟 dom 属性 innerText 一样。

val() 它可以设置和获取表单项的 value 属性值。 跟 dom 属性 value 一样

  1. <!DOCTYPE html>
  2. <html lang="zh_CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
  7.     <script type="text/javascript">
  9.         $(function () {
  10.             // 不传参数，是获取，传递参数是设置
  11.             // alert( $("div").html() );// 获取
  12.             // $("div").html("<h1>我是div中的标题 1</h1>");// 设置
  14.             // 不传参数，是获取，传递参数是设置
  15.             // alert( $("div").text() ); // 获取
  16.             // $("div").text("<h1>我是div中的标题 1</h1>"); // 设置
  18.             // 不传参数，是获取，传递参数是设置
  19.             $("button").click(function () {
  20.                 alert($("#username").val());//获取
  21.                 $("#username").val("超级程序猿");// 设置
  22.             });
  25.         });
  27.     </script>
  28. </head>
  29. <body>
  30.     <div>我是div标签 <span>我是div中的span</span></div>
  31.     <input type="text" name="username" id="username" />
  32.     <button>操作输入框</button>
  33. </body>
  34. </html>

val 方法还同时设置多个表单项的选中状态：

  1. <!DOCTYPE html>
  2. <html lang="zh_CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
  7.     <script type="text/javascript">
  9.         $(function () {
  10. /*
  11.             // 批量操作单选
  12.             $(":radio").val(["radio2"]);
  13.             // 批量操作筛选框的选中状态
  14.             $(":checkbox").val(["checkbox3","checkbox2"]);
  15.             // 批量操作多选的下拉框选中状态
  16.             $("#multiple").val(["mul2","mul3","mul4"]);
  17.             // 操作单选的下拉框选中状态
  18.             $("#single").val(["sin2"]);
  19. */
  20.             $("#multiple,#single,:radio,:checkbox").val(["radio2","checkbox1","checkbox3","mul1","mul4","sin3"]);
  21.         });
  23.     </script>
  24. </head>
  25. <body>
  26. <body>
  27.     单选：
  28.     <input name="radio" type="radio" value="radio1" />radio1
  29.     <input name="radio" type="radio" value="radio2" />radio2
  30.     <br/>
  31.     多选：
  32.     <input name="checkbox" type="checkbox" value="checkbox1" />checkbox1
  33.     <input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
  34.     <input name="checkbox" type="checkbox" value="checkbox3" />checkbox3
  35.     <br/>
  37.     下拉多选 ：
  38.     <select id="multiple" multiple="multiple" size="4">
  39.         <option value="mul1">mul1</option>
  40.         <option value="mul2">mul2</option>
  41.         <option value="mul3">mul3</option>
  42.         <option value="mul4">mul4</option>
  43.     </select>
  44.     <br/>
  46.     下拉单选 ：
  47.     <select id="single">
  48.         <option value="sin1">sin1</option>
  49.         <option value="sin2">sin2</option>
  50.         <option value="sin3">sin3</option>
  51.     </select>
  52. </body>
  53. </body>
  54. </html>

1.2. attr()、prop()

day04_jQuery学习笔记(下) - 图2

attr() 可以设置和获取属性的值，不推荐操作 checked、readOnly、selected、disabled 等等

  1.                               attr 方法还可以操作非标准的属性。比如自定义属性：abc,bbj

prop() 可以设置和获取属性的值,只推荐操作 checked、readOnly、selected、disabled 等等

  1. <!DOCTYPE html>
  2. <html lang="zh_CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
  7.     <script type="text/javascript">
  9.         $(function () {
  10.             //attr
  11.             // alert( $(":checkbox:first").attr("name") ); // 获取
  12.             // $(":checkbox:first").attr("name","abc") ; // 设置
  14.             // $(":checkbox").prop("checked",false );// 官方觉得返回undefined是一个错误
  16.             // $(":checkbox:first").attr("abc","abcValue");
  17.             // alert( $(":checkbox:first").attr("abc") );
  19.         });
  22.     </script>
  23. </head>
  24. <body>
  25.     <br/>
  26.     多选：
  27.     <input name="checkbox" type="checkbox" checked="checked" value="checkbox1" />checkbox1
  28.     <input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
  29.     <br/><br/>
  30.     <div>1234</div>
  31.     <div>1234</div>
  32. </body>
  34. </html>

1.3. jQuery练习全选、全不选、反选

  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">
  9.     $(function(){
  10.         // 给全选绑定单击事件
  11.         $("#checkedAllBtn").click(function () {
  12.             $(":checkbox").prop("checked",true);
  13.         });
  15.         // 给全不选绑定单击事件
  16.         $("#checkedNoBtn").click(function () {
  17.             $(":checkbox").prop("checked",false);
  18.         });
  20.         // 反选单击事件
  21.         $("#checkedRevBtn").click(function () {
  22.             // 查询全部的球类的复选框
  23.             $(":checkbox[name='items']").each(function () {
  24.                 // 在each遍历的function函数中，有一个this对象。这个this对象是当前正在遍历到的dom对象
  25.                 this.checked = !this.checked;
  26.             });
  28.             // 要检查 是否满选
  29.             // 获取全部的球类个数
  30.             var allCount = $(":checkbox[name='items']").length;
  31.             // 再获取选中的球类个数
  32.             var checkedCount = $(":checkbox[name='items']:checked").length;
  34.             // if (allCount == checkedCount) {
  35.             //     $("#checkedAllBox").prop("checked",true);
  36.             // } else {
  37.             //     $("#checkedAllBox").prop("checked",false);
  38.             // }
  40.             $("#checkedAllBox").prop("checked",allCount == checkedCount);
  42.         });
  44.         // 【提交】按钮单击事件
  45.         $("#sendBtn").click(function () {
  46.             // 获取选中的球类的复选框
  47.             $(":checkbox[name='items']:checked").each(function () {
  48.                 alert(this.value);
  49.             });
  50.         });
  52.         // 给【全选/全不选】绑定单击事件
  53.         $("#checkedAllBox").click(function () {
  55.             // 在事件的function函数中，有一个this对象，这个this对象是当前正在响应事件的dom对象
  56.             // alert(this.checked);
  58.             $(":checkbox[name='items']").prop("checked",this.checked);
  59.         });
  61.         // 给全部球类绑定单击事件
  62.         $(":checkbox[name='items']").click(function () {
  63.             // 要检查 是否满选
  64.             // 获取全部的球类个数
  65.             var allCount = $(":checkbox[name='items']").length;
  66.             // 再获取选中的球类个数
  67.             var checkedCount = $(":checkbox[name='items']:checked").length;
  69.             $("#checkedAllBox").prop("checked",allCount == checkedCount);
  70.         });
  72.     });
  74. </script>
  75. </head>
  76. <body>
  78.     <form method="post" action="">
  80.         你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 
  82.         <br />
  83.         <input type="checkbox" name="items" value="足球" />足球
  84.         <input type="checkbox" name="items" value="篮球" />篮球
  85.         <input type="checkbox" name="items" value="羽毛球" />羽毛球
  86.         <input type="checkbox" name="items" value="乒乓球" />乒乓球
  87.         <br />
  88.         <input type="button" id="checkedAllBtn" value="全　选" />
  89.         <input type="button" id="checkedNoBtn" value="全不选" />
  90.         <input type="button" id="checkedRevBtn" value="反　选" />
  91.         <input type="button" id="sendBtn" value="提　交" />
  92.     </form>
  94. </body>
  95. </html>

2. DOM的增删改

day04_jQuery学习笔记(下) - 图3

内部插入：

appendTo() a.appendTo(b) 把 a 插入到 b 子元素末尾，成为最后一个子元素

prependTo() a.prependTo(b) 把 a 插到 b 所有子元素前面，成为第一个子元素

外部插入：

insertAfter() a.insertAfter(b) 得到 ba

insertBefore() a.insertBefore(b) 得到 ab

替换:

replaceWith() a.replaceWith(b) 用 b 替换掉 a

replaceAll() a.replaceAll(b) 用 a 替换掉所有 b

删除：

remove() a.remove(); 删除 a 标签

empty() a.empty(); 清空 a 标签里的内容

  1. <!DOCTYPE html>
  2. <html lang="zh_CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
  7.     <script type="text/javascript">
  9.         $(function () {
  11.             // $("<h1>标题</h1>").prependTo( $("div") );
  12.             // $("<h1>标题</h1>").prependTo("div");
  13.             // $("<h1>标题</h1>").insertAfter("div");
  15.             // $("<h1>标题</h1>").insertBefore( $("div") );
  17.             // $("<h1>标题</h1>").replaceWith("div");
  19.             // $("div").replaceWith( $("<h1>标题</h1>") );
  21.             // $("<h1>标题</h1>").replaceAll( "div" );
  24.             $("div").empty();
  26.         });
  29.     </script>
  30. </head>
  31. <body>
  32. <body>
  33.     <br/>
  34.     多选：
  35.     <input name="checkbox" type="checkbox" checked="checked" value="checkbox1" />checkbox1
  36.     <input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
  37.     <br/><br/>
  38.     <div>1234</div>
  39.     <div>1234</div>
  40. </body>
  41. </body>
  42. </html>

2.1. jQuery练习：从左到右，从右到左

  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.         select {
  8.             width: 100px;
  9.             height: 140px;
  10.         }
  12.         div {
  13.             width: 130px;
  14.             float: left;
  15.             text-align: center;
  16.         }
  17.     </style>
  18.     <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
  19.     <script type="text/javascript">
  20.         // 页面加载完成
  21.         $(function () {
  22.             // 第一个按钮 【选中添加到右边】
  23.             $("button:eq(0)").click(function () {
  24.                 $("select:eq(0) option:selected").appendTo($("select:eq(1)"));
  25.             });
  26.             // 第二个按钮 【全部添加到右边】
  27.             $("button:eq(1)").click(function () {
  28.                 $("select:eq(0) option").appendTo($("select:eq(1)"));
  29.             });
  31.             // 第三个按钮 【选中删除到左边】
  32.             $("button:eq(2)").click(function () {
  33.                 $("select:eq(1) option:selected").appendTo($("select:eq(0)"));
  34.             });
  36.             // 第四个按钮 【全部删除到左边】
  37.             $("button:eq(3)").click(function () {
  38.                 $("select:eq(1) option").appendTo($("select:eq(0)"));
  39.             });
  40.         });
  41.     </script>
  42. </head>
  43. <body>
  45.     <div id="left">
  46.         <select multiple="multiple" name="sel01">
  47.             <option value="opt01">选项1</option>
  48.             <option value="opt02">选项2</option>
  49.             <option value="opt03">选项3</option>
  50.             <option value="opt04">选项4</option>
  51.             <option value="opt05">选项5</option>
  52.             <option value="opt06">选项6</option>
  53.             <option value="opt07">选项7</option>
  54.             <option value="opt08">选项8</option>
  55.         </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>
  67. </body>
  68. </html>

2.2. jQuery练习：动态添加和删除行记录

  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">
  10.     $(function () {
  12.         // 创建一个用于复用的删除的function函数
  13.         var deleteFun = function(){
  15.             // alert("删除 操作 的function : " + this);
  17.             // 在事件响应的function函数中，有一个this对象。这个this对象是当前正在响应事件的dom对象。
  18.             var $trObj = $(this).parent().parent();
  20.             var name = $trObj.find("td:first").text();
  22.             /**
  23.              * confirm 是JavaScript语言提供的一个确认提示框函数。你给它传什么，它就提示什么<br/>
  24.              * 当用户点击了确定，就返回true。当用户点击了取消，就返回false
  25.              */
  26.             if( confirm("你确定要删除[" + name +  "]吗？") ){
  27.                 $trObj.remove();
  28.             }
  30.             // return false; 可以阻止 元素的默认行为。
  31.             return false;
  32.         };
  37.         // 给【Submit】按钮绑定单击事件
  38.         $("#addEmpButton").click(function () {
  39.             // 获取输入框，姓名，邮箱，工资的内容
  40.             var name = $("#empName").val();
  41.             var email = $("#email").val();
  42.             var salary = $("#salary").val();
  45.             // 创建一个行标签对象，添加到显示数据的表格中
  46.             var $trObj = $("<tr>" +
  47.                     "<td>" + name +  "</td>" +
  48.                     "<td>" + email + "</td>" +
  49.                     "<td>" + salary + "</td>" +
  50.                     "<td><a href=\"deleteEmp?id=002\">Delete</a></td>" +
  51.                     "</tr>");
  54.             // 添加到显示数据的表格中
  55.             $trObj.appendTo( $("#employeeTable") );
  57.             // 给添加的行的a标签绑上事件
  58.             $trObj.find("a").click( deleteFun );
  61.         });
  64.         // 给删除的a标签绑定单击事件
  65.         $("a").click( deleteFun );
  68.     });
  71. </script>
  72. </head>
  73. <body>
  75.     <table id="employeeTable">
  76.         <tr>
  77.             <th>Name</th>
  78.             <th>Email</th>
  79.             <th>Salary</th>
  80.             <th>&nbsp;</th>
  81.         </tr>
  82.         <tr>
  83.             <td>Tom</td>
  84.             <td>tom@tom.com</td>
  85.             <td>5000</td>
  86.             <td><a href="deleteEmp?id=001">Delete</a></td>
  87.         </tr>
  88.         <tr>
  89.             <td>Jerry</td>
  90.             <td>jerry@sohu.com</td>
  91.             <td>8000</td>
  92.             <td><a href="deleteEmp?id=002">Delete</a></td>
  93.         </tr>
  94.         <tr>
  95.             <td>Bob</td>
  96.             <td>bob@tom.com</td>
  97.             <td>10000</td>
  98.             <td><a href="deleteEmp?id=003">Delete</a></td>
  99.         </tr>
  100.     </table>
  102.     <div id="formDiv">
  104.         <h4>添加新员工</h4>
  106.         <table>
  107.             <tr>
  108.                 <td class="word">name: </td>
  109.                 <td class="inp">
  110.                     <input type="text" name="empName" id="empName" />
  111.                 </td>
  112.             </tr>
  113.             <tr>
  114.                 <td class="word">email: </td>
  115.                 <td class="inp">
  116.                     <input type="text" name="email" id="email" />
  117.                 </td>
  118.             </tr>
  119.             <tr>
  120.                 <td class="word">salary: </td>
  121.                 <td class="inp">
  122.                     <input type="text" name="salary" id="salary" />
  123.                 </td>
  124.             </tr>
  125.             <tr>
  126.                 <td colspan="2" align="center">
  127.                     <button id="addEmpButton" value="abc">
  128.                         Submit
  129.                     </button>
  130.                 </td>
  131.             </tr>
  132.         </table>
  134.     </div>
  136. </body>
  137. </html>

3. jQuery的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">
  8.     div{
  9.         width:100px;
  10.         height:260px;
  11.     }
  13.     div.whiteborder{
  14.         border: 2px white solid;
  15.     }
  17.     div.redDiv{
  18.         background-color: red;
  19.     }
  21.     div.blueBorder{
  22.         border: 5px blue solid;
  23.     }
  25. </style>
  27. <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
  28. <script type="text/javascript">
  31.     $(function(){
  33.         var $divEle = $('div:first');
  35.         $('#btn01').click(function(){
  36.             //addClass() - 向被选元素添加一个或多个类
  37.             $divEle.addClass('redDiv blueBorder');
  38.         });
  40.         $('#btn02').click(function(){
  41.             //removeClass() - 从被选元素删除一个或多个类 
  42.             $divEle.removeClass();
  43.         });
  46.         $('#btn03').click(function(){
  47.             //toggleClass() - 对被选元素进行添加/删除类的切换操作 
  48.             $divEle.toggleClass('redDiv')
  49.         });
  52.         $('#btn04').click(function(){
  53.             //offset() - 返回第一个匹配元素相对于文档的位置。
  54.             var pos = $divEle.offset();
  55.             console.log(pos);
  57.             $divEle.offset({
  58.                 top:100,
  59.                 left:50
  60.             });
  62.         });
  66.     })
  67. </script>
  68. </head>
  69. <body>
  70.     <table align="center">
  71.         <tr>
  72.             <td>
  73.                 <div class="border">
  74.                 </div>
  75.             </td>
  77.             <td>
  78.                 <div class="btn">
  79.                     <input type="button" value="addClass()" id="btn01"/>
  80.                     <input type="button" value="removeClass()" id="btn02"/>
  81.                     <input type="button" value="toggleClass()" id="btn03"/>
  82.                     <input type="button" value="offset()" id="btn04"/>
  83.                 </div>
  84.             </td>
  85.         </tr>
  86.     </table>
  90.     <br /> <br />
  93.     <br /> <br />
  97. </body>
  98. </html>

4. jQuery的动画操作

基本动画

show() 将隐藏的元素显示

hide() 将可见的元素隐藏。

toggle() 可见就隐藏，不可见就显示。

以上动画方法都可以添加参数。

  1. 第一个参数是动画 执行的时长，以毫秒为单位

  2. 第二个参数是动画的回调函数 (动画完成后自动调用的函数)

淡入淡出动画

fadeIn() 淡入（慢慢可见）

fadeOut() 淡出（慢慢消失）

fadeTo() 在指定时长内慢慢的将透明度修改到指定的值。0 透明，1 完成可见，0.5 半透明

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>
  9. <script type="text/javascript">
  10.     /*     
  11.         基本
  12.         show([speed,[easing],[fn]]) 
  13.         hide([speed,[easing],[fn]]) 
  14.         toggle([speed],[easing],[fn]) 
  15.         滑动
  16.         slideDown([spe],[eas],[fn]) 
  17.         slideUp([speed,[easing],[fn]]) 
  18.         slideToggle([speed],[easing],[fn]) 
  19.         淡入淡出
  20.         fadeIn([speed],[eas],[fn]) 
  21.         fadeOut([speed],[eas],[fn]) 
  22.         fadeTo([[spe],opa,[eas],[fn]]) 
  23.         fadeToggle([speed,[eas],[fn]])
  24.         */
  25.         $(function(){
  26.             //显示   show()
  27.             $("#btn1").click(function(){
  28.                 $("#div1").show(2000,function () {
  29.                     alert("show动画完成 ")
  30.                 });
  31.             });        
  32.             //隐藏  hide()
  33.             $("#btn2").click(function(){
  34.                 $("#div1").hide(1000,function () {
  35.                     alert("hide动画 执行完成 ")
  36.                 });
  37.             });    
  38.             //切换   toggle()
  39.             $("#btn3").click(function(){
  40.                 $("#div1").toggle(1000,function () {
  41.                     alert("toggle动画 完成 ")
  42.                 });
  43.             });
  45.             // var abc = function(){
  46.             //     $("#div1").toggle(1000,abc);
  47.             // }
  48.             // abc();
  50.             //淡入   fadeIn()
  51.             $("#btn4").click(function(){
  52.                 $("#div1").fadeIn(2000,function () {
  53.                     alert("fadeIn完成 ")
  54.                 });
  55.             });    
  56.             //淡出  fadeOut()
  57.             $("#btn5").click(function(){
  58.                 $("#div1").fadeOut(2000,function () {
  59.                     alert("fadeOut完成 ")
  60.                 });
  61.             });    
  63.             //淡化到  fadeTo()
  64.             $("#btn6").click(function(){
  65.                 $("#div1").fadeTo(2000,0.5,function () {
  66.                     alert('fadeTo完成 ')
  67.                 });
  68.             });    
  69.             //淡化切换  fadeToggle()
  70.             $("#btn7").click(function(){
  71.                 $("#div1").fadeToggle(1000,function () {
  72.                     alert("fadeToggle完成 ")
  73.                 });
  74.             });    
  75.         })
  76. </script>
  78.     </head>
  79.     <body>
  80.         <table style="float: left;">
  81.             <tr>
  82.                 <td><button id="btn1">显示show()</button></td>
  83.             </tr>
  84.             <tr>
  85.                 <td><button id="btn2">隐藏hide()</button></td>
  86.             </tr>
  87.             <tr>
  88.                 <td><button id="btn3">显示/隐藏切换 toggle()</button></td>
  89.             </tr>
  90.             <tr>
  91.                 <td><button id="btn4">淡入fadeIn()</button></td>
  92.             </tr>
  93.             <tr>
  94.                 <td><button id="btn5">淡出fadeOut()</button></td>
  95.             </tr>
  96.             <tr>
  97.                 <td><button id="btn6">淡化到fadeTo()</button></td>
  98.             </tr>
  99.             <tr>
  100.                 <td><button id="btn7">淡化切换fadeToggle()</button></td>
  101.             </tr>
  102.         </table>
  104.         <div id="div1" style="float:left;border: 1px solid;background-color: blue;width: 300px;height: 200px;">
  105.             jquery动画定义了很多种动画效果，可以很方便的使用这些动画效果
  106.         </div>
  107.     </body>
  109. </html>

4.1. jQuery练习：品牌展示

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>品牌展示练习</title>
  6. <style type="text/css">
  7. * {
  8.     margin: 0;
  9.     padding: 0;
  10. }
  12. body {
  13.     font-size: 12px;
  14.     text-align: center;
  15. }
  17. a {
  18.     color: #04D;
  19.     text-decoration: none;
  20. }
  22. a:hover {
  23.     color: #F50;
  24.     text-decoration: underline;
  25. }
  27. .SubCategoryBox {
  28.     width: 600px;
  29.     margin: 0 auto;
  30.     text-align: center;
  31.     margin-top: 40px;
  32. }
  34. .SubCategoryBox ul {
  35.     list-style: none;
  36. }
  38. .SubCategoryBox ul li {
  39.     display: block;
  40.     float: left;
  41.     width: 200px;
  42.     line-height: 20px;
  43. }
  45. .showmore , .showless{
  46.     clear: both;
  47.     text-align: center;
  48.     padding-top: 10px;
  49. }
  51. .showmore a , .showless a{
  52.     display: block;
  53.     width: 120px;
  54.     margin: 0 auto;
  55.     line-height: 24px;
  56.     border: 1px solid #AAA;
  57. }
  59. .showmore a span {
  60.     padding-left: 15px;
  61.     background: url(img/down.gif) no-repeat 0 0;
  62. }
  64. .showless a span {
  65.     padding-left: 15px;
  66.     background: url(img/up.gif) no-repeat 0 0;
  67. }
  69. .promoted a {
  70.     color: #F50;
  71. }
  72. </style>
  73. <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
  74. <script type="text/javascript">
  75.     $(function() {
  76.         // 基本初始状态
  77.         $("li:gt(5):not(:last)").hide();
  79.         // 给功能的按钮绑定单击事件
  80.         $("div div a").click(function () {
  81.             // 让某些品牌，显示，或隐藏
  82.             $("li:gt(5):not(:last)").toggle();
  83.             // 判断 品牌，当前是否可见
  84.             if( $("li:gt(5):not(:last)").is(":hidden") ){
  85.                 // 品牌隐藏的状态 ：1 显示全部品牌    == 角标向下 showmore
  86.                 $("div div a span").text("显示全部品牌");
  88.                 $("div div").removeClass();
  89.                 $("div div").addClass("showmore");
  91.                 // 去掉高亮
  92.                 $("li:contains('索尼')").removeClass("promoted");
  94.             } else {
  95.                 // 品牌可见的状态：2 显示精简品牌     == 角标向上 showless
  96.                 $("div div a span").text("显示精简品牌");
  98.                 $("div div").removeClass();
  99.                 $("div div").addClass("showless");
  101.                 // 加高亮
  102.                 $("li:contains('索尼')").addClass("promoted");
  103.             }
  105.             return false;
  106.         });
  107.     });
  108. </script>
  109. </head>
  110. <body>
  111.     <div class="SubCategoryBox">
  112.         <ul>
  113.             <li><a href="#">佳能</a><i>(30440) </i></li>
  114.             <li><a href="#">索尼</a><i>(27220) </i></li>
  115.             <li><a href="#">三星</a><i>(20808) </i></li>
  116.             <li><a href="#">尼康</a><i>(17821) </i></li>
  117.             <li><a href="#">松下</a><i>(12289) </i></li>
  118.             <li><a href="#">卡西欧</a><i>(8242) </i></li>
  119.             <li><a href="#">富士</a><i>(14894) </i></li>
  120.             <li><a href="#">柯达</a><i>(9520) </i></li>
  121.             <li><a href="#">宾得</a><i>(2195) </i></li>
  122.             <li><a href="#">理光</a><i>(4114) </i></li>
  123.             <li><a href="#">奥林巴斯</a><i>(12205) </i></li>
  124.             <li><a href="#">明基</a><i>(1466) </i></li>
  125.             <li><a href="#">爱国者</a><i>(3091) </i></li>
  126.             <li><a href="#">其它品牌相机</a><i>(7275) </i></li>
  127.         </ul>
  128.         <div class="showmore">
  129.             <a href="more.html"><span>显示全部品牌</span></a>
  130.         </div>
  131.     </div>
  132. </body>
  133. </html>

5. jQuery事件操作

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

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

  1. jQuery 的页面加载完成之后是浏览器的内核解析完页面的标签创建好 DOM 对象之后就会马上执行。

  2. 原生 js 的页面加载完成之后，除了要等浏览器内核解析完标签创建好 DOM 对象，还要等标签显示时需要的内容加载 完成。

他们触发的顺序？

  1. jQuery 页面加载完成之后先执行

  2. 原生 js 的页面加载完成之后

他们执行的次数？

  1. 原生 js 的页面加载完成之后，只会执行最后一次的赋值函数。

  2. jQuery 的页面加载完成之后是全部把注册的 function 函数，依次顺序全部执行。

  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.     window.onload = function () {
  9.         alert("原生js的页面加载完成之后--1")
  10.     }
  11.     window.onload = function () {
  12.         alert("原生js的页面加载完成之后--2")
  13.     }
  14.     window.onload = function () {
  15.         alert("原生js的页面加载完成之后--3")
  16.     }
  17.     $(function () {
  18.         alert("jquery的页面加载完成 之后--3")
  19.     });
  20.     // jquery的页面加载完成 之后
  21.     $(function () {
  22.         alert("jquery的页面加载完成 之后--1")
  23.     });
  24.     $(function () {
  25.         alert("jquery的页面加载完成 之后--2")
  26.     });
  29. </script>
  30. </head>
  31. <body>
  32.     <button>我是按钮</button>
  34.     <iframe src="http://localhost:8080"></iframe>
  35.     <img src="http://localhost:8080/1.jpg" alt=""/>
  36. </body>
  37. </html>

5.2. jQuery中其他的事件处理方法

click() 它可以绑定单击事件，以及触发单击事件

mouseover() 鼠标移入事件

mouseout() 鼠标移出事件

bind() 可以给元素一次性绑定一个或多个事件。

one() 使用上跟 bind 一样。但是 one 方法绑定的事件只会响应一次。

unbind() 跟 bind 方法相反的操作，解除事件的绑定

live() 也是用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件。哪怕这个元素是后面动态创建出 来的也有效

  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">
  10.             $(function(){
  11.                 // $("h5").click(function () { // 传function是绑定事件
  12.                 //     alert('h5单击事件 == click方法绑定')
  13.                 // });
  15.                 // 使用live绑定的单击事件
  16.                 $("h5").live("click",function () {
  17.                     alert('h5单击事件 == live方法绑定');
  18.                 });
  20.                 $('<h5 class="head">什么是jQuery?</h5>').appendTo( $("#panel") );
  22.                 // $("button").click(function () {
  23.                 //     $("h5").click(); // 不传function是触发事件
  24.                 // });
  25.                 //鼠标移入
  26.                 // $("h5").mouseover(function () {
  27.                 //     console.log("你进来了")
  28.                 // });
  29.                 // //鼠标移出
  30.                 // $("h5").mouseout(function () {
  31.                 //     console.log("你出去了")
  32.                 // });
  34.                 // 使用bind绑定事件
  35.                 // $("h5").bind("click mouseover mouseout",function () {
  36.                 //     console.log("这是bind绑定的事件");
  37.                 // });
  39.                 // $("h5").one("click mouseover mouseout",function () {
  40.                 //     console.log("这是one绑定的事件");
  41.                 // });
  43.                 // $("h5").unbind();
  46.             });
  48.         </script>
  49.     </head>
  50.     <body>
  51.         <div id="panel">
  52.             <h5 class="head">什么是jQuery?</h5>
  53.             <div class="content">
  54.                 jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
  55.             </div>
  56.             <button>按钮</button>
  57.         </div>
  58.     </body>
  60. </html>

5.3. 事件的冒泡

什么是事件的冒泡？

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

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

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

  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.         <style type="text/css">
  7.             *{
  8.                 margin: 0;
  9.                 padding: 0;
  10.             }
  11.             body{
  12.                 font-size: 13px;
  13.                 line-height: 130%;
  14.                 padding: 60px;
  15.             }
  16.             #content{
  17.                 width: 220px;
  18.                 border: 1px solid #0050D0;
  19.                 background: #96E555;
  20.             }
  21.             span{
  22.                 width: 200px;
  23.                 margin: 10px;
  24.                 background: #666666;
  25.                 cursor: pointer;
  26.                 color: white;
  27.                 display: block;
  28.             }
  29.             p{
  30.                 width: 200px;
  31.                 background: #888;
  32.                 color: white;
  33.                 height: 16px;
  34.             }
  35.         </style>
  36.         <script type="text/javascript" src="jquery-1.7.2.js"></script>
  37.         <script type="text/javascript">
  38.             $(function(){
  39.                 $("#content").click(function () {
  40.                     alert('我是div');
  41.                 });
  43.                 $("span").click(function () {
  44.                     alert('我是span');
  46.                     return false;
  47.                 });
  50.             })
  51.         </script>
  52.     </head>
  53.     <body>
  54.         <div id="content">
  55.             外层div元素
  56.             <span>内层span元素</span>
  57.             外层div元素
  58.         </div>
  60.         <div id="msg"></div>    
  62.         <br><br>
  63.         <a href="http://www.hao123.com">WWW.HAO123.COM</a>    
  64.     </body>
  65. </html>

5.4. 事件对象

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

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

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

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

  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">
  8.     #areaDiv {
  9.         border: 1px solid black;
  10.         width: 300px;
  11.         height: 50px;
  12.         margin-bottom: 10px;
  13.     }
  15.     #showMsg {
  16.         border: 1px solid black;
  17.         width: 300px;
  18.         height: 20px;
  19.     }
  21. </style>
  22. <script type="text/javascript" src="jquery-1.7.2.js"></script>
  23. <script type="text/javascript">
  25.     //1.原生javascript获取 事件对象
  26.     // window.onload = function () {
  27.     //     document.getElementById("areaDiv").onclick = function (event) {
  28.     //         console.log(event);
  29.     //     }
  30.     // }
  31.     //2.JQuery代码获取 事件对象
  32.     $(function () {
  33.         // $("#areaDiv").click(function (event) {
  34.         //     console.log(event);
  35.         // });
  36.         //3.使用bind同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件。
  38.         $("#areaDiv").bind("mouseover mouseout",function (event) {
  39.             if (event.type == "mouseover") {
  40.                 console.log("鼠标移入");
  41.             } else if (event.type == "mouseout") {
  42.                 console.log("鼠标移出");
  43.             }
  44.         });
  47.     });
  51. </script>
  52. </head>
  53. <body>
  55.     <div id="areaDiv"></div>
  56.     <div id="showMsg"></div>
  58. </body>
  59. </html>

5.5. jQuery练习：图片跟随

  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").bind("mouseover mouseout mousemove",function (event) {
  22.             if (event.type == "mouseover") {
  23.                 $("#showBig").show();
  24.             } else if (event.type == "mousemove") {
  25.                 console.log(event);
  26.                 $("#showBig").offset({
  27.                     left: event.pageX + 10,
  28.                     top: event.pageY + 10
  29.                 });
  30.             } else if (event.type == "mouseout") {
  31.                 $("#showBig").hide();
  32.             }
  33.         });
  34.     });
  35. </script>
  36. </head>
  37. <body>
  39.     <img id="small" src="img/small.jpg" />
  41.     <div id="showBig">
  42.         <img src="img/big.jpg">
  43.     </div>
  45. </body>
  46. </html>

6. 书城项目第一阶段，表单验证

验证用户名：必须由字母，数字下划线组成，并且长度为 5 到 12 位

验证密码：必须由字母，数字下划线组成，并且长度为 5 到 12 位

验证确认密码：和密码相同

邮箱验证：xxxxx@xxx.com

验证码：现在只需要验证用户已输入。因为还没讲到服务器。验证码生成。

  1. <script type="text/javascript">
  2.     // 页面加载完成之后
  3.     $(function () {
  4.         // 给注册绑定单击事件
  5.         $("#sub_btn").click(function () {
  6.         // 验证用户名：必须由字母，数字下划线组成，并且长度为 5 到 12 位
  7.         //1 获取用户名输入框里的内容
  8.         var usernameText = $("#username").val();
  9.         //2 创建正则表达式对象
  10.         var usernamePatt = /^\w{5,12}$/;
  11.         //3 使用 test 方法验证
  12.         if (!usernamePatt.test(usernameText)) {
  13.             //4 提示用户结果
  14.             $("span.errorMsg").text("用户名不合法！");
  15.             return false;
  16.         }
  17.         // 验证密码：必须由字母，数字下划线组成，并且长度为 5 到 12 位
  18.         //1 获取用户名输入框里的内容
  19.         var passwordText = $("#password").val();
  20.         //2 创建正则表达式对象
  21.         var passwordPatt = /^\w{5,12}$/;
  22.         //3 使用 test 方法验证
  23.         if (!passwordPatt.test(passwordText)) {
  24.             //4 提示用户结果
  25.             $("span.errorMsg").text("密码不合法！");
  26.             return false;
  27.         }
  28.         // 验证确认密码：和密码相同
  29.         //1 获取确认密码内容
  30.         var repwdText = $("#repwd").val();
  31.         //2 和密码相比较
  32.         if (repwdText != passwordText) {
  33.             //3 提示用户
  34.             $("span.errorMsg").text("确认密码和密码不一致！");
  35.             return false;
  36.         }
  37.         // 邮箱验证：xxxxx@xxx.com
  38.         //1 获取邮箱里的内容
  39.         var emailText = $("#email").val();
  40.         //2 创建正则表达式对象
  41.         var emailPatt = /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/;
  42.         //3 使用 test 方法验证是否合法
  43.         if (!emailPatt.test(emailText)) {
  44.             //4 提示用户
  45.             $("span.errorMsg").text("邮箱格式不合法！");
  46.             return false;
  47.         }
  48.         // 验证码：现在只需要验证用户已输入。因为还没讲到服务器。验证码生成。
  49.         var codeText = $("#code").val();
  50.         //去掉验证码前后空格
  51.         alert("去空格前：["+codeText+"]")
  52.         codeText = $.trim(codeText);
  53.         alert("去空格后：["+codeText+"]")
  54.         if (codeText == null || codeText == "") {
  55.             //4 提示用户
  56.             $("span.errorMsg").text("验证码不能为空！");
  57.             return false;
  58.         }
  59.         $("span.errorMsg").text("");
  60.        });
  61. });