【jQuery】必须了解的内容

Iman_Xu
108 阅读1分钟
  1. jQuery 是 js 的一个库，封装了我们开发过程中常用的一些功能。要使用jQuery库，得先下载后引入：

<script src="jquery-3.6.0.min.js"></script>

  1. 原生js获得的对象是DOM对象，返回的就是对象；用"$"获得的对象是jQuery对象，返回的是一个伪数组，本质是用$将DOM进行了包装。
console.log(document.querySelector('div')); //div

console.log($('div')); //[div, prevObject: S.fn.init(1)]

$和jQuery等价：$("div") = jQuery("div")

3.  jQuery中等待页面DOM结构渲染完后就可以执行js代码

$(function(){
    $('div').hide();
})
//两种方式等价
$(doucment).ready(function(){
    $('div').hide();
})
  1. jQuery对象转为DOM对象：
  • $().[index]
  • $().get(index) 

⭐5. 隐式迭代：把匹配的所有元素内部进行遍历循环，给每一个元素添加相应的内容。

$(function(){
    $('li').css('background','pink');
    console.log($('li'));
})

​

  1. 筛选选择器
:first$('li:first')获取第一个li元素
:last$('li:last')获取最后一个li元素
:eq(index)$('li:eq(3)')获取第4个元素，索引号从0开始

⭐7. 筛选方法

parent()$('li').parent查找父级
children()$('ul').children('li')相当于$('ul>li') 子代选择
find()$('ul').find('li')相当于$('ul li') 后代选择
eq()$('li').eq(3)相当于$('li:eq(3)')，索引号从0开始
siblings()$('li:eq(3)').siblings('li')查找除本身外的兄弟节点
nextAll()$('li:eq(3)').nextAll()查找当前元素之后的所有同辈元素
prevAll()$('li:eq(3)').prevAll()查找当前元素之后的所有同辈元素
  1. 类操作
  • $().addClass("xxx")  //为指定元素添加className
  • $().removeClass("xxx")   //为指定元素移除className
  1. 节点操作

 jQuery 两种方式动态创建元素。注意，创建的是 jQuery 对象。

方式一：

$("标签") ，类比于js中的document.createElement()

  • $("我是一个span元素");

方式二：（推荐）

$("").html("") ，类比innerHTML属性

  • $("#box").html("<li>我是li</li>");

 在盒子里的最末尾添加元素：

方式一：在$(selector)中追加$node

  • $(selector).append($node);   //参数是 jQuery对象

方式二：在$(selector)中追加div元素，

  • $(selector).append('<div></div>');  //参数是 htmlString
  1. 设置宽高

$().height()                       $().width()                 //不带参数表示获取，返回的是number类型

$().height(200)                 $().width(200)            //带参数表示设置

 11. 坐标操作

  • $().offset(left:100)  //获取或设置元素相对于 document 文档的位置，设置offset后，如果元素没有定位(默认值：static)，则被修改为relative。
  • $().position()  //获取相对于其最近的带有定位的父元素的位置。
  • $().scrollTop() //获取或者设置元素被卷去的头部的距离。
  1. 注册事件

on可以绑定一个或多个事件，以对象的形式书写。

$("div").mouseenter(function(){
    $(this).css("color","red");
})
$("div").mouseleave(function(){
    $(this).css("color","black");
})
//
$("div").on({
    mouseenter:function(){
        $(this).css("color","red");
    },
    mouseleave:function(){
        $(this).css("color","black");
    }
})
  1. jQuery两大特性

 ① 链式编程

 例：$("li").show().css("color","yellow");

 ② 隐式迭代

<body>
    <ul class="nav">
        <li>
            <a href="">一级菜单</a>
            <ul class="sec">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>
            <a href="">一级菜单</a>
            <ul class="sec">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>
            <a href="">一级菜单</a>
            <ul class="sec">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
    </ul>
    <script>
        $(function(){//隐式迭代，给每一个li都绑定一个事件
            $('.nav').children('li').mouseenter(function(){
                //二级菜单栏滑出动画
                $(this).children('.sec').stop().slideDown(500);
            })
            $('.nav').children('li').mouseleave(function(){
                $(this).children('.sec').stop().slideUp(500);
            })   
        })
    </script>    
</body>

​

avatar
文章
阅读
粉丝