微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > front 23 jQuery中的getter、setter，及dom操作 （0819wed）
博主信息
博文 62
粉丝 2
评论 1
访问量 58169
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
front 23 jQuery中的getter、setter，及dom操作 （0819wed）
老黑
原创
814人浏览过

主要内容：

  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来进行数据交换？
    貌似两种方法应该都可以实现吧。
批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：多多参考一些课外资料有助于开阔视野, 常用的并不多, 掌握起来非常快
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录