收藏
天蓬老师批改状态：合格
老师批语：
<ul class="list"><li class="item">item1</li><li class="item">item2</li><li class="item">item3</li></ul><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script><script>// dom元素新增,更新,删除// 新增// append(), prepend(),after(),before()// instertAdjacentElement(),insertAdjacentHTML()// 追加到尾部let li = document.createElement("li");li.textContent = "item4";li.style.color = "red";li.classList.add("item");document.querySelector(".list").append(li);// jQuery// append(), 在父元素上调用$(".list").append("<li>item5</li>").find(":last").addClass("item").css("color", "green");// appendTo(), 在子元素上调用$("<li>item6</li>").addClass("item").css("color", "blue").appendTo(".list");// prepend(): 追加到头部$(".list").prepend("<li>item0</li>").find(":first").addClass("item").css("color", "red");// prependTo(), 在子元素上调用$("<li>item-1</li>").addClass("item").css("color", "skyblue").prependTo(".list");// eq(从0开始计数),next():下一个兄弟, prev():前一个兄弟$(".list .item").eq(3).after('<li class="item">new li-1</li>').next().css("color", "violet");$(".list .item").eq(3).before('<li class="item">new li-2</li>').prev().css("color", "green");// insterAfter(), insertBefore()// 不是追加子元素,而是添加兄弟节点$("<h3>商品列表</h3>").insertBefore(".list");$("<p>总计: 5万元</p>").insertAfter(".list");// replaceWith(),原元素上操作$("h3").replaceWith("<p>购物车</p>");// replaceAll():新节点上操作$("<em>购物清单</em>").replaceAll("p:first-of-type");// remove(),在被删除的元素上操作// $(".list .item:last-of-type").remove();$(".list .item").last().remove();$(".list .item").remove(".item:nth-of-type(3)");// 如果新增的节点是已经在页面中存在的节点,那么执行的"移动"// $(".list .item:last").prependTo(".list");// 如果我只是想复制,不需要移动$(".list .item:last").clone().prependTo(".list");
<style>body {background-color: lightcyan;}form {background-color: #fff;display: grid;width: 15em;gap: 1em;box-shadow: 0 0 10px #888;padding: 1em;margin: 2em auto;}form input {border: none;border-bottom: 1px solid;outline: none;}form button:hover {cursor: pointer;font-weight: bolder;}</style><!-- onsubmit="return false" 禁止默认表单事件 --><!-- <form action="check.php" onsubmit="return false"> --><form action="check.php"><label>LOGIN:</label><input type="text" name="username" placeholder="UserName" autofocus /><input type="password" name="password" placeholder="Password" /><button>Submit</button></form><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script><script>// 原生禁用// document.forms[0].onsubmit = (ev) => ev.preventDefault();// jquery$("form").submit((ev) => ev.preventDefault());// 表单验证用户名,为空提示不能为空// 如果用户名已存在,提示用户重新注册一个const user = $('input[name="username"]');// 在失去焦点时立即验证user.blur(function () {// 提示信息let tips = "";// 用户列表const users = ["admin", "peter", "zhu"];// 非空验证if ($(this).val().length === 0) {tips = "用户名不能为空";$(this).focus();} else if (users.indexOf($(this).val()) === -1) {tips = `用户名不存在, <a href="register.php" style="text-decoration:none">请注册</a>`;} else {tips = `<i style="color:green">用户名正确</i>`;}if ($(this).next()[0].tagName !== "SPAN") {// 显示提示信息到页面中$("<span></span>").html(tips).css({color: "red",fontSize: "12px",}).insertAfter($(this));}});// 添加事件方式,更通用, on('事件类型', '事件回调'),// addEventListener('eventType', callback) : on()user.on("input", function () {if ($(this).next()[0].tagName === "SPAN") $(this).next().remove();});</script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script><button class="get"> $.get(): 请求数据</button><script>// 1. $.get(url, data, callback)$(".get").click((ev) => {// $.get("users.php?id=1", (data) => {$.get("users.php", { id: 2 }, (data) => {// console.log(data);// console.log(ev.target);$(ev.target).after("<div></div>").next().html(data);});});</script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script><button class="post"> $.post(): 请求数据</button><script>// 2. $.post(url, data, callback)$(".post").click(ev => {$.post("users.php", { id: 3 }, data => {$(ev.target).after("<div></div>").next().html(data);});});</script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script><button class="get">$.get(): 请求数据</button><button class="post">$.post(): 请求数据</button><script>// 3. $.ajax({...})$.ajax({type: "get",url: "users.php",data: { id: 2 },dataType: "html",success: (data) => console.log(data),});$(".post").click(() => {$.ajax({type: "post",url: "users.php",data: { id: 2 },dataType: "text",success: (data) => console.log(data),});});</script>
// jsonp: 跨域, 回调函数的调用语句在服务器端动态成生即可$(".jsonp").click((ev) => {$.ajax({type: "get",url: "http://world.io/test.php?id=2&callback=?",dataType: "jsonp",// jsonpCallback: "show",success: function (data) {console.log(data);let user = `${data.name} : ( ${data.email})`;$("button:last-of-type").after("<div></div>").next().html(user);},});});function show(data) {console.log(data);let user = `${data.name} : ( ${data.email})`;$("button:last-of-type").after("<div></div>").next().html(user);}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 创建一个Vue的根节点,Vue实例的作用域 --><div class="app"><p>用户名: {{username}}</p><p>{{username + ', php中文网讲师'}}</p><p>37 + 43 = {{37 + 43}}</p><p>{{flag ? '高兴' : '睡觉'}}</p></div><script>// 创建Vue实例const vm = new Vue({// 当前vue实例的配置// 1. 挂载点// el: document.querySelector('.app'),el: ".app",// 2. 数据注入/绑定,注入到了当前vue实例中data: {username: "天蓬老师",flag: false,},});console.log(vm.$el);// 既然$data已注入到vue实例中, 那么就可能当成vue的属性输出console.log(vm.$data.username);console.log(vm.username);// 3. 响应式vm.username = "灭绝师妹";</script>
<div class="app"><!-- <p>用户名: {{username}}</p> --><!-- vue中的指令以v-为前缀 --><!-- v-text : textContent --><p>用户名: <span v-text="username"></span></p><!-- v-html : innerHTML --><p>用户名: <span v-html="username"></span></p><!-- <p>用户名: <span v-once="username"></span></p> --></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const vm = new Vue({el: ".app",data: {username: "小张老师",},});vm.username = '<em style="color:red">西门老师</em>';</script>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
