jQuery学习笔记

最新推荐文章于 2024-07-06 22:48:04 发布
最新推荐文章于 2024-07-06 22:48:04 发布
阅读量552 收藏 5
点赞数 8
文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46264622/article/details/119570781
版权

jQuery学习笔记

一、 jQuery的下载

在这里插入图片描述

使用前必须先引入jQuery

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

二、jQuery的基本使用

1、 jQuery的入口函数

在这里插入图片描述

  <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
<script>
        // $('div').hide();
        // 1. 等着页面DOM加载完毕再去执行js 代码
        // $(document).ready(function() {
        //     $('div').hide();
        // })
        // 2.  等着页面DOM加载完毕再去执行js 代码
        $(function() {
            $('div').hide();

        })
    </script>
    <div></div>

2、jQuery的顶级对象$

在这里插入图片描述

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
    <div></div>
    <script>
        // 1. $ 是jQuery的别称（另外的名字）
        // $(function() {
        //     alert(11)
        // });
        jQuery(function() {
            // alert(11)
            // $('div').hide();
            jQuery('div').hide();
        });
        // 2. $同时也是jQuery的 顶级对象
    </script>

3、jQuery对象和DOM对象

在这里插入图片描述

    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
 <div></div>
    <span></span>
    <script>
        // 1. DOM 对象：  用原生js获取过来的对象就是DOM对象
        var myDiv = document.querySelector('div'); // myDiv 是DOM对象
        var mySpan = document.querySelector('span'); // mySpan 是DOM对象
        console.dir(myDiv);
        // 2. jQuery对象： 用jquery方式获取过来的对象是jQuery对象。 本质：通过$把DOM元素进行了包装
        $('div'); // $('div')是一个jQuery 对象
        $('span'); // $('span')是一个jQuery 对象
        console.dir($('div'));
        // 3. jQuery 对象只能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 属性和方法
        // myDiv.style.display = 'none';
        // myDiv.hide(); myDiv是一个dom对象不能使用 jquery里面的hide方法
        // $('div').style.display = 'none'; 这个$('div')是一个jQuery对象不能使用原生js 的属性和方法
    </script>

4、jQuery对象和DOM对象相互转换

在这里插入图片描述

    <video src="mov.mp4" muted></video>
    <script>
        // 1. DOM对象转换为 jQuery对象
        // (1) 我们直接获取视频，得到就是jQuery对象
        // $('video');
        // (2) 我们已经使用原生js 获取过来 DOM对象
        var myvideo = document.querySelector('video');
        // $(myvideo).play();  jquery里面没有play 这个方法
        // 2.  jQuery对象转换为DOM对象
        // myvideo.play();
        $('video')[0].play()
        $('video').get(0).play()
    </script>

三、jQuery基本和层级选择器

1、jQuery基本选择器

在这里插入图片描述

2、jQuery层级选择器

在这里插入图片描述

  <div>我是div</div>
    <div class="nav">我是nav div</div>
    <p>我是p</p>
    <ol>
        <li>我是ol 的</li>
        <li>我是ol 的</li>
        <li>我是ol 的</li>
        <li>我是ol 的</li>
    </ol>
    <ul>
        <li>我是ul 的</li>
        <li>我是ul 的</li>
        <li>我是ul 的</li>
        <li>我是ul 的</li>
    </ul>
    <script>
        $(function() {
            console.log($(".nav"));
            console.log($("ul li"));

        })
    </script>

四、jQuer隐式迭代

在这里插入图片描述

在这里插入图片描述

   <div>惊喜不，意外不</div>
    <div>惊喜不，意外不</div>
    <div>惊喜不，意外不</div>
    <div>惊喜不，意外不</div>
    <ul>
        <li>相同的操作</li>
        <li>相同的操作</li>
        <li>相同的操作</li>
    </ul>
    <script>
        // 1. 获取四个div元素 
        console.log($("div"));

        // 2. 给四个div设置背景颜色为粉色 jquery对象不能使用style
        $("div").css("background", "pink");
        // 3. 隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法
        $("ul li").css("color", "red");
    </script>

五、jQuery筛选选择器

在这里插入图片描述

    <ul>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
    </ul>
    <ol>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
    </ol>
    <script>
        $(function() {
            $("ul li:first").css("color", "red");
            $("ul li:eq(2)").css("color", "blue");
            $("ol li:odd").css("color", "skyblue");
            $("ol li:even").css("color", "pink");
        })
    </script>

六、jQuery筛选方法(重点)

在这里插入图片描述

    <div class="yeye">
        <div class="father">
            <div class="son">子盒子</div>
        </div>
    </div>

    <div class="nav">
        <p>我是π</p>
        <div>
            <p>我是p</p>
        </div>
    </div>
    <script>
        // 注意一下都是方法 带括号
        $(function() {
            // 1. 父  parent()  返回的是 最近一级的父级元素 亲爸爸
            console.log($(".son").parent());
            // 2. 子
            // (1) 亲儿子 children()  类似子代选择器  ul>li
            // $(".nav").children("p").css("color", "red");
            // (2) 可以选里面所有的孩子 包括儿子和孙子  find() 类似于后代选择器
            $(".nav").find("div p").css("color", "red");
            // 3. 兄
        });
    </script>

精品展示案例

在这里插入图片描述
在这里插入图片描述

 <div class="wrapper">
        <ul id="left">
            <li><a href="#">女靴</a></li>
            <li><a href="#">雪地靴</a></li>
            <li><a href="#">冬裙</a></li>
            <li><a href="#">呢大衣</a></li>
            <li><a href="#">毛衣</a></li>
            <li><a href="#">棉服</a></li>
            <li><a href="#">女裤</a></li>
            <li><a href="#">羽绒服</a></li>
            <li><a href="#">牛仔裤</a></li>
        </ul>
        <div id="content">
            <div>
                <a href="#"><img src="images/女靴.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/雪地靴.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/冬裙.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/呢大衣.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/毛衣.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/棉服.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/女裤.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/羽绒服.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/牛仔裤.jpg" width="200" height="250" /></a>
            </div>

        </div>


    </div>

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-size: 12px;
        }
        
        ul {
            list-style: none;
        }
        
        a {
            text-decoration: none;
        }
        
        .wrapper {
            width: 250px;
            height: 248px;
            margin: 100px auto 0;
            border: 1px solid pink;
            border-right: 0;
            overflow: hidden;
        }
        
        #left,
        #content {
            float: left;
        }
        
        #left li {
            background: url(images/lili.jpg) repeat-x;
        }
        
        #left li a {
            display: block;
            width: 48px;
            height: 27px;
            border-bottom: 1px solid pink;
            line-height: 27px;
            text-align: center;
            color: black;
        }
        
        #left li a:hover {
            background-image: url(images/abg.gif);
        }
        
        #content {
            border-left: 1px solid pink;
            border-right: 1px solid pink;
        }
    </style>

    <script src="jquery.min.js"></script>
    <script>
        $(function() {
            // 1. 鼠标经过左侧的小li 
            $("#left li").mouseover(function() {
                // 2. 得到当前小li 的索引号
                var index = $(this).index();

                console.log(index);
                // 3. 让我们右侧的盒子相应索引号的图片显示出来就好了
                // $("#content div").eq(index).show();
                // 4. 让其余的图片（就是其他的兄弟）隐藏起来
                // $("#content div").eq(index).siblings().hide();
                // 链式编程
                 // $(this).css("background", "red");
                // 3. 其余的兄弟去掉背景颜色 隐式迭代
                //$(this).siblings("ul li").css("background", "");
                
                $(this).css("background", "red").siblings().css("background", "");
                // $(this).css("color", "red").siblings.css("color", "");
                $("#content div").eq(index).show().siblings().hide();

            })
        })
    </script>

新浪下拉案例

 <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
    </ul>

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        a {
            text-decoration: none;
            font-size: 14px;
        }
        
        .nav {
            margin: 100px;
        }
        
        .nav>li {
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
        }
        
        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
        }
        
        .nav>li>a:hover {
            background-color: #eee;
        }
        
        .nav ul {
            display: none;
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }
        
        .nav ul li {
            border-bottom: 1px solid #FECC5B;
        }
        
        .nav ul li a:hover {
            background-color: #FFF5DA;
        }
    </style>

<script>
        $(function() {
            // 鼠标经过
            $(".nav>li").mouseover(function() {
                // $(this) jQuery 当前元素  this不要加引号
                // show() 显示元素  hide() 隐藏元素
                $(this).children("ul").show();
            });
            // 鼠标离开
            $(".nav>li").mouseout(function() {
                $(this).children("ul").hide();
            })
        })
    </script>

//jQuery筛选方法（下）
   <ol>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li class="item">我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
    </ol>
    <ul>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
    </ul>
    <div class="current">俺有current</div>
    <div>俺木有current</div>
    <script>
        // 注意一下都是方法 带括号
        $(function() {
            // 1. 兄弟元素siblings 除了自身元素之外的所有亲兄弟
            $("ol .item").siblings("li").css("color", "red");
            // 2. 第n个元素
            var index = 2;
            // (1) 我们可以利用选择器的方式选择
            // $("ul li:eq(2)").css("color", "blue");
            // $("ul li:eq("+index+")").css("color", "blue");
            // (2) 我们可以利用选择方法的方式选择 更推荐这种写法
            // $("ul li").eq(2).css("color", "blue");
            // $("ul li").eq(index).css("color", "blue");
            // 3. 判断是否有某个类名
            console.log($("div:first").hasClass("current"));
            console.log($("div:last").hasClass("current"));


        });
    </script>

七、jQuery排他思想

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

八、链式编程

在这里插入图片描述

    woshi body 的文字
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <script>
        $(function() {
            // 1. 隐式迭代 给所有的按钮都绑定了点击事件
            $("button").click(function() {
                // 2. 让当前元素颜色变为红色
                // $(this).css("color", "red");
                // 3. 让其余的兄弟元素不变色 
                // $(this).siblings().css("color", "");
                // 链式编程
                // $(this).css("color", "red").siblings().css("color", "");
                // 我的颜色为红色, 我的兄弟的颜色为空
                // $(this).siblings().css('color', 'red');
                // 我的兄弟变为红色  ,我本身不变颜色
                $(this).siblings().parent().css('color', 'blue');
                // 最后是给我的兄弟的爸爸 body 变化颜色 

            });
        })
    </script>
阿远ay
关注
Jquery学习笔记Jquery学习笔记
10-29
Jquery学习笔记 Jquery学习笔记 Jquery学习笔记
jQuery笔记
最新发布
weixin_51644244的博客
07-24 964
框架：半成品软件Jquery就是封装好的js 本质上还是jsjQuery是一个快速、简洁的JavaScript，是继Prototype之后又一个优秀的或JavaScript框架JQuery:封装好的代码库。有一些大牛（官方）嫌弃js用着不好，很多具有特殊功能的代码的集合。就把这些代码写在一个js文件中，名字就叫 jquery.js。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的。
jQuery的学习笔记
qi_bai_jin的博客
11-06 1674
jQuery是一个快速，小型且功能丰富的JavaScript库。它使HTML文档遍历和操作，事件处理，动画和Ajax之类的事情变得更加简单，并且易于使用的API可以在多种浏览器上运行。凭借多功能性和可扩展性的结合，jQuery改变了数百万人编写JavaScript的方式。
jquery学习笔记
05-16
《jQuery学习笔记详解》 jQuery，作为一款广泛应用于Web开发的JavaScript库，以其简洁的API、强大的功能和广泛的社区支持，极大地简化了DOM操作、事件处理、动画制作以及Ajax交互等任务。这篇学习笔记将深入探讨...
JQuery学习笔记
09-02
以下是对JQuery学习笔记的详细解析： 首先，JQuery的出现是为了弥补JavaScript在处理浏览器兼容性和控件操作上的不足。不同浏览器对JavaScript的实现存在差异，导致开发跨浏览器的网页应用变得复杂。为了统一这些...
jQuery学习笔记（一）
07-13
**jQuery学习笔记（一）** 在深入探讨jQuery之前，我们首先要理解什么是jQuery。jQuery是一个高效、易用且功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。由John Resig在2006...
Jquery学习笔记分享
11-24
**jQuery学习笔记分享** 在Web开发中，jQuery是一个非常重要的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。本文将深入探讨jQuery的基本概念、核心功能以及常见用法。 ### 第1章：...
jQuery 笔记
weixin_51644244的博客
07-06 953
框架：半成品软件Jquery就是封装好的js 本质上还是jsjQuery是一个快速、简洁的JavaScript**框架**，是继Prototype之后又一个优秀的**JavaScript代码库**（*或JavaScript框架*）。JQuery:封装好的代码库。有一些大牛（官方）嫌弃js用着不好，很多具有特殊功能的代码的集合。就把这些代码写在一个js文件中，名字就叫 jquery.js。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。
jquery笔记
weixin_34235105的博客
03-16 72
$(document).ready(function(){ }); 这个代码在Dom结构绘制完 后 就马上加载 这个代码可以有多个 或者简写为 $(function(){}) Jquery选择器 $(p) 标签选择器 $(“[name=’myname’]”) 属性选择器，此处的name为标签中的name属性 ...
jQuery - 学习笔记 -
weixin_41170223的博客
01-15 398
获取元素 模拟css选择元素 div id="div1" class="box">Divdiv> $('#div1') // 获取 id $('div') // 获取 标签 $('.box') // 获取 class 独有表达式选择 body> ul> l
jQuery 学习笔记
学习笔记
10-16 576
jQuery 学习笔记 记录学习jQuery过程中的点滴 $.on('load',function(){}) //添加监听事件 $('#load_more').off('click') //移去监听事件，如：加载按钮没有更多数据的时候 $.ajax({ type:"GET", //获取数据的方式 url: "film.php/?page="+page, //地址 data
【锋利的JQuery】 学习笔记
D!eR 个人博客
11-23 2399
据说是一本不错的JQuery书，看完后感觉总体也不错，介绍的挺全面的，列举了大量的例子，比较易懂。加上之前学过一点CSS方面的知识，所以在看选择器这部分也比较容易理解（很多都是CSS的写法）。总体感觉，JQuery大置分成了几大块：选择器、DOM操作、事件、动画、AJAX。本书都一一的介绍了，特别是选择器，几乎每种选择器都列举了一个例子，很容易看懂。此文为读本书的过程中，记录的一些笔记，例子不是书
Jquery学习笔记分享：优势应用及选择器详解
在这里，我们将分享一些 Jquery 学习笔记，希望能够帮助广大开发者更好地掌握和运用 JQuery。 在第一章中，我们首先了解了 JQuery 的概述。JQuery 的基本作用主要是简化 JavaScript 编程，提高开发效率，减少代码量...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值