jQuery笔记

什么是 jQuery ？

jQuery是一个JavaScript函数库。

jQuery是一个轻量级的"写的少，做的多"的JavaScript库。

jQuery库包含以下功能：

  • HTML 元素选取
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函数
  • JavaScript 特效和动画
  • HTML DOM 遍历和修改
  • AJAX
  • Utilities

提示： 除此之外，Jquery还提供了大量的插件

 

jQuery 语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()

  • 美元符号定义 jQuery
  • 选择符（selector）"查询"和"查找" HTML 元素
  • jQuery 的 action() 执行对元素的操作

实例:

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有 <p> 元素

$("p .test").hide() - 隐藏所有 class="test" 的 <p> 元素

$("#test").hide() - 隐藏所有 id="test" 的元素

 

滑动：

jQuery 拥有以下滑动方法：

  • slideDown()
  • slideUp()
  • slideToggle()
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="http://localhost:63342/htmldemo/js/jquery-1.11.3.min.js"></script>
 7     <script>
 8         $(document).ready(function(){               //jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换
 9             $("#flip").click(function(){
10                 $("#panel").slideToggle("slow");
11             });
12         });
13     </script>
14     <style type="text/css">
15         #flip,#panel
16         {
17             padding:5px;
18             text-align:center;
19             background-color:#e5eecc;
20             border:solid 1px #c3c3c3;
21         }
22         #panel
23         {
24             padding:50px;
25             display:none;
26         }
27     </style>
28 </head>
29 <body>
30 <div id="flip">click me</div>
31 <div id="panel">hello girls</div>
32 
33 </div>
34 </body>
35 </html>
View Code

 

动画：

jQuery animate() 方法用于创建自定义动画。

语法：

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

 

jQuery stop() 方法

jQuery stop() 方法用于停止动画或效果，在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

语法:

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="http://localhost:63342/htmldemo/js/jquery-1.11.3.min.js"></script>
 7     <script>
 8         $(document).ready(function(){
 9             $("#start").click(function(){
10                var div=$("div");
11                 div.animate({left:'100px'},5000);
12                 div.animate({fontSize:'3em'},5000);
13             });
14             $("#stop").click(function(){
15                 $("div").stop();
16             });
17             $("#stopall").click(function(){
18                 $("div").stop(true);
19             });
20             $("#finish").click(function(){
21                 $("div").stop(true,true);
22             });
23         });
24     </script>
25 </head>
26 <body>
27 <button id="start">start</button>
28 <button id="stop">stop</button>
29 <button id="stopall">stopAll</button>
30 <button id="finish">finish</button>
31 <div style="width:150px;height:150px;background-color:green;position:absolute;">hello</div>
32 </body>
33 </html>
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="http://localhost:63342/htmldemo/js/jquery-1.11.3.min.js"></script>
 7     <script>
 8         $(document).ready(function(){
 9             $("#flip").click(function(){
10                 $("#panel").slideDown(5000);
11             });
12             $("#stop").click(function(){
13                 $("#panel").stop();
14             });
15         });
16     </script>
17     <style>
18         #flip,#panel
19         {
20             padding:5px;
21             text-align:center;
22             background-color:#00ff00;
23             border:solid 1px #c3c3c3;
24         }
25         #panel
26         {
27             padding:50px;
28             display:none;
29         }
30     </style>
31 </head>
32 <body>
33 <button id="stop">stop</button>
34 <div id="flip">click</div>
35 <div id="panel">hello girls</div>
36 </body>
37 </html>
View Code

callback:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://localhost:63342/htmldemo/js/jquery-1.11.3.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("p").hide('slow');
                alert("the paragraph is now hidden");

            });
        });
    </script>
</head>
<body>
<button>click me</button>
<p>hello girls</p>
</body>
</html>
View Code

chaining

直到现在，我们都是一次写一条 jQuery 语句（一条接着另一条）。

不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。

提示： 这样的话，浏览器就不必多次查找相同的元素。

如需链接一个动作，您只需简单地把该动作追加到之前的动作上。

下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="http://localhost:63342/htmldemo/js/jquery-1.11.3.min.js"></script>
 7     <script>
 8         $(document).ready(function(){
 9             $("button").click(function(){
10                 $('p').css("color","red")
11                         .slideUp(2000)
12                         .slideDown(2000);
13             });
14 
15         });
16 
17     </script>
18 </head>
19 <body>
20 <button>click me</button>
21 <p>hello girls</p>
22 </body>
23 </html>
View Code

 

三个简单实用的用于 DOM 操作的 jQuery 方法：

  • text() - 设置或返回所选元素的文本内容
  • html() - 设置或返回所选元素的内容（包括 HTML 标记）
  • val() - 设置或返回表单字段的值
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="http://localhost:63342/htmldemo/js/jquery-1.11.3.min.js"></script>
 7     <script>
 8         $(document).ready(function(){
 9             $("#btn1").click(function(){
10                 alert("HTML: "+$("#p1").html());
11             });
12             $("#btn2").click(function(){
13                 alert("Text: "+$("#p1").text());
14             });
15             $("#btn3").click(function(){
16                 alert("Value: "+$("#test").val());
17             });
18             $("#btn4").click(function(){
19                 alert($("#whats").attr("href"));
20             });
21         });
22     </script>
23 </head>
24 <body>
25 <p id="p1">this is <b>a</b> paragraph.</p>
26 <p>name:<input type="text" id="test" value="whats"></p>
27 <p><a href="www.whats.com" id="whats">whats.com</a></p>
28 <button id="btn1">click</button>
29 <button id="btn2">click 2</button>
30 <button id="btn3">click 3</button>
31 <button id="btn4">click 4</button>
32 </body>
33 </html>
View Code
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="http://localhost:63342/htmldemo/js/jquery-1.11.3.min.js"></script>
 7     <script>
 8         $(document).ready(function(){
 9             $("#btn1").click(function(){
10                $("#p1").text("Hello girls");
11             });
12             $("#btn2").click(function(){
13                 $("#p1").html("<b>hello girls</b>");
14             });
15             $("#btn3").click(function(){
16                 $("#test").val("hello girl");
17             });
18             $("#btn4").click(function(){
19                 $("#whats").attr("href","http://www.cnblogs.com");
20             });
21         });
22     </script>
23 </head>
24 <body>
25 <p id="p1">this is <b>a</b> paragraph.</p>
26 <p>name:<input type="text" id="test" value="whats"></p>
27 <p><a href="www.whats.com" id="whats">whats.com</a></p>
28 <button id="btn1">click</button>
29 <button id="btn2">click 2</button>
30 <button id="btn3">click 3</button>
31 <button id="btn4">click 4</button>
32 </body>
33 </html>
View Code

 添加元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://localhost:63342/htmldemo/js/jquery-1.11.3.min.js"></script>
    <script>
        function afterText()
        {
            var txt1="<b>I</b>";
            var txt2=$("<i></i>").text("love");
            var txt3=document.createElement("big").innerHTML="jQuery";
            $("p").after(txt1,txt2,txt3);
        }
    </script>
</head>
<body>
<p>hello 2016</p><br>
<button onclick="afterText()">insert afterText</button>
</body>
</html>
View Code

 css类：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="http://localhost:63342/htmldemo/js/jquery-1.11.3.min.js"></script>
 7     <script>
 8         $(document).ready(function(){
 9             $("button").click(function(){
10                 $("h1,h2,p").toggleClass("blue");
11                // $("div").addClass("important");
12             });
13         });
14     </script>
15     <style type="text/css">
16         .important
17         {
18             font-weigth:blod;
19             font-size:xx-large;
20         }
21         .blue
22         {
23             color:blue;
24         }
25     </style>
26 </head>
27 <body>
28 <h1 class="blue">Heading 1</h1>
29 <h2 class="blue">Heading 2</h2>
30 <p class="blue">this is a paragraph.</p>
31 <p>htis is another paragraph.</p>
32 <div>this is some import text</div><br>
33 <button>add class to elements</button>
34 </body>
35 </html>
View Code

 

向上遍历 DOM 树

这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：

  • parent()
  • parents()
  • parentsUntil()
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .ancestors *
 8         {
 9             display:block;
10             border:2px solid lightgrey;
11             color:lightgrey;
12             padding:5px;
13             margin:15px;
14         }
15     </style>
16     <script src="http://localhost:63342/htmldemo/js/jquery-1.11.3.min.js"></script>
17     <script>
18         $(document).ready(function(){
19             $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});
20         });
21     </script>
22 
23 </head>
24 <body class="ancestors">body
25 
26       <div  style="width:500px;"> div great-grandparent
27           <ul>ul grandparent
28              <li>li parent
29                 <span>span</span>
30               </li>
31           </ul>
32       </div>
33 
34 
35 </body>
36 </html>
View Code

向下遍历 DOM 树

下面是两个用于向下遍历 DOM 树的 jQuery 方法：

  • children()
  • find()
 1 <html lang="en">
 2 <head>
 3     <meta charset="UTF-8">
 4     <title>Title</title>
 5     <style>
 6         .ancestors *
 7         {
 8             display:block;
 9             border:2px solid lightgrey;
10             color:lightgrey;
11             padding:5px;
12             margin:15px;
13         }
14     </style>
15     <script src="http://localhost:63342/htmldemo/js/jquery-1.11.3.min.js"></script>
16     <script>
17         $(document).ready(function(){
18             $("div").children("p.1").css({"color":"red","border":"2px solid red"});
19         });
20     </script>
21 
22 </head>
23 <body class="ancestors">body
24 
25       <div  style="width:500px;"> div
26           <p class="1">p</p>
27           <ul>ul
28              <li>li
29                 <span>span</span>
30               </li>
31           </ul>
32       </div>
View Code
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .ancestors *
 8         {
 9             display:block;
10             border:2px solid lightgrey;
11             color:lightgrey;
12             padding:5px;
13             margin:15px;
14         }
15     </style>
16     <script src="http://localhost:63342/htmldemo/js/jquery-1.11.3.min.js"></script>
17     <script>
18         $(document).ready(function(){
19             $("div").find("*").css({"color":"red","border":"2px solid red"});
20         });
21     </script>
22 
23 </head>
24 <body class="ancestors">body
25 
26       <div  style="width:500px;"> div
27           <ul>ul
28              <li>li
29                 <span>span</span>
30               </li>
31           </ul>
32       </div>
33 
34 
35 </body>
36 </html>
View Code

在 DOM 树中水平遍历

有许多有用的方法让我们在 DOM 树进行水平遍历：

  • siblings()
  • next()
  • nextAll()
  • nextUntil()
  • prev()
  • prevAll()
  • prevUntil()
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .ancestors *
 8         {
 9             display:block;
10             border:2px solid lightgrey;
11             color:lightgrey;
12             padding:5px;
13             margin:15px;
14         }
15     </style>
16     <script src="http://localhost:63342/htmldemo/js/jquery-1.11.3.min.js"></script>
17     <script>
18         $(document).ready(function(){
19             $("h2").prev().css({"color":"red","border":"2px solid red"});
20         });
21     </script>
22 
23 </head>
24 <body class="ancestors">body
25 <div>
26     <h1>h1</h1>
27     <p>p1</p>
28     <span>span</span>
29     <h2>h2</h2>
30     <p>p2</p>
31 
32 </div>
View Code

过滤

first（）被选元素的第一个

last（）最后一个

eq()  方法返回被选元素中带有指定索引号的元素

filter（）filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回

not（）与filter相反

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .ancestors *
 8         {
 9             display:block;
10             border:2px solid lightgrey;
11             color:lightgrey;
12             padding:5px;
13             margin:15px;
14         }
15     </style>
16     <script src="http://localhost:63342/htmldemo/js/jquery-1.11.3.min.js"></script>
17     <script>
18         $(document).ready(function(){
19             $("p").not(".d").css({"color":"red","border":"2px solid red"});
20         });
21     </script>
22 
23 </head>
24 <body class="ancestors">body
25 <div>
26     <h1>h1</h1>
27     <p class="d">p1</p>
28     <span >span</span>
29     <h2>h2</h2>
30     <p class="d">p2</p>
31     <p>p3</p>
32 
33 </div>
34 
35 </body>
36 </html>
View Code

 

posted @ 2016-01-05 16:29  whats  阅读(230)  评论(0)  编辑  收藏  举报