jQuery基础1

最新推荐文章于 2024-09-03 01:23:13 发布

哈利波特魔法code

最新推荐文章于 2024-09-03 01:23:13 发布

阅读量103

点赞数 1

本文链接：https://blog.csdn.net/qq_41451277/article/details/101376761

版权

jQuery介绍

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

jQuery导入

要在项目和Html文件中导入jQuery包
在这里插入图片描述
在head里导入包的位置和类型

    <script src="js/jquery-3.4.1.js" type="text/javascript"></script>

jQuery选择器

     //ID选择器
       function ID() {
            $('#two').toggle();
        }
      //类选择器
        function clz() {
            $('.two').toggle();
        }

更多实例

语法	描述
$("*")	选取所有元素
$(this)	选取当前 HTML 元素
$(“p.intro”)	选取 class 为 intro 的 p元素
$(“p:first”)	选取第一个 p 元素
$(“ul li:first”)	选取第一个 ul 元素的第一个li 元素
$(“ul li:first-child”)	选取带有 href 属性的元素

jQuery动画

在这里插入图片描述


        function  change2() {
            $('#box').slideDown(3000,'linear',function () {
                alert('展示完毕');
            });
        }

更多实例

方法	描述
animate()	对被选元素应用"自定义"的动画
clearQueue()	对被选元素移除所有排队函数（仍未运行的）
delay()	对被选元素的所有排队函数（仍未运行）设置延迟
fadeIn()	逐渐改变被选元素的不透明度，从隐藏到可见
slideDown()	通过调整高度来滑动显示被选元素
slideUp()	通过调整高度来滑动隐藏被选元素
stop()	停止被选元素上当前正在运行的动画

jq与js之间的转换

jq-----js
$( JS对象 )
$( this )
js-----jq
JQ对象[0]

jQuery事件

  <script>
$(document).ready(function(){
  $("p").dblclick(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>

<p>双击鼠标左键的，我就消失。</p>
<p>双击我消失！</p>
<p>双击我也消失！</p>

在这里插入图片描述
更多实例