一、$()四种应用场景
- 1、
$(选择器, 上下文) - 2、
$(js对象) - 3、
$(html文本) - 4、
$(callback) $(): 工厂函数jquery(), $ 代替了 jQuery- demo.html中要引入
lib/jquery-3.5.1.js
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>$()函数</title> </head> <body> <div id="first"> <li>item1</li> <li>item2</li> <li>item3</li> </div> <hr /> <div id="second"> <li>item1</li> <li>item2</li> <li>item3</li> </div> <script src="lib/jquery-3.5.1.js"></script> <script> // 1. $(选择器, 上下文) // 原生 document.querySelectorAll("li").forEach(function (item) { item.style.color = "red"; }); // jquery // $("li").css("color", "green"); // $()的第二参数, 上下文 //只更新第一组列表的颜色 $("li", "#first").css("color", "green"); $("li", "#second").css("color", "blue"); // 2. $(js原生对象) // 将js对象包装成一个jquery对象,从而可以直接调用jQuery中的方法 var lis = document.querySelectorAll("#second li"); console.log(lis); lis.forEach(function (item) { item.style.background = "yellow"; }); // 想使用jQuery中的css()方法,必须将lis包装/转换成一个jQuery对象 console.log($(lis)); $(lis).css("background-color", "cyan"); // 3. $(html文本) // 在第一个前面插入文本 $("<h2>Hello 世界</h2>").insertBefore("#first"); // 4. $(callback): 当html文档加载完成之后立即调用这个函数 $(function () { $(document.body).css({ background: "wheat", "font-size": "20px", }); }); </script> </body></html>
二、attr()的常用操作
- 1、
attr(): 获取元素的属性 - 2、
attr(name): 获取属性的值 - 3、
attr(name,value): 设置属性的值
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>getter / setter -1</title> <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> </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="lib/jquery-3.5.1.js"></script> <script> var form = $("form"); //1.获取元素的属性 console.log(form.attr("action")); // 2.设置属性 form.attr("action", "admin/check.php"); console.log(form.attr("action")); // 同时设置多个属性值 form.attr({ "action": "select.php?id=10", "method": 'Post' }); // attr()第二个参数支持回调 // 3.获取当前的method属性值 form.attr("action", function() { // 动态设置action // 根据请求的类型,动态设置action // get ==> query.php?id=1 // post ==> register.php var method = $(this).attr('method').toLowerCase(); console.log(method); // js表达式的的返回值,永远是等号的右边的值 return (method === "get") ? 'query.php?id=1' : 'register.php' }); </script> </body></html>
- 总结：
$()4种应用场景:选择器或上下文、js对象，html文本，callback$:函数, 函数对象$(): jQuery()对象attr():获取元素的属性,获取属性的值,设置属性的值
