jq：初学与 getter/setter方法 - 前端学习

Home > List of blog posts > jq：初学与 getter/setter方法

Blogger Information

Blog 29

fans 0

comment 0

visits 19774

Special Recommendation

More>

Related recommendations

jq导入方法：本地源码与远程代码库

    <!-- 本地源码 ：使用下载好的本地文件-->
    <!-- <script src="jquery-3.5.1.js"></script> -->
    <!-- 远程源码库cdn -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

1.$()的四个参数

$(选择器,上下文): 获取元素
$(js对象): jQuiery包装器,js对象是原生的js对象,将原生的js对象转为jQuery对象
$(html文本): 生成dom元素
$(callback回调函数):传一个回调当参数,当页面加载完成后会自动调用它

代码演示

    // $()拿到的是一个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回调函数):传一个回调当参数,当页面加载完成后会自动调用它

2.getter/setter方法

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

获取，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"));

2.css()：获取/设置元素的行内样式

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>

css(name): getter 获取元素的行内样式

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直接就可以获取到元素的最终的计算样式了

css(name,value):setter 设置元素行内样式

      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-3
        let i = Math.floor(Math.random() * colors.length);
        return colors[i];
      });

3. val():设置/获取表单控件的value属性

<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);
      // jquery
      console.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>

4.html()

  <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 / textContent
      console.log(document.querySelector("h2").innerHTML);
      // jquery
      console.log($("h2").html());
      // 只获取纯文本
    </script>
  </body>

Correction status：Uncorrected

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

01-03上课操作

2019-12-21 23:01:15