JQuery 学习总结【一】
一:JQuery
1 JQuery 知识
*:就是让我们学会调用 JQ 插件,其实内部就是对 JS 的封装。
*:jquery 里面有三个文件,
第 2 个和第 3 个其实里面的内容是一样的,只是第三个对其进行了压缩,使浏览器对其的访问时间变短。
我们在使用的时候将 Jquery-1.4.2.js 和 jquery.1.4.2-vsdoc,js 放在一起,其实 vsdoc.js 是对于前面的解释说明,它是让我们在编写代码的时候可以点操作出来。
*: 练习《点击按钮弹出对话框的内容》 《点击网页里面的文字使文字一行一行消失》("$" 这个其实是个函数)
- <head>
- <script type="text/javascript" src="js/jquery-1.4.2.js">
- </script>
- <script type="text/javascript">
- $(function() {
- $("#btn").click(function() {
- alert($("#un").val());
- }); //点击弹出内容
- $("div").click(function() {
- $(this).hide("slow");
- }); //文字消失
- });
- </script>
- </head>
- <body>
- <input type="text" id="un" />
- <input type="button" id="btn" />
- <div>
- 文字内容
- </div>
- </body>
2 JQuery 里面的 Ready 《在网页刚开始就弹出内容》
- $(dounction).ready(function(){alert("加载完毕");})
其实还可以这样子写
- $(function(){alert("加载完毕");});
<解析:"$"这个函数将匿名函数 function() 注册为 Ready 执行。>
3 jquery 内置函数
.map(array,fn) 对数组中 array 中的每一个元素调用 fn 函数进行处理,fn 函数将处理返回,最后得到一个新的数组。.map(array,fn) 对数组中 array 中的每一个元素调用 fn 函数进行处理,fn 函数将处理返回,最后得到一个新的数组。map 不能处理 Dictionary 风格的数组。要用下面的 $.each 来处理。
$.each(array.fn) 对数组 arr 每个元素调用 fn 函数进行处理,没有返回值。
- var arr = [3, 5, 7];
- Var arr2 = $map. (arr,
- function(item) {
- return item * 2
- })函数式编程。Var arr = {"tom";"檀木",
- "xiaozhang";"小张"
- }
- $.each(arr,
- function(key, value) {
- alert(key + " = " + value);
- });
4 JQuery 对象,Dom 对象
<dom 就是浏览器的一些标记,比如层,按钮,标签等,数组是 jq 的对象。>
Jquery 对象就是通过 jquery 包装 Dom 对象后产生。而且 jquery 对象只能调用 jquery 对象封装的方法。不能调用 Dom 对象的方法。
- $(function(){$("#id").CSS("background","red")});
上面的代码是复制,就是将背景色设置为红色,若. css 中的属性为一个则为得到值,2 个即为设置值。
5 jquery 选择器
*id 选择器
- $("#div").html();
*TabName 选择器 <标签选择器>
- $("div").click(function(){alert("你好我是p");});
这里就是将网页中所有的 div 标签都选择了,都向其添加了 click 事件。
* css 选择器
同时选择多个样式,就是给制定样式的添加。
- $("div").click(function(){alert("这是信息")});
6 多条件选择器 / 层次选择器
7 jquery 的迭代
就是里面的错误程序不会给提示出错,我们自己要添加 if/elae 语句进行判断。
8 jquery 的节点遍历
就是运用 next(),nextall() 方法来进行遍历的。就好像在数组那里的遍历是一样的。 这里只是得到它的下一个元素的值。
Siblings():获取所有元素的同辈元素 (兄弟节点)。
*:jquery 的链式编程
- $("div").click(function() {
- $(this).css("background", "red").siblings("div").css("background", "white")
- });
就是很容易的通过点操作符来操作。
// 这里是链式操作, 减少了使用 if/else 等操作。改变了编程风格。
- <!DOCTYPE html>
- <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta charset="utf-8" />
- <title>
- </title>
- <script src="js/jquery-1.4.2-vsdoc.js">
- </script>
- <script src="js/jquery-1.4.2.js">
- </script>
- <script type="text/javascript">
- $(function() {
- $("#tables td").html("<img src='images/1.jpg'/>").mouseover(function() {
- $("#tables td").html("<img src='images/1.jpg'/>");
- $(this).nextAll().html("<img src='images/2.jpg'/");
- });
- });
- </script>
- </head>
- <body>
- <table id="tables">
- <tr>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- </tr>
- </table>
- </body>
- </html>
9 :基本的过滤器
这里可以将其写在一起,比如选择器和过滤器,这样子就会很强大。
不仅可以使用选择器进行绝对定位,还可以进行相对定位,只要在 $() 指定第二个参数,第二个参数为相对的元素。
案例:
(相对定位)
:这里的元素就是在定位 #tables tr 下的 td 的定位
10 属性过滤器
Eg:
- <!DOCTYPE html>
- <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta charset="utf-8" />
- <script src="js/jquery-1.4.2.js">
- </script>
- <script src="js/jquery-1.4.2-vsdoc.js">
- </script>
- <title>
- </title>
- <script type="text/javascript">
- $(function() {
- $("input[value=显示选中的内容]").click(function() {
- alert($("input:checked").val());
- });
- });
- </script>
- </head>
- <body>
- <input type="checkbox" value="上海" />
- 上海
- <br/>
- <input type="checkbox" value="宝鸡" />
- 宝鸡
- <br/>
- <input type="checkbox" value="深圳" />
- 深圳
- <br/>
- <input type="checkbox" value="西安" />
- 西安
- <br/>
- <input type="checkbox" value="北京" />
- 北京
- <br/>
- <input type="submit" value="显示选中的内容" />
- </body>
- </html>
11 元素的 each <通过一些过滤器和选择器来遍历 each 一些元素。>
- <!DOCTYPE html>
- <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta charset="utf-8" />
- <script src="js/jquery-1.4.2.js">
- </script>
- <script src="js/jquery-1.4.2-vsdoc.js">
- </script>
- <title>
- </title>
- <script type="text/javascript">
- $(function() {
- $("input[name=names]").click(function() {
- var arr = new Array();
- $("input[name=names]:checked").each(function(key, value) {
- arr[key] = $(value).val();
- });
- $("#msgNames").text("共选中" + arr.length + "项:" + arr.join(","));
- });
- });
- </script>
- </head>
- <body>
- <input type="checkbox" name="names" value="张辉" />
- 张辉
- <input type="checkbox" name="names" value="妈妈" />
- 妈妈
- <input type="checkbox" name="names" value="妈妈" />
- 妈妈
- <input type="checkbox" name="names" value="妈妈" />
- 妈妈
- <p id="msgNames">
- </p>
- </body>
来源: http://www.jb51.net/article/98793.htm