经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » jQuery » 查看文章
jQuery基础学习
来源：cnblogs　　作者：骑着螞蟻流浪　　时间：2019/7/10 11:32:21　　对本文有异议

一、简介

　　jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“Write Less, Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

　　jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对css选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

二、jQuery是什么？

　　·jQuery是由美国人John Resig创建，至今已吸引了来自世界各地的众多JavaScript高手加入其中。

　　·jQuery是继prototype之后又一个优秀的JavaScript框架。其宗旨是——Write Less, Do More!

　　·jQuery是轻量级的js库，这是其它的js库所不及的，它兼容css3，还兼容各种浏览器。

　　·jQuery是一个快速的，简洁的JavaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。

　　·jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

三、什么是jQuery对象？

  1. 　jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的。如果一个对象是jQuery对象，那么它就可以使用jQuery里的方法：$("#test").html();
  1. $("#test").html()
  2. 意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法。
  3. 这段代码等同于用DOM实现代码：document.getElementById("test").innerHTML。
  4. 虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法，胡乱使用会报错。
  5. 约定：如果获取的是jQuery对象，那么在变量前面加上$。
  6. var $variable = jQuery对象
  7. var variable = DOM对象
  8. $variable[0]:jQuery对象转为DOM对象  $("#msg").html; $("#msg")[0].innerHTML;

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

四、寻找元素（选择器和筛选器）

4.1 选择器

　　4.1.1 基本选择器

$("*")

$("#id")

$(".class")

$(".class, p, div")

　　4.1.2 层级选择器

$(".outer div")

$(".outer>div")

$(".outer+div")

$(".outer~div")

　　4.1.3 基本筛选器

$("li:first")

$("li:eq(2) ")

$("li:even")

$("li:gt(1) ")

　　4.1.4 属性选择器

  1. $('[id="div1"]')

$('[name="mayi"]')

　　4.1.5 表单选择器

$("[type='text']") ----->$(":text")  注意：只适用于input标签：$("input:checked")

　　4.1.6 表单属性选择器

:enabled

:disabled

:checked

:selected

　　例子：

  1. <body>
  2. <form>
  3.     <label>123<input type="checkbox" value="123" checked /></label>
  4.     <label>456<input type="checkbox" value="456" checked /></label>
  5.  
  6.     <label>植物
  7.         <select>
  8.             <option value="1">Flowers</option>
  9.             <option value="2">Garends</option>
  10.             <option value="3">Trees</option>
  11.         </select>
  12.     </label>
  13. </form>
  14.  
  15. <script src="jquery-3.4.1.js"></script>
  16. <script>
  17.     // console.log($("input:checked").length); //2
  19.     $("input:checked").each(function(){
  20.         console.log($(this).val())
  21.     })
  22. </script>
  23. </body>

4.2 筛选器

　　4.2.1 过滤筛选器

$("li").eq(2)

$("li").first()

$("ul li").hasclass("test")

　　4.2.2 查找筛选器

查找子标签

$("div").children(".test");

$("div").find(".test");

向下查找兄弟标签

$(".test").next();

$(".test").nextAll();

$(".test").nextUntil();

向上查找兄弟标签

$("div").prev();

$("div").prevAll();

$("div").prevUntil()

查找所有兄弟标签

$("div").siblings()

查找父标签

$(".test").parent();

$(".test").parents();

$(".test").parentUntil();

五、操作元素（属性、css、文档处理）

5.1 事件

　　页面载入

  1. ready(fn);  //当DOM载入就绪可以查询及操作时绑定一个要执行的函数。
  2. $(document).ready(function(){}); //-----> $(function(){})

　　事件绑定

  1. //语法：标签对象.事件（函数）
  2. $("p").click(function(){});

　　事件委派

  1. //在选择元素上绑定一个或多个事件的事件处理函数。
  2. $("").on(eve, [selector], [data], fn);

　　例子：

  1. <body>
  2. <ul>
  3.     <li>1</li>
  4.     <li>2</li>
  5.     <li>3</li>
  6. </ul>
  7. <hr>
  8. <button id="add_li">Add_li</button>
  9. <button id="off">off</button>
  10.  
  11. <script src="jquery-3.4.1.js"></script>
  12. <script>
  13.     $("ul li").click(function(){
  14.         alert(123);
  15.     });
  17.     $("#add_li").click(function(){
  18.         var $ele = $("<li>");
  19.         $ele.text(Math.round(Math.random() * 10));
  20.         $("ul").append($ele);
  21.     });
  23. //    $("ul").on("click", "li", function(){
  24. //        alert(456);
  25. //    });
  27.     $("#off").click(function(){
  28.         $("ul li").off();
  29.     });
  31. </script>
  32. </body>

　　事件切换

　　hover事件：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。

　　over事件：鼠标移到元素上要触发的函数。

　　out事件：鼠标移出元素要触发的函数。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>test03</title>
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  12.         .test {
  13.             width: 200px;
  14.             height: 200px;
  15.             background-color: wheat;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20. <div class="test"></div>
  21.  
  22. <script src="jquery-3.4.1.js"></script>
  23. <script>
  24. //    function enter(){
  25. //        console.log("enter");
  26. //    }
  27. //
  28. //    function out(){
  29. //        console.log("out");
  30. //    }
  31. //
  32. //    $(".test").hover(enter, out);
  34.     $(".test").mouseenter(function(){
  35.         console.log("enter");
  36.     });
  38.     $(".test").mouseleave(function(){
  39.         console.log("leave");
  40.     })
  42. </script>
  43. </body>
  44. </html>

5.2 属性操作

  1. //css类
  2. $("").addClass(class|fn);
  3. $("").removeClass([class|fn]);
  5. //属性
  6. $("").attr();
  7. $("").removeAttr();
  8. $("").prop();
  9. $("").removeProp();
  11. //HTML代码/文本/值
  12. $("").html([val|fn]);
  13. $("").text([val|fn]);
  14. $("").val([val|fn|arr]);
  16. //应用
  17. $("#c1").css({"color": "red", "fontSize": "35px"});

　　attr方法使用：

  1. <body>
  2. <label><input id="chk1" type="checkbox" />是否可见</label>
  3. <label><input id="chk2" type="checkbox" checked="checked" />是否可见</label>
  4. <script src="jquery-3.4.1.js"></script>
  5. <script>
  6.     //对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
  7.     //对于HTML元素我们自定义的DOM属性，在处理时，使用attr方法。
  8.     //像checkbox, radio和select这样的元素，选中属性对应“checked”和“selected”，这
  9.     // 些也属于固有属性，因此需要使用prop方法去操作才有获得正确的结果。
  11.     console.log($("#chk1").prop("checked")); //false
  12.     console.log($("#chk2").prop("checked")); //true
  13.     console.log($("#chk1").attr("checked")); //undefined
  14.     console.log($("#chk2").attr("checked")); //checked
  15. </script>
  16. </body>

5.3 each循环

　　我们知道$("p").css("color", "red")是将css操作加到所有的标签上，内部维持一个循环；但如果对于选中标签进行不同处理，这时就需要对所有标签数组进行循环遍历了。

　　jQuery支持两种循环方式：

　　方式一：

　　格式：$.each(obj, fn)

  1. li = [10, 20, 30, 40];
  2. dic = {name: "MaYi", sex: "male"};
  4. $.each(li, function(i, x){
  5.     console.log(i, x);
  6. });
  8. $.each(dic, function(k, v){
  9.     console.log(k, v);
  10. });

　　方式二：

　　格式：$("").each(fn)

  1. $("tr").each(function(){
  2.     console.log($(this).html());
  3. });

　　其中，$(this)代指当前循环标签。

5.4 文档节点处理

　　创建一个标签对象

  1. $("<p>")

　　内部插入

$("").append(content|fn)

$("p").append("<b>Hello</b>");

$("").appendTo(content)

$("p").appendTo("div");

$("").prepend(content|fn)

$("p").prepend("<b>Hello</b>");

$("").prependTo(content)

$("p").prependTo("#foo");

　　外部插入

$("").after(content|fn)

$("p").after("<b>Hello</b>");

 

 

$("").before(content)

$("p").before("<b>Hello</b>");

 

 

$("").insertAfter(content|fn)

$("p").insertAfter("#foo");

 

 

$("").insertBefore(content)

$("p").insertBefore("#foo");

 

 

　　替换

$("").replaceWith(content|fn)

$("p").replaceWith("<b>Paragraph.</b>");

　　删除

$("").empty()

$("").remove([expr])

　　复制

$("").clone([Even[, deepEven]])

5.5 动画效果

　　显示隐藏

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>test</title>
  6. </head>
  7. <body>
  8. <p>hello</p>
  9. <button id="hide">隐藏</button>
  10. <button id="show">显示</button>
  11. <button id="toggle">切换</button>
  12.  
  13. <script src="jquery-3.4.1.js"></script>
  14. <script>
  15.     $("#hide").click(function(){
  16.         $("p").hide(1000);  //1000毫秒
  17.     });
  19.     $("#show").click(function(){
  20.         $("p").show(1000);  //1000毫秒
  21.     });
  23.     $("#toggle").click(function(){
  24.         $("p").toggle(1000);  //1000毫秒
  25.     });
  26. </script>
  27. </body>
  28. </html>

　　滑动

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>test</title>
  6.     <style>
  7.         #content {
  8.             text-align: center;
  9.             background-color: lightblue;
  10.             border: solid 1px red;
  11.             display: none;
  12.             padding: 50px;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17. <div id="slideDown">出现</div>
  18. <div id="slideUp">隐藏</div>
  19. <div id="slideToggle">切换</div>
  20. <div id="content">hello world!</div>
  21.  
  22. <script src="jquery-3.4.1.js"></script>
  23. <script>
  24.     $(document).ready(function(){
  25.         $("#slideDown").click(function(){
  26.             $("#content").slideDown(1000);
  27.         });
  29.         $("#slideUp").click(function(){
  30.             $("#content").slideUp(1000);
  31.         });
  33.         $("#slideToggle").click(function(){
  34.             $("#content").slideToggle(1000);
  35.         });
  36.     })
  38. </script>
  39. </body>
  40. </html>

　　淡入淡出

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>test</title>
  6.     <style>
  7.         #id1 {
  8.             display: none;
  9.             width: 80px;
  10.             height: 80px;
  11.             background-color: blueviolet;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16. <button id="in">fade in</button>
  17. <button id="out">fade out</button>
  18. <button id="toggle">fade toggle</button>
  19. <button id="to">fade to</button>
  20. <div id="id1"></div>
  21.  
  22. <script src="jquery-3.4.1.js"></script>
  23. <script>
  24.     $("#in").click(function(){
  25.         $("#id1").fadeIn(1000);
  26.     });
  28.     $("#out").click(function(){
  29.         $("#id1").fadeOut(1000);
  30.     });
  32.     $("#toggle").click(function(){
  33.         $("#id1").fadeToggle(1000);
  34.     });
  36.     $("#to").click(function(){
  37.         $("#id1").fadeTo(1000, 0.4);
  38.     });
  40. </script>
  41. </body>
  42. </html>

　　回调函数

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>test</title>
  6. </head>
  7. <body>
  8. <button>hide</button>
  9. <p>hello world</p>
  10. <script src="jquery-3.4.1.js"></script>
  11. <script>
  12.     $("button").click(function(){
  13.         $("p").hide(1000, function(){
  14.             alert($(this).html());
  15.         });
  16.     });
  18. </script>
  19. </body>
  20. </html>

5.6 css操作

　　css位置操作

  1. $("").offset([coordinates])
  2. $("").position()
  3. $("").scrollTop([val])
  4. $("").scrollLeft([val])

　　示例1：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>test</title>
  6.     <style>
  7.         .test {
  8.             width: 200px;
  9.             height: 200px;
  10.             background-color: wheat;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15. <h1>this if offset</h1>
  16. <div class="test"></div>
  17. <p></p>
  18. <button>change</button>
  19.  
  20. <script src="jquery-3.4.1.js"></script>
  21. <script>
  22.     var $offset = $(".test").offset();
  23.     var $lefts = $offset.left;
  24.     var $tops = $offset.top;
  26.     $("p").text("Top:" + $tops + " Left:" + $lefts);
  27.     $("button").click(function(){
  28.         $(".test").offset({left: 200, top: 400});
  29.     });
  31. </script>
  32. </body>
  33. </html>

　　示例2：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>test</title>
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.         }
  11.         .box1 {
  12.             width: 200px;
  13.             height: 200px;
  14.             background-color: rebeccapurple;
  15.         }
  17.         .box2 {
  18.             width: 200px;
  19.             height: 200px;
  20.             background-color: darkcyan;
  21.         }
  23.         .parent_box {
  24.             position: relative;
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29. <div class="box1">hello box1</div>
  30. <div class="parent_box">
  31.     <div class="box2">hello box2</div>
  32. </div>
  33. <p>hello p</p>
  34.  
  35. <script src="jquery-3.4.1.js"></script>
  36. <script>
  37.     var $position = $(".box2").position();
  38.     var $left = $position.left;
  39.     var $top = $position.top;
  41.     $("p").text("Top:" + $top + " Left:" + $left);
  43. </script>
  44. </body>
  45. </html>

　　示例3：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>test</title>
  6.     <style>
  7.         body {
  8.             margin: 0;
  9.         }
  11.         .returnTop {
  12.             height: 60px;
  13.             width: 100px;
  14.             background-color: peru;
  15.             position: fixed;
  16.             right: 0;
  17.             bottom: 0;
  18.             color: white;
  19.             line-height: 60px;
  20.             text-align: center;
  21.         }
  23.         .div1 {
  24.             background-color: wheat;
  25.             font-size: 5px;
  26.             overflow: auto;
  27.             width: 500px;
  28.             height: 200px;
  29.         }
  31.         .div2 {
  32.             background-color: darkgray;
  33.             height: 2400px;
  34.         }
  36.         .hide {
  37.             display: none;
  38.         }
  39.     </style>
  40. </head>
  41. <body>
  42. <div class="div1 div">
  43.     <p>hello world</p>
  44.     <p>hello world</p>
  45.     <p>hello world</p>
  46.     <p>hello world</p>
  47.     <p>hello world</p>
  48. </div>
  49. <div class="div2 div">hello div2</div>
  50. <div class="returnTop hide">返回顶部</div>
  51.  
  52. <script src="jquery-3.4.1.js"></script>
  53. <script>
  54.     $(window).scroll(function(){
  55.         var $current = $(window).scrollTop();
  56.         console.log($current);
  57.         if($current > 100){
  58.             $(".returnTop").removeClass("hide");
  59.         }
  60.         else{
  61.             $(".returnTop").addClass("hide");
  62.         }
  63.     });
  65.     $(".returnTop").click(function(){
  66.         $(window).scrollTop(0);
  67.     });
  69. </script>
  70. </body>
  71. </html>

　　css尺寸操作

  1. $("").height([val|fn])
  2. $("").width([val|fn])
  3. $("").innerHeight()
  4. $("").innerWidth()
  5. $("").outerHeight([soptions])
  6. $("").outerWidth([options])

示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>test</title>
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.         }
  11.         .box1 {
  12.             width: 200px;
  13.             height: 200px;
  14.             background-color: wheat;
  15.             padding: 50px;
  16.             border: 50px solid rebeccapurple;
  17.             margin: 50px;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22. <div class="box1">
  23.     hello div
  24. </div>
  25. <p>hello p</p>
  26.  
  27. <script src="jquery-3.4.1.js"></script>
  28. <script>
  29.     var $ele = $(".box1");
  30.     var $height = $ele.height();
  31.     var $innerHeight = $ele.innerHeight();
  32.     var $outerHeight = $ele.outerHeight();
  33.     var $margin = $ele.outerHeight(true);
  35.     //200---300---400---500
  36.     $("p").text($height + "---" + $innerHeight + "---" + $outerHeight + "---" + $margin);
  38. </script>
  39. </body>
  40. </html>

六、扩展方法（插件机制）

6.1 jQuery.extend(object)

　　扩展jQuery对象本身。

　　用来在jQuery命名空间上增加新函数。

　　例：在jQuery命名空间上增加两个函数：

  1. <script src="jquery-3.4.1.js"></script>
  2. <script>
  3.     jQuery.extend({
  4.         min: function(a, b) { return a < b ? a : b;},
  5.         max: function(a, b) { return a > b ? a : b;}
  6.     });
  8.     console.log(jQuery.min(2, 3));  //2
  9.     console.log(jQuery.max(4, 5));  //5
  10. </script>

6.2 jQuery.fn.extend(object)

　　扩展jQuery元素集来提供新的方法（通常用来制作插件）。

　　例：增加两个插件方法：

  1. <body>
  2. <label><input type="checkbox" /></label>
  3. <label><input type="checkbox" /></label>
  4. <label><input type="checkbox" /></label>
  5.  
  6. <script src="jquery-3.4.1.js"></script>
  7. <script>
  8.     jQuery.fn.extend({
  9.         check: function(){
  10.             $(this).attr("checked", true);
  11.         },
  12.         uncheck: function(){
  13.             $(this).attr("checked", false);
  14.         }
  15.     });
  17.     $(":checkbox:gt(0)").check();
  19. </script>
  20. </body>

 

原文链接：http://www.cnblogs.com/mayi0312/p/11161747.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

jQuery热门文章

  • 初涉Ajax
  • jQuery 源码分析(十五) 数据操作模块 val详解
  • select 宽度跟随option内容自适应
  • 日期插件rolldate.js的使用
  • layer.prompt 增加placeholder 提示
  • jQuery实现简单五子棋游戏
  • layui+ztree 树状下拉框
  • 在你身边，为你设计PDF下载高清完整扫描原版
  • jQuery实现扫雷小游戏
  • uni-app通过canvas实现手写签名

    • jQuery推荐文章

  • jQuery实现扫雷小游戏
  • jQuery实现简单五子棋游戏
  • 详解jquery方法属性
  • jquery+h5实现九宫格抽奖特效（前后端代码）
  • jQuery实现弹弹球小游戏
  • jQuery常见事件的监听方式
  • JQuery总结 - 小杨-先生
  • jQuery的链式编程风格
  • 初识Vue2（一）：表单输入绑定（附Demo） - 熊泽-学习中的苦与乐
  • jQuery 笔记

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号