jq：初学与 getter/setter方法

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>

jq：初学 与 getter/setter方法

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

1.$()的四个参数

2.getter/setter方法

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

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

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

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

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

4.html()

相关文章