收藏
天蓬老师批改状态：合格
老师批语：
$()函数的四个参数
1.选择器
2.原生js对象（包装功能）
3.html字符串，创建dom元素
4.回调函数，在页面加载完成，dom树创建成功后自动调用
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>$()</title><!-- 引入远程js文件 --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script></head><body><ul id="first"><li>test1</li><li>test2</li><li>test3</li><li>test4</li></ul><ul class="second"><li>test1</li><li>test2</li><li>test3</li><li>test4</li></ul><script>// 1.选择器：$(选择器，上下文)：获取元素// 获取第一个ul的所有子元素，设置字体颜色为蓝色$("#first li").css("color", "blue");// 2.$(js对象)：jQuery包装器$(document.body).css("background", "lightblue");// 设置第一个ul的第三个li背景色$(document.querySelectorAll("li")).get(2).style.backgroundColor = "yellow";// 3.$(html文本)：生成dom元素// 给第一个ul生成一个li$("<li>hellow world</li>").appendTo(document.querySelector("#first"));// 4.$(callback回调函数)：当页面加载完成，dom树创建成功后自动调用$(function () {$("<li>php中文网</li>").appendTo(document.querySelector("#first"));});</script></body></html>
attr():获取/设置元素属性
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>getter/setter1</title></head><body><h2 class="red">用户登录</h2><form action="handle.php" method="get"><label for="email">Email:</label><input type="email" name="email" id="email" autofocus value="leture@php.cn" /><label for="password">Password:</label><input type="password" name="password" id="password" value="不少于6位" /><label for="confirm">记住我:</label><div><input type="radio" name="save" id="confirm" value="1" checked /><label for="confirm">保存</label><input type="radio" name="save" id="cancel" value="0" /><label for="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");// 获取form的action值console.log(form.attr("action"));// 设置from的action值form.attr("action", "admin/login.php");console.log(form.attr("action"));// 第二个参数支持回调form.attr("action", () => {let method = form.attr("method").toUpperCase();return method === "GET" ? "index/login.php" : "index/register.php";});console.log(form.attr("action"));</script></body></html>
css()：设置元素的行内样式 style
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css()</title></head><body><h2 class="red">用户登录</h2><form action="handle.php" method="post"><label for="email">Email:</label><input type="email" name="email" id="email" autofocus value="leture@php.cn" /><label for="password">Password:</label><input type="password" name="password" id="password" value="不少于6位" /><label for="confirm">记住我:</label><div><input type="radio" name="save" id="confirm" value="1" checked /><label for="confirm">保存</label><input type="radio" name="save" id="cancel" value="0" /><label for="cancel">放弃</label></div><button>登录</button></form><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script><script>// css():设置元素的行内样式 style// css(name):getter// css(name,value):setter// css(name,callback)const form = $("form");// 获取form样式表里的width宽度console.log(form.css("width"));// 设置form的顶部边框颜色form.css("border-top", "6px solid lightgreen");// 批量设置form的样式form.css({"border-bottom": "6px solid yellow","background-color": "lightyellow",});// 第二个参数支持回调函数:设置每次打开背景色不同form.css("background-color", () => {const colors = ["pink", "lightblue", "red", "violet"];// 四个颜色对应的下表，索引是 0 - 3let i = Math.floor(Math.random() * colors.length);return colors[i];});</script></body></html>
val():获取表单控件的值
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>val()</title></head><body><h2 class="red">用户登录</h2><form action="handle.php" method="post" id="login"><label for="email">Email:</label><input type="email" name="email" id="email" autofocus value="leture@php.cn" /><label for="password">Password:</label><input type="password" name="password" id="password" value="不少于6位" /><label for="confirm">记住我:</label><div><input type="radio" name="save" id="confirm" value="1" /><label for="confirm">保存</label><input type="radio" name="save" id="cancel" value="0" checked /><label for="cancel">放弃</label></div><button>登录</button></form><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script><script>// val():获取表单控件的value属性console.log($("#email").val());// 设置$("#email").val("admin@qq.com");console.log($("#email").val());// 获取密码框的value值console.log($('input:password').val());// 获取单选框的值console.log($("input:radio:checked").val());// val(callback)$("#email").val(() => "php中文网@php.cn")</script></body></html>
用户登录表单css样式代码：
<style>body {display: flex;flex-direction: column;align-items: center;color: #666;}form {width: 400px;/* height: 150px; */padding: 20px 10px;border: 1px solid #aaa;box-shadow: 0 0 5px #888;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: #888;border: none;cursor: pointer;}.red {color: red;}</style>
html() txext()
html():innerHTML
text():innerTetx / textContent
<h2 class="red">hello<em style="color: green">world</em></h2><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script><script>// html():innerHTML// text():innerTetx / textContent// 获取h2标签的源代码console.log($("h2").html());// 获取h2标签的文本console.log($("h2").text());</script>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
