Community Learn Tools Library Leisure
search
English
Home > List of blog posts > $.get,$.post,$ajax与Vue基本术语
Blogger Information
Blog 52
fans 1
comment 1
visits 38791
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
$.get,$.post,$ajax与Vue基本术语
小丑0o鱼
Original
365 people have browsed it
  2. $.get,$.post,$ajax与Vue基本术语
  3. 2021年04月18日 22:12:25阅读数：97博客 / 千山暮雪/ 作业
  4. 1. jQuery常用dom操作
  5. before 在被选元素之前插入兄弟ele
  6. after 在被选元素之后插入兄弟ele
  7. insertAfter ele插入到被选元素后面 ,同级
  8. insertBefore ele插入到被选元素前面,同级
  9. append 在被选元素的结尾插入子ele 父.append(子)
  10. appendTo 把子ele插入父ele结尾 子.appendTo(父)
  11. prepend 在被选元素的开头插入子ele 父.prepend(子)
  12. prependTo 把子ele插入父ele开头 子.prependTo(父)
  14. <body>
  15.     <div class=".container">
  16.         <div id="item1">item1</div>
  17.         <div id="item2">item2</div>
  18.         <div id="item3">item3</div>
  19.         <div id="item4">item4</div>
  20.         <div id="item5">item5</div>
  21.     </div>
  22.     <script>
  23.         // before 在被选元素之前插入兄弟ele
  24.         $('#item3').before('<div style="color: red">before item3</div>');
  25.         // after 在被选元素之后插入兄弟ele
  26.         $('#item3').after('<div style="color: green">after item3</div>');
  27.         // insertAfter ele插入到被选元素后面 ,同级
  28.         $('<div>insertAfter item1</div>').insertAfter('#item1');
  29.         // insertBefore ele插入到被选元素前面,同级
  30.         $('<div>insertBefore item1</div>').insertBefore('#item1');
  31.         // append 在被选元素的结尾插入子ele 父.append(子) 
  32.         $('#item2').append('<div>append item2</div>');
  33.         //appendTo 把子ele插入父ele结尾 子.appendTo(父) 
  34.         $('<div>appendTo item2</div>').appendTo('#item2');
  35.         // prepend 在被选元素的开头插入子ele 父.prepend(子) 
  36.         $('#item5').prepend('<div>prepend item5</div>');
  37.         // prependTo 把子ele插入父ele开头 子.prependTo(父)
  38.         $('<div>prependTo item5</div>').prependTo('#item5');
  39.     </script>
  40. empty 清空指定节点的所有元素，自身保留(清理门户)
  41. remove 相比于empty，自身也删除（自杀）
  42. replaceWith 用指定的 HTML 内容或元素替换被选元素, 原元素上操作
  43. replaceAll 用指定的 HTML 内容或元素替换被选元素, 新元素上操作
  44. clone() 克隆元素本身及后代
  45. clone(true) 克隆元素本身及后代以及绑定的事件
  48. <body>
  49.     <div class=".container">
  50.         <div id="item1" style="background-color: darkkhaki; min-height: 1rem;">
  51.             item1
  52.             <div>item1子节1</div>
  53.             <div>item1子节2</div>
  54.         </div>
  55.         <div id="item2" style="background-color: greenyellow; min-height: 1rem;">item2
  56.             <div>item2子节1</div>
  57.             <div>item2子节2</div>
  58.         </div>
  59.         <div id="item3">item3</div>
  60.         <div id="item4">item4</div>
  61.         <div id="item5">item5</div>
  62.     </div>
  63.     <script>
  64.         // empty：清空指定节点的所有元素，自身保留(清理门户)
  65.         $('#item1').empty();
  66.         // remove：相比于empty，自身也删除（自杀）
  67.         $('#item2').remove();
  68.         // replaceWith 用指定的 HTML 内容或元素替换被选元素, 原元素上操作
  69.         $('#item3').replaceWith('<h4>hello replacewith</h4>');
  70.         // replaceAll  用指定的 HTML 内容或元素替换被选元素, 新元素上操作
  71.         $('<h4>hello replaceAll</h4>').replaceAll('#item4');
  72.         // 如果 替换的元素已存在, 那就是移动操作
  73.         // $(selector).clone();//克隆元素本身及后代
  74.         // $(selector).clone(true);//克隆元素本身及后代以及绑定的事件
  75.         $('#item5').clone().appendTo('#item1');
  76.     </script>
  77. </body>
  78. on 注册事件
  79. on注册简单事件,对未来元素不生效
  80. // 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定。
  81. $(selector).on( ‘click’, function() {});
  82. on注册事件委托,对末来元素生效
  83. // 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定
  84. $(selector).on( ‘click’,’span’, function() {});
  85. on注册事件的语法：
  86. // 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
  87. // 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将由自己执行。
  88. // 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
  89. // 第四个参数：handler，事件处理函数
  90. $(selector).on(events[,selector][,data],handler);
  93. <body>
  94.     <ul>
  95.         <li>item1</li>
  96.         <li>item2</li>
  97.         <li>item3</li>
  98.         <li>item4</li>
  99.     </ul>
  100.     <script>
  101.         let colors = ['red', 'yellow', 'blue', 'green', 'orange']
  102.         // 在ul元素自身点击事件
  103.         $('ul').on('click', function () {
  104.             let ranClr = Math.floor(Math.random() * colors.length);
  105.             $(this).css('background-color', colors[ranClr]);
  106.         });
  107.         // 在ul的子元素li点击事件
  108.         $('ul').on('click', 'li', function () {
  109.             let ranClr = Math.floor(Math.random() * colors.length);
  110.             $(this).css('background-color', colors[ranClr]);
  111.         });
  112.         // 可以改写为箭头函数
  113.         $('ul').on('click', (item) => {
  114.             let ranClr = Math.floor(Math.random() * colors.length);
  115.             $(item.target).css('background-color', colors[ranClr]);
  116.         });
  117.     </script>
  118. </body>
  119. 2. jQuery中的$.ajax方法
  122. 前端
  123. <body style="display: grid; gap: 1em; place-items: start">
  124.     <button class="get">1. $.get(): 请求数据</button>
  125.     <button class="post">2. $.post(): 请求数据</button>
  126.     <button class="jsonp">3. $.ajax():JSONP: 跨域请求数据</button>
  127.     <script>
  128.         // $.get
  129.         $('.get').on('click', () => {
  130.             $.get('test1.php', { id: 2 }, (res) => {
  131.                 let data = JSON.parse(res)
  132.                 console.log(`name: ${data.name}, email: ${data.email}`);
  133.             })
  134.         });
  135.         // $.post
  136.         $('.post').on('click', () => {
  137.             $.post('test2.php', { email: 'ls@qq.com', pwd: '123456' }, (res) => {
  138.                 console.log(res);
  139.             })
  140.         })
  141.         // $.ajax
  142.         $('.jsonp').on('click', (ev) => {
  143.             let user = { id: 2 };
  144.             $.ajax({
  145.                 type: "POST",
  146.                 url: 'http://world.site/test2.php',
  147.                 dataType: "jsonp",
  148.                 data: user,
  149.                 jsonp: 'callback',
  150.                 success: (res) => {
  151.                     console.log(res);
  152.                 }
  153.             })
  154.         })
  155.     </script>
  156. </body>
  157. $.get后端
  158. <?php
  159. $users= [
  160.   ['id'=>1,'name'=>'张三','email'=>'zs@qq.com','pwd'=>'123456'],
  161.   ['id'=>2,'name'=>'李四','email'=>'ls@qq.com','pwd'=>'123456'],
  162.   ['id'=>3,'name'=>'王五','email'=>'ww@qq.com','pwd'=>'123456'],
  163. ];
  164. $id = $_GET['id'];
  165. $key = array_search($id,array_column($users,'id'));
  166. // 将结果做为请求响应返回到前端
  167. echo json_encode($users[$key]);
  168. $.post后端
  169. <?php
  170. $users= [
  171.   ['id'=>1,'name'=>'张三','email'=>'zs@qq.com','pwd'=>'123456'],
  172.   ['id'=>2,'name'=>'李四','email'=>'ls@qq.com','pwd'=>'123456'],
  173.   ['id'=>3,'name'=>'王五','email'=>'ww@qq.com','pwd'=>'123456'],
  174. ];
  175. $email = $_POST['email'];
  176. $pwd = $_POST['pwd'];
  177. $res = array_filter($users, function ($user) use ($email, $pwd) {
  178.     return $user['email'] === $email && $user['pwd'] === $pwd;
  179. });
  180. // 将结果做为请求响应返回到前端
  181. echo count($res) === 1 ? '验证成功' : '验证失败';
  182. $.ajax后端
  183. <?php
  184. header('content-type:text/html;charset=utf-8');
  185. // 获取回调名称
  186. $callback = $_GET['callback'];
  187. $id = $_GET['id'];
  188. // 模拟接口数据
  189. $users = [
  190.     0 => '{"name":"朱老师", "email":"peter@php.cn"}',
  191.     1 => '{"name":"西门老师", "email":"xm@php.cn"}',
  192.     2 => '{"name":"猪哥", "email":"pig@php.cn"}'
  193. ];
  194. if (array_key_exists(($id - 1), $users)) {
  195.     $user = $users[$id - 1];
  196. }
  197. // echo $user;
  198. // 动态生成handle()的调用
  199. echo $callback . '(' . $user . ')';
  200. 3. Vue基本术语与插值语法
  201. Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
  202. 挂载点:Vue不再和 HTML 直接交互, 一个 Vue 应用会将其挂载到一个 DOM 元素上,然后对其进行完全控制。那个 HTML 是我们的入口,挂载点.
  203. 数据注入/绑定:数据与Vue实例绑定,
  204. 响应式:数据和 DOM 建立了关联,数据值变动DOM中会更新
  205. 插值语法:Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统,语法为双花括号{{}}
  208. <body>
  209.     <div class="root">
  210.         <!-- 通过插值语法,绑定数据 -->
  211.         <p>用户名1:{{uname1}}</p>
  212.         <p>用户1邮箱:<span v-text="uemail1"></span></p>
  213.         <hr>
  214.         <!-- 通过v-text指定写入文本 -->
  215.         <p>用户名2:<span v-text="uname2"></span></p>
  216.         <!-- v-once中的数据只能渲染一次 -->
  217.         <p>用户名2:<span v-once="uname2"></span></p>
  218.         <p>用户2邮箱:<span v-text='uemail2'></span></p>
  219.         <!-- v-html指定写入html文本 -->
  220.         <p v-html="btn"></p>
  221.     </div>
  222.     <script>
  223.         const ve = new Vue({ //new 创建Vue实例
  224.             el: '.root', // 挂载点, 支持css筛选器语法, 等同document.querySelector
  225.             data() {
  226.                 return {
  227.                     uname1: '张三',
  228.                     uemail1: 'zs@qq.com',
  229.                     uname2: '李四',
  230.                     uemail2: 'ls@php.cn',
  231.                     btn: '<Button type="button">保存</Button>'
  232.                 }
  233.             },
  234.         });
  235.         // 响应式, 修改数据会同步显示更新
  236.         ve.uemail2 = 'LS@chinaren.com';
  237.     </script>
  238. </body>
Correction status：Uncorrected

Teacher's comments：
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