jquery基础操作

2021-07-14 10:06:40

jquery

样式类操作

//addClass 添加样式
$(‘#div1‘).addClass(‘div2‘);
//removeClass 删除样式
$(‘#div1‘).removeClass(‘div2‘);
//hasClass 判断有没有这个样式
$(‘#div1‘).hasClass(‘div2‘);
//toggleClass 判断有没有?如果有 就删除 没有 就添加
$(‘#div1‘).toggleClass(‘div2‘);

css修改样式

//添加单个样式 属性,值
$(‘#div1‘).css(‘background-color‘,‘green‘);
//添加多个样式 创建自定义对象 键值对
$(‘#div1‘).css({‘background-color‘:‘green‘,‘width‘:‘200px‘});

位置操作

//offset() 查看当前标签相对于窗口的位置,body标签自带margin:8px
$(‘body‘).offset();
//offset({‘top‘:10,‘left‘:20}) 设置位置(与窗口的距离)
$(‘.div1‘).offset({‘top‘:20,‘left‘:20}); //这里不写px
//position() 查看与父级标签中设置position:reletive标签的距离,如果没有就是到窗口的距离
$(‘.div1‘).position();
$(window).scrollTop() //滚轮向下移动的距离(html文件超出窗口的距离);
$(window).scrollleft() //滚轮向右移动的距离

jquery绑定click事件

//this 是DOM对象 需要转换成jq对象
<script>
    $(‘div‘).click(function () {
        $(this).css(‘background-color‘,‘green‘);
    })
</script>

jquery 实现滚动条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width:100px;
            height: 100px;
            background-color: red;
        }
          .c2{
            width:100px;
            height: 400px;
            background-color: green;
        }
          .c3{
            width:100px;
            height: 400px;
            background-color: blue;
        }
          .s1{
              position: fixed;
              left: 10px;
              bottom: 20px;
              width: 100px;
              height: 60px;
              line-height: 60px;
              text-align: center;
              border: 1px solid black;
              border-radius:50% ;
              color: deepskyblue;
              background-color: black;
              font-size: 14px;
          }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<span class="s2">这里是顶部</span>
<div class="c1"></div>
<button class="btn">变</button>
<div class="c2"></div>
<div class="c3"></div>
<span class="s1 hide">请点击</span>
<!--<div class="c1"></div>-->
<script src="jquery-3.5.1.js"></script>
<script>
    $(‘.btn‘).click(function () {
        $(‘.c1‘).offset({top:100,left:200});
        $(‘.c1‘).css({‘width‘:‘200px‘,‘height‘:‘50px‘,
        ‘background-color‘:‘black‘,‘font-size‘:‘14px‘,‘color‘:‘white‘,‘text-align‘:‘center‘,‘line-height‘:‘50px‘});
        $(‘.c1‘).text(‘老婆,我爱你!下滑有惊喜‘);
    });
    $(window).scroll(function () {
        console.log($(window).scrollTop());
        if ($(window).scrollTop() >= 200){
            $(‘.s1‘).removeClass(

码农公寓

jquery

样式类操作

css修改样式

位置操作

jquery绑定click事件

jquery 实现滚动条

相关文章