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

Home > List of blog posts > jQuery函数的四个参数、getter/setter方法

Blogger Information

Blog 47

fans 3

comment 0

visits 38268

Special Recommendation

More>

Related recommendations

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

$()函数的四个参数
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>

2. getter/setter 方法

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)：setter
        const 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 - 3
            let 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>

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

值传递与引用传递、数组对象解构、bind,Call,apply、访问器、流程控制、三元运算

2021-01-06 01:59:18