收藏
天蓬老师批改状态：合格
老师批语：
$(选择器,上下文): 获取元素$(js对象): jQuiey包装器,js对象是原生的js对象,将原生的js对象转为jQuery对象$(html文本): 生成dom元素$(callback回调函数):传一个回调当参数,当页面加载完成后会自动调用它
<title>$()</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script><script>$(function () { // 回调函数$("<li>今天要晚起</li>").appendTo(document.querySelector("#first"));console.log(document.querySelector("#first"));});</script><body><ul id="first"><li>item1</li><li>item2</li><li>item3</li></ul><ul id="second"><li>item1</li><li>item2</li><li>item3</li></ul><script>//$(选择器,上下文): 获取元素 原生document.querySelectorAll("li").forEach((li) => (li.style.color = "blue"));$("#first li").css("color", "green"); // jquerydocument.body.style.backgroundColoe = "yellow"; // 因为想使用jQuery对象上的非常丰富的方法或属性$(document.body).css("background", "lightgreen"); //想用jquery中的css方法来设置style属性(内联样式)//将jquery对象还原成原生的js对象集合 ....spread扩展,....rest归并console.log($(document.querySelectorAll("li")).get(2));// get(n),[n]: 将jQuery集合中的某一个对象还原成原生的js对象$(document.querySelectorAll("li")).get(2).style.backgroundColor ="violet";$(document.querySelectorAll("li"))[0].style.backgroundColor = "white";document //$(html文本): 生成dom元素.querySelector("#first").insertAdjacentHTML("beforeend", "<li>大家晚上好呀~~</li>");console.log($("<li>大家晚上好呀~~</li>"));$("<li>今天吃了吗?</li>").appendTo(document.querySelector("#first"));</script></body>
<body><h2 class="red">用户登录</h2><form action="handle.php" method="post"><label for="email">账号:</label><input type="email" name="email" id="email" autofocus value="leture@php.cn" /><label for="password">密码:</label><input type="password" name="password" id="password" value="不少于六位" /><label for="confirm">记住密码:</label><div><input type="radio" name="save" id="confirm" value="1" checkeb /><label for="confirm">保存</label><input type="radio" name="save" id="cancel" value="0" /><labelfor="cancel">返回</label></div><button>登录</button></form><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script><script>// attr():获取/设置元素属性// attr(name):getter / attr(name,value): setterconst form = $("form");console.log(form.attr("action"));form.attr("action", "admin/check.php");console.log(form.attr("action"));// 第二个参数使用回调form.attr("action", () => {let method = form.attr("method").toUpperCase();return method === "GET" ? "query.php?id=2" : "register.php";});console.log(form.attr("action"));</script></body></html>
<style>body {display: flex;flex-direction: column;align-items: center;color: violet;}form {width: 400px;/* height: 150px; */padding: 20px 10px;border: 1px solid blue;box-shadow: 0 0 5px blueviolet;box-sizing: border-box;background-color: #eee;display: grid;grid-template-columns: 80px 200px;gap: 10px;place-content: center center;}button {grid-column: 2/3;height: 26px;}button:hover {color: white;background-color: #bbbbbb;border: none;cursor: pointer;}.red {color: red;}</style>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
