jquery基础操作

时间：2021-04-04 21:24:05 阅读：22 评论：0 收藏：0 [点我收藏+]

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(‘hide‘);
?
        } else {
            $(‘.s1‘).addClass(‘hide‘);
        }
    });
    $(‘.s1‘).click(function () {
        $(window).scrollTop(0);
        $(‘.s2‘).text(‘老婆请嫁给我吧‘);
    })
</script>
</body>
</html>

获取盒子模型尺寸

$(‘div‘).width(); // 获取宽度
$(‘div‘).height(); //获取高度
$(‘div‘).innerHeight(); //获取padding+content高度
$(‘div‘).innerWidth(); //获取padding+content 宽度
$(‘div‘).outerWidth(); //获取padding+content+border 宽度
$(‘div‘).outerHeight();//获取padding+content+border 高度

文本值

//获取文本值
$(‘div‘).text(); //只获取文本内容 
$(‘div‘).html(); //会获取到标签
//修改文本内容
$(‘div‘).text(‘<h1> 你好,安妮 <h1>‘); //会把h1当成字符串写入
$(‘div‘).html(‘<h1> 你好,安妮 <h1>‘); //会把h1当标签实现

取值

//文本框
$(‘[name = username]‘).val();
//单选框
$(‘[name = sex]:checked‘).val();
//多选框
var a = $(‘[name = hobby]:checked‘);
for (var i =0;i<a.length;i++){
 console.log(a.eq(i).val());
};
//下拉选择框(单选)
$(‘[name = city]‘).val();
//下拉框多选
$(‘[name = city]‘).val();//["1", "2", "3"]
?

设置值

//文本框
$(‘[name = username]‘).val(‘东哥无敌‘);
//单选框
$(‘[name = sex]‘).val([‘1‘])
//多选框
$(‘[name = hobby]‘).val([‘2‘,‘3‘]);
//下拉框
$(‘[name = city]‘).val([‘2‘,‘3‘]); //设置多个值
$(‘[name = city]‘).val(‘2‘); //设置单个值

作业一 : 自定义验证登录

属性操作

//查看属性
$(‘:checked‘).attr(‘checked‘); //获取的是checked ,没有的话 undefined
//设置属性
$(‘:checked‘).attr(‘xx‘,‘oo‘); //设置了xx =‘oo‘ 的属性
//设置多个属性
$(‘:checked‘).attr({‘name‘:‘alex‘,‘age‘:18}) ;
//删除属性
$(‘:checked‘).removeattr(‘xx‘,‘oo‘);
原因:兼容性 
prop -- 针对的是 checked,disabled,selected 属性含有true 和false属性值
方法跟attr一致 查看属性时 有就返回true 没有返回false
?
$(‘:radio‘).eq(0).attr(‘checked‘,‘checked‘);
$(‘:radio‘).eq(0).attr(‘checked‘,true); 全选 checked属性全部给true

作业二反选与全选

作业三开除和新增

文档处理

// 在元素内部末尾添加  
append 
 $(‘div‘).append(‘<a href ="http://www.baidu.com">百度</a>);
appendTo
prepend 在元素内部前面添加 
prependTo
before 在元素外部前面添加
insertBefore
after 在元素外部后面添加
insertAfter 
clear() //删除整个元素
empty() //清空整个元素
replacewith() //用A替换B
reolaceAll() //用b替换a
//克隆
clone()
//克隆里边的方法 clone(true)
 $(‘button‘).click(function () {
        var b = $(this).clone(true);
        $(this).after(b);
    })

jquery基础操作

原文：https://www.cnblogs.com/learn-record/p/14615669.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)