收藏
批改状态：未批改
老师批语：
<!-- 本地源码 ：使用下载好的本地文件--><!-- <script src="jquery-3.5.1.js"></script> --><!-- 远程源码库cdn --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
代码演示
// $()拿到的是一个jquery对象，不是数组。它是一个集合，自带循环。// 1. $(选择器,上下文): 获取元素// 原生document.querySelectorAll("li").forEach(li => (li.style.color = "red"));// jquery// $("li","#second").css("color","blue")// 可以简写成下面这样，不用第二个 上下文。 第二个参数 ‘上下文’ 很少用。$("#second li").css("color", "blue")// 2. $(js对象): jQuiery包装器,js对象是原生的js对象,将原生的js对象转为jQuery对象// 因为想使用jQuery对象上的非常丰富的方法或属性// 原生document.body.style.backgroundColor = "yellow";// jquery 想用jquery中的css方法来设置style属性(内联样式)$(document.body).css("background", "lightgreen");// 将jquery对象还原成原生的js对象集合// ....spread扩展, ....rest归并// console.log([...$(document.querySelectorAll("li"))]);// [...$(document.querySelectorAll("li"))].forEach(li => (li.style.color = "violet"));// ↑ 同下 ↓// document.querySelectorAll("li").forEach(li => (li.style.color = "violet"));// console.log($(document.querySelectorAll("li")).get(2));// get(n)或[n]: 将jQuery集合中的某一个对象还原成原生的js对象$(document.querySelectorAll("li")).get(2).style.backgroundColor = "yellow"; //获取第2个$(document.querySelectorAll("li"))[0].style.backgroundColor = "yellow"; //获取第0个// 3. $(html文本): 生成dom元素document.querySelector("#first").insertAdjacentHTML("beforeend", "<li>大家晚上好呀~~</li>");// console.log($("<li>大家晚上好呀~~</li>"));// $("<li>大象吃完了吗?</li>").appendTo(document.querySelector("#first"));// 4. $(callback回调函数):传一个回调当参数,当页面加载完成后会自动调用它
获取，attr(name):getter
const form=$("form");console.log(form.attr("action"));//index.php
获取并修改，attr(name,value): setter
form.attr("action","admin/index.php");console.log(form.attr("action"));//admin/index.php
第二个参数可以使用回调
form.attr("action", () => {let method = form.attr("method").toUpperCase();return method === "GET" ? "query.php?id=2" : "register.php";});console.log(form.attr("action"));
css代码
<style>form{width: 100px;}input{width: 95%;}</style>
html代码
<form action="index.php" method="POST">帐号： <input type="text" name="username" />密码：<input type="password" name="password" /></form>
const form = $("form");console.log(form.css("width"));
// 使用style只能获取到style属性上的行内/内联样式console.log(document.querySelector("form").style.width);// css样式表的样式是获取不到的,必须使用计算样式才可以console.log(window.getComputedStyle(document.querySelector("form"), null).getPropertyValue("width"));// 使用jquery直接就可以获取到元素的最终的计算样式了
form.css("border-top", "6px solid green");// css(obj)form.css({"border-bottom": "6px solid blue","background-color": "lightcyan",});
支持回调
// 第二个参数支持回调函数form.css("background-color", () => {const colors = ["pink", "lightblue", "lime", "yellow"];// 四个元素,对应的下标,索引是 0-3let i = Math.floor(Math.random() * colors.length);return colors[i];});
<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(document.forms.login.email.value);// jqueryconsole.log($("#email")[0].value);console.log($("#email").get(0).value);console.log($("#email").val());// 也可以设置新值$("#email").val("admin@php.cn");console.log($("#email").val());// 这样也可以console.log($("input:password").val());// 查看状态console.log($("input:radio:checked").val());// val(callback)$("#email").val(()=>"123@.email")</script></body>
<body><h2 class="red">用户<em style="color: green">登录</em></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>// html(): 相当于innerHTML// text(): 相当于innerText / textContentconsole.log(document.querySelector("h2").innerHTML);// jqueryconsole.log($("h2").html());// 只获取纯文本</script></body>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
