07-JQuery

最新推荐文章于 2024-06-12 11:13:48 发布

C-fovik-0611

最新推荐文章于 2024-06-12 11:13:48 发布

阅读量752

点赞数 24

分类专栏： Javaweb 文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/qq_74012324/article/details/138327916

版权

Javaweb 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1 JQuery介绍

JQuery是JS的类库,是js的框架,将原来的JS的操作封装,让js操作DOM,BOM等更加方便简洁.优化HTML文档操作、事件处理、动画设计和AJAX交互。
jQuery设计的宗旨是“Write Less，Do More”，即倡导写更少的代码，做更多的事情。
jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等

2 JQuery引入

1 JQuery是JS的框架,是第三方技术,是需要在项目中引入JQuery类库

2 在HTML页面中引入JQuery类库

3 以后,就可以在页面中写JQuery代码

2.1 项目中引入JQuery类库

项目中引入js类库,一般都会新建一个文件夹js

一个完整的前端项目目录结构

-项目名

–css

–js

–images

2.2 页面中引入

2.3 使用JQuery

  <body>
    <button id="btn">点我,使用JQ绑定事件,弹框</button>

    <!-- 引入JQuery,开闭标签之间,不要再写js代码 -->
    <script src="./js/jquery-2.1.0.js"></script>

    <!-- 先引入JQuery,再开始写代码 -->
    <script>
      //  $("#btn") 选中btn按钮
      //  .click   绑定点击事件
      //  function() 事件触发的函数
      $("#btn").click(function () {
        alert("jquery弹框");
      });
    </script>
  </body>

3 JQuery的语法

现在主要学习JQuery的语法是

选择器
事件

其他的JS语法,在JQuery是通用的,例如

变量
数据类型
引用类型(JSON,数组,日期,数学等)
运算符
分支选择
循环

3.1 选择器

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

主要学习几个基本即可

标签名
id
类

标签名选择器

$("标签名");
// 这样就可以获得同名所有标签,返回的是数组
// $是JQuery中特殊符号,$===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>

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>

类选择器
$(".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.2 事件

事件就是发生在浏览器上的事情,键盘事件,鼠标,表单事件,加载事件等

现在这些事件与JS中事件是一样,只不过是代码变成了JQuery的语法格式
事件的写法不一样,与原来HTML事件中少了on

JQuery事件 HTML事件
focus onfocus
click onclick
… …
绑定方式
jquery对象.事件(响应函数)

JQuery事件	HTML事件
focus	onfocus
click	onclick
…	…

3.2.1 点击双击

 <body>
    <button id="btn-1">点单击事件</button>
    <button id="btn-2">点双击击事件</button>
    <script src="./js/jquery-2.1.0.js"></script>
    <script>
      var count = 0;
      /**
       * 1 选择事件源
       * 2 绑定事件
       * 3 设置响应函数
       */
      $("#btn-1").click(function () {
        count++;
        console.log("单击:" + count);
      });

      $("#btn-2").dblclick(function () {
        console.log("双击");
      });
    </script>
  </body>

3.2.2 鼠标事件

  <body>
    <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 设置响应函数
       */
      //   $("#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>

3.2.3 键盘事件

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>

3.2.4 表单事件

focus
blur
change
submit

  <body>
    <form accept="/java2217">
      用户名<input type="text" name="username" /><br />
      密码<input type="password" name="password" /><br />
      技能<input type="checkbox" name="skill" value="Java" /> Java
      <input type="checkbox" name="skill" value="HTML" /> HTML
      <input type="checkbox" name="skill" value="MySQL" /> MySQL <br />
      <input type="submit" value="提交" />
    </form>
    <script src="./js/jquery-2.1.0.js"></script>
    <script>
      //  获得焦点失去焦点
      $("input[type=text]")
        .focus(() => {
          console.log("用户名输入框获得焦点");
        })
        .blur(() => {
          console.log("用户名输入框失去焦点");
        });
      // 内容改变(下拉框,单选复选,都可以实现改变事件)
      $("input[type=checkbox]").change(() => {
        console.log("内容改变");
      });

      // 表单提交
      // 选中表单,绑定事件
      // form是标签名选择器,:first是选中第一个
      $("form:first").submit(function () {
        console.log("提交了");
        // return false; // 阻止表单提交
        return true; // 允许表单提交
      });
    </script>
  </body>

3.2.5 加载事件

加载事件,当页面加载完再触发的事件
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");
        });
      });
    </script>
  </head>
  <body>
    <button id="btn">按钮</button>
  </body>

4 DOM操作

4.1 获取设置标签内容

js中

innerHTML
innerText

jQuery中

html(内容)
text(内容)
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>
    <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("黑发不知勤学早,白首方悔读书迟.");
      });
    </script>
  </body>

4.2 获取设置标签属性

属性(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>

4.3 获取设置标签样式

JQuery操作样式有两种方案

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

4.3.1 设置class类

通过给标签设置/删除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>

4.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>

补充

  <body>
    性别
    <!-- 单选框,默认选中,需要加属性checked -->
    <!-- HTML5中,即现在版本中,属性名和属性值一样时,可以只写属性名 -->
    <input type="radio" name="sex" value="1" />男
    <input type="radio" name="sex" value="2" checked />女
    <hr />
    <input type="checkbox" name="skill" value="java" checked />java
    <input type="checkbox" name="skill" value="html" checked />html
    <input type="checkbox" name="skill" value="mysql" />mysql
  </body>

C-fovik-0611

关注

24
点赞
踩
30

收藏

觉得还不错? 一键收藏
0
评论
07-JQuery

JQuery是JS的类库,是js的框架,将原来的JS的操作封装,让js操作DOM,BOM等更加方便简洁.优化文档操作、事件处理、动画设计和AJAX交互。jQuery兼容各种主流浏览器，如2.0+、Opera 9.0+等。
复制链接

扫一扫