1.jQuery选择器

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>选择器</title>
  7.     <style type="text/css">
  8.         .show {
  9.             width: 400px;
  10.             height: 200px;
  11.             border: 1px solid red;
  12.             background-color: aquamarine;
  13.         }
  15.         .box {
  16.             background-color: royalblue;
  17.         }
  18.     </style>
  19.     <!-- 注意：script标签不允许自结束 -->
  20.     <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
  21.     <script type="text/javascript">
  22.         /**
  23.          * jQuery的选择器非常强大
  24.          * 它完美的兼容css选择器，
  25.          * 1、基本选择器（css）
  26.          * 逗号选择器,
  27.          * 子代选择器
  28.          * 后代选择器
  29.          * id
  30.          * class
  31.          * 通配符选择器*
  32.          * 2、过滤选择器
  33.          * 3、属性选择器（css）
  34.          * 4、css3提供的选择器
  35.          */
  36.         $(function () {
  37.             // id选择器
  38.             $("#msg").css("color", "red");
  39.             // 类选择器
  40.             $(".item").css({
  41.                 "width": "200px",
  42.                 "height": "30px",
  43.                 "border": "1px solid red",
  44.                 "color": "pink"
  45.             });
  46.             // 通配符选择
  47.             $("*").css("border", "1px solid yellow");
  48.             // 逗号选择器
  49.             $(".item, #msg").css("border", "1px solid gray");
  50.             // 子代选择器
  51.             $(".list>li").css("border", "1px solid red")
  52.             // 后代选择器
  53.             $(".list li").css("border", "1px solid red")
  54.             // 选择下一个兄弟节点
  55.             $(".active+li").css("border", "1px solid red")
  56.             // 选择之后的所有兄弟节点
  57.             $(".active~li").css("border", "1px solid red")
  58.             // 第一个
  59.             $(".item:first").css("color", "red");
  60.             $(".item").first().css("color", "red");
  61.             // 最后一个
  62.             $(".item:last").css("color", "red");
  63.             $(".item").last().css("color", "red")
  64.             // 第n个元素
  65.             $(".item:eq(1)").css("color", "red")
  66.             $(".item").eq(2).css("color", "red");
  67.             // 大于
  68.             $(".item:gt(2)").css("color", "red")
  69.             // 小于
  70.             $(".item:lt(5)").css("color", "red")
  71.             // 奇数行
  72.             $(".item:odd").css("background", "red")
  73.                 .css("width", "500px")
  74.                 .css("height", "30px");
  75.             // 偶数行
  76.             $(".item:even").css("background", "darkcyan")
  77.                 .css("width", "500px")
  78.                 .css("height", "30px");
  79.             // 判断是否存在某个class
  80.             console.log($(".show").hasClass("box"))
  81.             $(".show").hover(function () {
  82.                 // 将js对象转换为jQuery，$(DOM对象)
  83.                 if ($(this).hasClass("box")) {
  84.                     $(this).removeClass("box")
  85.                 } else {
  86.                     $(this).addClass("box");
  87.                 }
  88.                 // 这样也可以 如果有则移除 没有则添加
  89.                 $(this).toggleClass("box");
  90.             });
  91.             // 通过属性选择器,添加类样式
  92.             $("input[type$=tel]").addClass("box");
  93.             // 选择具有子元素（包括文本子元素）的标签
  94.             $(".item:parent").css("border", "1px solid red");
  95.             // 选择包装集的父级
  96.             $(".active").parent().css("border", "1px solid red");
  97.             $(".active").parent("div").css("border", "1px solid red");
  98.             $(".active").parents("ul").css("border", "1px solid red");
  99.             // 选择子级标签
  100.             $(".list").children().css("border", "1px solid red");
  101.             $(".list").children("ul").css("border", "1px solid red");
  102.             /**
  103.              * find会在选择的包装集上继续向后代选择需要对象
  104.              * 面试题：请说明jQuery中find和filter的区别？
  105.              */
  106.             $(".list").find("li").css("border", "1px solid red");
  107.             // 在选中的包装集上进行二次刷选
  108.             $("li").filter(".first").css("border", "1px solid red");
  109.             /**
  110.              * 如下的选择器都是选择兄弟节点
  111.              */
  112.             $(".first~li").css("border", "1px solid red");
  113.             // 后面的兄弟节点
  114.             $(".first").nextAll("li").css("border", "1px solid red");
  115.             // 下一个兄弟节点
  116.             $(".first").next("div").css("border", "1px solid red");
  117.             // 前面一个兄弟节点
  119.             $(".active").prev().css("border", "1px solid red");
  120.             // 前面的所有兄弟节点
  121.             $(".active").prevAll("li").css("border", "1px solid red")
  122.             // 所有的兄弟节点
  123.             $(".active").siblings("li").css("border", "1px solid red");
  124.         });
  125.     </script>
  126. </head>
  128. <body>
  129.     <div id="msg">这个是一个div</div>
  130.     <ul class="list">
  131.         <li class="first">
  132.             <ul>
  133.                 <li>这个是孙子列表1</li>
  134.                 <li>这个是孙子列表2</li>
  135.                 <li>这个是孙子列表3</li>
  136.                 <li>这个是孙子列表4</li>
  137.                 <li>这个是孙子列表5</li>
  138.             </ul>
  139.         </li>
  140.         <li class="item">这个是一个列表</li>
  141.         <li class="item">这个是一个列表</li>
  142.         <li class="item active">这个是一个列表</li>
  143.         <li class="item">这个是一个列表</li>
  144.         <li class="item"></li>
  145.         <div id="msg">这个是一个div</div>
  146.         <ul>
  147.             <li class="item"></li>
  148.             <li class="item">这个是一个列表</li>
  149.             <li class="item">这个是一个列表</li>
  150.         </ul>
  151.     </ul>
  152.     <div class="show box">
  153.     </div>
  154.     <input type="tel" name="" id="" value="" />
  155. </body>
  157. </html>

2jQuery动画

系统的动画方法
jQuery提供了强大的动画API的支持，包括十种三类动画效果

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title></title>
  7.     <style type="text/css">
  8.         .box {
  9.             margin-top: 50px;
  10.             height: 250px;
  11.             width: 250px;
  12.             border: 1px solid purple;
  13.             background-color: black;
  14.         }
  15.     </style>
  16.     <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
  17.     <script type="text/javascript">
  18.         function myHide() {
  19.             /**
  20.              * 如果hide中传递字符串，那么可以传递如下三个字符串
  21.              * slow normal fast
  22.              */
  23.             // $(".box").hide("fast");
  24.             // $(".box").hide("normal");
  25.             // $(".box").hide("slow");
  26.             /**
  27.              * 如果hide中传递数字，则表示动画执行的时间，单位是毫秒
  28.              */
  29.             $(".box").hide(2000);
  30.         }
  32.         function myShow() {
  33.             $(".box").show(2000);
  34.         }
  36.         function change() {
  37.             $(".box").toggle(2000);
  38.         }
  40.         function myHide2() {
  41.             $(".box").fadeOut(2000);
  42.             // $(".box").fadeTo(2000, 0.2, function() {
  43.             // $(".box").fadeTo(2000, 1);
  44.             // })
  45.         }
  47.         function myShow2() {
  48.             $(".box").fadeIn(2000);
  49.         }
  51.         function change2() {
  52.             $(".box").fadeToggle(2000);
  53.         }
  55.         function myHide3() {
  56.             $(".box").slideUp(2000)
  57.         }
  59.         function myShow3() {
  60.             $(".box").slideDown(2000);
  61.         }
  63.         function change3() {
  64.             $(".box").slideToggle(2000);
  65.         }
  66.     </script>
  67. </head>
  69. <body>
  70.     <button onclick="myHide()">缩放消失</button>
  71.     <button onclick="myShow()">缩放显示</button>
  72.     <button onclick="change()">缩放变化</button>
  73.     <button onclick="myHide2()">透明度隐藏</button>
  74.     <button onclick="myShow2()">透明度显示</button>
  75.     <button onclick="change2()">透明度变化</button>
  76.     <button onclick="myHide3()">卷帘隐藏</button>
  77.     <button onclick="myShow3()">卷帘显示</button>
  78.     <button onclick="change3()">卷帘变化</button>
  79.     <br />
  80.     <div class="box"></div>
  81. </body>
  83. </html>

3.常见API操作

4.jQuery DOM操作

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <meta charset="utf-8" />
  6.     <title>jQuery DOM操作</title>
  7.     <script src="js/lib/jquery-1.12.4.js"></script>
  8.     <script type="text/javascript">
  9.         $(function () {
  10.             /**
  11.              * 子节点的操作
  12.              */
  13.             // append 为包装集增加最后一个子节点
  14.             $(".list").append("<li>刘建宏是个大帅锅~~</li>");
  15.             // prepend 为包装集增加第一个子节点
  16.             $(".list").prepend("<li>这个是第一个li</li>");
  17.             // 变种写法
  18.             $("<div>嘿嘿</div>").appendTo(".list");
  19.             $("<div>嘿嘿</div>").prependTo(".list");
  20.             /**
  21.              * 兄弟节点的操作
  22.              */
  23.             $(".active").before("<li>这个是一个新的节点</li>");
  24.             $(".active").after("<div>这个是之后的一个兄弟节点</div>")
  25.             $(".active").insertAfter(".show")
  26.             $("<li>这个是一个新的节点</li>").insertAfter(".show");
  27.             $("<li>这个是一个新的节点</li>").insertBefore(".active");
  28.             // 父节点操作
  29.             $("ul").wrap("<div class='container'></div>");
  30.             // js中DOM对象是无法自杀的，父级可以移除子集
  31.             var node = document.getElementsByClassName("active")[0];
  32.             node.parentNode.removeChild(node)
  33.             // jQuery 可以自杀
  34.             $(".active").remove();
  35.             // 复制克隆节点
  36.             $(".msg").append($(".active").clone())
  37.         });
  38.     </script>
  39. </head>
  41. <body>
  42.     <ul class="list">
  43.         <li>这个是列表1</li>
  44.         <li>这个是列表2</li>
  45.         <li>这个是列表3</li>
  46.         <li class="active">这个是列表4</li>
  47.         <li class="show">这个是列表5</li>
  48.         <li>这个是列表6</li>
  49.         <li>这个是列表7</li>
  50.         <li>这个是列表8</li>
  51.         <li>这个是列表9</li>
  52.         <li>这个是列表10</li>
  53.     </ul>
  54.     <div class="msg"></div>
  55. </body>
  57. </html>

5.jQuery事件处理

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>jQuery处理事件</title>
  7.     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js">
  8.     </script>
  9. </head>
  11. <body>
  12.     <button id="btn">内容</button>
  13.     <script type="text/javascript">
  14.         $(function () {
  15.             // 获取节点，使用对应是事件函数完成事件的绑定
  16.             $("#btn").click(function (e) {
  17.                 alert("事件被触发了……")
  18.                 console.info(e)
  19.             })
  20.             /**
  21.              * 事件监听 jQuery
  22.              */
  23.             $("#btn").on("click", function (e) {
  24.                 alert("事件被触发了……")
  25.             })
  26.             /**
  27.              * 在jQuery中on 和bind 绑定事件是存在区别的，
  28.              * 3.x版以及取消了bind方法
  29.              * on 还可以做事件委托
  30.              */
  31.             $("#btn").on("click", "body", function () {});
  32.             // 事件最后由body处理
  33.             $("body").click(function () {
  34.                 alert("body 触发了click事件")
  35.             })
  36.         });
  37.     </script>
  38. </body>
  40. </html>