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>

更多相关文章

  1. 个人信息表的网页
  2. 1.理解 box-sizing功能并实例演示; 2. 理解相对定位与绝对定位，并
  3. 实例演示dom元素的增删改查操作
  4. 字体图标的引用及页面布局盒模型常用属性
  5. 字体图标的用法 盒模型的演示 box-sizing的用法
  6. css_0701作业
  7. 事件注册、事件派发、事件代理与留言板
  8. 属性访问器和dom元素的获取、遍历、增加
  9. 表单，框架，选择器，css的三种插入样式（内联，外部样式，元素中）

随机推荐

  1. Android1.6好使,但是2.1 2.2遇到问题，不好
  2. Android进阶(一)几种网络请求方式详解
  3. android完全退出程序（android退出有多个ac
  4. Android布局属性补遗
  5. Android主题Theme.AppCompat.Light.NoAct
  6. android系统颜色大全
  7. Android(安卓)version
  8. android刮奖控件，使用简单。
  9. Android(安卓)Application Architecture
  10. layout_gravity和gravity的区别