jQuery的使用,下载以及一些小案例

news2024/10/5 20:27:12

24.jQuery的使用

1.官网地址

https://jquery.com/

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

版本：
●1X:兼容E678等低版本浏览器，官网不再更新
●2x:不兼容IE678等低版本浏览器，官网不再更新
●3x:不兼容E678等低版本浏览器，是官方主要更新维护的版本

2 jQuery的使用步骤

  1. 引入jQuery文件即可

在这里插入图片描述

3.入口函数

1.页面加载事件
  1. onload
    • 页面结构加载完成,外部资源也加载完成,才会触发(比较慢)
    • 凡是带有src属性的标签,都有一个onload事件
  2. DOMCotentLoad
    • 页面结构加载完成,就会触发(比较快)
  3. $(function(){}(jQuery的入口函数,缺点:不能获取图片的宽和高)
2.入口函数的写法

入口函数有4种写法,但是入口函数,都是宏任务,(它很快,比DOMCotentLoad都快)

//写法1
$(function(){
    
})
//写法2
jQuery(function(){
    
})
//写法3  文档准备好了,就执行
jQuery(document).ready(function(){
    
})
//写法4
$(document).ready(function(){
    
})
$与jQuery的关系?
    答:相等的

宏任务:定时器,script

微任务 :Promise 的then

4.jQuery对象和dom对象的转换

1.jQuery对象转换为dom对象,再使用dom的属性操作样式

  • $(“.item”)[0].style.backgroundColor = “red”
  • $(“.item”).get(1).style.backgroundColor = “yellow”

2.dom对象转换为jQuery对象,就能使用jQuery的方法

  • 加一个**$()**,即可,括号里面,放获取到的dom元素
 var items = document.querySelectorAll(".item")
  // 将dom对象转换为jq对象,就能使用jQuery的方法
        $(items).css("backgroundColor", "pink")

5.过滤选择器

  1. :event(显示的是下标是偶数的)
  2. :odd(显示的是下标是奇数的)
  3. :nth-child(2n) 显示的是页面上是偶数的
  4. :nth:child(2n-1) 显示的是页面上是奇数的
  5. :first 页面上的第一个
  6. :last 页面上的最后一个
  7. :eq(index) 指定的某一个
  8. :lt(3) 前面三个,下标小于3的
  9. :gt(2) 后面两个,下标大于2的
  10. :contains(“内容”) 包含指定的文字,适合做查询
  11. :not(:empty) 不是空内容的
  12. (:empty) 是空内容的

6.属性选择器

  1. 类的属性以1开头 :li[class^=1]
  2. 类的属性以3结尾 :li[class$=3]
  3. 包含xhr :li[class*=xhr]
  4. 属性值等于某一个具体的 :li[class='1.mp5]

7.表单的使用

  1. 文本框 的值 $(“input:text”).val()

  2. 密码框的值 $(“input:password”).val()

  3. 单选按钮的值

    $("input:radio:checked").val()

  4. 获取复选框的值

      var arr = Array.from($(":checkbox:checked"), item => item.value)
                console.log(arr);

  5. 获取表单的所有值

    $(this).serialize()

案例:

9省选择案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        select {
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;
        }

        .btn-box {
            width: 25px;
            height: 100px;
            float: left;
        }

        button {
            height: 20px;
            margin-bottom: 10px;
            margin-left: 5px;
        }
    </style>
</head>

<body>
    <h1>城市选择:</h1>
    <!-- <select>元素具有multiple属性，因此用户可以通过按住Ctrl键或Command键来选择多个选项。 -->
    <select multiple id="citys-left">
        <option value="" >北京</option>
        <option value="">上海</option>
        <option value="">深圳</option>
        <option value="" >广州</option>
        <option value="">怀化</option>
        <option value="">长沙</option>
        <option value="">成都</option>
        <option value="">重庆</option>
        <option value="">厦门</option>
    </select>
    <div class="btn-box">
        <button id="gt-all">&gt;&gt;</button>
        <button id="lt-all">&lt;&lt;</button>
        <button id="gt">&gt;</button>
        <button id="lt">&lt;</button>
    </div>
    <select multiple id="citys-right">

    </select>
</body>
<script>
    $(function(){
          //子.appendTo(父);
        //父.append(子)
        // 全部的数据都去右边
        $("#gt-all").click(function(){
            console.log($("#citys-left option"));
            $("#citys-right").append($("#citys-left option"))
        })
        // 全部的数据都去左边
        $("#lt-all").click(function(){
            console.log();
           $("#citys-left").append($("#citys-right option"))
        })
        // 点击一个数据,把这个数据去右边
        $("#gt").click(function(){
           $("#citys-left option:selected").appendTo($("#citys-right"))
           $("#citys-right").children().prop("selected",false)
        })
        $("#lt").click(function(){
            $("#citys-right option:selected").appendTo($("#citys-left"))
            $("#citys-left").children().prop("selected",false)
        })
    })
    
</script>

</html>

突出显示高亮

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
            background-color: #000;
        }

        .wrap {
            width: 800px;
            border: 1px solid #000;
            height: 500px;
            margin: 100px;
        }

        li {
            list-style: none;
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <ul>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
        </ul>
    </div>
    <script>
        //----------------插件-----------------
        (function () {
            $.fn.extend({
                _heightLight() {
                    let self = this
                    // 让所有的li都变暗
                    this.find("li").css("opacity", 0.3)
                    // this是 jQuery对象的wrap
                    // 给每个li绑定鼠标进入事件
                    this.find("li").mouseenter(function () {
                        // 让当前的li亮起来,兄弟们变暗
                        $(this).css("opacity", 1).siblings().css("opacity", 0.3)
                    })
                    // 鼠标离开,ul里面的li全部变暗
                    this.mouseleave(function () {
                        self.find("li").css("opacity", 0.3)
                    })

                }
            })
        })()
        //----------------使用-----------------
        $(function () {
            $(".wrap")._heightLight()
        })
    </script>
</body>

</html>

鼠标进入高亮

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery.min.js"></script>
</head>

<body>
    <ul>
        <li>隔行变色,索引号为:1</li>
        <li>隔行变色,索引号为:2</li>
        <li>隔行变色,索引号为:3</li>
        <li>隔行变色,索引号为:4</li>
        <li>隔行变色,索引号为:5</li>
        <li>隔行变色,索引号为:6</li>
        <li>隔行变色,索引号为:7</li>
        <li>隔行变色,索引号为:8</li>
        <li>隔行变色,索引号为:9</li>
        <li>隔行变色,索引号为:10</li>
    </ul>
</body>
<script>
    //----------------插件-----------------
    //----------------siblings-----------------
    // siblings除了自己以为的兄弟
    (function () {
        $.fn.extend({
            _moveColor(color) {
                this.children().mouseenter(function () {
                    $(this).css("backgroundColor", color).siblings().css("backgroundColor", "")
                })
                // 离开ul,所有的li要清空颜色
                this.mouseleave(function () {
                    $(this).children().css("backgroundColor", "")
                })
            }
        })
    })()
    //----------------使用-----------------
    $(function () {
        $("ul")._moveColor("green")
    })
</script>

</html>

手风琴案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        div {
            display: none;
            height: 50px;
            width: 200px;
            border: 1px solid #000;
            background-color: #fff;
        }

        li {
            width: 200px;
            /* height: 20px; */
            background-color: pink;
            border: 1px solid #000;
        }

        span {
            width: 200px;
            height: 20px;
            background-color: pink;
            display: block;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <ul class="wrap">
        <li>
            <span>标题1</span>
            <div>我是弹出来的div1</div>
        </li>
        <li> <span>标题2</span>
            <div>我是弹出来的div2</div>
        </li>
        <li> <span>标题3</span>
            <div>我是弹出来的div3</div>
        </li>
        <li> <span>标题4</span>
            <div>我是弹出来的div4</div>
        </li>
    </ul>
</body>
<script>
    //----------------插件-----------------
    (function () {
        $.fn.extend({
            _accordion() {
                console.log($(this).children().children("span"));
                $(this).children().children("span").click(function () {
                    $(this).siblings().show().parent().siblings().children("div").hide()
                })
                $(this).mouseleave(function () {
                    console.log(this);
                    $(this).find("div").hide()
                })
            }
        })
    })()
    //----------------使用-----------------
    $(".wrap")._accordion()
</script>

</html>

</html>

隔行变色案例:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery.min.js"></script>
</head>

<body>
    <ul>
        <li>隔行变色,索引号为:1</li>
        <li>隔行变色,索引号为:2</li>
        <li>隔行变色,索引号为:3</li>
        <li>隔行变色,索引号为:4</li>
        <li>隔行变色,索引号为:5</li>
        <li>隔行变色,索引号为:6</li>
        <li>隔行变色,索引号为:7</li>
        <li>隔行变色,索引号为:8</li>
        <li>隔行变色,索引号为:9</li>
        <li>隔行变色,索引号为:10</li>
    </ul>
</body>
<script>
    $(function () {
        $("li:even").css("backgroundColor", "pink");
        $("li:odd").css("backgroundColor", "skyblue");
        //----------------写法1-----------------
        // 绑定事件,等于设置,设置的时候,才可以用链式编程
        let currentColor = ""
        $("li").mouseenter(function () {
            // 事件里面的this,当前的li,并且是dom对象
            // 1.获取当前元素的颜色,相当于备份
            currentColor = $(this).css("backgroundColor")
            // 修改当前的颜色
            $(this).css("backgroundColor", "red")
        }).mouseleave(function () {
            // 离开回到原来的颜色
            $(this).css("backgroundColor", currentColor)
        })

        //----------------写法2-----------------
        // let currentColor = ""
        // // hover的第一个参数，为移入值，第二个为移出
        // $("li").hover(function () {
        //     // 获取值
        //     currentColor = $(this).css("backgroundColor")
        //     // 设置值
        //     $(this).css("backgroundColor", "red");
        // }, function () {
        //     $(this).css("backgroundColor",currentColor );
        // })
    })
</script>

</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1107040.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【MySQL】面试题

【MySQL】面试题

引言 &#xff1a;MySQL面试题及答案 【最新版】 目录 1、NOW&#xff08;&#xff09;和CURRENT_DATE&#xff08;&#xff09;有什么区别&#xff1f;2、CHAR和VARCHAR的区别&#xff1f;3、主键索引与唯一索引的区别4、MySQL中有哪些不同的表格&#xff1f;5、SQL的生命周期…
阅读更多...
优化大型机床装配调度：项目管理软件的应用方法

优化大型机床装配调度：项目管理软件的应用方法

最近&#xff0c;Zoho Projects项目管理软件的一位资深客户&#xff0c;跟我们分享了他是如何把Projects应用于大型机床装配的复杂调度。小Z觉得特别有必要&#xff0c;把各行各业的成功应用和实践经验发布出来。在取得这位资深用户同意后&#xff0c;我们推出了本篇文章&#…
阅读更多...
NIO IN：技术蔚来的首次「大阅兵」

NIO IN：技术蔚来的首次「大阅兵」

宝山&#xff0c;上海第一钢铁厂旧址。 上周&#xff0c;蔚来在这里点亮金色炉台&#xff0c;2500 立方米高炉&#xff0c;浓重的工业气质与古典凝重的光影交织&#xff0c;蔚来 NIO IN 用科技的进步呼应那个火红的年代。 这是蔚来第一次开科技发布会&#xff0c;为了全方位展…
阅读更多...
【Leetcode每日一题 2530】「贪心｜模拟｜优先队列」执行K次操作后的最大分数

【Leetcode每日一题 2530】「贪心｜模拟｜优先队列」执行K次操作后的最大分数

2023.10.18 本题重点&#xff1a; 1.优先队列的使用 2.ceil()函数的使用相同的还有floor()函数的使用 题目介绍&#xff1b; 给你一个下标从 0 开始的整数数组 nums 和一个整数 k 。你的 起始分数 为 0 。 在一步 操作 中&#xff1a; 选出一个满足 0 < i < nums.l…
阅读更多...
latex：使用中文字体

latex：使用中文字体

解决方案 我这里使用的是gbsn&#xff08;其他的字体我不知道&#xff0c;如果有补充请评价&#xff09;&#xff0c;详细说明如下&#xff1a;
阅读更多...
vscode调试container（进行rocksdb调试）+vscode比较git项目不同分支和fork的哪个分支

vscode调试container（进行rocksdb调试）+vscode比较git项目不同分支和fork的哪个分支

vscode调试container&#xff08;进行rocksdb调试&#xff09; 参考链接&#xff1a; https://blog.csdn.net/qq_29809823/article/details/128445308#t5 https://blog.csdn.net/qq_29809823/article/details/121978762#t7 使用vscode中的插件dev containners->点击左侧的…
阅读更多...
【算法练习Day22】 组合总和组合总和 II分割回文串

【算法练习Day22】 组合总和组合总和 II分割回文串

​&#x1f4dd;个人主页&#xff1a;Sherry的成长之路 &#x1f3e0;学习社区&#xff1a;Sherry的成长之路&#xff08;个人社区&#xff09; &#x1f4d6;专栏链接&#xff1a;练题 &#x1f3af;长路漫漫浩浩&#xff0c;万事皆有期待 文章目录 组合总和组合总和 II分割回…
阅读更多...
多继承vs查看类结构

多继承vs查看类结构

多继承里面的虚函数 类A有两个虚函数&#xff0c;类B重写了其中一个&#xff0c;类C重写了两个&#xff1b; 类C里面可以重写所有继承到的虚函数&#xff08;类A、类B里面的虚函数&#xff09; class A { public:virtual void init() { std::cout << "A init !&qu…
阅读更多...
uniapp collapse动态生成多个折叠面板手动展开收起（包括uni-ui版）

uniapp collapse动态生成多个折叠面板手动展开收起（包括uni-ui版）

前言 官方文档没有暴露出相关api&#xff0c;那就看看组件源码。 以下示例均通过 vue-cli 创建的 uni-app h5 项目 uView&#xff08;1.x&#xff09;版本 源码 node_modules\uview-ui\components\u-collapse-item\u-collapse-item.vue 这个方法是用来改变折叠面板子组件收起还…
阅读更多...
Jmeter接口测试 —— jmeter对图片验证码的处理

Jmeter接口测试 —— jmeter对图片验证码的处理

jmeter对图片验证码的处理 在web端的登录接口经常会有图片验证码的输入&#xff0c;而且每次登录时图片验证码都是随机的&#xff1b;当通过jmeter做接口登录的时候要对图片验证码进行识别出图片中的字段&#xff0c;然后再登录接口中使用&#xff1b; 通过jmeter对图片验证码…
阅读更多...
亲,手撸图文博文太累了?试试这个神器!

亲,手撸图文博文太累了?试试这个神器!

这一篇博客有关如何使用[InternLM-XComposer]来写图文并茂的博文。InternLM-XComposer是一个基于人工智能的创作工具&#xff0c;它可以根据你的输入生成不同类型的内容&#xff0c;例如文章、诗歌、歌词、代码等。你可以使用它来创作有趣和有创意的博客&#xff0c;同时也可以…
阅读更多...
【MySQL】数据库——表操作

【MySQL】数据库——表操作

文章目录 1. 创建表2. 查看表3. 修改表修改表名add ——增加modify——修改drop——删除修改列名称 4. 删除表 1. 创建表 语法&#xff1a; create table 表名字 ( 列名称 列类型 ) charset set 字符集 collate 校验规则 engine 存储引擎 ; charset set字符集 &#xff0c;若…
阅读更多...
Unity SRP 管线【第二讲：Draw Call】

Unity SRP 管线【第二讲：Draw Call】

参考&#xff1a; https://edu.uwa4d.com/lesson-detail/282/1309/0?isPreview0 文章目录 参考&#xff1a;一、Shader1.HLSL引入2.获取Unity提供的标准输入3.Unity提供的运算库SpaceTransform库的宏对应补充&#xff1a; 4.标准库Common.hlsl5.SpaceTransforms库引入Commo…
阅读更多...
Flutter视图原理之三棵树的建立过程

Flutter视图原理之三棵树的建立过程

目录 三棵树的关系树的构建过程1.updateChild函数&#xff08;element的复用&#xff09;2.inflateWidget函数3.mount函数3.1 componentElement的实现3.2 RenderObjectElement的实现3.2.1 attachRenderObject函数 4.performRebuild函数 总结三棵树创建流程 三棵树的关系 Flutt…
阅读更多...
【数组的使用续篇】

【数组的使用续篇】

文章目录 以数组的形式打印数组打印方法&#xff1a;Arrays.toString(数组名) 数组排序大小排序方法是 Arrays.sort(数组名) 创建一个自己的打印数组的方法自己创建一个冒泡排序两数之间交换方法 逆置数组打印核心思路还是 i 和 j 交换 总结 以数组的形式打印数组 打印方法&am…
阅读更多...
LeCun和Bengio“吵”起来了，人工智能是“潘多拉魔盒”吗？

LeCun和Bengio“吵”起来了，人工智能是“潘多拉魔盒”吗？

作者 | 谢年年 上周末&#xff0c;深度学习领域最有影响力的三巨头之二Yann LeCun和Yoshua Bengio就AI的潜在风险和安全问题引发了一场激烈辩论&#xff0c;人工智能是“潘多拉魔盒”吗&#xff1f;这场辩论引来众多AI知名人士围观。 LeCun在Facebook上发起了这场辩论&#xff…
阅读更多...
【Axure高保真原型】树筛选中继器表格

【Axure高保真原型】树筛选中继器表格

今天和大家分享树筛选中继器表格的原型模板&#xff0c;点的树节点的箭头可以展开或者收起子节点&#xff0c;点击节点内容&#xff0c;可以按照对应层级筛选右侧中继器表格的数据&#xff0c;那这个模板里的树和表格都是用中继器制作的&#xff0c;所以使用也很方便&#xff0…
阅读更多...
从零开始学习秒杀项目

从零开始学习秒杀项目

构思了很多种讲述这个简易版的秒杀项目的思路&#xff0c;比如按照功能分类&#xff0c;按照项目亮点串起来讲述&#xff0c;总觉得不适合基础薄弱的同学来学习&#xff0c;所以本项目按照从搭建开始&#xff0c;过程中需要什么来学习什么。 技术栈 SpringBootmybatisPlus&am…
阅读更多...
【软考-中级】系统集成项目管理工程师 【16 变更管理】

【软考-中级】系统集成项目管理工程师 【16 变更管理】

持续更新。。。。。。。。。。。。。。。 【第十六章】变更管理 (选择2分 考点 1:变更的常见原因考点 2:变更管理的原则是项目基准化、变更管理过程规范化考点 3考点 4考点 5:变更的工作程序考点 6考点 7考点 8考点 9考点 10考点 11考点 12:变更分类系列文章经典语录 考点 1:变…
阅读更多...
使用Python+selenium实现第一个自动化测试脚本

使用Python+selenium实现第一个自动化测试脚本

这篇文章主要介绍了使用Pythonselenium实现第一个自动化测试脚本&#xff0c;文中通过示例代码介绍的非常详细&#xff0c;对大家的学习或者工作具有一定的参考学习价值&#xff0c;需要的朋友们下面随着小编来一起学习学习吧 最近在学web自动化&#xff0c;记录一下学习过程。…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023