jQuery基础

最新推荐文章于 2022-11-15 10:08:40 发布

GouMeNgH

最新推荐文章于 2022-11-15 10:08:40 发布

阅读量172

点赞数 1

本文链接：https://blog.csdn.net/GouMeNgH/article/details/101379501

版权

jQuery

jQuery：.

jquery 是一个javascript库. 对javascript进行封装可以更加优雅的写js代码，主要是通过操作html中dom
的方式进行代码编写.和设计. jquery的优点是简单.易用. 能简写很多的javascript代码.
.使用jquery可以很快速的构建前端页面.一些javascript特效.
.jquery是javascript的一个库同时也是对js更加简便操作.

jQuery的语法规律：

jQuery语法是为HTML元素的选取编制的，可以对元素执行某些操作。基础语法是：$(selector).action()
$美元符号是为了定义用的是jQuery selector 是选择符，是为了查询和查找相应的HTML元素
action()是jQuery相应的元素应该执行什么样的操作

实例：

①$(this).hide()———隐藏当前鼠标点击的元素
	②$（"p").hide()————隐藏所有段落，即<p>---</p>之间的内容
		③$（.test").hide(）-——隐藏所有class="test”的段落
			④$（"#text"）,hide(）———隐藏所有id="test”的元素

jQuery常用的事件：

load：当文档加载时运行脚本
blur：当窗口失去焦点时运行脚本
focus：当窗口获得焦点时运行脚本
change：当元素改变时运行脚本
submit：当提交表单时运行脚本
keydown：当按下按键时运行脚本
keypress：当按下并松开按键时运行脚本
keyup：当松开按键时运行脚本
click：当单击鼠标时运行脚本
dblclick：当双击鼠标时运行脚本
mousedown：当按下鼠标按钮时运行脚本
mousemove：当鼠标指针移动时运行脚本
mouseout：当鼠标指针移出元素时运行脚本
mouseover：当鼠标指针移至元素之上时运行脚本
mouseup：当松开鼠标按钮时运行脚本
abort：当发生中止事件时运行脚本

jQuery常用的效果方法

$(selector).hide() – 隐藏被选的元素
$(selector).show() – 显示被选的元素
$(selector).toggle() – 对被选元素进行隐藏和显示的切换
$(selector).slideDown() -通过调整高度来滑动显示被选元素
$(selector).slideToggle() –> 对被选元素进行滑动隐藏和滑动显示的切换
$(selector).slideUp() –> 通过调整高度来滑动隐藏被选元素
$(selector).fadeIn() –> 逐渐改变被选元素的不透明度，从隐藏到可见
$(selector).fadeOut() –> 逐渐改变被选元素的不透明度，从可见到隐藏
$(selector).fadeTo() –> 把被选元素逐渐改变至给定的不透明度
$(selector).animate() – 对被选元素应用“自定义”的动画

相关代码：
重点声明：jQuery必须要到包

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #box{
            width:150px;
            height: 150px;
            background-color: rebeccapurple;
        }
    </style>
    <script src="js/jquery-3.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        function change1(){
                  $('#box').toggle();
        }

        function change2(){
           
            $('#box').slideToggle(3000,'linear',function(){
                alert('Over');
            });
        }

        function change3(){
            $('#box').fadeTo("slow",0.66);
        }
        function change4() {
            $('#box').animate({
                width: '500px',
                height: '500px',


            },5000).animate({width:'200px'},3000)

        }
    </script>


</head>
<body>
    <div id="box"></div>
    <button type="button" onclick="change1()">改变1</button>
    <button type="button" onclick="change2()">改变2</button>
    <button type="button" onclick="change3()">改变3</button>
    <button type="button" onclick="change4()">改变4</button>
</body>
</html>

友情提示：如果知道自己是色弱的，尽量选颜色深一点的，要不然“改变三”看不出明显的效果。

在这里插入图片描述

GouMeNgH

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery基础

jQueryjQuery：.jquery 是一个javascript库. 对javascript进行封装可以更加优雅的写js代码，主要是通过操作html中dom的方式进行代码编写.和设计. jquery的优点是简单.易用. 能简写很多的javascript代码..使用jquery可以很快速的构建前端页面.一些javascript特效..jquery是javascript的一个库同时也...
复制链接

扫一扫