jQuery学习(二)

SOD_M

已于 2024-09-01 16:37:52 修改

阅读量952

点赞数 14

文章标签： jquery 学习前端

于 2024-06-19 21:04:45 首次发布

本文链接：https://blog.csdn.net/m0_64791593/article/details/139755411

版权

jQuery第二篇

jQuery.CSS
jQuery动画
jQuery插件

jQuery.CSS

写一个页面为例：

<body>
    <div id="box">jQuery.CSS （）</div>
</body>

设置CSS样式

#box {
            width: 100px;
            height: 100px;
            background-color: red;
        }

设置css样式

jQuery.css()方法

获取css属性值

$(‘selector’).css(‘属性名’)

console.log($('#box').css('background-color'))//打印结果为rgb(255,0,0)红色

设置css属性

$(‘selector’).css(‘属性名’,‘属性值’)

$(‘selector’).css({‘属性名’:‘属性值’,‘属性名’:‘属性值’,…})

属性名不添加引号时，通过-连接的属性名第二个单词首字母大写
属性值一般都使用引号包起来
每个属性注意使用逗号分隔

$('#box').css({
	'color':'white',
	'width':'200px',
	fontSize:'18px'
})

效果图
通过jQuery设置css样式

jQuery中添加删除类名

可以通过给元素添加类名来设置CSS样式

添加类名

$(‘’).addClass(‘类名1 类名2’)

<body>
    <div id="box">jQuery.CSS （）</div>
</body>

$('box').addClass('container div')//此时div有三个类名

删除类名

$(‘’).removeClass(‘类名1 类名2…’)
移除类名时要注意不要全部移除，否则元素无法通过类名获取

$('box').removeClass('container')//此时div有两个类名

增加/删除类名切换

相当于一个方法实现两个功能：当指定类名存在时，为删除效果，不存在时为添加效果

$(‘’).toggle(‘类名’)

jQuery动画

以下动画最终效果都是元素的css属性display：none,实现隐藏效果

显示/隐藏

元素的宽度和高度以及cpacity（透明度）一起改变

元素隐藏： $ (‘’).hide(执行时间(参数1），完成后要执行的函数（参数2）)
元素显示： $(‘’).show(执行时间，完成后要执行的函数)
显示/隐藏切换： $(‘’).toggle(执行时间，完成后要执行的函数)

淡入淡出

只改变元素的opacity

元素淡出（隐藏）： $(‘’).fadeOut(参数1，参数2)
元素淡入（显示）： $ (‘’).fadeIn(参数1，参数2)
淡入/淡出切换： $ (‘’).fadeToggle(参数1，参数2)
元素淡入（显示）： $ (‘’).fadeTo(参数1，opacity)
opacity为元素透明度要变到的程度

上滑下滑

元素上滑：$ (‘’).slideUp(参数1，参数2)
元素下滑：$ (‘’).slideDown(参数1，参数2)
上滑/下滑切换：$ (‘’).slideToggle(参数1，参数2)

自定义动画（重点）

$ (‘’).animate（ {属性}，时间，回调函数）
不能直接设置颜色，需要使用颜色插件

<body>
    <div id="box">jQuery.CSS （）</div>
</body>

$('box').animate(
	{
		height: '100px',
        width: "100px",
        color: 'green'//没有效果，需要颜色插件
	},3000,function(){
		console.log('动画完成')
）

jQuery插件

（插件详细内容后面补充）

color插件

使用script标签引入jquery.color.js文件，添加之后自定义动画animate可以设置color、backgeround-color
color插件是基于jQuery的，引入插件时要放在jQuery.min.js下面

懒加载/延迟加载

使用script标签引入jquery.lazyload.js文件，有图片延迟加载效果