31_JQuery一文读懂，JS的升级版

最新推荐文章于 2024-08-14 10:08:54 发布
最新推荐文章于 2024-08-14 10:08:54 发布
阅读量573 收藏 24
点赞数 20
分类专栏： JavaWeb 文章标签： javascript jquery 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44682264/article/details/140334296
版权

今日内容

零、 复习昨日
一、JQuery

零、 复习昨日

1 js数组的特点(长度,类型,方法)
- js数组的长度不限
- 类型不限
- 提供很多方法

2 js中==和===的区别
- == 判断数值相等
- === 判断数值和数据类型同时相等

3 js表单事件的事件名(事件属性单词)
- 获得焦点 onfocus
- 失去焦点 onblur
- 内容改变 onchange
- 表单提交 onsubmit

4 写一个json串代表人对象
  有数字类型id,字符串类型name,布尔类型sex,数组phoneArr中存手机号,
  对象child存储孩子信息(姓名,性别,年龄)
{
   id:1,
   name:"zs",
   sex:true,
   phoneArr;["11000","120000"],
   child:{
	 id:2,
	 name:"xz",
	 age:1
   },
   wife:[
	{id:2,name:"小美"},
	{id:3,name:"小丽"},
	{}
   ],
   work:function(){
	
   },
   work2(){
   }
}

5 假设有<input id="i1">标签,如何获得它输入框中的值?
var i1 = document.getElementById("i1");
var val = i1.value;

6JS函数写法:
function a(){

}
--- 匿名函数 ---
i1.onclick = function (){

}

7dom操作:
获得/设置开闭标签内的内容  对象.innerHTML,对象.innerText
获得/设置属性值            对象.属性
获得/设置样式              对象.style.css属性

一、引言

1.1 jQuery概述

原生js获得dom对象: var i = document.getElementById(“i1”)

原生js获得输入框的值: i1.value

原生js设置输入框的值: i1.value = “zzz”

JQuery获得dom对象: var i = $(“#i1”)

jQuery获得输入框的值: i1.val()

jQuery设置输入框的值: i1.val(“zzz”)

jQuery是一个快速、简洁的JavaScript代码库。jQuery设计的宗旨是“Write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript操作方式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

Logo
image-20230311161635225

1.2 jQuery特点

  • 具有独特的链式调用语法。
  • 支持高效灵活的CSS选择器。
  • 拥有丰富的插件。
  • 兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

1.3 为什么要用jQuery

  • 目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。很多大公司都在使用 jQuery， 例如：Google、Microsoft、IBM、Netflix

二、jQuery引入

在HTML页面中使用jquery,就需要先引入jquery

2.1 直接引用jQuery

从 jQuery.com 官网或从GitHub下载合适版本（本课程使用2.1.0版本），放入项目的合适目录中，在页面中直接引用。

有两个版本的 jQuery 可供下载：

  • xxx.min.js 这种是Production version - 用于生产实际的网站中，已被精简和压缩。
  • xxx.js 这种 Development version - 用于测试和开发（未压缩，便于可读）。

jQuery 库是一个 JavaScript 文件，使用 HTML 的 < script src=“”>< /script> 标签引用

<head>
	<script src="jquery-2.1.0.js"></script>
    <!-- <script src="jquery-2.1.0.min.js"></script> -->
</head>

2.2 CDN引用

2.2.1 什么是CDN？

CDN的全称是Content Delivery Network，即内容分发网络 , 使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。

2.2.2 常见 CDN

百度 CDN

<head>
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
	</script>
</head>

新浪 CDN

<head>
	<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
	</script>
</head>

Google CDN

<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
	</script>
</head>

Microsoft CDN

<head>
	<script src="http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
	</script>
</head>

三、选择器[重点]

学习JQuery,主要学习DOM操作,事件处理,动画效果,AJAX交互

其他JS语法,例如:基本数据类型,运算,分支循环,数组,日期,JSON等等基础语法一样使用.

选择器就是js中dom查找的简化

document.getElementById("id") --> $("#id")
document.getElementsByTagName("div") --> $("div")
document.getElementsByClassName("c1") --> $(".c1")

选择器有很多种,具体查询APIjQuery 参考手册 - 选择器 (w3school.com.cn)

主要学习几个基本即可

  • 标签名
  • id
  • 类

3.1 元素选择器

  • 元素选择器：jQuery 元素选择器基于元素名选取元素。

  • 示例：在页面中选取所有

    元素 

  <body>
    <div>曹操</div>
    <div>曹植</div>
    <div>曹丕</div>
    <span>曹冲</span>
    <script src="./js/jquery-2.1.0.js"></script>
    <script>
      // 标签名选择器,选到所有同名标签,返回数组
      var divArr = $("div");
      console.log(divArr);
    </script>
  </body>

3.2 id选择器

  • id选择器：jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

  • 页面中元素的 id 应该是唯一的，所以要在页面中选取唯一的元素需要通过 #id 选择器。通过 id 选取元素语法如下：

  <body>
    <div id="d1">曹操</div>
    <div id="d2">曹植</div>
    <div id="d3">曹丕</div>
    <span id="d4">曹冲</span>
    <script src="./js/jquery-2.1.0.js"></script>
    <script>
     
      // id选择器,标签加id属性,$()内要#号
      // 选择到一个标签
      var div1 = $("#d1");
      console.log(div1);
    </script>
  </body>

3.3 类选择器

  • class选择器：jQuery 类选择器可以通过指定的 class 查找元素。

  • 语法如下：

  <body>
    <div id="d1">曹操</div>
    <div id="d2" class="son">曹植</div>
    <div id="d3" class="son">曹丕</div>
    <span id="d4" class="son">曹冲</span>
    <script src="./js/jquery-2.1.0.js"></script>
    <script>
      // 类选择器,标签加class属性,$()内要.class
      // 选择到同class的多个标签,返回数组
      var sonArr = $(".son");
      console.log(sonArr);
    </script>
  </body>

3.4 其他选择器

查看API

3.5 演示代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <ul>
        <li id="i1">刘备</li>
        <li>关羽</li>
        <li>张飞</li>
        <li class="tang">秦琼</li>
        <li class="tang">尉迟敬德</li>
    </ul>
    <hr>
    <div>
        <span>div1-span</span>
        <p>
            <span>div1-p-span</span>
        </p>
    </div>
    <hr>
    <input type="username">
    <input type="password">
    <script src="../js/jquery-2.1.0.js"></script>
    <script>
        // 通过id选择标签 #id
        var i1 = $("#i1");
        console.log(i1);

        // 通过标签名选择  element
        var liArr = $("li");
        console.log(liArr);

        // 通过类名选择 .class
        var liArr2 = $(".tang");
        console.log(liArr2);

        // 组合选择  selector1,selector2
        var arr = $("#i1,.tang")
        console.log(arr);

        // 后代选择 selector1 selector2
        var arr2 = $("div span")
        console.log(arr2);

        // 父子选择 selector1 > selector2
        var arr3 = $("div>span")
        console.log(arr3);

        // 属性选择器
        var arr4 = $("[type]")
        console.log(arr4);

        // 属性+值选择器
        var arr5 = $("[type=password]")
        console.log(arr5);
    </script>
</body>
</html>

五、事件[重点]

5.1 常见事件

jquery中的事件,就是将之前js中事件属性去掉on,并这些事件封装函数

鼠标事件键盘事件表单事件文档/窗口事件
clickkeypresssubmitload
dblclickkeydownchangeresize
mouseenterkeyupfocusscroll
mouseleaveblurunload

5.2 事件语法

js中
js对象.on事件 = function(){}

jq中
jq对象.事件(function(){}) 或者 jq对象.事件(()=>{})
  • jQuery 事件方法语法：

  • jq对象.事件方法(回调函数),例如

  • $(“#i1”).click(function(){})

  • $(“#i1”).click(() => {})

    • $(“#i1”)事件源
    • click 事件
    • () => {} 事件响应

5.3 鼠标事件

  <body>
    <button id="btn-1">点单击事件</button>
    <button id="btn-2">点双击击事件</button>
    <div
      id="box"
      style="width: 200px; height: 200px; border: 2px red solid"
    ></div>
    <script src="./js/jquery-2.1.0.js"></script>
    <script>
      var count = 0;
      /**
       * 1 选择事件源
       * 2 绑定事件
       * 3 设置响应函数
       */
      $("#btn-1").click(function () {
        count++;
        console.log("单击:" + count);
      });
      // 箭头函数 es6的新语法
       $("#btn-1").click(() => {
         alert("jq-点击事件")
       })
        
      $("#btn-2").dblclick(function () {
        console.log("双击");
      });
      //   $("#box").mouseover(function () {
      //     console.log("鼠标进入");
      //   });
      //   $("#box").mouseout(function () {
      //     console.log("鼠标离开");
      //   });

      // 链式语法,其实就是链式调用,连着调用
      $("#box").mouseover(function () {
          console.log("鼠标进入");
      }).mouseout(function () {
          console.log("鼠标离开");
      }).mousemove(function () {
          console.log("鼠标移动");
      });
    </script>
  </body>

5.4 键盘事件

  • keydown
  • keyup
  • keypress
  <body>
    <!-- 演示键盘事件 -->
    <input id="input-1" />
    <script src="./js/jquery-2.1.0.js"></script>
    <script>
      /**
       * 1 选择事件源
       * 2 绑定事件
       * 3 设置响应函数
       */
      $("#input-1").keydown((event) => {
          console.log("键盘按下");
          if (event.keyCode == 13) {
            console.log("按下回车,提交表单");
          }
        }).keyup(() => {
          console.log("键盘弹起");
        }).keypress(function () {
          console.log("键盘按压");
        });
    </script>
  </body>

5.5 表单事件[重点]

  • focus
  • blur
  • change
  • submit
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        用户名<input><br>
        专业<select>
                <option>Java</option>
                <option>云计算</option>
                <option>物联网</option>
          </select><br>
          <input type="submit" value="提交">
    </form>
    <script src="../js/jquery-2.1.0.js"></script>
    <script>
        $("input").first().focus(() => {
            console.log("获得焦点");
        }).blur(() => {
            console.log("失去焦点");
        })

        $("select").change(() => {
            console.log("内容改变");
        })

        // 表单提交是form的事件
        $("form").submit(() => {
            // 返回true表单允许提交.返回false提交不了
            return false;
        })

    </script>
</body>
</html>

5.6 加载事件

  • 加载事件,当页面加载完再触发的事件
  • js时加载事件是onload
  • 在jquery中ready来加载事件
<html lang="en">
  <head>
    <script src="./js/jquery-2.1.0.js"></script>
    <script>
      // 设置页面加载事件-标准写法
      $(document).ready(function () {
        $("#btn").click(() => {
          console.log("点击");
        });
      });

      // 以上页面加载事件,会简写
      $(function () {
        $("#btn").click(() => {
          console.log("点击222");
        });
      });
        /* 也可以这么写
         $(() => {
            $("#btn").click(() => {
                alert("弹框222")
            })
      	 })
        */
    </script>
  </head>
  <body>
    <button id="btn">按钮</button>
  </body>

六、DOM[重点]

查dom,$(“选择器”)

6.1 获取设置标签内容

js中

  • obj.innerHTML
  • innerText
  • value

jQuery中

  • jq对象.html(内容)
  • jq对象.text(内容)
  • jq对象.val(内容)
  <body>
    <div id="div-1">
      <span>获得设置标签内容</span>
    </div>
    <button id="btn-1">点击获得div中html</button>
    <button id="btn-2">点击获得div中text</button>
    <hr />
    <button id="btn-3">点击设置div中html</button>
    <button id="btn-4">点击设置div中text</button>
    <hr />
    <input id="input-1" />
    <button id="btn-5">点击获得input中的value</button>
    <button id="btn-6">点击设置input中的value</button>
    <hr>
    <form id="form1">
        <input name="username"><br>
        <input name="password"><br>
        <input type="submit" value="提交">
    </form>
    <script src="./js/jquery-2.1.0.js"></script>
    <script>
      // 获得html标签,及内容
      $("#btn-1").click(() => {
        console.log($("#div-1").html());
      });
      // 获得纯文本内容
      $("#btn-2").click(() => {
        console.log($("#div-1").text());
      });
      // 设置html.其中有标签和属性,会解析
      $("#btn-3").click(() => {
        $("#div-1").html("<p style='color:red'>这是重新设置的内容</p>");
      });
      // 设置text,其中全部都以文本展现
      $("#btn-4").click(() => {
        $("#div-1").text("<p style='color:red'>这是重新设置的内容</p>");
      });

      // 获得输入框的值
      $("#btn-5").click(() => {
        console.log($("#input-1").val());
      });

      // 获得输入框的值
      $("#btn-6").click(() => {
        $("#input-1").val("黑发不知勤学早,白首方悔读书迟.");
      });
	  // [重要: 表单校验]
        $("#form1").submit(() => {
            var username = $("input[name=username]").val();
            var password = $("input[name=password]").val();
            if(username == "" || password == "") {
                alert("用户名或密码为空!");
                return false;
            } else {
                return true;
            }
        })
        
    </script>
  </body>

6.2 获取设置标签属性[了解]

js中

dom.属性 = 值

var a = dom.属性;

属性(attribute)操作

  • attr(name) 获得指定名字的属性
  • attr(name,value) 给指定属性设置值
  • attr(properties) 给多个属性设置值
    • properties其实是json对象
    • {key:value,key:value}
  • removeAttr(name) 移除指定属性的值
  <body>
    <input id="input-1" type="text" />
    <button id="btn-1">获得type的属性值</button>
    <button id="btn-2">设置type的属性值password</button>
    <button id="btn-3">设置type的多个属性值</button>
    <button id="btn-4">移除属性</button>

    <script src="./js/jquery-2.1.0.js"></script>
    <script>
      $("#btn-1").click(function () {
        // 获得属性值
        console.log($("#input-1").attr("type"));
      });
      $("#btn-2").click(function () {
        // 设置属性值
        $("#input-1").attr("type", "password");
      });

      // 同时设置多个属性值
      $("#btn-3").click(function () {
        // 同时设置类型是密码框,再设置默认值
        // 使用的是json {key:"value"}
        $("#input-1").attr({ type: "password", value: "111111" });
      });

      // 移除属性
      $("#btn-4").click(function () {
        // 设置属性值,移除该属性,
        $("#input-1").removeAttr("type");
      });
    </script>
  </body>

6.3 获取设置标签样式

JQuery操作样式有两种方案

  • 给标签设置class类
  • 给标签的style设置css属性

6.3.1 设置class类

通过给标签设置/删除class类来改变样式

ps: 前提是先提供好class类

  • addClass(class)
  • removeClass(class)
  • toggleClass(class)
  <head>
    <title>获得设置class类</title>
    <style>
      .box1 {
        width: 100px;
        height: 100px;
        background-color: red;
      }
      .box2 {
        width: 200px;
        height: 200px;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div id="box" class="box1">块</div>
    <button id="btn-1">设置box2样式类</button>
    <button id="btn-2">移除box2样式类</button>
    <button id="btn-3">切换样式</button>
    <script src="./js/jquery-2.1.0.js"></script>
    <script>
      $("#btn-1").click(() => {
        $("#box").addClass("box2");
      });

      $("#btn-2").click(() => {
        $("#box").removeClass("box2");
      });

      $("#btn-3").click(() => {
        // 切换box2
        // 当前有box2样式,那我就移除
        // 当前没有box2样式,那我就添加
        $("#box").toggleClass("box2");
      });
    </script>
  </body>

6.3.2 设置获得css属性

设置获得css属性

  • css(属性) 获得指定css属性值
  • css(属性,值) 设置指定属性和值
  • css(properties) 设置多个属性
  <body>
    <div id="box" style="background-color: red">块</div>
    <button id="btn-1">点击获得属性</button>
    <button id="btn-2">点击设置1个属性</button>
    <button id="btn-3">点击设置多个属性</button>
    <script src="./js/jquery-2.1.0.js"></script>
    <script>
      $("#btn-1").click(() => {
        // 获得指定css属性值
        console.log($("#box").css("background-color"));
      });
      $("#btn-2").click(() => {
        // 设置指定css属性值
        $("#box").css("background-color", "green");
      });
      $("#btn-3").click(() => {
        // 同时设置多个css属性
        $("#box").css({
          backgroundColor: "yellow",
          width: "200px",
          height: "200px",
        });
      });
    </script>
  </body>

七、正则表达式[重点|CV]

正则表达式(Regular expression)

js中的正则表达式对象 RegExp

7.1 正则表达式

  • 正则表达式是描述字符模式的对象。
  • 正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。
  • 语法：
    • var patt=new RegExp(pattern,modifiers);
    • var patt=/pattern/modifiers;

7.2 基本知识

var reg = new RegExp("模板");
var reg = /模板/;

方括号：用于查找某个范围内的字符

表达式描述
[abc]查找方括号之间的任何字符。
[^abc]查找任何不在方括号之间的字符。
[0-9]查找任何从 0 至 9 的数字。
[a-z]查找任何从小写 a 到小写 z 的字符。
[A-Z]查找任何从大写 A 到大写 Z 的字符。
[A-z]查找任何从大写 A 到小写 z 的字符。
(red|blue|green)查找任何指定的选项。

元字符（Metacharacter）：是拥有特殊含义的字符：

元字符描述
.查找单个字符，除了换行和行结束符。
\w查找单词字符。
\W查找非单词字符。
\d查找数字。
\D查找非数字字符。
\s查找空白字符。
\S查找非空白字符。
\b匹配单词边界。
\B匹配非单词边界。
\0查找 NULL 字符。
\n查找换行符。
\f查找换页符。
\r查找回车符。
\t查找制表符。
\v查找垂直制表符。
\xxx查找以八进制数 xxx 规定的字符。
\xdd查找以十六进制数 dd 规定的字符。
\uxxxx查找以十六进制数 xxxx 规定的 Unicode 字符。

量词：用于表示重复次数的含义

量词描述
n+匹配任何包含至少一个 n 的字符串。例如，/a+/ 匹配 “candy” 中的 “a”，“caaaaaaandy” 中所有的 “a”。
n*匹配任何包含零个或多个 n 的字符串。例如，/bo*/ 匹配 “A ghost booooed” 中的 “boooo”，“A bird warbled” 中的 “b”，但是不匹配 “A goat grunted”。
n?匹配任何包含零个或一个 n 的字符串。例如，/e?le?/ 匹配 “angel” 中的 “el”，“angle” 中的 “le”。
n{X}匹配包含 X 个 n 的序列的字符串。例如，/a{2}/ 不匹配 “candy,” 中的 “a”，但是匹配 “caandy,” 中的两个 “a”，且匹配 “caaandy.” 中的前两个 “a”。
n{X,}X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配。例如，/a{2,}/ 不匹配 “candy” 中的 “a”，但是匹配 “caandy” 和 “caaaaaaandy.” 中所有的 “a”。x到正无穷
n{X,Y}X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次，至多 Y 次时匹配。例如，/a{1,3}/ 不匹配 “cndy”，匹配 “candy,” 中的 “a”，“caandy,” 中的两个 “a”，匹配 “caaaaaaandy” 中的前面三个 “a”。注意，当匹配 “caaaaaaandy” 时，即使原始字符串拥有更多的 “a”，匹配项也是 “aaa”。
n{X}前面的模式 n 连续出现X 次时匹配
n$匹配任何结尾为 n 的字符串。
^n匹配任何开头为 n 的字符串。
?=n匹配任何其后紧接指定字符串 n 的字符串。
?!n匹配任何其后没有紧接指定字符串 n 的字符串。

RegExp 对象方法

方法描述
compile编译正则表达式。
exec检索字符串中指定的值。返回找到的值，并确定其位置。
test检索字符串中指定的值。返回 true 或 false。

正则表达式的使用

  • test方法：搜索字符串指定的值，根据结果并返回真或假
  • exec() 方法：检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));

var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));

7.3 演示

<body>
    数据<input id="i1" onblur="checkData()" />
    <script>
      var i1 = $("#i1");
      function checkData() {
        var val = i1.val();
        // 创建正则表达式1
        // var reg = new RegExp("[0-9]");
        // 创建正则表达式2
        var reg = /[0-9]/; // 模板1: 判断内容是否包含0-9之间任何一个数字
        var reg2 = /[a]/; // 模板2: 是否包含a
        var reg3 = /[abc]/; // 模板3: 是否包含abc中任何一个
        var reg4 = /[a-z]/; // 模板4: 是否包含a-z中任何一个
        var reg5 = /[A-Z]/; // 模板5: 是否包含A-Z中任何一个
        var reg6 = /[a-zA-Z]/; // 模板6: 是否包含大小写中任何一个
        var reg7 = /[A-z]/; // 模板7: 是否包含大小写中任何一个(因为ascll码值)
        var reg8 = /[0-9A-Za-z]/; // 模板8: 是否包含数字或者字母
        var reg9 = /[\dA-Za-z]/; // 模板9: 是否包含数字或者字母
        var reg10 = /\d+/; // 匹配至少一个数字
        var reg11 = /\d*/; // 匹配0或者多个数字
        var reg12 = /\d?/; // 匹配0或者1个,只要字符串内有1个或0个就对
        var reg13 = /^\d?$/; // 匹配整个内容中只能有0或者1个数字
        var reg14 = /^\d{4}$/; // 整个内容中只能有数字,且数字个数是4位
        var reg15 = /^\d{4,6}$/; // 整个内容中只能有数字,且数字个数是4-6位
        var reg16 = /^\d{4,}$/; // 整个内容中只能有数字,且数字个数是至少4位
        // 匹配手机号
        // 手机号开头必须是1,第二位可以是3,5,6,8,9,后续数字任意,总长得11位
        var reg17 = /^1[35689]\d{9}$/;

        // 匹配邮箱 237876779@qq.com
        // 开头是数字或者字母,其中必须包含@符号,@后可以是数字和字母,必须有.符号,后面必须是字母
        // .是正则表达式的特殊符号,需要转移
        var reg18 = /^[\dA-Za-z]+@[\da-z]+\.[a-z]+$/;
        console.log(reg18.test(val));
        // 置空
        // i1.value = "";

        // 重点是能看懂就行,会写简单模板
      }
    </script>
  </body>

7.4 练习

image-20230309170043184

image-20230309170051385

八、Ajax

async JavaScript and xml,主要是和交互,发送请求

$.ajax({
    type:"get",
    url:"/java2403/login",
    data:"username=admin&password=123",
    success:function(res){
        // 后端返回的响应,后端数据在res
    },
    error:function(){
        alert("服务器正忙");
    }
})

前端总结

HTML : 展示内容

  • 掌握必要的标签
    • h1,p,img,a,ul,li,div,span
    • form,input,select,button
      • 表单系列最重要
    • table tr td
  • 合理嵌套
  • 常见先写div,div写其他东西
  • 最终能写出类似登录注册的页面即可

CSS: 美化

  • 引入方式
  • 三个选择器,美化的前提是先选到标签元素
  • 样式属性
    • color,font-size,background-color,width,height,border
    • position: relative,absolute , top,bottom,left,right
    • margin-top,margin-left

JS/JQ: 动态

  • 基本语法(变量,运算,分支,循环,函数)
  • jq
    • 选择器
    • 操作dom
      • 获得dom对象,取输入框值
    • 正则熟悉

最后利用HTML,CSS,JS/JQ写出一个页面

经典: 注册框,数据校验

链图片转存中…(img-6dOB9KtM-1720616614330)]

[外链图片转存中…(img-RbBJ7bWq-1720616614332)]

八、Ajax

async JavaScript and xml,主要是和交互,发送请求

$.ajax({
    type:"get",
    url:"/java2403/login",
    data:"username=admin&password=123",
    success:function(res){
        // 后端返回的响应,后端数据在res
    },
    error:function(){
        alert("服务器正忙");
    }
})

前端总结

HTML : 展示内容

  • 掌握必要的标签
    • h1,p,img,a,ul,li,div,span
    • form,input,select,button
      • 表单系列最重要
    • table tr td
  • 合理嵌套
  • 常见先写div,div写其他东西
  • 最终能写出类似登录注册的页面即可

CSS: 美化

  • 引入方式
  • 三个选择器,美化的前提是先选到标签元素
  • 样式属性
    • color,font-size,background-color,width,height,border
    • position: relative,absolute , top,bottom,left,right
    • margin-top,margin-left

JS/JQ: 动态

  • 基本语法(变量,运算,分支,循环,函数)
  • jq
    • 选择器
    • 操作dom
      • 获得dom对象,取输入框值
    • 正则熟悉

最后利用HTML,CSS,JS/JQ写出一个页面

经典: 注册框,数据校验

码叔义
关注
  • 20
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一文读懂前端开发与架构师的内在区别
全栈开发者社区
07-08 2619
点击上方[全栈开发者社区]→右上角[...]→[设为星标⭐]前端架构师,听起来就是个很高大上的职位，在大多数程序员的眼中，架构师一般从事后端开发，Java或者C++出身，它们往往拥有这十...
一文读懂前端技术演进：盘点Web前端20年的技术变迁史
hellojackjiang2011的博客
08-22 2079
本文原文由作者“司徒正美”发布于公众号“前端你别闹”，即时通讯网收录时有改动，感谢原作者的分享。 1、引言 1990 年，第一个Web浏览器的诞生；1991 年，WWW诞生，这标志着前端技术的开始。 在这将近20年的前端发展史中，我们经历了从最早的纯静态页面，到JavaScript跨时代的诞生；从PC端到移动端；从依赖后端到前端可自由打包开发；从早期的网景Navigator浏览器到现在各家浏...
一文读懂IT行业都有哪些职位
09-29 1646
如今，IT行业正在蓬勃发展，许多朋友都想转向IT行业，因此，最近很多人问我：从事IT行业需要哪些职业技能？IT行业一直都是一个较热门的一个行业，因为它的薪资高，发展好，不像很多职业可能一辈...
一文入门NodeJS
LP890127的博客
12-16 298
NodeJS¶ 1.环境配置¶ 之前讲ES6的时候有提过一部分Node的知识，简单回顾下：一文读懂ES6 1.1.NPM国内镜像¶ npm国内镜像：https://npm.taobao.org 配置国内源：npm install -g cnpm --registry=https://registry.npm.taobao.org 然后就可以把cnpm当作np...
jquery-3.4.1_jquery_3.4.1.js_jquery-3.4.1_sangat1_jquery3.4.1_jq
09-30
《jQuery 3.4.1：JavaScript开发的强大工具》 jQuery，这个JavaScript库，自2006年发布以来，一直是Web开发领域的明星工具。它以其简洁的API和强大的功能，极大地简化了DOM操作、事件处理、动画效果以及Ajax交互等...
jQuery-Lerning.zip_Jquery 基础教程_javascript 教程_jquery_web前端
09-22
8. **版本更新与兼容性**：随着JavaScript原生API的增强，jQuery也在不断进化，如jQuery 3.x移除了对旧版IE浏览器的支持，更注重性能和现代浏览器的兼容性。 9. **jQuery与ES6比较**：虽然现在有像React和Vue这样的...
js.rar_.net_JS AJAX_jquery_jquery .net_增删
09-20
在IT行业中，JavaScript（简称JS）和AJAX（异步JavaScript和XML）是网页开发中的核心技术，而jQuery作为JS的一个库，极大地简化了DOM操作、事件处理和动画设计。.NET框架则是微软推出的用于构建高性能、可信赖的Web...
jquery-1.9.1.min.js_javascript_jquery_
09-30
**jQuery 概述** ...jQuery 1.9.1.min.js 是一个压缩版的库文件，适用于生产环境，以减少页面加载时间和提高性能。无论你是初学者还是经验丰富的开发者，jQuery 都能帮助你更高效地实现网页交互和动态效果。
jquery.min_jquery.min.js_
10-03
《jQuery.min.js：轻量级的JavaScript库》 jQuery是一个广泛使用的JavaScript库，以其简洁的API和强大的功能著称。"jQuery.min.js"是这个库的压缩和优化版本，主要用于减少网页加载时间，提高性能。在标题中提到的...
vue2前端阿里云oss服务端签名直传
weixin_74285634的博客
08-13 270
generatePresignedUrlApi是由后端提供的接口 来获取密钥。
【vue教程】五. Vue 的路由管理
前端探索者
08-13 1105
Vue Router 是 Vue 官方的路由管理器，用于构建单页面应用。它允许你通过 URL 来映射不同的组件，实现页面的动态加载和导航。路由守卫用于在路由跳转前后执行代码，可以用来检查用户认证状态、获取数据等。通过本篇文章，我们学习了 Vue Router 的基本概念、配置和使用，以及如何实现动态路由和嵌套路由。我们还探讨了路由守卫的概念，并提供了如何在 Vue 组件中使用它们的示例。这些知识点将帮助你构建一个功能完备的单页面应用。
【无标题】
最新发布
weixin_42348009的博客
08-14 167
静态方法返回一个由给定对象自身的可枚举的字符串键属性名组成的数组。
【Markdown】Markdown 中的语言简称
EleganceJiaBao的博客
08-12 992
以下是常见编程语言、脚本语言、标记语言等在 Markdown 中的语言简称以及相应的示例：
playwright链接本地浏览器，实现自动登录。
qq_38880880的博客
08-12 186
【代码】playwright链接本地浏览器，实现自动登录。
Vue中的路由与多种守卫常见问题及解决方案
zhaochen1127的博客
08-12 1135
Vue Router中的路由守卫主要分为三种类型：全局守卫、路由独享守卫和组件内守卫。全局守卫：作用于整个应用，包括beforeEach和afterEach。路由独享守卫：在路由配置中直接定义，只有进入该路由时才会触发，如。组件内守卫：定义在组件内部，包括和。路由守卫是Vue Router中一个强大的功能，能够帮助开发者在路由跳转前后执行重要的逻辑判断。然而，不当的使用和配置可能会引发一系列问题，如无限循环、守卫逻辑错误、守卫未正确触发以及异步处理不当等。
Vue 中 app.config 相关配置项介绍与案例
前端基地
08-13 1048
本博文展开了细致且全面的阐述，对 app.config 、app.config.errorHandler 、app.config.warnHandler 、app.config.performance 、app.config.compilerOptions 、app.config.globalProperties 以及 app.config.optionMergeStrategies 进行了深入剖析。不仅清晰明了地介绍了它们的功能和特性，还通过丰富多样的实际案例展开了详尽的分析。
高级java每日一道面试题-2024年8月12日-网络篇-说一下JSONP的实现原理?
qq_43071699的博客
08-12 622
JSONP是一种非官方的跨域数据交换协议，它允许在网页中通过标签的src属性从其他域名（网站）安全地获取数据。由于浏览器的同源策略限制，直接通过Ajax等方式跨域请求数据通常是不被允许的，而JSONP则巧妙地绕过了这一限制。
基于vue框架的NBA球星管理系统1878g（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
08-12 1024
随着互联网的普及和体育产业的蓬勃发展，篮球运动在全球范围内拥有庞大的粉丝群体，NBA（美国职业篮球联赛）作为其中的佼佼者，其球星更是备受关注。传统的球星信息管理方式往往依赖于纸质文档或简单的电子表格，这种方式不仅效率低下，难以实现数据的即时更新与共享，也无法满足球迷和媒体对球星信息深度挖掘的需求。因此，开发一套基于Vue框架的NBA球星管理系统，通过信息化手段整合球星信息，实现数据的快速录入、存储、查询与分析，对于提升管理效率、满足用户需求具有重要意义。，处理前端请求并提供业务逻辑。
jQuery_Succinctly：英文PDF版
"jQuery_Succinctly" 《jQuery_Succinctly》是由Cody Lindley撰写的一本关于jQuery技术的书籍，由Daniel Jebaraj作序，并由Syncfusion Inc.出版。这本书提供免费下载，但需要在Syncfusion官方网站上完成注册。该书...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值