简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > jQuery 基本语法学习
Blogger Information
Blog 32
fans 0
comment 0
visits 27679
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
jQuery 基本语法学习
Yang_Sir
Original
758 people have browsed it
  • jQuery 是一个 JavaScript 的函数库，封装了很多 JavaScript 的常用代码。
  • 使用 jQuery，用很少的代码实现功能，如选择器，Ajax

jQuery()工厂函数

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

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

演示HTML元素

  1. <div class="container">
  2.       <ul>
  3.         <a href="" id="logo">LOGO</a>
  4.         <a href="">视频</a>
  5.         <a href="">博客</a>
  6.         <a href="" class="faq">问答</a>
  7.       </ul>
  8.     </div>
选择器
  • 把$()函数作为css选择器，通过HTML元素的标签名、类、id等获取到元素，进而对元素进行处理
  1. //元素选择
  2. $("div").css({ border: "1px solid red ", width: "500px"});
  3. //class类选择
  4. $(".container").css("background-color", "lightblue");
  5. //id选择
  6.  $("#logo").css("color", "yellow");
  7. //其它选择器
  8. $("ul a:nth-of-type(2)").css("font-size", "1.2em");

效果图：

JS对象
  • 把js对象包装成jQuery对象
  1. var as = document.querySelectorAll("ul a");
  2. $(as).css("text-decoration", "none");

效果图：

HTML元素
  • 将HTML元素包装成jQuery对象
  1. $("<a href=''>手册</a>").insertAfter(".faq");

效果图：

回调函数
  • 当html文档结构加载完成后就会立即执行这个回调
  • 在不同的浏览器中这个顺序会不一样，在Chrome浏览器中点弹出框之后背景演示才改变，而Firefox浏览器中弹出的时候就已经变了。
  1. $(function () {
  2.   $(document.body).css("background-color", "lightgreen");
  3.   alert("页面加载完成");
  4. });

效果图：

Chrome浏览器：


Firefox浏览器：

jQuery查询结果处理

toArray
  • 将查询结果转为数组
  1. var as = $("ul>a");
  2.       //转为数组
  3.       var asArr = as.toArray();
  4.       console.log(asArr[0]);
  5.       console.log(asArr[1]);

效果图：

$.each()遍历
  1.  var res = as.each(function (index, value) {
  2.         if (index === 2) {
  3.           $(this).css("color", "white");
  4.         }
  5.       });

效果图：

$.map()遍历
  • 必须要有返回值
  1. res = as.map(function (value, index) {
  2.         return value;
  3.       });
  5.       console.log(res);

效果图：

$.index()
  • 返回查询结果中的索引
  1. as.click(function () {
  2.         alert("你点击了第" + ($(this).index() + 1) + "个A标签");
  3.       });

效果图：

完整演示代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>jQuery</title>
  7.     <script src="../jquery-3.5.1.js"></script>
  8.     <style></style>
  9.   </head>
  10.   <body>
  11.     <div class="container">
  12.       <ul>
  13.         <a href="" id="logo">LOGO</a>
  14.         <a href="">视频</a>
  15.         <a href="">博客</a>
  16.         <a href="" class="faq">问答</a>
  17.       </ul>
  18.     </div>
  19.     <script>
  20.       //jquery()工厂函数,简写$().
  21.       //jQuery()函数的4种用法
  23.       //1.选择器
  25.       //元素选择
  26.       $("div").css({ border: "1px solid red ", width: "500px" });
  27.       //class类选择
  28.       $(".container").css("background-color", "lightblue");
  29.       //id选择
  30.       $("#logo").css("color", "yellow");
  31.       //其它选择器
  32.       $("ul a:nth-of-type(2)").css("font-size", "1.2em");
  34.       //2. js对象，把js对象包装成jQuery对象
  35.       var as = document.querySelectorAll("ul a");
  36.       $(as).css("text-decoration", "none");
  38.       //3. HTML元素
  39.       $("<a href=''>手册</a>").insertAfter(".faq");
  41.       //4.回调函数
  42.       $(function () {
  43.         $(document.body).css("background-color", "lightgreen");
  44.         alert("页面加载完成");
  45.       });
  46.       /*
  47.     </script>
  48.   </body>
  49. </html>

获取和设置元素的属性值

html演示代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>jQuery</title>
  7.     <script src="../jquery-3.5.1.js"></script>
  8.     <style></style>
  9.   </head>
  10.   <body>
  11.     <div class="container">
  12.         <h2></h2>
  13.       <form action="" method="POST">
  14.         <input type="text" name="username" />
  15.         <input type="password" name="password" />
  16.         <button>登录</button>
  17.       </form>
  18.     </div>
  19.   </body>
  20. </html>

attr()方法

  • attr(),用于设置和获取HTML元素的属性
  • $.attr(属性名)，获取元素的属性值
  • $.attr(属性名，属性值)，设置元素的属性并赋值
  1. <script>
  2.       var form = $("form");
  3.         //获取属性
  4.       console.log(form.attr("action")); //<empty string>
  5.         //设置属性
  6.       form.attr("action", "login.php");
  7.       console.log(form.attr("action")); //login.php

css()方法

  • css()方法主要针对HTML元素的style属性进行操作，也可以获取到元素的所有样式
  1.       console.log(form.css("border")); //<empty string>
  2.     //通过js对象设置多个样式
  3.       form.css({
  4.         width: "400px",
  5.         height: "200px",
  6.         "background-color": "lightblue",
  7.         "text-align": "center",
  8.       });

val()方法

  • val()方法针对表单元素的值,
  1. //val()
  2.       //自动填充用户名密码
  3.       console.log($("#password").val()); //<empty string>
  4.       $("#password").val("password");
  5.       $("#username").val("admin");
  6.       console.log($("#password").val()); //password

html()/text()

  • 设置元素标签的内容
  • html()可以识别内容中的HTML标签
  • text()纯文本内容
  1. //html()/text()
  2.       $("h2").html("<strong>用户登录</strong>");
  3.       $("h3").text("<strong>用户登录</strong>");

jQuery操作DOM

html演示代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>DOM操作</title>
  7.     <script src="../jquery-3.5.1.js"></script>
  8.     <style></style>
  9.   </head>
  10.   <body>
  11.     <div class="container"></div>
  12.     <script></script>
  13.   </body>
  14. </html>

元素的插入与替换

  • append(),在尾部插入元素
  • 父元素.append(子元素)
  • 子元素.appendTo(父元素)
  1. <script>
  2.       //添加元素
  3.       $(".container").append("<ul>");
  4.       //append
  5.       $("ul").append("<li>第一记录</li>");
  6.       //appendTo
  7.       $("<li>").text("第二记录").css("color", "blue").appendTo("ul");

  • before() 添加元素到某个元素之前
  1. $("ul>li:last-of-type").before("<li >第三记录</li>");

  • prepend、prependTo,插入元素到头部
  1. ("ul").prepend("<li>第四记录</li>");
  2.       $("<li>").text("第五记录").css("color", "yellow").prependTo("ul");

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

——

过滤器

  • 对查询结果进行再次筛选
  • filter()、first()、last()、eq()
  1.  $("ul").append("<ul><li>第一记录</li><li>第二记录</li></ul>");
  2.  //过滤器,filter()
  3.  $("ul>li").filter("#first").css("background-color", "red");

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

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

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：jquery的用处还是很大的, 至少现在还是
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！