zoukankan      html  css  js  c++  java

  • 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="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="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="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="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
  • 相关阅读:
    cocos代码研究（24）Widget子类PageView学习笔记
    cocos代码研究（23）Widget子类ScrollView学习笔记
    cocos代码研究（22）Widget子类Layout学习笔记
    JavaScript:学习笔记(5)——箭头函数=>以及实践
    顽石系列：CSS实现垂直居中的五种方法
    算法：红黑树
    Vue:实践学习笔记(3)——组件使用
    Java进阶学习：将文件上传到七牛云中
    LeetCode：下一个排列【31】
    Linux：Ubuntu下部署Web运行环境
  • 原文地址：https://www.cnblogs.com/whats/p/5044516.html
Copyright © 2011-2022 走看看