jquery基础语法

最新推荐文章于 2024-10-10 10:50:43 发布

Mu Yoah

最新推荐文章于 2024-10-10 10:50:43 发布

阅读量101

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_46131005/article/details/129252519

版权

*jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

jQuery 很容易学习。*

jquery 引入

 <body>
    <div class="box"></div>
    <div class="box1"></div>
    <div class="box1"></div>
  </body>
  <!-- 使用jQuery -->
  <!-- 1-引入jQuery的js文件 -->
  <script src="jquery-3.6.3.min.js"></script>
  <script>
    // 2-jquery基础语法 $('selctor').action()
    // selctor————css相关的选择器名
    // action()——操作方法、事件函数

    console.log($);

    //js获取的dom对象
    var box = document.querySelector(".box");
    console.log(box);

    //获取jquery对象——不会局限于数量，返回的都是 数组集合
    var $box = $('.box')
    console.log($box);

    var $box1 = $('.box1')
    console.log($box1);

    //用jquery的方法获取dom对象
    var $boxDom = $('.box')[0]
    console.log($boxDom);

    var $box1Dom = $('.box1')[1]
    console.log($box1Dom);

    //用get函数获取jquery的dom对象
    //get的参数代表 该元素在jquery数组对象里面的下标
    var $boxGet = $('.box').get(0)
    console.log($boxGet);

jquer选择器

 <body>
    <div class="box">1</div>
    <div class="box">2</div>
    <span class="Bspan">2</span>
    <div class="box">3</div>
    <div class="box">
        <span class="ispan">4</span>
    </div>
    <div class="box">5</div>
    <div class="box">6</div>
    <span class="Aspan">4</span>

  </body>
  <script src="jquery-3.6.3.min.js"></script>
  <script>
    // var $boxFirst = $('.box').get(0)
    // var $boxFirst = $('.box:first-child')

    // 获取第一个/最后一个
    // var $boxFirst = $('.box').first()
    // console.log($boxFirst);
    // var $boxLast = $('.box').last()
    // console.log($boxLast);

    // // eq(下标值从0开始)
    // var $box4 = $('.box').eq(3)[0]
    // console.log($box4);

    
    // 前一个——同级
    var $spanPrev = $('.ispan').prev()
    console.log($spanPrev);

    //前所有——同级，但是出来的数据顺序是倒叙的
    var $spanPrevAll = $('.ispan').prevAll()
    console.log($spanPrevAll);
    console.log($spanPrevAll[0]);

    // 后一个——同级
    // var $spanPrev = $('.Bspan').next()
    // console.log($spanPrev);

    // //后所有——同级，出来的数据顺序  顺的
    // var $spanPrevAll = $('.Bspan').nextAll()
    // console.log($spanPrevAll);
    // console.log($spanPrevAll[0]);

     // 筛选器8：parent()
    console.log($('.span2').parent());

    // 筛选器9：parents() _ 找到所有父亲
    console.log($('.span2').parents());

    // 筛选器10：siblings()_找同级兄弟
    console.log($('.span1').siblings());

    // 筛选器11：find()_找子级满足条件的元素
    console.log($('.box').find('div'));

    //筛选器12：index()_找元素的索引
    console.log($('.box:nth-child(4)').index());
    
    //筛选器13：closest('B') _  找到 选择器A 的最近满足条件B的 开始于当前元素 的一个节点
    console.log($('.span2').closest('.box'));
    console.log($('.span2').closest('div'));
    console.log($('.box3').closest('div'));

  </script>

jquery操作元素

<body>
    <div class="box">
        <p>这是写在div中p标签里的文字</p>
        <input type="text" value="123456好">
    </div>
</body>
<script src="jquery-3.6.3.min.js"></script>
<script>
    // //html()——同innerHTML()
    console.log($('.box').html());
    在某个元素内部添加/替换元素
    console.log($('.box').html(`<div>1</div>`));



    // // text()——同innerText()
    console.log($('.box').text());
    console.log($('.box').text("123"));
    console.log($('.box').text("<div>1</div>"));
    //页面只会显示<div>1</div> 不能进行转换



    //val()——读取/修改表单元素的值
   console.log($('input').val());
   console.log($('input').val("好上加好"));
   console.log($('input').val());
</script>

jquer操作类名

//注意 都不要加 小数点
    //hasClass() —— 判断类名是否存在,返回值为 true/false
    // console.log($('div').hasClass('box1'));

    // addClass()_ 添加类名
    // console.log($('div').addClass('box4'));

    // removeClass()_删除类名
    // console.log($('div').removeClass('box2'));

    //toggleClass()
    //获取切换按钮——只要原生有当前类名，他就会删除；没有当前类名，就会添加
    // console.log($('div').toggleClass('box2'));

jquery操作样式

// // 获取指定样式 .css('样式属性名')
    // var box1css = $('.box1').css('width')
    // var box1css = $('.box1').css('opacity')
    // console.log(box1css);
    
    // // 修改指定样式名的值 .css('样式属性名','值')
    // var box2css = $('.box1').css('width','200px')
    // console.log(box1css);
    // // console.log(box2css);

    //通过函数来给样式属性名赋值
    //参数1  要修改的样式属性名
    // $('.box1').css('width',function (index,v) {
    //     // //index 每一个下标
    //     console.log(index);
    //     // //v 每一个对应的width 的初始值
    //     console.log(v);

    //     if (index % 2 == 0) {
    //         //如果下标 是2的倍数 ，就为其的width改值______通过return返回的就是要修改的值
    //         return '300px'
    //     }
    // })

    //修改多个样式 css({样式1:值,样式2:值})
    // $('.box1').eq(0).css({
    //     width:200,
    //     'background-color':'red'
    // })