JQ笔记（不定期更新）

已于 2022-09-29 01:08:46 修改
阅读量266 收藏
点赞数
分类专栏： JQ 文章标签： css 前端 jquery
于 2022-09-20 20:54:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45128912/article/details/126959938
版权

本专栏声明：
所看的教程视频链接
https://www.bilibili.com/video/BV13J41157rs/?spm_id_from=333.999.0.0&vd_source=63b96c16e78f1d3c171bd23ad477632d
所参考的文字教程链接
https://www.w3school.com.cn/jquery/index.asp
https://www.runoob.com/jquery/jquery-tutorial.html

第一节：JQ的开始 .css

正文开始
这是原始的代码和样子

<body>
    <div class="container">
        <!-- 导航栏 -->
        <div class="nav">
            <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>
        </div>
        <!-- 主页主要内容 -->
        <div class="indexCont">
            <!-- 左边 文字-->
            <div>
                <p class="p1">欢迎来到西北的网站</p>
                <p class="p2">这里面是我个人这么多年来所获取的学习资源</p>
                <p class="p3">因为我<span>学习的资源</span>也是在网上免费获取的</p>
                <p class="p4">所以在这里你<span>无须支付</span>任何费用</p>
                <p class="p5">但是需要注册后才能登录奥</p>
                <p class="p6">希望大家能够喜欢这里的资源</p>
            </div>
            <!-- 右边 图片-->
            <img src="./img/guihuajiu.jpgx" alt="">
        </div>
    </div>
</body>

在这里插入图片描述
JQ部分

	<script src="./js/jquery-3.6.0.js"></script>
    <script>
        $(function(){
            // 第一节
            // 选择所有元素
            $("*").css("padding","0");
            $("*").css("margin","0");
            // 选择 li 标签，选择多个属性
            $("li").css({
                "list-style":"none",
                "margin":"16px"
            });
            // 去掉a 标签的下划线和更换颜色
            $("a").css({
                "text-decoration": "none",
                "color":"cadetblue"
            })
            // 同时选择多个，逗号分隔
            $(".nav , .indexCont").css("display","flex");
            // 第一节 end
        })
    </script>

更多选择器的应用等用到的时候再查手册
最后效果
在这里插入图片描述

第二节：JQ方法

            /*
                filter:过滤,对已经获取到的网页元素进行过滤
                not:filter的反义词
            */
           $("p").filter(".p3").css("color","red");
           $("p").not(".p3").css("color","green");

样式效果
在这里插入图片描述这个方法我用着效果感觉怪怪的

			/*
                has:拥有，直接判定 子节点中 是否有符合条件的元素  
           */
            $("p").has("span").css({
                "font-size":"24px",
                "color":"blue"
            });

在这里插入图片描述

			/*
                prev：查找当前兄弟节点中的上一个节点
                next:查找当前兄弟节点中的下一个节点
            */
           $(".p2").prev().css("color","pink");
           $(".p5").next().css("color","yellow");

在这里插入图片描述

		   /*
                find:查找子节点
           */
          $("div").find(".p5").css("background","pink");

在这里插入图片描述

			/*
                index():获取当前节点在兄弟节点中的下标
                eq(下标)：通过下标获取指定的元素节点
            */
            document.write( $(".p4").index() ); //3
            $("p").eq(3).css({
                "font-size":"8px",
                "background":"#aa66bb"
            })
            $("p:eq(2)").css("background","#ff11cc");

在这里插入图片描述

			/*
                attr:设置和修改行间属性
            */
           $(".p3").attr("class","pp3");

在这里插入图片描述

第二节方法汇总

            // 第二节  JQ方法
            /*
                filter:过滤,对已经获取到的网页元素进行过滤
                not:filter的反义词
            */
           $("p").filter(".p3").css("color","red");
           $("p").not(".p3").css("color","green");
          
           /*
                has:拥有，直接判定 子节点中 是否有符合条件的元素  
           */
            $("p").has("span").css({
                "font-size":"24px",
                "color":"blue"
            });

            /*
                prev：查找当前兄弟节点中的上一个节点
                next:查找当前兄弟节点中的下一个节点
            */
           $(".p2").prev().css("color","pink");
           $(".p5").next().css("color","yellow");

           /*
                find:查找子节点
           */
            $("div").find(".p5").css("background","pink");

            /*
                index():获取当前节点在兄弟节点中的下标
                eq(下标)：通过下标获取指定的元素节点
            */
            // document.write( $(".p4").index() ); //3
            $("p").eq(3).css({
                "font-size":"8px",
                "background":"#aa66bb"
            })
            $("p:eq(2)").css("background","#ff11cc");
            
            /*
                attr:设置和修改行间属性
            */
           $(".p3").attr("class","pp3");
            // 第二节end

第3节：JQ方法

新建一个网页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设计课程</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        li {
            list-style: none;
            padding-left: 100px;
        }
        a {
            text-decoration: none;
            color: blueviolet;
        }
        .nav{
            display: flex;
            margin-left: 100px;
            
        }
        .active{
            background-color: rgb(100, 196, 193);
        }
        .classItem{
            background: rgb(214, 219, 156);
            padding: 20px;
            margin: 20px;
            width: 100px;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <li><a href="./index.html">主页</a></li>
        <li><a href="" class="active">设计课程</a></li>
        <li><a href="">电脑知识</a></li>
        <li><a href="">摄影课程</a></li>
        <li><a href="">电子书汇总</a></li>
    </div>
   <div id="designBox" class="attr1 attr2">
        <div class="classItem">PS 课程</div>
        <div class="classItem">Pr 课程</div>
        <div class="classItem">AE 课程</div>
        <div class="classItem">手机摄影课程</div>
        <div class="classItem">相机摄影课程</div>
        <div class="classItem">转手绘课程</div>
        <div class="classItem">电商设计课程</div>
        <div class="classItem">影楼设计课程</div>
    </div>
</body>
</html>

网页内容
在这里插入图片描述

 	<script src="./js/jquery-3.6.0.js"></script>
    <script>
        $(function(){
            // 第3节 JQ方法
            /*
                操作class属性,只能用于id元素，不能用于类元素
                addClass():添加类属性
                removeClass():移除类属性
            */
            $("#designBox").addClass("p pp ppp");
            $("#designBox").removeClass("attr1 attr2");
            // 第3节 JQ方法 end
        })
    </script>

在这里插入图片描述

			/*
                2.width():width
                innerWidth():width + padding
                outerWidth():width + padding + border
                outerWidth(true):width + padding + border + margin
                height() innerHeight() outerHeight() 同理
            */
            $(".classItem").width();
            /*
                3.insertBefore()、before()
                insertAfter()、after()
                appendTo()、append()
                prependTo()、prepend()
                remove()：直接删除节点
            */
            // 在 PS课程 前插入 影楼设计课程,以下两种写法都可行
            $(".bulid").insertBefore( $(".ps") );
            $(".ps").before( $(".bulid") );
            // 在 pr课程 后插入 转手绘课程
            $(".hand").insertAfter( $(".pr") );
            // 将 ae课程 插入到 电商设计课程 的末尾
            $(".ae").appendTo( $(".economy") );
            // 将 相机摄影课程 插入到 手机摄影课程 的首位
            $(".photo").prependTo( $(".phone") );
            // 将 转手绘课程 节点直接删除
            // $(".hand").remove();
            // 第3节 JQ方法 end

在这里插入图片描述

			/*
                4.事件绑定的方法：on()和off()
            */
            //4.1:给一个事件添加函数
            $(".ps").on("click",function(){
                $(".ae").css("background","red");
            });
            // 4.2同时给多个事件添加一个函数，多个事件之间可以通过空格隔开
            $(".pr").on("click mouseover",function(){
                $(".phone").css("background","red");
            });
            //4.3:给不同的事件添加不同的函数
            $(".hand").on({
                click:function(){
                    // 操作
                },
                mouseover:function(){
                    // 操作
                },
                mouseout:function(){
                    // 操作
                }
            })
            // 4.4：实现事件委托，第二个参数是触发对象的选择器
            $(".classItem").on("click",".ae",function(){
                $(this).css("background","yellow");
            })
            // 4.5:取消某一个事件下的指定函数,前提是这个函数先存在
            $(".ps").click(function(){
                $(".pr").off("click","函数名（不带引号）");
            })

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

			/*
                scrollTop():获取当前滚动高度
            */
            $(window).scrollTop();

第3节方法汇总

			// 第3节 JQ方法
            /*
                1.操作class属性,只能用于id元素，不能用于类元素
                addClass():添加类属性
                removeClass():移除类属性
            */
            $("#designBox").addClass("p pp ppp");
            $("#designBox").removeClass("attr1 attr2");

            /*
                2.width():width
                innerWidth():width + padding
                outerWidth():width + padding + border
                outerWidth(true):width + padding + border + margin
                height() innerHeight() outerHeight() 同理
            */
            $(".classItem").width();
            /*
                3.insertBefore()、before()
                insertAfter()、after()
                appendTo()、append()
                prependTo()、prepend()
                remove()：直接删除节点
            */
            // 在 PS课程 前插入 影楼设计课程,以下两种写法都可行
            $(".bulid").insertBefore( $(".ps") );
            $(".ps").before( $(".bulid") );
            // 在 pr课程 后插入 转手绘课程
            $(".hand").insertAfter( $(".pr") );
            // 将 ae课程 插入到 电商设计课程 的末尾
            $(".ae").appendTo( $(".economy") );
            // 插入一个新节点
            $(`<div class="classItem">我是一个新节点</div>`).appendTo( $(".economy") );
            // 将 相机摄影课程 插入到 手机摄影课程 的首位
            $(".photo").prependTo( $(".phone") );
            // 将 转手绘课程 节点直接删除
            // $(".hand").remove();
            
            /*
                4.事件绑定的方法：on()和off()
            */
            //4.1:给一个事件添加函数
            $(".ps").on("click",function(){
                $(".ae").css("background","red");
            });
            // 4.2同时给多个事件添加一个函数，多个事件之间可以通过空格隔开
            $(".pr").on("click mouseover",function(){
                $(".phone").css("background","red");
            });
            //4.3:给不同的事件添加不同的函数
            $(".hand").on({
                click:function(){
                    // 操作
                },
                mouseover:function(){
                    // 操作
                },
                mouseout:function(){
                    // 操作
                }
            })
            // 4.4：实现事件委托，第二个参数是触发对象的选择器
            $(".classItem").on("click",".ae",function(){
                $(this).css("background","yellow");
            })
            // 4.5:取消某一个事件下的指定函数,前提是这个函数先存在
            $(".ps").click(function(){
                $(".pr").off("click","函数名（不带引号）");
            })

            /*
                scrollTop():获取当前滚动高度
            */
            $(window).scrollTop();
            // 第3节 JQ方法 end
是西北呀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQ学习笔记
11-03
JQ学习笔记JQ学习笔记JQ学习笔记JQ学习笔记JQ学习笔记JQ学习笔记JQ学习笔记JQ学习笔记JQ学习笔记JQ学习笔记JQ学习笔记JQ学习笔记JQ学习笔记JQ学习笔记JQ学习笔记JQ学习笔记JQ学习笔记JQ学习笔记JQ学习笔记JQ学习笔记...
搬砖笔记：JS部分(不定期更新)
Kincae的博客
09-26 194
文章目录JavaScriptjsjq筛选查找parent()parents() JavaScript js jq 筛选 查找 parent() 返回值 提供一个jQuery对象代表了一组DOM元素 parent()方法允许我们能够在DOM树中搜索到这些元素的父级元素，从有序的向上匹配元素，并根据匹配的元素创建一个新的 jQuery 对象。 这个方法和.parents()很相似,但是.pa...
js&jq面试笔记（上）
weixin_33729196的博客
08-03 736
js&jq涉及内容众多，分为上下两部分进行整理，该部分为上部分。 1、对前端工程师这个职位你是怎么样理解的？ 前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好; 参与项目，快速高质量完成实现效果图，精确到1px; 与团队成员，UI设计，产品经理的沟通; 做好的页面结构，页面重构和用户体验;...
jQuery——jQuery学习笔记(完整版）
Bonsoir777的博客
09-16 1154
本文主要介绍有关jQuery的相关知识点
【Redis】笔记（尚硅谷、黑马整合）
努力充实，远方可期
04-22 9717
笔记内容包括两个视频的笔记： Redis—尚硅谷java研究院 （推荐）Redis入门到精通【黑马程序员】https://www.bilibili.com/video/BV1CJ411m7Gc 第1章 NoSQL 简介 REmote Dictionary Server：是一种用C语言开发的开源的高性能键值对数据库。 1.1 技术的分类 解决功能性的问题 Java、Servlet、Jsp、Tom...
jq基础笔记.docx
11-18
。。。
黑马19期jq笔记01
04-09
黑马19期jQuery笔记01 共两个~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
这个是jq笔记.zip
06-29
这个是jq笔记.zip
jq03课堂笔记.docx
09-21
jq03课堂笔记.docx.jq03课堂笔记.docx.jq03课堂笔记.docx.jq03课堂笔记.docx.jq03课堂笔记.docx.jq03课堂笔记.docx.jq03课堂笔记.docx.jq03课堂笔记.docx
Web开发——HTML&CSS
最新发布
一切皆是定数的博客
05-20 160
HTML：HyperText Markup Language，超文本标记语言超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。标记语言：由标签构成的语言，HTML标签都是预定义好的。HTML代码直接在浏览器中运行，HTML标签由浏览器解析。CSS：Cascading Style Sheet，层叠样式表，用于控制页面的样式（表现）。以下就是html代码以及css样式搭配之后的显示效果。
css: 动态设置网格线
1111111111
05-14 345
唯一的遗憾是，宽度和高度本来想设置为数字类型，通过input-number输入，然后在css里拼上‘px’，像下面这种写法，会报错，所以只能把px单位放在输入框里。上面的html和下面的css不在同一个vue文件里，虽然变量名不同，一个是formData，一个是designData，所指向的对象是相同的。注意：style里不要写lang="scss" 不然会一直报错。另外还有一个小小的问题，页面缩放的时候，网格线会消失。把网格颜色，宽高和透明度做成可配置项。
CSS常用滤镜效果
不负光阴不负自己，不负被爱不负所爱 ​
05-13 352
CSS 提供了多种滤镜效果，可以通过filter属性应用于 HTML 元素。将图像转换为灰度图像。给图像应用色相旋转。值以度为单位。增加或减少图像的饱和度。增加或减少图像的亮度。增加或减少图像的对比度。反转图像的颜色。给图像应用模糊效果。
css如何实现边框模糊的效果
rolling_kitten的博客
05-14 687
其实并不难，用属性 filter: blur(数字px); 即可。效果如下： 图上的圆形内有色彩的渐变，同样也是用filter: blur(数字px); 实现的，代码如下：、
css左右滚动互不影响
this__valve的博客
05-20 134
滚动条
css去除复选框默认样式
xiaohua0708day的博客
05-17 111
类的样式，包括边框、宽度、高度等。在选中和未选中状态下，我们分别定义了不同的背景颜色，以便在复选框被选中或取消选中时改变其外观。的支持可能有所不同。你可能需要根据实际情况进行调整，以确保在各种浏览器下都能正确显示自定义的复选框样式。属性来覆盖默认的复选框外观。这些属性允许你重置浏览器的默认外观，以便你可以自定义样式。需要注意的是，不同浏览器对。在这个例子中，我们使用了。
CSS学习笔记：空间转换——使用transform属性实现元素在空间内的位移、旋转、缩放等效果
lbcbjtlhmjq的博客
05-20 86
使用perspective属性实现透视效果什么是透视：近大远小，近实远虚说明：perspective的值指的是透视距离，透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。
CSS跳动文字
L_Y_J_21的博客
05-10 464
【代码】CSS跳动文字。
web压力测试，要不要过滤掉JS,CSS等请求？
feng的博客
05-17 235
在进行性能测试（压测）时，是否过滤掉对JavaScript、CSS等静态资源的请求，取决于你测试的目标和目的。是测试服务端的性能还是前端的性能。
jq 随机值不重复
05-31
如果您要使用jq生成一组不重复的随机值，可以使用以下命令： ``` jq -n 'range(10) | shuffle | .[:5]' ``` 其中，`range(10)`表示生成一个包含0到9的数字序列，`shuffle`表示将这个序列随机排序，`.[:5]`表示取...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值