JQuery学习小记（一）

最新推荐文章于 2024-03-21 06:11:21 发布

CoderD

最新推荐文章于 2024-03-21 06:11:21 发布

阅读量534

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/CoderD/article/details/106908199

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

JQuery是什么？

JavaScript库，对原生的js代码进行了封装。为了快速方便的操作DOM，里面基本都是函数。

设计宗旨：write less,do more 。J就是JS，Q是query（查询），意思是查询JS。

JQuery的使用：

https://code.jquery.com/jquery-3.5.1.min.js

复制网址代码，在项目里粘贴jquery.min.js文件中，在网页头部文件引入即可。

jQuery的入口函数——下面两者功能一样，一般用第一个即可，是等Document加载完成再去执行js

jQuery的顶级对象$

$是jQuery的别称，在代码中可以用jQuery代替$，但一般直接使用$
$是jQuery的顶级对象，相当于原生js中的window，把元素利用$包装成jQuery对象，就可以调用jQuery方法。

jQuery对象和DOM对象

用原生JS获取来的对象是DOM对象
jQuery方法获取的元素就是jQuery对象
jQuery对象的本质是：利用$对DOM对象包装后产生的对象(伪数组形式存储)

    <div></div>
<script>
    //myDiv是DOM对象
    var myDiv = document.querySelector('div');
    console.dir(myDiv);
    //下面是jQuery对象
    $('div');
    console.dir($('div'));
    //注意：两者产生的对象不同，并且jQuery对象只能使用jQuery方法，DOM对象只能使用JS方法，不能混用。
</script>
</body>

div——DOM对象；S.fn....——jQuery对象

DOM对象和jQuery对象可以相互转换

因为原生JS比JQuery更大，原生的一些属性和方法JQuery没有给我们封装，因此我们要使用这些属性和方法需要把JQuery对象转换为DOM对象去使用。

DOM对象转换为jQuery对象 —— $(DOM对象)
jQuery对象转换为DOM对象（两种方式）

JQuery常用API:

JQ选择器：

基础选择器 —— $( "选择器" ) //里面选择器直接写CSS选择器即可，但要加引号

层级选择器

隐式迭代（重要）

遍历内部DOM元素（伪数组形式存储）的过程就叫做隐式迭代。

简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作。

    <div>我是Div</div>
    <div>我是Div</div>
    <div>我是Div</div>
    <div>我是Div</div>
    <ul>
        <li>我的ul的</li>
        <li>我的ul的</li>
        <li>我的ul的</li>
        <li>我的ul的</li>
    </ul>
<script>
    //把四个全部背景改成粉色
    $('div').css("background","pink");
    //把所有li改成红色
    $('ul li').css('color','red');
</script>

筛选选择器

<ul>
    <li>我的ul的</li>
    <li>我的ul的</li>
    <li>我的ul的</li>
    <li>我的ul的</li>
</ul>
<script>
    $(function () {
        $('ul li:first').css('color','red');
        $('ul li:eq(2)').css('color','blue');
    })
</script>

筛选方法上（重点）

<body>
    <div class="father">
        <div class="son">erzi</div>
    </div>
    <div class="nav">
        <p>我是皮</p>
        <div>
            <p>我是p</p>
        </div>
    </div>
<script>
    $(function () {
        // 1. 父  parent()
        $('.son').parent(); //返回father
        // 2. 子
            //（1） 亲儿子 children() 类似子代选择器 ul>li
            $('.nav').children('p').css('color','red');
            //(2) 可以选里面所有的孩子，包括儿子和孙子 find() 类似后代选择器 ul li
            $('.nav').find('p').css('color','red');
        // 3. 兄
    })
</script>

案例——下拉菜单：

筛选方法下（重点）

<ol>
    <li>我是ol的</li>
    <li class="item">我是ol的</li>
    <li>我是ol的</li>
    <li>我是ol的</li>
</ol>
<ul>
    <li>我的ul的</li>
    <li>我的ul的</li>
    <li>我的ul的</li>
    <li>我的ul的</li>
</ul>
<div class="current">有current</div>
<div>没有current</div>
<script>
    $(function () {
        // 1 兄弟元素
            //找出class是item的元素，找出不包括他本身的兄弟节点，改变颜色。
        $('ol .item').siblings('li').css('color','red');
        $('ol .item').nextAll().css('color','blue');
        // 2 第n个元素
            //（1）利用选择器的方法
        $('ul li:eq(2)').css('color','blue');
            //（2）利用选择方法的方式  更推荐这种写法
        $('ul li').eq(3).css('color','red');
        // 3 判断是否有某个类名
        console.log($('div:first').hasClass('current'));
        console.log($('div:last').hasClass('current'));
    })
</script>

排他思想

想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。

    <button>kuaius</button>
    <button>kuaius</button>
    <button>kuaius</button>
    <button>kuaius</button>
    <button>kuaius</button>
    <button>kuaius</button>
    <button>kuaius</button>
<script>
    $(function () {
        //隐式迭代 给所有的按钮都绑定了点击事件
        $('button').click(function () {
            //当前元素变化背景颜色
            $(this).css('background','red');
            //其余兄弟去掉背景颜色
            $(this).siblings('button').css('background','');
        });
    })
</script>

CoderD

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JQuery学习小记（一）

JQuery是什么？JavaScript库，对原生的js代码进行了封装。为了快速方便的操作DOM，里面基本都是函数。设计宗旨：write less,do more 。J就是JS，Q是query（查询），意思是查询JS。JQuery的使用：https://code.jquery.com/jquery-3.5.1.min.js复制网址代码，在项目里粘贴jquery.min.js文件中，在网页头部文件引入即可。jQuery的入口函数——下面两者功能一样，一般用第一个即可，是等Do..
复制链接

扫一扫

专栏目录