jQuery的一些基本的函数和用jQuery做一些动画操作

jQuery是对js的封装，因为js有一些不方便的地方。所以，jQuery才会去对js进行封装。

jQuery对于标签元素的获取

$('div')或$('li')

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>隔行换色</title>
</head>
<body>
<ul><li>a</li><li>b</li><li>c</li><li>d</li><li>e</li>
</ul>
</body>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">$(function () {var $lis = $('li');for(var i = 0; i < $lis.length; i++){if(i % 2 == 0){$lis.eq(i).css('color', 'red');}else{$lis.eq(i).css('color', 'green');}}})
</script>
</html>

隔行换色

对于这段代码，我们获取的li标签是一个数组，通过取的是奇数还是偶数，用.css函数来显示字体的颜色。

筛选器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>筛选器示例</title>
</head>
<body>
<ul><li id="l0">1</li><li>2</li><li>3</li><li id="l3">4</li><li>5</li>
</ul><div>div-1</div>
<div>div-2</div>
<div id="fir">div-3<a href="#">a标签</a><div>div-son</div>
</div></body>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">// 查找id="l3"
    console.log($('#l3'));
//    查找id="l3"的前一个
    console.log($('#l3').prev());
//    查找id="l3"的后一个
    console.log($('#l3').next());
//    查找id="l3"的前面的所有标签  取得时候是倒着取
    console.log($('#l3').prevAll());
//    查找后面所有的
    console.log($('#l3').nextAll());
//    从某个元素开始找，直到某个元素终止 取到的是之间的元素
    console.log($('#l0').nextUntil('#l3'));//    查找a标签
    console.log($('a'));
//    查找a标签的父标签
    console.log($('a').parent());
//    查找儿子和兄弟标签
    console.log($('#fir').children());console.log($('#fir').siblings());
</script>
</html>

通过筛选器，我们就可以选到的我们想要操作的标签。

jQuery的一些动画操作

通过jQuery，一些简单的像逐渐显示，逐渐隐藏等动画，可以通过函数来实现。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery动画</title><style type="text/css">.box{width: 200px;height: 200px;background-color: green;display: none;}</style>
</head>
<body>
<button id="show">显示</button>
<button id="hide">隐藏</button>
<button id="change">切换</button>
<div class="box"></div>
</body>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">$(function () {$('#show').click(function () {// $('.box').css('display', 'block');
            $('.box').show('1000');});});$(function () {$('#hide').click(function () {$('.box').hide(1000);});});var isShow = true;$('#change').click(function () {if(isShow){$('.box').hide(1000);isShow = false;}else{$('.box').show(1000);isShow = true;}});$('.box').toggle(1000);
</script>
</html>

渐隐渐显

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>滑入滑出</title><style type="text/css">.box{width: 200px;height: 200px;background-color: green;display: none;}</style></head>
<body>
<button id="appear">滑入</button>
<button id="dis">滑出</button>
<button id="change">切换</button>
<div class="box"></div>
</body>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">$(function () {$('#appear').click(function () {$('.box').slideDown(2000);});$('#dis').click(function () {$('.box').slideUp(2000);});$('#change').mouseup(function () {$('.box').slideToggle(2000);});});
</script>
</html>

滑入滑出动画

.click事件，是当点击事件发生时，才会起作用的事件，出来click事件，还有鼠标移入移出的事件。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>淡入淡出</title>
</head>
<style type="text/css">.box{width: 200px;height: 200px;background-color: red;display: none;}
</style>
<body>
<button id="appear">淡入</button>
<button id="dis">淡出</button>
<button id="change">切换</button>
<button id="point">指定</button>
<div class="box"></div>
</body>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">$(function () {$('#appear').click(function () {$('.box').fadeIn('slow', function () {});});$('#dis').click(function () {$('.box').fadeOut('slow', function () {});});$('#change').click(function () {$('.box').fadeToggle('slow', function () {})});$('button').eq(3).click(function () {$('.box').fadeTo(2000, 5);});});
</script>
</html>

淡入淡出

jQuery标签属性操作

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>标签属性操作</title><style type="text/css">.app{width: 200px;height: 200px;background-color: red;}</style>
</head>
<body>
<button>隐藏</button>
<div id="box" class="app"></div>
</body>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">$(function () {// 里面attr的参数是'id'，不是'#box';// 返回值是jQuery的box类// 获取属性var idValue = $('div').attr('id');console.log(idValue);//    设置值//     $('div').attr('class','apps');//    移除属性
        $('button').click(function () {$('div').removeAttr('class');});})
</script>
</html>

标签属性操作 attr函数用法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>prop用法</title>
</head>
<body><div><p class="item">1</p><p class="item2">2</p><p class="item3">3</p><p>4</p>男<input type="radio" id="text1" name="sex" checked="add"/>女<input type="radio" id="text2" name="sex" /><button>提交</button></div></body>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">$(function () {// console.log($('p').prop('.item2'));
        $('p:eq(3)').prop('class', 'item4');$('input:eq(0)').attr('checked');// prop 返回值为true
        console.log($('input:eq(0)').prop('checked'));$('button').click(function () {alert($('input:eq(0)').prop("checked")?"男":"女");});})
</script>
</html>

prop函数的用法

prop返回的值为Boolean值。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>选项卡</title><style type="text/css">ul li.active{color: yellow;}</style>
</head>
<body>
<ul><li>1</li><li>2</li><li>3</li><li>4</li>
</ul>
</body>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">$(function () {$('ul li').click(function () {//    修改css来修改表单的颜色// $(this).css('color', 'green').siblings('li').css('color', 'black');//    修改类名来修改表单颜色
            $(this).addClass('active').siblings('li').removeClass('active');});})</script>
</html>

制作选项卡

jQuery类属性操作

addClass函数

示例：用了两种方法，一是用之前学的.css函数来做，

二是先定义addClass函数，之后通过addClass 函数来调用函数

val函数

表单操作

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form表单value值</title>
</head>
<body>
<form action=""><input type="radio" name="sex" value="112" />男<!-- 设置checked属性表示选中当前选项--><input type="radio" name="sex" value="11" checked="">女<input type="radio" name="sex" value="11">其他<input type="checkbox" value="a" checked="">吃饭<input type="checkbox" value="b">睡觉<input type="checkbox" value="c" checked="">打豆豆<!--下拉表单 option表单 option标签内设置selected属性 表示选中当前--><select name="timespan" id="timespan" class="Wdate"><option value="1">8:00-8:30</option><option value="2" selected="">8:30-9:00</option><option value="3">9:00-9:30</option></select><input type="text" name="" id="" value="111" /></form>
</body>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">$(function () {//     选择type是radio的默认被打钩的value值
        console.log($('input[type="radio"]:checked').val());//     复选框被选中的value，获取的是第一个被选中的值
        console.log($('input[type="checkbox"]:checked').val());//     下拉列表被选中的值var $obj = $('#timespan option:selected');//     获取被选中的值var $time = $obj.val();console.log($time);//      获取文本var $time_text = $obj.text();console.log(`val:${$time},text:${$time_text}`)//    设置值 value值一定要是一个数组，用[]来括起来
        $("input[type='radio']").val(['112']);$("input[type='checkbox']").val(['a', 'b']);});</script>
</html>

val函数

我们知道如果想获取class，需要用.class_name，获取id，用#id_name。

而对于input获取可以通过input[type="type_name"]来获取

而获去value值，更多的是为了提交表单做准备。

文档操作

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>文档操作</title>
</head>
<body><!--<ul></ul>--><ol><li class="li1">first</li><li></li><li></li><li></li></ol>
<ul><li>first</li><li>second</li><li>third</li><li>forth</li>
</ul>
<button>点击</button>
</body>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">$(function () {//     添加字符串
        $('ul').append('<li class="item1">哈哈</li>');var oLi = document.createElement('li');oLi.innerHTML = 'hh';//     添加js对象
        $('ul').append(oLi);//     添加jQuery对象 之前的元素会被移除
        $('ul').append($('.li1'));//     $('ul li').click(function () {//         $('ul').append($(this));//     });//    添加到第一个
        $('ul').prepend('<li>到第一个</li>');//    clone(ture)会复制$(this)的属性，而默认的false不会复制属性
        $('button').click(function () {$(this).clone().insertAfter(this);});//    删除操作//     $('button').remove();//     detach同样是删除操作，但可以保留之前设置的属性var $btn = $('button').detach();$('ul').append($btn);});
</script>
</html>

文档的增删操作

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>修改操作</title>
</head>
<body>
<h5>h5标签</h5>
</body>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">// 修改操作
    $(function () {$('h5').replaceWith('<a href="#">hello world</a>');}</script>
</html>

文档的修改操作

这里需要记住几个函数

append函数：在队尾添加操作

prepend函数：添加在第一个

replaceWith函数：修改标签

remove函数：删除操作

detach函数：删除操作，但可以保留之前设置的属性

jQuery的位置信息

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery的位置信息</title><style>*{padding: 0;margin: 0;}.box{width: 200px;height: 200px;background-color: red;/*这里看到是行内距离在哪些函数会计算进去*/padding: 50px;border: 1px solid green;margin-left: 50px;margin-top: 100px;position: absolute;}.father{width: 400px;height: 400px;background-color: yellow;position: relative;}.box2{width: 100px;height: 100px;background-color: pink;bottom: 0;right: 30px;position: absolute;}</style>
</head>
<body>
<button>变大</button>
<div class="father"><div class="box"></div><div class="box2">返回顶部</div>
</div>
</body>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">$(function () {// 如果width不写，表示获取.box的width的值 这里的值是数值
        console.log($('.box').width());//    这里获取的值为字符串
        console.log($('.box').css('width'));// 使div变大
        $('button').eq(0).click(function () {// 通过next获取下一个同辈元素
            $(this).next().width(300);});// 获取内部宽的函数 会获取padding值
        console.log($('.box').innerWidth());// 获取外部宽  会把边框和margin值都计算
        console.log($('.box').outerWidth());// 偏移坐标
        console.log($('.box').offset().top);console.log($('.box').offset().left);// animate是用来设置动画的// $('.box').css({//     width: 200,//     height: 200// }).offset({top: 100, left: 100}).animate({//     width: 0,//     height: 0// }, 1000);//    position函数
        console.log($('.box').offset());console.log($('.box').position());//    返回的是数值类型
        $(document).scroll(function () {console.log($(document).scrollTop());})//
        $('.box2').click(function () {$('html').animate({'scrollTop': 0}, 1000);});});
</script>
</html>

jQuery的位置信息

通过获取位置信息，可以做一些滚动操作。

转载于:https://www.cnblogs.com/abc23/p/10319060.html