jQuery

1.jQuery :JavaScript 和查询（Query),辅助 JavaScript 开发的 js 类库。

2.jQuery 核心函数：$ 是 jQuery 的核心函数，能完成 jQuery 的很多功能。 $()就是调用$这个函数

1). 传入参数为 [ 函数 ] 时：
表示页面加载完成之后。相当于 window.onload = function(){}

代码：

1 $(function () {
2              alert("传入参数为[函数]时：在文档加载完成后执行这个函数");
3  });

2).传入参数为 [ HTML 字符串 ] 时：
会对我们创建这个 html 标签对象

代码：

1   $(function () {
2             $("<dvi>\n" +
3                 "    <span>111111111111</span>\n" +
4                 "    <span>222222222222</span>\n" +
5                 "</dvi>").appendTo("body");
6   });

3).传入参数为 [ 选择器字符串 ] 时：
$(“#id 属性值”); id 选择器，根据 id 查询标签对象
$(“标签名”); 标签名选择器，根据指定的标签名查询标签对象
$(“.class 属性值”); 类型选择器，可以根据 class 属性查询标签对象

代码：

1 $(function () {
2             alert($("button").length);
3 });

4).传入参数为 [ DOM 对象 ] 时：
会把这个 dom 对象转换为 jQuery 对象

代码：

1 $(function () {
2             var $method = $("btnId");
3             alert($method);    //结果：[object Object]
4 });

3.jQuery实质：jQuery 对象是 dom 对象的数组 + jQuery 提供的一系列功能函数。
4.Dom 对象和 jQuery 对象互转 ：

1). dom 对象转化为 jQuery 对象
先有 DOM 对象
$( DOM 对象 ) 就可以转换成为 jQuery 对象
2). jQuery 对象转为 dom 对象
先有 jQuery 对象
jQuery 对象[下标]取出相应的 DOM 对象

5.jQuery选择器：

此部分涉及到内容过多，不方便叙述和插入代码，建议查阅 jQuery API

6.属性：

6.1). attr() 设置或返回被选元素的属性值。

prop() 获取在匹配的元素集中的第一个元素的属性值。

代码：

 1 $(function () {
 2             //attr() 可以设置和获取属性的值， 不推荐操作 checked、 readOnly、 selected、 disabled 等等
 3             //attr()有两个参数时，表示获取值
 4             alert($(":checkbox:first").attr("name"));  //结果 ： checkbox
 5             //attr()有两个参数时，表示赋值
 6             $(":checkbox:first").attr("name", "123");  //结果：name="123"
 7 
 8             //prop() 可以设置和获取属性的值,只推荐操作 checked、 readOnly、 selected、 disabled 等等
 9             alert($(":checkbox:first").prop("name"));  //结果：checkbox
10             $(":checkbox").prop("checked","true");    //结果：  多选框全选了
11         });

6.2).html() 它可以设置和获取起始标签和结束标签中的内容。跟 dom 属性 innerHTML 一样。
text() 它可以设置和获取起始标签和结束标签中的文本。跟 dom 属性 innerText 一样。
val() 它可以设置和获取表单项的 value 属性值。跟 dom 属性 value 一样

代码：

 1  $(function () {
 2             // 不传参数，是获取，传递参数是设置
 3             // alert( $("div").html() );// 获取
 4             // $("div").html("<h1>我是div中的标题 1</h1>");  //设置内容
 5 
 6             // 不传参数，是获取，传递参数是设置
 7             // alert( $("div").text() ); // 获取
 8             // $("div").text("<h1>我是div中的标题 1</h1>"); // 设置
 9 
10             $("button").click(function () {
11                 $("input").val("11111111111111");
12             })
13         });

6.3).

内部插入：

appendTo() a.appendTo(b) 把 a 插入到 b 子元素末尾，成为最后一个子元素
prependTo() a.prependTo(b) 把 a 插到 b 所有子元素前面，成为第一个子元素
外部插入：
insertAfter() a.insertAfter(b) 得到 ba
insertBefore() a.insertBefore(b) 得到 ab

代码：

 1 $(function () {
 2             //appendTo()   a.appendTo(b) 把 a 插入到 b 子元素末尾，成为最后一个子元素
 3             $("<h1>444444444</h1>").appendTo("div");
 4             //prependTo() a.prependTo(b) 把 a 插到 b 所有子元素前面，成为第一个子元素
 5             $("<h2>66666666666</h2>").prependTo("div");
 6         });
 7 
 8         $(function () {
 9             // insertAfter() a.insertAfter(b) 得到 ba
10             $("<h1>aaaaaaaaaa</h1>").insertAfter("span");
11             // insertBefore() a.insertBefore(b) 得到 ab
12             $("<h2>bbbbbbbbbbbbbbbbb</h2>").insertBefore("span");
13         });
14 
15         $(function () {
16             // replaceWith() a.replaceWith(b) 用 b 替换掉 a
17             $("footer").replaceWith($("<h1>ppppppppppppppppppp</h1>"));
18             // replaceAll() a.replaceAll(b) 用 a 替换掉所有 b
19             $("<h1>qqqqqqqqqqqqqq</h1>").replaceAll("article");
20         });
21 
22         $(function () {
23             //remove() a.remove(); 删除 a 标签
24             $("header").remove();
25             //empty() a.empty(); 清空 a 标签里的内容
26             $("aside").empty();
27         });

7.案例：多选框的全选、全不选、反选和提交

代码：

 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         $(function () {
 9             // 给全选绑定单击事件
10             $("#checkedAllBtn").click(function () {
11                 $(":checkbox[name='items']").prop("checked", true);
12             });
13 
14             // 给全不选绑定单击事件
15             $("#checkedNoBtn").click(function () {
16                 $(":checkbox[name='items']").prop("checked", false);
17             });
18 
19             // 反选单击事件
20             $("#checkedRevBtn").click(function () {
21                 $(":checkbox[name='items']").each(function () {
22                     this.checked = !this.checked;
23                 });
24                 // 获取全部的球类个数
25                 var allLength = $(":checkbox[name='items']").length;
26                 // 获取选中的球类个数
27                 var checkedLength1 = $(":checkbox[name='items']:checked").length;
28                 $("#checkedAllBox").prop("checked", allLength == checkedLength1);
29             });
30 
31             // 【提交】按钮单击事件
32             $("#sendBtn").click(function () {
33                 $(":checkbox[name='items']:checked").each(function () {
34                     alert(this.value);
35                 });
36             });
37 
38             // 给【全选/全不选】绑定单击事件
39                 $("#checkedAllBox").click(function () {
40                     $(":checkbox[name='items']").prop("checked",true);
41                 });
42             // 给全部球类绑定单击事件
43         });
44     </script>
45 </head>
46 <body>
47 
48 <form method="post" action="">
49     你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选
50     <br/>
51     <input type="checkbox" name="items" value="足球"/>足球
52     <input type="checkbox" name="items" value="篮球"/>篮球
53     <input type="checkbox" name="items" value="羽毛球"/>羽毛球
54     <input type="checkbox" name="items" value="乒乓球"/>乒乓球
55     <br/>
56     <input type="button" id="checkedAllBtn" value="全　选"/>
57     <input type="button" id="checkedNoBtn" value="全不选"/>
58     <input type="button" id="checkedRevBtn" value="反　选"/>
59     <input type="button" id="sendBtn" value="提　交"/>
60 </form>
61 </body>
62 </html>

8.案例：下列列表的移动，效果如下图

代码：

 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         }
11         
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         $(function(){
21             //选中添加到右边
22             $("button:eq(0)").click(function () {
23                 $("select:eq(0) option:selected").appendTo($("select:eq(1)"));
24             });
25 
26             //全部添加到右边
27             $("button:eq(1)").click(function () {
28                 $("select:eq(0) option").appendTo($("select:eq(1)"));
29             });
30 
31             // 第三个按钮 【选中删除到左边】
32             $("button:eq(2)").click(function () {
33                 $("select:eq(1) option:selected").appendTo($("select:eq(0)"));
34             });
35 
36             // 第四个按钮 【全部删除到左边】
37             $("button:eq(3)").click(function () {
38                 $("select:eq(1) option").appendTo($("select:eq(0)"));
39             });
40         });
41     </script>
42 </head>
43 <body>
44     <div id="left">
45         <select multiple="multiple" name="sel01">
46             <option value="opt01">选项1</option>
47             <option value="opt02">选项2</option>
48             <option value="opt03">选项3</option>
49             <option value="opt04">选项4</option>
50             <option value="opt05">选项5</option>
51             <option value="opt06">选项6</option>
52             <option value="opt07">选项7</option>
53             <option value="opt08">选项8</option>
54         </select>
55         <button>选中添加到右边</button>
56         <button>全部添加到右边</button>
57     </div>
58     <div id="rigth">
59         <select multiple="multiple" name="sel02">
60         </select>
61         <button>选中删除到左边</button>
62         <button>全部删除到左边</button>
63     </div>
64 </body>
65 </html>

9.案例：动态的添加和删除表单元素（效果图）

代码：

  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         $(function () {
 10             var deleteFun = function () {
 11                 // 在事件响应的function函数中，有一个this对象。这个this对象是当前正在响应事件的dom对象。
 12                 var $rm = $(this).parent().parent();
 13                 //获取当前要删除的名字
 14                 var name = $rm.find("td:first").val();
 15                 /**
 16                  * confirm 是JavaScript语言提供的一个确认提示框函数。你给它传什么，它就提示什么<br/>
 17                  * 当用户点击了确定，就返回true。当用户点击了取消，就返回false
 18                  */
 19                 if (confirm("你确定要删除" + name + "吗？")) {
 20                     $rm.remove();
 21                 }
 22                 // return false; 可以阻止 元素的默认行为。
 23                 return false;
 24             }
 25             $("#addEmpButton").click(function () {
 26                 // 获取输入框，姓名，邮箱，工资的内容,这几个变量需要放在这个函数里面
 27                 //value是js中的属性，而val是jq方法。
 28                 var name = $("#empName").val();
 29                 var email = $("#email").val();
 30                 var salary = $("#salary").val();
 31                 var $insetLine = $("<tr>\n" +
 32                     "        <td>" + name + "</td>\n" +
 33                     "        <td>" + email + "</td>\n" +
 34                     "        <td>" + salary + "</td>\n" +
 35                     "        <td><a href=\"\">Delete</a></td>\n" +
 36                     "    </tr>");
 37                 $insetLine.appendTo($("#employeeTable"));
 38                 // 给添加的行的a标签绑上事件
 39                 $insetLine.find("a").click(deleteFun);
 40             });
 41             // 给删除的a标签绑定单击事件
 42             $("a").click(deleteFun);
 43         });
 44     </script>
 45 </head>
 46 <body>
 47 
 48 <table id="employeeTable">
 49     <tr>
 50         <th>Name</th>
 51         <th>Email</th>
 52         <th>Salary</th>
 53         <th>Delete</th>
 54     </tr>
 55     <tr>
 56         <td>Tom</td>
 57         <td>tom@tom.com</td>
 58         <td>5000</td>
 59         <td><a href="deleteEmp?id=001">Delete</a></td>
 60     </tr>
 61     <tr>
 62         <td>Jerry</td>
 63         <td>jerry@sohu.com</td>
 64         <td>8000</td>
 65         <td><a href="deleteEmp?id=002">Delete</a></td>
 66     </tr>
 67     <tr>
 68         <td>Bob</td>
 69         <td>bob@tom.com</td>
 70         <td>10000</td>
 71         <td><a href="deleteEmp?id=003">Delete</a></td>
 72     </tr>
 73 </table>
 74 
 75 <div id="formDiv">
 76 
 77     <h4>添加新员工</h4>
 78 
 79     <table>
 80         <tr>
 81             <td class="word">name:</td>
 82             <td class="inp">
 83                 <input type="text" name="empName" id="empName"/>
 84             </td>
 85         </tr>
 86         <tr>
 87             <td class="word">email:</td>
 88             <td class="inp">
 89                 <input type="text" name="email" id="email"/>
 90             </td>
 91         </tr>
 92         <tr>
 93             <td class="word">salary:</td>
 94             <td class="inp">
 95                 <input type="text" name="salary" id="salary"/>
 96             </td>
 97         </tr>
 98         <tr>
 99             <td colspan="2" align="center">
100                 <button id="addEmpButton" value="abc">
101                     Submit
102                 </button>
103             </td>
104         </tr>
105     </table>
106 
107 </div>
108 
109 </body>
110 </html>

10.动画：

show() 将隐藏的元素显示
hide() 将可见的元素隐藏。
toggle() 可见就隐藏，不可见就显示。
fadeIn() 淡入（慢慢可见）
fadeOut() 淡出（慢慢消失）
fadeTo() 在指定时长内慢慢的将透明度修改到指定的值。 0 透明， 1 完成可见， 0.5 半透明
fadeToggle() 淡入/淡出切换

代码：

 1  $(function () {
 2             // show() 将隐藏的元素显示
 3             $("#btn1").click(function () {
 4                 $("#div1").show();
 5             });
 6             // hide() 将可见的元素隐藏。
 7             $("#btn2").click(function () {
 8                 $("#div1").hide();
 9             });
10             // toggle() 可见就隐藏， 不可见就显示。
11             $("#btn3").click(function () {
12                 $("#div1").toggle();
13             });
14             // fadeIn() 淡入（慢慢可见）
15             $("#btn4").click(function () {
16                 $("#div1").fadeIn();
17             });
18             // fadeOut() 淡出（慢慢消失）
19             $("#btn5").click(function () {
20                 $("#div1").fadeOut();
21             });
22             // fadeTo() 在指定时长内慢慢的将透明度修改到指定的值。 0 透明， 1 完成可见， 0.5 半透明
23             $("#btn6").click(function () {
24                 $("#div1").fadeTo(5000, 0.3);
25             });
26             // fadeToggle() 淡入/淡出 切换
27             $("#btn7").click(function () {
28                 $("#div1").fadeToggle();
29             });
30         });
31     </script>

11.案例：动画显示商标（效果图如下）

（重点在于按钮中的内容和图标）没下拉之前

下拉之后

代码：

  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         * {
  9             margin: 0;
 10             padding: 0;
 11         }
 12 
 13         body {
 14             font-size: 12px;
 15             text-align: center;
 16         }
 17 
 18         a {
 19             color: #04D;
 20             text-decoration: none;
 21         }
 22 
 23         a:hover {
 24             color: #F50;
 25             text-decoration: underline;
 26         }
 27 
 28         .SubCategoryBox {
 29             width: 600px;
 30             margin: 0 auto;
 31             text-align: center;
 32             margin-top: 40px;
 33         }
 34 
 35         .SubCategoryBox ul {
 36             list-style: none;
 37         }
 38 
 39         .SubCategoryBox ul li {
 40             display: block;
 41             float: left;
 42             width: 200px;
 43             line-height: 20px;
 44         }
 45 
 46         .showmore, .showless {
 47             clear: both;
 48             text-align: center;
 49             padding-top: 10px;
 50         }
 51 
 52         .showmore a, .showless a {
 53             display: block;
 54             width: 120px;
 55             margin: 0 auto;
 56             line-height: 24px;
 57             border: 1px solid #AAA;
 58         }
 59 
 60         .showmore a span {
 61             padding-left: 15px;
 62             background: url(img/down.gif) no-repeat 0 0;
 63         }
 64 
 65         .showless a span {
 66             padding-left: 15px;
 67             background: url(img/up.gif) no-repeat 0 0;
 68         }
 69 
 70         .promoted a {
 71             color: #F50;
 72         }
 73     </style>
 74     <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
 75     <script type="text/javascript">
 76         $(function () {
 77             $(".SubCategoryBox li:gt(5):not(:last)").hide();
 78             $("div div a").click(function () {
 79                 $(".SubCategoryBox li:gt(5)").toggle();
 80                 // 判断 品牌，当前是否可见
 81                 if ($(".SubCategoryBox li:gt(5):not(:last)").is(":hidden")) {
 82                     // 品牌隐藏的状态 ：1 显示全部品牌    == 角标向下 showmore
 83                     $("div div a span").text("显示全部品牌");
 84                     $("div div").removeClass();
 85                     $("div div").addClass("showmore");
 86                     $("li:contains('佳能')").removeClass("promoted");
 87                 } else {
 88                     // 品牌可见的状态：2 显示精简品牌     == 角标向上 showless
 89                     $("div div a span").text("显示精简品牌");
 90                     $("div div").removeClass();
 91                     $("div div").addClass("showless");
 92                     $("li:contains('佳能')").addClass("promoted");
 93                 }
 94                 return false;
 95             });
 96         });
 97     </script>
 98 </head>
 99 <body>
100 <div class="SubCategoryBox">
101     <ul>
102         <li><a href="#">佳能</a><i>(30440) </i></li>
103         <li><a href="#">索尼</a><i>(27220) </i></li>
104         <li><a href="#">三星</a><i>(20808) </i></li>
105         <li><a href="#">尼康</a><i>(17821) </i></li>
106         <li><a href="#">松下</a><i>(12289) </i></li>
107         <li><a href="#">卡西欧</a><i>(8242) </i></li>
108         <li><a href="#">富士</a><i>(14894) </i></li>
109         <li><a href="#">柯达</a><i>(9520) </i></li>
110         <li><a href="#">宾得</a><i>(2195) </i></li>
111         <li><a href="#">理光</a><i>(4114) </i></li>
112         <li><a href="#">奥林巴斯</a><i>(12205) </i></li>
113         <li><a href="#">明基</a><i>(1466) </i></li>
114         <li><a href="#">爱国者</a><i>(3091) </i></li>
115         <li><a href="#">其它品牌相机</a><i>(7275) </i></li>
116     </ul>
117     <div class="showmore">
118         <a href="more.html"><span>显示全部品牌</span></a>
119     </div>
120 </div>
121 </body>
122 </html>

posted @ 2020-03-11 22:49 王余阳阅读(165) 评论(0) 收藏举报

刷新页面返回顶部

王余阳

jQuery

公告