jQuery淡入淡出

最新推荐文章于 2024-04-11 20:08:56 发布

JJU~

最新推荐文章于 2024-04-11 20:08:56 发布

阅读量143

点赞数 1

分类专栏： w网页设计文章标签： jquery html

本文链接：https://blog.csdn.net/weixin_51509194/article/details/111463768

版权

w网页设计专栏收录该内容

7 篇文章 2 订阅

订阅专栏

jQuery淡入淡出

jQuery的引入

在html的head部引入“jQuery”在计算机中的位置。

<script src="js/jquery-3.4.1.min.js"> </script>

jQuery选择器：

元素选择器：$（“元素名称”），匹配所以 …元素
类选择器：$(".class值") ，匹配所以值为…的元素
ID选择器：$(" #id值") , 匹配所有id值为…的元素
*通号匹配符：$(“ * ”),匹配所有元素
多条件选择器：$(“ 选择器1，选择器2，… ”）,匹配所有的选择器1、选择器2…的元素

jQuery的各类事件

.click
$(“xxx”).click(function{
函数体；
}) // 为匹配的所有元素绑定点击事件, 在所匹配元素被点击之后立即触发
.blur()
$(“xxx”).blur(function(){
函数体
}) //为匹配的所有元素绑定失去焦点事件, 在所匹配元素失去输入焦点时触发
.focus()

$(“xxx”).focus(function(){
函数体；
}) //为匹配的所有元素绑定获得焦点事件, 在所匹配元素获得输入焦点时触发
.change()
$(“xxx”).change(function(){
函数体；
}) // 为匹配的所有下拉选绑定选项切换事件, 在下拉选框切换选项时触发
.ready()
$(document).ready(function(){ //简写形式为 $(function(){…})
函数体；
})//文档就绪事件, 在整个html加载完成之后立即触发执行

jQuery效果展示

.show()
$(“xxx”).show()
//将匹配的所有元素由隐藏设置为显示
.hide()
$(“xxx”).hide()
//将匹配的所有元素由显示设置为隐藏
.toggle()
$(“xxx”).toggle()
//切换所匹配元素的可见状态, 如果显示则隐藏, 如果隐藏则显示.

jQuery的运用

在head部进行jQuery的运用

<script>
$(document).ready(function(){ 
   $("button").click(function(){ 
       $("#div1").fadeToggle(); 
       $("#div2").fadeToggle("slow"); 
       $("#div3").fadeToggle(3000);
    });
});
</script>

body部分

设置按钮，设置div块，属性style=“ ” 宽：width，高：height，背景颜色：background-color：颜色

<body>
<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>