search

博客列表 >0414作业-$.get,$.post,$ajax与Vue基本术语

0414作业-$.get,$.post,$ajax与Vue基本术语

千山暮雪
千山暮雪原创
2021年04月18日 22:12:25481浏览

1. jQuery常用dom操作

  • before 在被选元素之前插入兄弟ele
  • after 在被选元素之后插入兄弟ele
  • insertAfter ele插入到被选元素后面 ,同级
  • insertBefore ele插入到被选元素前面,同级
  • append 在被选元素的结尾插入子ele 父.append(子)
  • appendTo 把子ele插入父ele结尾 子.appendTo(父)
  • prepend 在被选元素的开头插入子ele 父.prepend(子)
  • prependTo 把子ele插入父ele开头 子.prependTo(父)
  1. <body>
  2.     <div class=".container">
  3.         <div id="item1">item1</div>
  4.         <div id="item2">item2</div>
  5.         <div id="item3">item3</div>
  6.         <div id="item4">item4</div>
  7.         <div id="item5">item5</div>
  8.     </div>
  9.     <script>
  11.         // before 在被选元素之前插入兄弟ele
  12.         $('#item3').before('<div style="color: red">before item3</div>');
  13.         // after 在被选元素之后插入兄弟ele
  14.         $('#item3').after('<div style="color: green">after item3</div>');
  15.         // insertAfter ele插入到被选元素后面 ,同级
  16.         $('<div>insertAfter item1</div>').insertAfter('#item1');
  17.         // insertBefore ele插入到被选元素前面,同级
  18.         $('<div>insertBefore item1</div>').insertBefore('#item1');
  19.         // append 在被选元素的结尾插入子ele 父.append(子) 
  20.         $('#item2').append('<div>append item2</div>');
  21.         //appendTo 把子ele插入父ele结尾 子.appendTo(父) 
  22.         $('<div>appendTo item2</div>').appendTo('#item2');
  23.         // prepend 在被选元素的开头插入子ele 父.prepend(子) 
  24.         $('#item5').prepend('<div>prepend item5</div>');
  25.         // prependTo 把子ele插入父ele开头 子.prependTo(父)
  26.         $('<div>prependTo item5</div>').prependTo('#item5');
  27.     </script>
  • empty 清空指定节点的所有元素，自身保留(清理门户)
  • remove 相比于empty，自身也删除（自杀）
  • replaceWith 用指定的 HTML 内容或元素替换被选元素, 原元素上操作
  • replaceAll 用指定的 HTML 内容或元素替换被选元素, 新元素上操作
  • clone() 克隆元素本身及后代
  • clone(true) 克隆元素本身及后代以及绑定的事件

  1. <body>
  2.     <div class=".container">
  3.         <div id="item1" style="background-color: darkkhaki; min-height: 1rem;">
  4.             item1
  5.             <div>item1子节1</div>
  6.             <div>item1子节2</div>
  7.         </div>
  8.         <div id="item2" style="background-color: greenyellow; min-height: 1rem;">item2
  9.             <div>item2子节1</div>
  10.             <div>item2子节2</div>
  11.         </div>
  12.         <div id="item3">item3</div>
  13.         <div id="item4">item4</div>
  14.         <div id="item5">item5</div>
  15.     </div>
  16.     <script>
  17.         // empty：清空指定节点的所有元素，自身保留(清理门户)
  18.         $('#item1').empty();
  19.         // remove：相比于empty，自身也删除（自杀）
  20.         $('#item2').remove();
  21.         // replaceWith 用指定的 HTML 内容或元素替换被选元素, 原元素上操作
  22.         $('#item3').replaceWith('<h4>hello replacewith</h4>');
  23.         // replaceAll  用指定的 HTML 内容或元素替换被选元素, 新元素上操作
  24.         $('<h4>hello replaceAll</h4>').replaceAll('#item4');
  25.         // 如果 替换的元素已存在, 那就是移动操作
  26.         // $(selector).clone();//克隆元素本身及后代
  27.         // $(selector).clone(true);//克隆元素本身及后代以及绑定的事件
  28.         $('#item5').clone().appendTo('#item1');
  29.     </script>
  30. </body>
  • on 注册事件

    on注册简单事件,对未来元素不生效
    // 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定。
    $(selector).on( ‘click’, function() {});
    on注册事件委托,对末来元素生效
    // 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定
    $(selector).on( ‘click’,’span’, function() {});
    on注册事件的语法：
    // 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
    // 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将由自己执行。
    // 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
    // 第四个参数：handler，事件处理函数
    $(selector).on(events[,selector][,data],handler);

  1. <body>
  2.     <ul>
  3.         <li>item1</li>
  4.         <li>item2</li>
  5.         <li>item3</li>
  6.         <li>item4</li>
  7.     </ul>
  8.     <script>
  9.         let colors = ['red', 'yellow', 'blue', 'green', 'orange']
  11.         // 在ul元素自身点击事件
  12.         $('ul').on('click', function () {
  13.             let ranClr = Math.floor(Math.random() * colors.length);
  14.             $(this).css('background-color', colors[ranClr]);
  15.         });
  16.         // 在ul的子元素li点击事件
  17.         $('ul').on('click', 'li', function () {
  18.             let ranClr = Math.floor(Math.random() * colors.length);
  19.             $(this).css('background-color', colors[ranClr]);
  20.         });
  21.         // 可以改写为箭头函数
  22.         $('ul').on('click', (item) => {
  23.             let ranClr = Math.floor(Math.random() * colors.length);
  24.             $(item.target).css('background-color', colors[ranClr]);
  25.         });
  27.     </script>
  28. </body>

2. jQuery中的$.ajax方法

  • 前端
  2. <body style="display: grid; gap: 1em; place-items: start">
  4.     <button class="get">1. $.get(): 请求数据</button>
  5.     <button class="post">2. $.post(): 请求数据</button>
  6.     <button class="jsonp">3. $.ajax():JSONP: 跨域请求数据</button>
  8.     <script>
  9.         // $.get
  10.         $('.get').on('click', () => {
  11.             $.get('test1.php', { id: 2 }, (res) => {
  12.                 let data = JSON.parse(res)
  13.                 console.log(`name: ${data.name}, email: ${data.email}`);
  14.             })
  15.         });
  17.         // $.post
  18.         $('.post').on('click', () => {
  19.             $.post('test2.php', { email: 'ls@qq.com', pwd: '123456' }, (res) => {
  20.                 console.log(res);
  21.             })
  22.         })
  24.         // $.ajax
  25.         $('.jsonp').on('click', (ev) => {
  26.             let user = { id: 2 };
  27.             $.ajax({
  28.                 type: "POST",
  29.                 url: 'http://world.site/test2.php',
  30.                 dataType: "jsonp",
  31.                 data: user,
  32.                 jsonp: 'callback',
  33.                 success: (res) => {
  34.                     console.log(res);
  35.                 }
  36.             })
  38.         })
  39.     </script>
  40. </body>
  • $.get后端
  1. <?php
  3. $users= [
  4.   ['id'=>1,'name'=>'张三','email'=>'zs@qq.com','pwd'=>'123456'],
  5.   ['id'=>2,'name'=>'李四','email'=>'ls@qq.com','pwd'=>'123456'],
  6.   ['id'=>3,'name'=>'王五','email'=>'ww@qq.com','pwd'=>'123456'],
  7. ];
  9. $id = $_GET['id'];
  11. $key = array_search($id,array_column($users,'id'));
  13. // 将结果做为请求响应返回到前端
  14. echo json_encode($users[$key]);
  • $.post后端
  1. <?php
  3. $users= [
  4.   ['id'=>1,'name'=>'张三','email'=>'zs@qq.com','pwd'=>'123456'],
  5.   ['id'=>2,'name'=>'李四','email'=>'ls@qq.com','pwd'=>'123456'],
  6.   ['id'=>3,'name'=>'王五','email'=>'ww@qq.com','pwd'=>'123456'],
  7. ];
  9. $email = $_POST['email'];
  10. $pwd = $_POST['pwd'];
  12. $res = array_filter($users, function ($user) use ($email, $pwd) {
  13.     return $user['email'] === $email && $user['pwd'] === $pwd;
  14. });
  16. // 将结果做为请求响应返回到前端
  17. echo count($res) === 1 ? '验证成功' : '验证失败';
  • $.ajax后端
  1. <?php
  2. header('content-type:text/html;charset=utf-8');
  4. // 获取回调名称
  5. $callback = $_GET['callback'];
  6. $id = $_GET['id'];
  8. // 模拟接口数据
  9. $users = [
  10.     0 => '{"name":"朱老师", "email":"peter@php.cn"}',
  11.     1 => '{"name":"西门老师", "email":"xm@php.cn"}',
  12.     2 => '{"name":"猪哥", "email":"pig@php.cn"}'
  13. ];
  15. if (array_key_exists(($id - 1), $users)) {
  16.     $user = $users[$id - 1];
  17. }
  19. // echo $user;
  21. // 动态生成handle()的调用
  22. echo $callback . '(' . $user . ')';

3. Vue基本术语与插值语法

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
挂载点:Vue不再和 HTML 直接交互, 一个 Vue 应用会将其挂载到一个 DOM 元素上,然后对其进行完全控制。那个 HTML 是我们的入口,挂载点.
数据注入/绑定:数据与Vue实例绑定,
响应式:数据和 DOM 建立了关联,数据值变动DOM中会更新
插值语法:Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统,语法为双花括号{{}}

  1. <body>
  2.     <div class="root">
  3.         <!-- 通过插值语法,绑定数据 -->
  4.         <p>用户名1:{{uname1}}</p>
  5.         <p>用户1邮箱:<span v-text="uemail1"></span></p>
  6.         <hr>
  7.         <!-- 通过v-text指定写入文本 -->
  8.         <p>用户名2:<span v-text="uname2"></span></p>
  9.         <!-- v-once中的数据只能渲染一次 -->
  10.         <p>用户名2:<span v-once="uname2"></span></p>
  11.         <p>用户2邮箱:<span v-text='uemail2'></span></p>
  12.         <!-- v-html指定写入html文本 -->
  13.         <p v-html="btn"></p>
  14.     </div>
  15.     <script>
  17.         const ve = new Vue({ //new 创建Vue实例
  18.             el: '.root', // 挂载点, 支持css筛选器语法, 等同document.querySelector
  19.             data() {
  20.                 return {
  21.                     uname1: '张三',
  22.                     uemail1: 'zs@qq.com',
  23.                     uname2: '李四',
  24.                     uemail2: 'ls@php.cn',
  25.                     btn: '<Button type="button">保存</Button>'
  26.                 }
  27.             },
  28.         });
  29.         // 响应式, 修改数据会同步显示更新
  30.         ve.uemail2 = 'LS@chinaren.com';
  31.     </script>
  32. </body>
上一条：类的重定向，命名空间和内容的访问下一条：dom元素的增删改查
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多