入门JQuery看这一篇就够了

最新推荐文章于 2024-08-09 02:16:38 发布

adventure.Li

最新推荐文章于 2024-08-09 02:16:38 发布

阅读量569

点赞数

分类专栏： # 前端基础&框架文章标签： jquery js javascript html

本文链接：https://blog.csdn.net/qq_44654974/article/details/108170039

版权

前端基础&框架专栏收录该内容

15 篇文章 2 订阅

订阅专栏

JQuery入门学习

1.简介
- （1）作用
- （2）引入
2.基本语法
3.效果实现
- （1）淡入淡出
- （2）动画实现
4.属性以及内容操作
- （1）获取与添加内容
- （2）添加元素
5.DOM遍历
6.AJAX

1.简介

（1）作用

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

（2）引入

CDN引入：在head中引入（本文使用的微软的引入，另外还有谷歌（可能会出现failed load source问题,原因外网）、百度等）

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>

官网下载JQuery文件：
官网下载
若下载，点击出现源代码，可直接新建JS文件全部复制粘贴过来，然后放入工程文件里面；
在这里插入图片描述
最后，在控制台的console进行$.fn.jquery，若出现版本号则添加成功！

2.基本语法

（1）语法格式

$(selector).action()

美元符号定义 jQuery
选择符（selector）“查询"和"查找” HTML 元素
jQuery 的 action() 执行对元素的操作

了解语法格式后，就可在< sript></ script>中进行操作了。操作第一步需要先引入入口函数，不然你会发现不起作用。
在这里插入图片描述
简单案例：

<!--通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）-->
<!DOCTYPE html>
<html lang="en">
<head>
  <!--解决中文乱码 -->
  <meta content="text/html" charset="utf-8">
  <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
<script>
  window.onload =function () {
    console.log("Js 方式入口")
  }
  <!--入口函数-->
  $(document).ready(function () {
  console.log("JQuery入口函数test")

    // 点击事件
    $("[id=test1]").click(function () {
      $("p").hide();
    })
    $(".test2").click(function () {
      $("p").show();
    })

    // 鼠标移动事件
    $("div").mouseenter(function () {
       alert("hhh")
    })
    
    //任意按键即可触发
   $(".input1").blur(function () {
     alert("检验");
   })
    $(".input2").keypress(function () {
      alert("检验");
    })
  })
</script>

</head>
<title>first test</title>
<body>
<h2 style="text-align: center; position: center"></h2>
<p>测试文字</p>
<div style="width: 100px; height: 100px; background-color: aqua"></div>
<button id="test1">hide</button>
<button class="test2">show</button>
<button class="test2">keydown</button>
<input type="text" class="input1"/>
<input type="text" class="input2"/>
</body>
</html>

（2）选择器总结

基本方式
通过选择器 id : #name ; class : .name
直接通过标签例如 p ,button
通过符号 this ，无需打引号，获取当前HTML
$("*") :所有元素

进一步筛选获取：
通过class 进一步定位 $(“p.intro”) 选取 class 为 intro 的

元素

first 位置 $(“ul li:first”) 选取第一个 < ul> 元素的第一个 < li > 元素

[ ] 属性筛选 $("[href]") 选取带有 href 属性的元素

（3）常用事件总结

点击事件： click(), dbclick()
键盘事件： keypress()
鼠标事件： mouseenter（）鼠标移开
聚焦事件： blur() 焦点移开：用户注册时移开进行匹配是否符合
其他：事件大全

3.效果实现

（1）淡入淡出

记住 In：显示 Out 出 Toggle切换即可（形式有 fade与slide(滑动)）
格式： fadeIn(speed,callback)
speed:速度 callback ：
回调函数（借用w3school的对比）：
有：hide先执行
无: alert先执行
原理
在这里插入图片描述

（2）动画实现

记住使用 animate即可 $(selector).animate({params},speed,callback);
可以进行改变CSS的所有属性 记得需要设置position为relative、fixed 或 absolute！

案例：

<!--通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）-->


<!DOCTYPE html>
<html lang="en">
<head>
    <!--解决中文乱码 -->
    <meta content="text/html" charset="utf-8">
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
    <script>
        <!--入口函数-->
        $(document).ready(function () {
            console.log("JQuery入口函数test")

          //$(selector).animate({params},speed,callback);（改变CSS属性）
//默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。
// 如需对位置进行操作，
// 要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
//可以用 animate() 方法来操作几乎所有 CSS 属性
// 不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
// 同时，色彩动画并不包含在核心 jQuery 库中。
// 如果需要生成颜色动画，您需要从 jquery.com 下载 颜色动画 插件。
// 停止动画  stop()
// Callback "slow"   有加"slow"回调 先执行函数外，后函数内 无回调，则先内
//
//           $("button").click(function(){
//             $("p").hide("slow",function(){
//               alert("段落现在被隐藏了");
//             }); //  先执行hide
//           });

          $("button").click(function () {
            // $(".div2").hide();
            var x =document.getElementById("getX").value;
            $(".div1").animate({left: '250px',width: '300px'});
            $(".div3").animate({left: x}),


              $(".div2").css("color","red")
                .slideUp(2000)
                .slideDown(2000);//链：放在一块写
          })
        })

    </script>
<style>
  div{
    position: relative;
  }

</style>

</head>
<title>first test</title>
<body>

<div class="div1" style="width: 100px; height: 100px; background-color: aqua"></div>

<div class="div2" style="width: 100px; height: 100px; background-color: aquamarine"></div>

<div class="div3" style="width: 100px; height: 100px; background-color: aliceblue"></div>

<input id="getX" type="text" placeholder="输入移动距离">
<button class="test1">点击我！右移</button>
</body>
</html>

4.属性以及内容操作

（1）获取与添加内容

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

例：$(“p”).text():获取p文本内容(即p直接的内容) $(“p”). text(“hello”)更新内容
若使用append则是在文本后面进行追加内容（after一般是添加节点）

（2）添加元素

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

注：：如果要使用click=“afterText()”

函数应该写在jquery入口函数外部

5.DOM遍历

用于向上遍历 DOM 树：

parent()
parents()
parentsUntil()

用于向下遍历 DOM 树的 jQuery 方法：

children()
find()

//所有后代
$(document).ready(function(){
$(“div”).find("*");
});

在 DOM 树进行水平遍历：

siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()

6.AJAX

AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新

作用：使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

格式：$(selector).load(URL,data,callback);

jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据

GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。

POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据

示例：

<!--通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）-->


<!DOCTYPE html>
<html lang="en">
<head>
    <!--解决中文乱码 -->
    <meta content="text/html" charset="utf-8">
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
    <script>
        <!--入口函数-->
        $(document).ready(function () {
            console.log("JQuery入口函数test")

          $("button").click(function () {
$.post("http://localhost:8082/Hys/admin/loginCheck",{
  name:"test",
},
function (data,status) {
  $("p").append(data);
alert(data)
})
          })
        })
    </script>
</head>
<title>first test</title>
<body>
<p>请求数据</p>
<button>click 请求数据</button>
</body>
</html>

adventure.Li

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
入门JQuery看这一篇就够了

JQuery入门学习1.简介（1）作用（2）引入2.基本语法（1）语法格式（2）选择器总结（3）常用事件总结3.效果实现（1）淡入淡出（2）动画实现4.属性以及内容操作（1）获取与添加内容（2）添加元素5.DOM遍历6.AJAX1.简介（1）作用jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装
复制链接

扫一扫

专栏目录