search

博客列表 >front 23 jQuery中的getter、setter，及dom操作 （0819wed）

front 23 jQuery中的getter、setter，及dom操作 （0819wed）

老黑
老黑原创
2020年08月23日 18:20:35637浏览

主要内容：

  1. 通过表单演示getter/setter的一些基本操作
  2. $(), attr(), css(), val(), html(), text(), postion位置信息
  3. jQuery中的dom基本操作：append(), addClass, befere(), insertAfter(), prependTo(), replaceWith() - dom操作应该很关键，毕竟网页上的东西就是依赖dom操作来摆弄的。
  4. 过滤器：filter（用得不多，估计后面也越来越少）, find

1. 通过一个表单进行getter/setter演练

  • （这块内容其实是前一天的）
  • $(), attr()
  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>getter / setter -1</title>
  7.     <style>
  8.       body {
  9.         display: flex;
  10.         flex-direction: column;
  11.         align-items: center;
  12.         color: #666;
  13.       }
  15.       form {
  16.         width: 400px;
  17.         /* height: 150px; */
  18.         padding: 20px 10px;
  19.         border: 1px solid #aaa;
  20.         box-shadow: 0 0 5px #888;
  21.         box-sizing: border-box;
  22.         background-color: #eee;
  23.         display: grid;
  24.         grid-template-columns: 80px 200px;
  25.         gap: 10px;
  26.         place-content: center center;
  27.       }
  29.       button {
  30.         grid-column: 2 / 3;
  31.         height: 26px;
  32.       }
  34.       button:hover {
  35.         color: white;
  36.         background-color: #888;
  37.         border: none;
  38.         cursor: pointer;
  39.       }
  41.       .red {
  42.         color: red;
  43.       }
  44.     </style>
  45.   </head>
  46.   <body>
  47.     <h2 class="red">用户登录</h2>
  48.     <form action="handle.php" method="GET"">
  49.       <label for="email">Email:</label>
  50.       <input type="email" name="email" id="email" autofocus value="leture@php.cn"/>
  51.       <label for="password">Password:</label>
  52.       <input type="password" name="password" id="password" value="不少于6位" />
  53.       <label for="confirm">记住我:</label>
  54.       <div>
  55.         <input type="radio" name="save" id="confirm" value="1" checked/>
  56.         <label for="confirm">保存</label>
  57.         <input type="radio" name="save" id="cancel" value="0" />
  58.         <label for="cancel">放弃</label>
  59.       </div>
  60.       <button>登录</button>
  61.     </form>
  62.     <script src="lib/jquery-3.5.1.js"></script>
  63.     <script>
  64.       var form = $("form");
  65.       // attr(): 获取元素的属性
  66.       // attr(name): 获取属性的值
  67.       // attr(name,value): 设置属性的值
  68.       console.log(form.attr("action"));
  69.       // 设置属性，等于从handle.php变化check.php
  70.       form.attr("action", "admin/check.php");
  71.       console.log(form.attr("action"));
  72.       // 同时设置多个属性值
  73.       form.attr({
  74.         "action": "select.php?id=10",
  75.         "method": 'Post'
  76.       });
  77.       // attr()第二个参数支持回调
  79.       // 获取当前的method属性值
  80.         // 动态设置action
  81.         // 根据请求的类型,动态设置action
  82.         // get ==> query.php?id=1
  83.         // post ==> register.php
  84.       form.attr("action", function() {
  85.          var method = $(this).attr('method').toLowerCase();
  86.          console.log(method);
  87.          // js表达式的的返回值,永远是等号右边
  88.           return (method === "get") ? 'query.php?id=1' : 'register.php'
  89.       });
  90.     </script>
  91.   </body>
  92. </html>

2. 跟第一步差不多，getter，setter

  • 表单部分一样
  1.  <script>
  2.     var form = $("form");
  3.     //   console.log(form);
  5.       // css(): 设置元素的内联样式的
  6.       // css(name): getter, 获取
  7.       console.log(form.css('width'));
  8.       // 用原生的来获取非内联样式(计算样式)
  9.     var form = document.forms.item(0);
  10.     console.log(window.getComputedStyle(form,null).getPropertyValue("width")) ;
  12.     // css(name, value): setter, 设置
  13.     $('form').css('border', "3px dashed green")
  15.     // css({...}): 支持同样设置多个样式属性
  16.     $('form').css({
  17.         'border': "3px dashed blue",
  18.         'background': 'yellow'
  19.     });
  21.     // css(callback): 支持回调函数当参数
  22.     $('form').css('background-color', function (){
  23.         var bgcolors = ['plum', 'lightblue', 'tan', 'lime']; // index = [0, 3]
  24.         // Math.floor()向下取整, 3.14 = 3, 4.8 => 4
  25.         var randomIndex = Math.floor(Math.random()*bgcolors.length);
  26.         return bgcolors[randomIndex];
  27.     });
  28.     </script>

3. val()获值，修改值

  1.     <script src="../0818/lib/jquery-3.5.1.js"></script>
  2.     <script>
  3.       var form = $("form");
  4.       // val()获取表单控件value属性的值
  5.       console.log($('#email').val());
  7.       // console.log(document.querySelector('form #email').value);
  9.       // var login = document.forms.namedItem('login');
  10.       // console.log(login.email.value);
  11.       // console.log(login.password.value);
  12.       // var data = {
  13.       //   email : login.email.value,
  14.       //   password: login.password.value
  15.       // };
  16.       // var json = JSON.stringify(data);
  17.       // console.log(json);
  19.       var data = {
  20.         email: $('#email').val(),
  21.         password: $('#password').val(),
  22.         status: $('input:radio[name=save]:checked').val()
  23.       };
  24.       var json = JSON.stringify(data);
  25.       console.log(json);
  27.       // val(data): 用来设置
  28.       $('#email').val('zhulaoshi@qq.com');
  30.       // 返回默认邮箱
  31.       $('#email').val(function(){
  32.         return this.defaultValue;
  33.       });
  34.     </script>

4. html() / text()

  • 原生对应的属性 innerHTML（可以加样式）, innerText（不能加样式）
  1.     <script src="../0818/lib/jquery-3.5.1.js"></script>
  2.     <script>
  3.       var form = $("form");
  4.       // 传参就是设置setter, 不传就获取getter
  5.       console.log(document.querySelector('h2').innerText);
  6.       console.log($('h2').text());
  7.       document.querySelector('h2').innerText = '用户注册';
  8.       $('h2').text('不许注册');
  10.       document.querySelector('h2').innerText = '用户<span style="color:green">注册</span>';
  11.       document.querySelector('h2').innerHTML = '用户<span style="color:green">注册</span>';
  12.       $('h2').text('用户<span style="color:green">别注册</span>')
  13.       $('h2').html('用户<span style="color:green">别注册</span>')
  14.     </script>

5. 获得并修改位置信息

  1. <script src="../0818/lib/jquery-3.5.1.js"></script>
  2.     <script>
  3.       var form = document.forms.item(0);
  4.       // 获取表单的位置信息
  5.       var domRect = form.getBoundingClientRect();
  6.       // console.log(domRect);
  7.       console.log(domRect.top);
  8.       console.log(domRect.left);
  10.       // jquery来获取
  11.       var position = $(form).offset();
  12.       console.log(position.top);
  13.       console.log(position.left);
  14.       position.top += 100;
  15.       console.log(position.top);
  17.       // 自定义数据属性 data-? 的获取
  18.       console.log(form.dataset.name);
  19.       // jquery的 data()
  20.       console.log($(form).data('name'));
  21.       // $(form).removeData('data-name')
  22.       console.log($(form).data('name'));
  23.     </script>

6. jQuery中常用DOM基础

  • 元素的添加与算出
  • 添加的位置以及属性改变
  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>jQuery中常用DOM基础</title>
  7.     <style>
  8.       .active {
  9.         color: red;
  10.       }
  11.     </style>
  12.   </head>
  13.   <body>
  14.     <script src="../0818/lib/jquery-3.5.1.js"></script>
  15.     <script>
  16.       // 1. 元素的添加
  17.       // 父元素.append(子元素)
  18.       //   var ol = $("<ol>");
  19.       //   $("body").append(ol);
  20.       //   $("body").append($("<ol>"));
  21.       $("body").append("<ol>");
  22.       // 子元素.appendTo(父元素)
  23.       $("<li>").text("笔记本电脑").appendTo("ol");
  24.       // 添加内容的时候,可又同步设置样式
  25.       $("<li>").addClass("active").text("华为手机").appendTo("ol");
  26.       // 在创建元素时,可以同步的生成属性
  27.       $("<li>", {
  28.         id: "hello",
  29.         style: "background:yellow",
  30.       })
  31.         .html('<a href="">显示器</a>')
  32.         .appendTo("ol");
  34.       // append(callback)
  35.       $("ol").append(function () {
  36.         // 动态生成一定数量的<li>
  37.         var lis = "";
  38.         for (var i = 0; i < 5; i++) {
  39.           lis += "<li>最新商品 " + (i + 1) + "</li>";
  40.         }
  41.         return lis;
  42.       });
  44.       // 从第3个元素前面添加一个<li>, 原位置上. before(新元素)
  45.       $("ol > li:nth-of-type(3)").before("<li>新新元素1</li>");
  46.       //新元素.insertAfter(原来的位置)
  47.       $("<li>新新元素2</li>").insertAfter("ol > li:nth-of-type(4)");
  48.       // prepend(), prependTo()
  49.       $('<li class="active">我是第一个元素</li>').prependTo("ol");
  51.       // 元素的替换: 要被替换掉的元素.replaceWith(新元素)
  52.       $("ol > li:last-of-type").replaceWith("<h2>太晚了, 大家要坚持</h2>");
  53.     </script>
  54.   </body>
  55. </html>

7. 过滤器

  • 过滤器现在用得不多了
  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>常用过滤器</title>
  7.   </head>
  8.   <body>
  9.     <ul id="first">
  10.       <li>item1</li>
  11.       <li>item2</li>
  12.       <ul>
  13.         <li>item1</li>
  14.         <li class="red">item2</li>
  15.         <li>item3</li>
  16.       </ul>
  17.       <li>item3</li>
  18.       <li>item4</li>
  19.       <li>item5</li>
  20.     </ul>
  21.     <ul id="second">
  22.       <li>item1</li>
  23.       <li>item2</li>
  24.       <li>item3</li>
  25.       <li>item4</li>
  26.       <li>item5</li>
  27.     </ul>
  28.     <script src="../0818/lib/jquery-3.5.1.js"></script>
  29.     <script>
  30.       console.log($("ul#first")[0]);
  31.       // 过滤器: 先获取较大的范围, 再慢慢的缩小包围圈
  32.       //   console.log($("ul").filter("#first")[0]);
  33.       //   console.log($("ul").filter("#first").get(0).children);
  34.       //   console.log($("ul").filter("#first").children());
  35.       var children = $("ul").filter("#first").children();
  36.       console.log(children[0]);
  37.       console.log(children.first().css("background", "red"));
  38.       console.log(children.last().css("background", "green"));
  39.       console.log(children.eq(2).css("background", "yellow"));
  41.       $("ul#first > li:first-of-type").css("background", "grey");
  42.       //   children只限于子元素; find(),可又获取任何层级的元素
  43.       //   $("ul").filter("#first").find(".red").css("background", "red");
  44.       //   $("ul#first .red").css("background", "lightblue");
  45.     </script>
  46.   </body>
  47. </html>

8. 作业

看手册, 除了掌握课堂上提及的DOM操作之外, 将未提及的一些DOM操作做下,并提交上来

查询了下，网上有这样一个blog，内容还不错：
https://www.cnblogs.com/zxt-17862802783/p/7498790.html

里面有两张图挺好的：图1-dom树

图2-常用dom方法

不过自己其实现在最关心的还是怎么结合具体的后台数据库进行这些操作，总感觉中间有一块没有搞定。
后面有时间的话，还是需要结合目前做的那个pm来进行下这块的操作。
理想的状态是

  • 通过js send data，然后php中进行pdo操作，并将返回的值再encode通过json传过来。
  • 还是通过cookie来进行数据交换？
    貌似两种方法应该都可以实现吧。
上一条：PHP中9大缓存技术总结下一条：常用DOM操作
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多