pink-jQuery

最新推荐文章于 2023-04-28 21:51:09 发布
最新推荐文章于 2023-04-28 21:51:09 发布
阅读量241 收藏 3
点赞数 1
分类专栏： 前端学习笔记 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WENSHIKADA/article/details/119516163
版权

一、jQuery 概述

image-20210717211546864

image-20210717211620284

image-20210717211750328

image-20210717211801193

image-20210717211843467

二、jQuery的基本使用

image-20210717212028057

image-20210717212858178

image-20210717213439878

  $('div').hide();
        //1. 等待页面DOM加载完毕再去执行js 代码
        // $(document).ready(function() {
        //     $('div').hide();
        // })
        // 2. 等待页面DOM加载完毕再去执行js 代码
        $(function(){
            $('div').hide();
        })

image-20210717213902842

image-20210717214414185

image-20210717214329577

image-20210717214934928

image-20210717214941874

三、jQuery常用API

image-20210717215055068

1.jQuery选择器

image-20210717215616426

image-20210717215824234

image-20210717215949273

image-20210717220245420

image-20210717220313323

image-20210717220449148

image-20210717225908393

 $(function(){
            $('.nav>li').mouseover(function(){
                $(this).children('ul').show()
            })
            $('.nav>li').mouseout(function(){
                $(this).children('ul').hide()
            })
        })

image-20210717225750878

image-20210717230234036

image-20210717230243093

image-20210718121541941

        $(function(){
            $('#left li').mouseenter(function(){
                var index = $(this).index()
                // $('#content div').eq(index).show();
                // 4. 让他的兄弟隐藏起来
                // $('#content div').eq(index).siblings().hide()
                //   链式编程!!!!!!!!!!!!!!!!!!!
                $('#content div').eq(index).show().siblings().hide()
            })
        })

image-20210718121907124

2.jQuery样式操作

image-20210718122532741

image-20210718122726582

image-20210718144852974

image-20210718180723417

<div class="tab_list">
        <ul>
            <li class="current">商品介绍</li>
            <li>商品参数</li>
            <li>商品评价</li>
        </ul>
    </div>
    <div>
        <div class="item" style="display: block;">
            商品介绍
        </div>
        <div class="item">
            商品参数
        </div>
        <div class="item">
            商品评价
        </div>
    </div>
    <script>
        $(function(){
            $('li').click(function(){
                $(this).addClass('current').siblings().removeClass('current');
                var index = $(this).index()
                $('.item').eq(index).show().siblings().hide()
            })
        })
    </script>

image-20210718181238818

image-20210718181246571

3.jQuery效果

image-20210718182046067

image-20210718182423931

image-20210718183144618

   <div class="tab_list">
        <ul>
            <li class="current">商品介绍</li>
            <li>商品参数</li>
            <li>商品评价</li>
        </ul>
    </div>
    <div>
        <div class="item" style="display: block;">
            商品介绍
        </div>
        <div class="item">
            商品参数
        </div>
        <div class="item">
            商品评价
        </div>
    </div>
    <script>
        $(function(){
            $('li').click(function(){
                $(this).addClass('current').siblings().removeClass('current');
                var index = $(this).index()
                $('.item').eq(index).show(1000,"linear",()=>{
                    console.log('显示');
                }).siblings().hide(1000,'linear',()=>{
                    console.log('隐藏');
                })
            })
        })

image-20210718183537234

image-20210718183838607

image-20210718184742262

image-20210718184946007

  $(function(){
            $('button').hover(()=>{
                $('div').slideDown(1000,'linear')
            },()=>{
                $('div').slideUp(1000,'linear')
            })
        })
//简单写法
$(function(){
            $('button').hover(()=>{
                $('div').slideToggle(1000,'linear')
            })
        })


 //纯CSS实现！！！！！！！！不能加display属性了不过
 <style>
        div {
            height: 0;
            background-color: pink;
            transition: height 1s linear;
        }
        button:hover + div  {
            height: 100px;
        }
    </style>
</head>
<body>
    <button>asd</button>
    <div></div>

image-20210718201530062

  $(function(){
            $('button').hover(()=>{
                //stop()方法必须写在动画前
                $('div').stop().slideToggle(1000,'linear')
            })
        })

image-20210718201939113

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kZ3PSufZ-1628410202203)(C:\Users\KAN\AppData\Roaming\Typora\typora-user-images\image-20210718202134389.png)]

image-20210719202206543

image-20210719213114870

4.jQuery属性操作

image-20210719231010567

image-20210719231212566

image-20210719231539348

<body>
    <a href="https://www.baidu.com" title="都挺好">链接</a>
    <input type="checkbox" name="" id="" checked>
    <div index='1' data-index="24">我是div</div>
    <span index="1">234</span>
    <script>
        $(function(){
            // 1. element.prop("属性名") 获取元素固有的属性
            console.log($('a').prop('href'));
            $("a").prop("title","我们都挺好");
            $("input").change(function(){
                console.log($(this).prop('checked'));
            })

            // 不是元素固有属性，这里不能用prop()去获取
            // console.log($("div").prop("index")); 
            // 2.元素的自定义属性 我们通过 attr();
            console.log($('div').attr("index"));
            $('div').attr("index",4)
            console.log($('div').attr("data-index"));

            // 3.数据缓存 data() 这个里面的数据是存放在元素的内存里面
            $("span").data("uname","andy") //存在了data-uname里
            console.log($("span").data("uname")); // 获取了 data-uname 里的数据
            //这个方法获取data-index h5自定义属性 第一个 不用写 data- ！！！ 而且返回的是数字型
            console.log($("div").data("index"))  // 获取了 data-index 里的数据
        })
    </script>
</body>

image-20210720102639466

   <div class="check_box">
        <div>顶部全选<input type="checkbox" name="" class="check_all"></div>
        <ul>
            <li>子项<input type="checkbox" class="item_check"></li>
            <li>子项<input type="checkbox" class="item_check"></li>
            <li>子项<input type="checkbox" class="item_check"></li>
        </ul>
        <div>底部全选<input type="checkbox" class="check_all"></div>
    </div>
</body>
<script>
    // 1.全选 全不选功能模块
    // 就是把全选按钮的状态赋值给 三个小的按钮就可以了
    $(function(){
        $('.check_all').change(function(){
            var checked = $(this).prop('checked')
            // console.log(checked);
            $('.item_check, .check_all').prop('checked',checked)
        })
    })
    // 2. 如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选
    $(function(){
        $('.item_check').change(function(){
            //if (被选中的复选框的个数 === 3){
                // 就要选中全选按钮
            // }  else {
            //  不要选中全选按钮
            // }
            // console.log($('.item_check:checked').length);
            if ($('.item_check:checked').length === $(".item_check").length ) {
                $('.check_all').prop('checked',true);
            } else {
                $('.check_all').prop('checked',false);
            }
        })
        
    })
</script>

5.jQuery文本属性值

image-20210720104202373

image-20210720104247944

image-20210720105700211

image-20210720115126729

6.jQuery元素操作

image-20210720115110031

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function(){
            var sum = 0;
            var arr = ["red","green","blue"]
            $('div').each(function(index,domElm){
                // console.log(i);
                // 回调函数的第二个参数一定是 dom元素对象
                // console.log(domElm);
                // domElm,css('color'); dom元素对象没有css方法
                $(domElm).css('color',arr[index])
                sum += parseInt($(domElm).text())
            })
            console.log(sum);
        })
    </script>
</body>

image-20210720120916905

    <script>
        $(function(){
            var sum = 0;
            var arr = ["red","green","blue"]
            $('div').each(function(index,domElm){
                // console.log(i);
                // 回调函数的第二个参数一定是 dom元素对象
                // console.log(domElm);
                // domElm,css('color'); dom元素对象没有css方法
                $(domElm).css('color',arr[index])
                sum += parseInt($(domElm).text())
            })
            // console.log(sum);
            $.each($("div"),function(i,ele){
                console.log(i);
                console.log(ele);
            });

            // each 也能遍历对象和数组哦
            $.each(arr,function(i,e){
                console.log(i); 
                console.log(e);
            })

        })

image-20210803214658843

image-20210803214711664

image-20210803214720151

image-20210720162023631

<body>
    <ul>
        <li>
            原先
        </li>
    </ul>
    <div class="text">原来div</div>
    <script>
        
        $(function () {
            // 1. 创建元素
            var li = $("<li>后来</li>")

            // 2.添加元素
            // (1) 内部添加
            //$('ul').append(li) //内部添加并且放到内容的最后面
            $('ul').prepend(li) //内部添加并且放到内容的最前面   注意一个变量只能添加一次，不能同时添加到前或后

            // (2)外部添加
            var div = $('<div>我是后面添加的div</div>');
            $(".text").after(div)
            $(".text").before(div)

            // 3.删除元素
            $("ul").remove();  // 自己都会杀掉
            $("ul").empty();  // 可以删除匹配元素里面的子节点 孩子
            $("ul").html('')   // 同第二个效果一样
        })
    </script>
</body>

image-20210720170113455

7.jQuery尺寸、位置操作

image-20210720172311861

image-20210720174155282

image-20210720174646407

image-20210720183306213

image-20210720183619604

image-20210721171333664

image-20210721173637512

四、jQuery事件

1.JQuery事件注册

image-20210721175057005

2.JQuery事件处理

image-20210721180126604

image-20210721180300518

      $(function(){
            // 1. 单个事件注册
            // $('div').click(function(){
            //     $(this).css("background","purple")
            // })
            // $('div').mouseenter(function(){
            //     $(this).css("background","green")
            // })

            // 2. 事件处理ON
            // $('div').on({
            //     mouseenter:function(){
            //         $(this).css("background","red")
            //     },
            //     mouseleave:function(){
            //         $(this).css("background","purple")
            //     },
            //     click:function(){
            //         $(this).css("background","green")
            //     }
            // })

            $('div').on("mouseenter mouseleave",function(){
                $(this).toggleClass("current")
            })
        })

image-20210721181131673

image-20210721181631435

    $(function(){
            // 1. 单个事件注册
            // $('div').click(function(){
            //     $(this).css("background","purple")
            // })
            // $('div').mouseenter(function(){
            //     $(this).css("background","green")
            // })

            // 2. 事件处理ON
            // $('div').on({
            //     mouseenter:function(){
            //         $(this).css("background","red")
            //     },
            //     mouseleave:function(){
            //         $(this).css("background","purple")
            //     },
            //     click:function(){
            //         $(this).css("background","green")
            //     }
            // })

            // $('div').on("mouseenter mouseleave",function(){
            //     $(this).toggleClass("current")
            // })

            // (2) on可以实现事件委托（委派）
            // $("ul li").click();

            // $('ul').on('click',"li",function(e){
            //    console.log(e);
            // })

            // (3) on 可以给动态创建的元素绑定事件
            // $('ol li').click(function(){
            //     alert(11) //无效果
            // })

            $("ol").on('click',"li",function(){
                alert(1); // 有效果
            })
            var li = $('<li>我是后来创建的</li>')
            $("ol").append(li)
        })

image-20210721194353807

 $(function () {
            // 1. 添加小li
            $(".btn").on("click", function () {
                var li = $("<li></li>");
                li.html($(".txt").val() + "<a href='javascript:;'>删除</a>");
                $('ul').prepend(li)
                li.slideDown();
                $(".txt").val('')
            })
            // 2.删除小li
            // 这样不能给未来出现的li添加事件
            // $("ul li a").click(function () {
            //     alert(01)
            // })
            
            // 可以给动态创建的元素添加事件
            $('ul').on('click','a',function(){
                $(this).parent().slideUp(function(){
                    $(this).remove();
                });
            })
        })

image-20210721200342560

image-20210721201245079

image-20210721201549828

3.JQuery事件对象

image-20210721201729070

五、jQuery其他方法

1.jQuery拷贝对象

image-20210721211514998

2.多库共存

image-20210721212448016

3.jQuery插件

image-20210721220030941

image-20210721234136922

image-20210721234539938

ToDoList案例

image-20210724202304690![image-20210724231507552](https

image-20210727132519738

image-20210727133014050

image-20210727135428518

image-20210727141855734

]

3.JQuery事件对象

image-20210721201729070

五、jQuery其他方法

1.jQuery拷贝对象

image-20210721211514998

2.多库共存

image-20210721212448016

3.jQuery插件

image-20210721220030941
image-20210721234136922
image-20210721234539938

ToDoList案例

image-20210724202304690

image-20210727132519738

image-20210727133014050

image-20210727135428518
image-20210727141855734

image-20210727153029388

云诗卡达
关注
专栏目录
黑马前端pink老师——jQuery入门基础学习笔记
weixin_44566194的博客
10-31 2303
本文将黑马前端 pink老师讲解的 jQuery 入门基础课笔记整理了一遍，包括 jQuery 概述、基本使用、常用API、jQuery 事件、jQuery 插件其他方法等知识点。
pink-sketch
03-07
如果涉及到动画效果，可能使用了GreenSock Animation Platform (GSAP) 或者jQuery的动画函数。 同时，项目可能还包含了一些JavaScript模块或脚本，用于处理特定的功能，比如颜色处理、图片加载、数据存储等。开发者...
jQuery基础自学笔记（pink老师jQuery全内容）
04-12
pink老师jQuery
jQuery-Pink
qq_40253426的博客
12-12 447
一、jQuery基础 1.JavaScript库 是一个封装好的集合(方法和函数),简单理解就是一个JS文件，里面对原生JS进行了封装且可以高效的使用这些封装好的功能 比如jQuery就是为了方便了操作DOM，里面基本上都是函数(方法) 2.jQuery概念 jQuery是一个快速的、简洁的JavaScript库设计总是就是提倡更少的代码、更多的功能实现 3.优点 轻量级。核心文件几十kb，不会影响页面加载速度 跨浏览器兼容 链式编程、隐式迭代 对事件、动画、样式支持，大大简化了DOM操作 支持插件开发
jQuery（pink）学习笔记一
m0_51939262的博客
01-31 403
Javascript库： 封装好的特定集合（方法和函数） jQuery目的 为了快速方便的操作DOM 同样的还有Prototype、移动端的zepto jQuery的优点 jQuery的使用 官网复制粘贴开发适用版本，占内存更小。自己新建文件例：jQuery.min.js 引入新建文件 <script src="../js/jQuery.min.js"></script> 注意点：先有dom元素，再有相关操作 jQuery的入口函数 $是jQuery的别称 ...
JQuery——pink老师课程笔记
sissizZ的博客
04-06 2140
JQuery jQuery入门 1.JQuery概述 是一个JavaScript库，封装了很多函数，学习怎么去调用这些函数 2.JQuery的使用 下载Download jQuery | jQuery;production版本/development版本 引入；页面DOM加载完毕执行代码$(function(){…}) $=JQuery,也是顶级对象（相当于window） 用原生js获取的对象就是DOM对象，用jQuery方式获取的就是jQuery对象（用$对原生DOM进行了包装） DOM——jQue
JavaWeb---JQuery
weixin_65440201的博客
08-15 611
1.JQuery 基础 1.1概念 1.2快速入门 1.2.1步骤 1.3JQuery对象和JS对象区别与转换 1.4选择器：筛选具有相似特征的元素(标签) 1.4.1基本操作学习 1.4.2分类 1.5DOM操作 1.5.1内容操作 1.5.2属性操作 1.5.3CRUD操作 1.6案例 1.6.1隔行换色 1.6.2全选和全不选 1.6.3QQ表情选择 1.6.4多选下拉列表左右移动 2.JQuery 高级 2.1动画 2.1.1三种方式显示和隐藏元素 2.2
JavaScript--jQuery框架
zhqi9277的博客
04-28 1377
概述：jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；
Web前端开发技术-Jquery动画.pptx
07-07
background-color: pink;"> 显示 隐藏 切换 $("button").eq(0).click(function() { $("div").show(1000, function() { alert("已显示")}); }); $("button").eq(1).click(function() { $("div").hide(1000, ...
pink-squid-01b2c:用Stackbit创建的Jamstack网站
04-09
雨果衬线主题 Serif是Hugo的现代商业... 没有jQuery，移动菜单只有很少的Javascript。 搜索引擎优化 100/100 Google Lighthouse SEO得分 在config.toml配置的Google Analytics（分析） 使用与Netlify兼容的环境变量HU
jQuery-study:jQuery学习，练习代码，pink
04-07
本项目“jQuery-study”显然旨在帮助用户深入理解和实践jQuery的核心概念和功能。 首先，jQuery的核心特性之一是选择器，它允许开发者以简洁的方式选取HTML元素。在jQuery中，你可以使用CSS选择器、ID选择器、类...
JQuery简单的时间选择器（picker）
hy3528的博客
11-25 4204
$("#my_Specific").picker({ title: "请选择日期", cols: [ { textAlign: 'center', values: ['2019', '2018', '2017', '2016', '2015', '2014', '2013', ...
b站pink老师JavaScript的jQuery 案例代码——电梯导航案例
weixin_72322475的博客
10-11 5104
b站pink老师JavaScript的jQuery 案例代码——电梯导航案例，本文代码解决了原课程代码的BUG：点第四个li,页面滚到对应地方后，电梯导航的current会跳到第三个li上
湖北工业大学在河南2021-2024各专业最低录取分数及位次表.pdf
最新发布
09-16
全国各大学在河北2021-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
西南交通大学在河南2021-2024各专业最低录取分数及位次表.pdf
09-16
全国各大学在河北2021-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
DAY27使用的实时脚本文件
09-16
博客链接：https://blog.csdn.net/qq_47248729/article/details/142303818?spm=1001.2014.3001.5502
天水师范学院在河北2021-2024各专业最低录取分数及位次表.pdf
09-16
全国各大学在河北2021-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
matlab simulink 双馈风机调频，风电调频，风火水调频，虚拟惯性控制，下垂控制 参与系统一次调频的Matlab Si
09-16
matlab simulink 双馈风机调频，风电调频，风火水调频，虚拟惯性控制，下垂控制 参与系统一次调频的Matlab Simulink模型 系统为三机九节点模型，所有参数已调好且可调，可直接运行，风电渗透率20% 也可研究风火联合，火电调频等。有同步机调速器。 风电调频，IEEE9节点，双馈风机调频，一次调频，火电调频，同步机调频。 同步机部分带有调速器等部分。并网电压电流。 风电附带下垂控制，虚拟惯性控制，风电渗透率20%，有参考文献。也可研究风电并网，并网电压，电流波形
基于python实现的给定微博数据的反作弊识别
09-16
【作品名称】：基于python实现的给定微博数据的反作弊识别 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】： 基于给定微博数据进行垃圾微博识别 ###进度 对MICRO_BLOG.txt解析完毕 总天数:370 总微博数量:2056089 总垃圾微博数量:300555 ###程序运行的方法 python main.py ###目录结构 conf: 项目配置 data: 原始数据文件,未上传到github export: 程序输出文件 main.py: 主程序 垃圾微博判定策略 某个用户在30秒内连续发布15条微博，则命中垃圾微博策略 命中后，垃圾行为映射表中该用户对应次数+1，垃圾微博映射表中命中的所有微博对应出现次数+1 每次命中策略结束时清空该用户对应的15条微博信息 【资源声明】：本资源作为“参考资料”而不是“定制需求”，代码只能作为参考，不能完全复制照搬。不一定能够满足所有人的需求，需要有一定的基础能够看懂代码，能够自行调试代码并解决报错，能够自行添加功能修改代码。
jQuery选择器详解与实例应用
示例中，`$('p:first-child').css('backgroundColor', 'pink')`会设置第一个`<p>`元素的背景色为粉色。 除了以上列举的选择器，jQuery还支持其他高级选择器，如后代选择器、兄弟选择器、伪类选择器等。它们可以...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值