Community Learn Tools Library Leisure
search
English
Home > List of blog posts > JS进阶知识：JQuery基础操作
Blogger Information
Blog 145
fans 7
comment 7
visits 164671
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JS进阶知识：JQuery基础操作
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
Original
920 people have browsed it

代码练习

1、demo1代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <script src="../JQuery3.5.1.js"></script>
  8.     <style>
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.       }
  14.       h2 {
  15.         /* display: block; */
  16.         width: 350px;
  17.         margin: 0 auto;
  18.         text-align: center;
  19.         padding-top: 10px;
  20.         box-sizing: border-box;
  21.       }
  23.       form {
  24.         margin: 10px auto;
  25.         width: 350px;
  26.         height: 250px;
  27.         background-color: #5384e8;
  28.         display: flex;
  29.         flex-flow: column nowrap;
  30.         justify-content: space-evenly;
  31.         align-content: center;
  32.         align-items: center;
  33.         font-size: 1.2rem;
  34.       }
  36.       form:hover {
  37.         box-shadow: 0 0 5px #626262;
  38.       }
  40.       form > .button {
  41.         width: 280px;
  42.         display: flex;
  43.         justify-content: space-evenly;
  44.       }
  46.       form > .button > input {
  47.         width: 100px;
  48.         height: 30px;
  49.         background-color: #00bb00;
  50.         border: none;
  51.         border-radius: 15px;
  52.       }
  54.       form > .button > input:hover {
  55.         background-color: red;
  56.         color: white;
  57.       }
  59.       a {
  60.         color: white;
  61.         text-decoration: none;
  62.       }
  63.     </style>
  64.   </head>
  66.   <body>
  67.     <h2 data-index="one">用户注册</h2>
  68.     <form method="POST" onsubmit="return false">
  69.       <div class="account">
  70.         <label for="username">账户：</label>
  71.         <input
  72.           type="email"
  73.           required
  74.           name="username"
  75.           id="username"
  76.           placeholder="example@163.com"
  77.         />
  78.       </div>
  79.       <div class="pwd">
  80.         <label for="p2">密码：</label>
  81.         <input
  82.           type="password"
  83.           required
  84.           name="p2"
  85.           id="p2"
  86.           placeholder="不少于六位"
  87.         />
  88.       </div>
  90.       <div class="button">
  91.         <input type="submit" value="登陆" />
  92.         <input type="reset" value="重置" />
  93.       </div>
  94.       <div>
  95.         <a href="regist.php">没有账号,点击此处注册!</a>
  96.       </div>
  97.     </form>
  98.   </body>
  99.   <script>
  100.     var cl = console.log.bind(console);
  101.     // cl($('input[type="email"]'));
  102.     var form = $("form");
  103.     // cl(form);
  104.     //修改元素标签属性值attr:只有一个参数获取其值，两个参数修改其值
  105.     form.attr("method", "GET");
  106.     //修改元素的样式：CSS()
  107.     form.css("background", "lightgreen");
  108.     //获取input标签中的值：val();
  109.     var email = $('input[type="email"]');
  110.     email.val("ldy@php.edu");
  111.     cl(email.val());
  112.     //html()和text()修改元素标签中的文本内容
  113.     cl($("h2").html());
  114.     $("h2").text("注册新用户");
  115.     cl(form.offset()); //相对于文档的坐标位置
  116.     cl(form.offsetParent()); //取得离指定元素最近的含有定位信息的祖先元素
  117.     cl(form.position()); //获取匹配元素中第一个元素的当前坐标，相对于offset parent的坐标
  118.     cl(form.scrollTop());
  119.     form.scrollTop(30); //滚动距离顶部的距离
  120.     form.scrollLeft(30); //滚动距离左边的距离
  121.     //data自定义属性值的获取和设置
  122.     $("h2").data("index", "ok"); //设置data自定义属性
  123.     cl($("h2").data("index")); //获取自定义属性值
  124.   </script>
  125. </html>

演示结果：

2、demo2代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <script src="../JQuery3.5.1.js"></script>
  8.   </head>
  9.   <body></body>
  10.   <script>
  11.     var cl = console.log.bind(console);
  12.     $("body").append("<ul></ul>");
  13.     cl($("body"));
  14.     $("<li>富豫369</li>").appendTo("ul"); //尾部插入
  15.     $("ul").prepend("<li>成玉668</li>"); //头部插入
  16.     $("<li>大成168</li>").prependTo("ul");
  17.     $("li").last().css("color", "red");
  18.     $("li").first().css("color", "green");
  19.     $("li:nth-child(2)").before("<li>新产品</li>"); //在某个元素之前插入元素
  20.     $("<li>新产品2</li>").insertBefore("li:nth-child(2)");
  21.     $("li:nth-child(4)").after("<li>新产品</li>"); //在某个元素之前插入元素
  22.     $("<li>新产品2</li>").insertAfter("li:nth-child(4)");
  23.     $("li:nth-child(5)").replaceWith('<p style="color:red">替换内容</p>'); //替换
  24.     $("<span>中国人</span>").replaceAll("li:nth-child(6)");
  25.     cl("^^^^^^^^^^^^^^^^^");
  26.     cl($("li").eq(2).html());
  27.     cl($("li").eq(2));
  28.     cl($("li").eq(2).parent());
  29.     cl($("ul").children());
  30.     cl("&&&&&&&&&&&&&&&&&&");
  31.     cl($("ul").children("span")); //获取子代元素
  32.     cl($("ul").children().filter("li")); //过滤函数
  33.     cl($("ul").find("p")); //查找其所有后代元素
  34.   </script>
  35. </html>

运行结果图：

知识点总结：

1、JQuery常用元素标签属性操作函数：

  1. .css():样式获取和设置方法（两个参数：属性、值）
  2. .attr()：元素标签属性的获取和设置方法（两个参数：属性、值）
  3. .val():表单中的值的获取方式和设置方法（一个参数：值）
  4. .html()/text():元素标签中文本的获取和设置方法（一个参数：值）
  5. .data():元素标签的自定义属性的获取和设置（两个参数：属性、值）

2、JQuery元素位置信息和滚动信息获取和设置

  1. .position():获取当前元素的位置相对于定位父级坐标信息
  2. .offset()：获取当前元素相对于文档的坐标信息
  3. .scrollTop|scrollLeft():获取当前元素的滚动条位置信息
  4. .scroll(function(ev){}):滚动监听函数

3、JQuery元素添加函数：

  1. .append()|.appendTo():在指定元素尾部添加
  2. .prepend()|prependTo():在指定元素头部添加
  3. .before()|insertBefore():在指定元素之前插入
  4. .after()|.insertAfter():在指定元素之后插入
  5. .|replaceWith()|.replaceAll():替换指定元素内容

4、Jquery获取子代和后代元素

  1. .children():获取所有子代元素
  2. .filter():过滤函数
  3. .first():获取子代元素中的第一个
  4. .last():获取子代元素的最后一个
  5. .eq():获取子代元素中的任意一个元素
  6. .find():获取所有后代元素
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：掌握了原生js,这些知识点都非常的容易理解
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post