jQuery 基本语法学习

jQuery 是一个 JavaScript 的函数库，封装了很多 JavaScript 的常用代码。
使用 jQuery，用很少的代码实现功能，如选择器，Ajax

jQuery()工厂函数

jQuery()函数是jQuery的全局基础函数，可简写为$()；
调用$()函数返回的是jQuery对象，却不是构造函数，而是工厂函数，所有jQuery的方法都需要通过工厂函数调用

$()工厂函数的四种使用方式

演示HTML元素

<div class="container">
      <ul>
        <a href="" id="logo">LOGO</a>
        <a href="">视频</a>
        <a href="">博客</a>
        <a href="" class="faq">问答</a>
      </ul>
    </div>

选择器

把$()函数作为css选择器，通过HTML元素的标签名、类、id等获取到元素，进而对元素进行处理

//元素选择
$("div").css({ border: "1px solid red ", width: "500px"});
//class类选择
$(".container").css("background-color", "lightblue");
//id选择
 $("#logo").css("color", "yellow");
//其它选择器
$("ul a:nth-of-type(2)").css("font-size", "1.2em");

效果图：

JS对象

把js对象包装成jQuery对象

var as = document.querySelectorAll("ul a");
$(as).css("text-decoration", "none");

效果图：

HTML元素

将HTML元素包装成jQuery对象

$("<a href=''>手册</a>").insertAfter(".faq");

效果图：

回调函数

当html文档结构加载完成后就会立即执行这个回调
在不同的浏览器中这个顺序会不一样，在Chrome浏览器中点弹出框之后背景演示才改变，而Firefox浏览器中弹出的时候就已经变了。

$(function () {
  $(document.body).css("background-color", "lightgreen");
  alert("页面加载完成");
});

效果图：

Chrome浏览器：

Firefox浏览器：

jQuery查询结果处理

toArray

将查询结果转为数组

var as = $("ul>a");
      //转为数组
      var asArr = as.toArray();
      console.log(asArr[0]);
      console.log(asArr[1]);

效果图：

$.each()遍历

 var res = as.each(function (index, value) {
        if (index === 2) {
          $(this).css("color", "white");
        }
      });

效果图：

$.map()遍历

必须要有返回值

res = as.map(function (value, index) {
        return value;
      });
      console.log(res);

效果图：

$.index()

返回查询结果中的索引

as.click(function () {
        alert("你点击了第" + ($(this).index() + 1) + "个A标签");
      });

效果图：

完整演示代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jQuery</title>
    <script src="../jquery-3.5.1.js"></script>
    <style></style>
  </head>
  <body>
    <div class="container">
      <ul>
        <a href="" id="logo">LOGO</a>
        <a href="">视频</a>
        <a href="">博客</a>
        <a href="" class="faq">问答</a>
      </ul>
    </div>
    <script>
      //jquery()工厂函数,简写$().
      //jQuery()函数的4种用法
      //1.选择器
      //元素选择
      $("div").css({ border: "1px solid red ", width: "500px" });
      //class类选择
      $(".container").css("background-color", "lightblue");
      //id选择
      $("#logo").css("color", "yellow");
      //其它选择器
      $("ul a:nth-of-type(2)").css("font-size", "1.2em");
      //2. js对象，把js对象包装成jQuery对象
      var as = document.querySelectorAll("ul a");
      $(as).css("text-decoration", "none");
      //3. HTML元素
      $("<a href=''>手册</a>").insertAfter(".faq");
      //4.回调函数
      $(function () {
        $(document.body).css("background-color", "lightgreen");
        alert("页面加载完成");
      });
      /*
    </script>
  </body>
</html>

获取和设置元素的属性值

html演示代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jQuery</title>
    <script src="../jquery-3.5.1.js"></script>
    <style></style>
  </head>
  <body>
    <div class="container">
        <h2></h2>
      <form action="" method="POST">
        <input type="text" name="username" />
        <input type="password" name="password" />
        <button>登录</button>
      </form>
    </div>
  </body>
</html>

attr()方法

attr(),用于设置和获取HTML元素的属性
$.attr(属性名)，获取元素的属性值
$.attr(属性名，属性值)，设置元素的属性并赋值

<script>
      var form = $("form");
        //获取属性
      console.log(form.attr("action")); //<empty string>
        //设置属性
      form.attr("action", "login.php");
      console.log(form.attr("action")); //login.php

css()方法

css()方法主要针对HTML元素的style属性进行操作，也可以获取到元素的所有样式

      console.log(form.css("border")); //<empty string>
    //通过js对象设置多个样式
      form.css({
        width: "400px",
        height: "200px",
        "background-color": "lightblue",
        "text-align": "center",
      });

val()方法

val()方法针对表单元素的值,

//val()
      //自动填充用户名密码
      console.log($("#password").val()); //<empty string>
      $("#password").val("password");
      $("#username").val("admin");
      console.log($("#password").val()); //password

html()/text()

设置元素标签的内容
html()可以识别内容中的HTML标签
text()纯文本内容

//html()/text()
      $("h2").html("<strong>用户登录</strong>");
      $("h3").text("<strong>用户登录</strong>");

jQuery操作DOM

html演示代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DOM操作</title>
    <script src="../jquery-3.5.1.js"></script>
    <style></style>
  </head>
  <body>
    <div class="container"></div>
    <script></script>
  </body>
</html>

元素的插入与替换

append(),在尾部插入元素
父元素.append(子元素)
子元素.appendTo(父元素)

<script>
      //添加元素
      $(".container").append("<ul>");
      //append
      $("ul").append("<li>第一记录</li>");
      //appendTo
      $("<li>").text("第二记录").css("color", "blue").appendTo("ul");

before() 添加元素到某个元素之前

$("ul>li:last-of-type").before("<li >第三记录</li>");

prepend、prependTo,插入元素到头部

("ul").prepend("<li>第四记录</li>");
      $("<li>").text("第五记录").css("color", "yellow").prependTo("ul");

replaceWith()替换元素

$("ul>li:nth-of-type(3)").replaceWith("<li>我的第一没了ku</li>");

——

过滤器

对查询结果进行再次筛选
filter()、first()、last()、eq()

 $("ul").append("<ul><li>第一记录</li><li>第二记录</li></ul>");
 //过滤器,filter()
 $("ul>li").filter("#first").css("background-color", "red");

 //eq(),根据索引选择
 $("ul>li").eq(3).css("background-color", "blue");

//find(),查找所有层级,last()查找结果中的最后一个
//$("ul").find("li").last().css("background-color", "yellow");

jQuery()工厂函数

$()工厂函数的四种使用方式

选择器

JS对象

HTML元素

回调函数

jQuery查询结果处理

toArray

$.each()遍历

$.map()遍历

$.index()

完整演示代码

获取和设置元素的属性值

attr()方法

css()方法

val()方法

html()/text()

jQuery操作DOM

元素的插入与替换

——

过滤器

相关文章