jQuery函数的四个参数、getter/setter方法

2021年01月14日 03:35:12阅读数:22博客 / / JavaScript

1. $()函数的四个参数

$()函数的四个参数
1.选择器
2.原生js对象(包装功能)
3.html字符串,创建dom元素
4.回调函数,在页面加载完成,dom树创建成功后自动调用

  1. <html lang="en">
  2. <head>
  3. <meta charset="UTF-8">
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <title>$()</title>
  6. <!-- 引入远程js文件 -->
  7. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  8. </head>
  9. <body>
  10. <ul id="first">
  11. <li>test1</li>
  12. <li>test2</li>
  13. <li>test3</li>
  14. <li>test4</li>
  15. </ul>
  16. <ul class="second">
  17. <li>test1</li>
  18. <li>test2</li>
  19. <li>test3</li>
  20. <li>test4</li>
  21. </ul>
  22. <script>
  23. // 1.选择器:$(选择器,上下文):获取元素
  24. // 获取第一个ul的所有子元素,设置字体颜色为蓝色
  25. $("#first li").css("color", "blue");
  26. // 2.$(js对象):jQuery包装器
  27. $(document.body).css("background", "lightblue");
  28. // 设置第一个ul的第三个li背景色
  29. $(document.querySelectorAll("li")).get(2).style.backgroundColor = "yellow";
  30. // 3.$(html文本):生成dom元素
  31. // 给第一个ul生成一个li
  32. $("<li>hellow world</li>").appendTo(document.querySelector("#first"));
  33. // 4.$(callback回调函数):当页面加载完成,dom树创建成功后自动调用
  34. $(function () {
  35. $("<li>php中文网</li>").appendTo(document.querySelector("#first"));
  36. });
  37. </script>
  38. </body>
  39. </html>

2. getter/setter 方法

  • attr():获取/设置元素属性

  1. <html lang="en">
  2. <head>
  3. <meta charset="UTF-8">
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <title>getter/setter1</title>
  6. </head>
  7. <body>
  8. <h2 class="red">用户登录</h2>
  9. <form action="handle.php" method="get">
  10. <label for="email">Email:</label>
  11. <input type="email" name="email" id="email" autofocus value="leture@php.cn" />
  12. <label for="password">Password:</label>
  13. <input type="password" name="password" id="password" value="不少于6位" />
  14. <label for="confirm">记住我:</label>
  15. <div>
  16. <input type="radio" name="save" id="confirm" value="1" checked /><label for="confirm">保存</label>
  17. <input type="radio" name="save" id="cancel" value="0" /><label for="cancel">放弃</label>
  18. </div>
  19. <button>登录</button>
  20. </form>
  21. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  22. <script>
  23. // attr():获取/设置元素属性
  24. // attr(name):getter
  25. // attr(name,value):setter
  26. const form = $("form");
  27. // 获取form的action值
  28. console.log(form.attr("action"));
  29. // 设置from的action值
  30. form.attr("action", "admin/login.php");
  31. console.log(form.attr("action"));
  32. // 第二个参数支持回调
  33. form.attr("action", () => {
  34. let method = form.attr("method").toUpperCase();
  35. return method === "GET" ? "index/login.php" : "index/register.php";
  36. });
  37. console.log(form.attr("action"));
  38. </script>
  39. </body>
  40. </html>
  • css():设置元素的行内样式 style

  1. <html lang="en">
  2. <head>
  3. <meta charset="UTF-8">
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <title>css()</title>
  6. </head>
  7. <body>
  8. <h2 class="red">用户登录</h2>
  9. <form action="handle.php" method="post">
  10. <label for="email">Email:</label>
  11. <input type="email" name="email" id="email" autofocus value="leture@php.cn" />
  12. <label for="password">Password:</label>
  13. <input type="password" name="password" id="password" value="不少于6位" />
  14. <label for="confirm">记住我:</label>
  15. <div>
  16. <input type="radio" name="save" id="confirm" value="1" checked /><label for="confirm">保存</label>
  17. <input type="radio" name="save" id="cancel" value="0" /><label for="cancel">放弃</label>
  18. </div>
  19. <button>登录</button>
  20. </form>
  21. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  22. <script>
  23. // css():设置元素的行内样式 style
  24. // css(name):getter
  25. // css(name,value):setter
  26. // css(name,callback)
  27. const form = $("form");
  28. // 获取form样式表里的width宽度
  29. console.log(form.css("width"));
  30. // 设置form的顶部边框颜色
  31. form.css("border-top", "6px solid lightgreen");
  32. // 批量设置form的样式
  33. form.css({
  34. "border-bottom": "6px solid yellow",
  35. "background-color": "lightyellow",
  36. });
  37. // 第二个参数支持回调函数:设置每次打开背景色不同
  38. form.css("background-color", () => {
  39. const colors = ["pink", "lightblue", "red", "violet"];
  40. // 四个颜色对应的下表,索引是 0 - 3
  41. let i = Math.floor(Math.random() * colors.length);
  42. return colors[i];
  43. });
  44. </script>
  45. </body>
  46. </html>
  • val():获取表单控件的值

  1. <html lang="en">
  2. <head>
  3. <meta charset="UTF-8">
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <title>val()</title>
  6. </head>
  7. <body>
  8. <h2 class="red">用户登录</h2>
  9. <form action="handle.php" method="post" id="login">
  10. <label for="email">Email:</label>
  11. <input type="email" name="email" id="email" autofocus value="leture@php.cn" />
  12. <label for="password">Password:</label>
  13. <input type="password" name="password" id="password" value="不少于6位" />
  14. <label for="confirm">记住我:</label>
  15. <div>
  16. <input type="radio" name="save" id="confirm" value="1" /><label for="confirm">保存</label>
  17. <input type="radio" name="save" id="cancel" value="0" checked /><label for="cancel">放弃</label>
  18. </div>
  19. <button>登录</button>
  20. </form>
  21. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  22. <script>
  23. // val():获取表单控件的value属性
  24. console.log($("#email").val());
  25. // 设置
  26. $("#email").val("admin@qq.com");
  27. console.log($("#email").val());
  28. // 获取密码框的value值
  29. console.log($('input:password').val());
  30. // 获取单选框的值
  31. console.log($("input:radio:checked").val());
  32. // val(callback)
  33. $("#email").val(() => "php中文网@php.cn")
  34. </script>
  35. </body>
  36. </html>
  • 用户登录表单css样式代码:

    1. <style>
    2. body {
    3. display: flex;
    4. flex-direction: column;
    5. align-items: center;
    6. color: #666;
    7. }
    8. form {
    9. width: 400px;
    10. /* height: 150px; */
    11. padding: 20px 10px;
    12. border: 1px solid #aaa;
    13. box-shadow: 0 0 5px #888;
    14. box-sizing: border-box;
    15. background-color: #eee;
    16. display: grid;
    17. grid-template-columns: 80px 200px;
    18. gap: 10px;
    19. place-content: center center;
    20. }
    21. button {
    22. grid-column: 2 / 3;
    23. height: 26px;
    24. }
    25. button:hover {
    26. color: white;
    27. background-color: #888;
    28. border: none;
    29. cursor: pointer;
    30. }
    31. .red {
    32. color: red;
    33. }
    34. </style>
  • html() txext()

html():innerHTML
text():innerTetx / textContent

  1. <h2 class="red">hello<em style="color: green">world</em></h2>
  2. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  3. <script>
  4. // html():innerHTML
  5. // text():innerTetx / textContent
  6. // 获取h2标签的源代码
  7. console.log($("h2").html());
  8. // 获取h2标签的文本
  9. console.log($("h2").text());
  10. </script>
批改状态:合格

老师批语:

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
  • 博主信息
    吳
    博文
    24
    粉丝
    2
    评论
    0
    访问量
    1579
    积分:0
    P豆:50