search

博客列表 >jQuery函数的四个参数、getter/setter方法

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

吳
吳 原创
2021年01月14日 03:35:12606浏览

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

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

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

2. getter/setter 方法

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

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

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

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

  • 用户登录表单css样式代码：

    1.   <style>
    2.       body {
    3.           display: flex;
    4.           flex-direction: column;
    5.           align-items: center;
    6.           color: #666;
    7.       }
    9.       form {
    10.           width: 400px;
    11.           /* height: 150px; */
    12.           padding: 20px 10px;
    13.           border: 1px solid #aaa;
    14.           box-shadow: 0 0 5px #888;
    15.           box-sizing: border-box;
    16.           background-color: #eee;
    17.           display: grid;
    18.           grid-template-columns: 80px 200px;
    19.           gap: 10px;
    20.           place-content: center center;
    21.       }
    23.       button {
    24.           grid-column: 2 / 3;
    25.           height: 26px;
    26.       }
    28.       button:hover {
    29.           color: white;
    30.           background-color: #888;
    31.           border: none;
    32.           cursor: pointer;
    33.       }
    35.       .red {
    36.           color: red;
    37.       }
    38.   </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
  7.         // 获取h2标签的源代码
  8.         console.log($("h2").html());
  9.         // 获取h2标签的文本
  10.         console.log($("h2").text());
  11.     </script>
上一条：jquery基础知识：jQuery参数四种类型|getter|setter方法实操下一条：轮播图添加左右翻页、鼠标移出自动播放、移入停止播放、选项卡
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多