jQuery·深入浅出·快速理解

Posted 勇敢*牛牛

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery·深入浅出·快速理解相关的知识，希望对你有一定的参考价值。

jQuery·深入浅出·快速理解

🌕写在前面
🍊 博客主页 ：勇敢link牛牛
🎉欢迎关注：🔎点赞👍收藏⭐️留言📝
🌟本文由 勇敢link牛牛 原创，CSDN首发！
📆首发时间：🌹2021年11月25日🌹 🆕最新更新时间：🎄2021年11月25日🎄
✉️愿你熬过万丈孤独，藏下星辰大海！
📠参考书籍：📚《Web前端开发技术》
🙏作者水平很有限，如果发现错误，请留言轰炸哦！万分感谢感谢感谢！
jQuery·深入浅出·快速理解

目录

jQuery 语法

  • 可以通过直接链接网络，导入jQuery库，但是注意是单独的导入，如下排列顺序。
基础语法： $(selector).action()
美元符号$定义 jQuery
选择符（selector）"查询"和"查找" html 元素
jQuery 的 action() 执行对元素的操作

通俗点讲 jQuery 也就是通过选取 HTML 元素，并对选取的元素执行某些操作的库函数。 
 <script src="http://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
    <script>
    //点击按钮，使得p标签的内容消失
        $(document).ready(function () 
            $("button").click(function () 
                $("p").hide();
            );
        );
    </script>
💪时刻记得在链入jQuery库后，将代码嵌套在这段代码之中，这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM （标签对象）加载完成后才可以对 DOM 进行操作。

如果在文档没有完全加载之前就运行函数，操作可能失败。

$(document).ready(function()
 
   // 开始写 jQuery 代码...
 
);
  • 例如：实现按下按钮隐藏，再次按下按钮显示的功能，要求使用if语句实现。提示：隐藏hide（）显示show（）的功能；
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>学号+姓名</title>
    <script src="http://cdn.staticfile.org/jquery/2.0.0/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () 
            $(".bu").click(function () 
                if ($("p").css("display") != "none") 
                    $("p").css("display", "none");
                 else 
                    $("p").css("display", "block");
                
            );
        );
    </script>
</head>

<body>
    <h2>这是一个标题</h2>
    <p style="display: block;">这是一个段落</p>
    <p style="display: block;">这是另一个段落</p>
    <button class="bu">点击</button>
</body>

</html>

jQuery 选择器

最常见的就是三种选择器： 标签名，id名，class类名

实例 当用户点击按钮后，某元素将被隐藏：

  • 页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
$(document).ready(function()
  $("button").click(function()
    $("#test").hide();
  );
);
  • jQuery 类选择器可以通过指定的 class 查找元素。
$(document).ready(function()
  $("button").click(function()
    $(".test").hide();
  );
);
  • 用户点击按钮后，所有 <p> 元素都隐藏：
$(document).ready(function()
  $("button").click(function()
    $("p").hide();
  );
);

点击查看更多选择器效果

jQuery 事件

💪什么是事件？那就是页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

实例：
在元素上移动鼠标。
选取单选按钮
点击元素

  • click() 方法是当按钮点击事件被触发时会调用一个函数。
    该函数在用户点击 HTML 元素时执行。在下面的实例中，当点击事件在某个 <p> 素上触发时，隐藏当前的 <p> 元素：在上面代码已经描述过了。
  • dblclick()方法当双击元素时，会发生 dblclick 事件。dblclick() 方法触发 dblclick 事件 （双击），或规定当发生 dblclick 事件时运行的函数。
$("p").dblclick(function()
  $(this).hide();
);

点击查看更多jQuery 事件

jQuery 效果

隐藏、显示、切换，滑动，淡入淡出，以及动画，哇哦！
  • jQuery toggle()
    通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
    显示被隐藏的元素，并隐藏已显示的元素：
$(document).ready(function()
  $("button").click(function()
    $("p").toggle();
  );
);
  • 根据代码学习并掌握fadeIn淡入函数效果和对应参数的作用，并添加一个名为“点击淡出 div 元素”按钮，用fadeOut淡出函数实现按下按钮淡出操作。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(document).ready(function()
            $("#button1").click(function()
                $("#div1").fadeIn();
                $("#div2").fadeIn("slow");
                $("#div3").fadeIn(3000);
            );
        );
    </script>
</head>
<body>
<button id = "button1">点击淡入 div 元素。</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>

当然这只是很基础的几个例子，那么当查阅文档，你会发现更多的效果显示。

  • fadeToggle方法可完成对同一个按钮淡入淡出操作
    💪但是值得注意的是，效果“淡出”只后他是不占位置的，那么就有可能会对我的网页布局造成破坏，“那我暂时想到的一种法子是，通过’子绝父相’，用一个透明的父盒子把位置占住，定位好子盒子，再通过jquery控制子盒子的效果展示，他不会改变盒子位置，当然要是以后有更好的方法再做补充”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>勇敢牛牛</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function()
	$("button").click(function()
		$("#div1").fadeToggle();
		$("#div2").fadeToggle("slow");
		$("#div3").fadeToggle(3000);
	);
);
</script>
</head>
<body>

<p>实例演示了 fadeToggle() 使用了不同的 speed(速度) 参数。</p>
<button>点击淡入/淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

</body>
</html>
  • jQuery slideDown() 方法用于向下滑动元素。
  • 💪 注意被滑动元素的初始状态是隐藏的
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function()
  $("#flip").click(function()
    $("#panel").slideDown("slow");
  );
);
</script>
 
<style type="text/css"> 
#panel,#flip

	padding:5px;
	text-align:center;
	background-color:#e5eecc;
	border:solid 1px #c3c3c3;

#panel

	padding:50px;
	display:none;

</style>
</head>
<body>
 
<div id="flip">点我滑下面板</div>
<div id="panel">Hello world!</div>

</body>
</html>
  • jQuery slideToggle() 方法
    jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

💪如果元素向下滑动，则 slideToggle() 可向上滑动它们。
💪如果元素向上滑动，则 slideToggle() 可向下滑动它们。

$("#flip").click(function()
  $("#panel").slideToggle();
);
  • jQuery 动画 - animate() 方法
    jQuery animate() 方法用于创建自定义动画。

注意：默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function()
  $("button").click(function()
    $("div").animate(
      left:'250px',
      opacity:'0.5',
      height:'150px',
      width:'150px'
    );
  );
);
</script> 
</head>
 
<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
如果需要改变，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>
  • 可以用 animate() 方法来操作所有 CSS 属性吗？
    💪是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
    同时，色彩动画并不包含在核心 jQuery 库中。
    如果需要生成颜色动画，您需要从 jquery.com 下载 颜色动画 插件。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery</title>
    <script src="http://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () 以上是关于jQuery·深入浅出·快速理解的主要内容，如果未能解决你的问题，请参考以下文章
 

 深入理解jQuery插件开发总结


 深入理解jQuery中的Deferred


 深入理解jQuery中的Deferred


 深入理解jQuery中的Deferred


 深入理解jQuery中$.get$.post$.getJSON和$.ajax的用法


 深入理解PHP原理之Opcodes