首页 > 其他分享 >jQuery

jQuery

时间：2024-02-22 20:34:27浏览次数：23  
标签：jQuery hide 元素 选择 div 选择器 d1

jQuery

（1）介绍

  • jQuery 是一个流行的 JavaScript 库，它简化了 JavaScript 在网页开发中的操作。jQuery 提供了许多实用的方法和函数，使得操作 DOM、处理事件、执行动画等变得更加简单和高效。

（2）jQuery基本语法

  • jQuery 简写 $
jQuery(选择器).action()

（3）基本选择器

（1）id选择器

$('#d1')

（2）class类选择器

$('.c1')

（3）标签选择器

$('span')

（4）jQuery对象转为标签对象

$('#d1')[0]
// 等同于 document.getElementById('d1')
//<div id="d1"></div>

（5）标签对象转为jQuery对象

$(document.getElementById('d1'))
// w.fn.init [div#d1]

（4）组合选择器/分组与嵌套

$('div')       // 所有的div
$('div.c1')    // div的类为c1的
$('div#d1')    // div的ID为d1的
$('*')         // 全部
$('#d1,.c1,p') // 并列+混用
$('div span')  // 后代
$('div>span')  // 儿子
$('div+span')  // 毗邻
$('div-span')  // 弟弟

（5）基本筛选器

  • jQuery 提供了许多基本的筛选器，用于选择 DOM 元素的子集，使得选择元素变得更加灵活和方便。

（1）:first

  • 选择匹配的第一个元素
$("p:first")

（2）:last

  • 选择匹配的最后一个元素
$("p:last")

（3）:even

  • 选择索引为偶数的元素（从 0 开始计数）
$("tr:even")

（4）:odd

  • 选择索引为奇数的元素（从 0 开始计数）
$("tr:odd")

（5）:eq()

  • 选择指定索引位置的元素
$("li:eq(2)") // 选择第三个 li 元素

（6）:gt()

  • 选择索引大于指定值的元素
$("tr:gt(2)") // 选择索引大于 2 的所有 tr 元素

（7）:lt()

  • 选择索引小于指定值的元素
$("tr:lt(5)") // 选择索引小于 5 的所有 tr 元素

（8）:not()

  • 选择所有不匹配给定选择器的元素
$("div:not(.special)") // 选择所有不具有 .special 类的 div 元素

（9）:has()

  • 选择具有匹配选择器的至少一个子元素的元素
$("div:has(p)") // 选择所有包含 <p> 元素的 div 元素

（10）:contains()

  • 选择包含指定文本的元素
$("p:contains('Hello')") // 选择所有包含文本 'Hello' 的 p 元素

（6）属性选择器

  • 属性选择器允许根据元素的属性值来选择 DOM 元素
$('[username]') // 选择所有具有 username 属性的元素。
$('[username="heart"]') // 选择所有 username 属性值为 "heart" 的元素。
$('p[username="god"]') // 选择所有 <p> 元素中具有 username 属性值为 "god" 的元素。
$('[type]') // 选择所有具有 type 属性的元素。
$('[type="text"]') // 选择所有 type 属性值为 "text" 的元素。

（7）表单筛选器

  • :input：选择所有输入元素，包括文本框、复选框、单选框等
  • :text：选择所有文本框
  • :password：选择所有密码框
  • :radio：选择所有单选框
  • :checkbox：选择所有复选框(bug:selected也会被选中)
  • :submit：选择所有提交按钮
  • :reset：选择所有重置按钮
  • :button：选择所有按钮元素
  • :file：选择所有文件上传框
  • :selected：选择所有被选中的 <option> 元素
  • :focus：选择当前获取焦点的元素
// 选择所有文本框
$(':text');

（1）表单对象属性

  • :enabled：选择所有可用的元素。
  • :disabled：选择所有禁用的元素。
  • :checked：选择所有被选中的复选框或单选框。
// 选择所有可用的文本框
$(':text:enabled');

// 选择所有被选中的复选框
$(':checkbox:checked');

（8）筛选器方法

（1）filter()

  • 根据指定的选择器筛选元素
// 筛选出所有 class 为 'required' 的文本框
$('input').filter('.required');

// 使用函数筛选出所有输入字符数大于等于10的文本框
$('input[type="text"]').filter(function() {
    return $(this).val().length >= 10;
});

（2）not()

  • 从匹配的元素中去除指定的元素
// 移除所有 class 为 'disabled' 的按钮
$('button').not('.disabled');

// 使用函数移除所有值等于 'admin' 的选项
$('option').not(function() {
    return $(this).text() === 'admin';
});

（3）is()

  • is() 方法用于检查匹配的元素集合中是否至少有一个元素匹配指定选择器，如果有则返回 true，否则返回 false
// 检查是否存在禁用的复选框
$('input[type="checkbox"]').is(':disabled');

// 检查是否存在选中的单选框
$('input[type="radio"]').is(':checked');

（4）has()

  • 筛选包含指定选择器所匹配元素的元素
// 筛选出包含 class 为 'error' 的子元素的表单元素
$('form').has('.error');

（5）closest()

  • closest() 方法用于获取匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上遍历。如果给定选择器匹配，则返回该祖先元素，否则返回空集合。
// 获取最近的包含 class 为 'container' 的祖先元素
$('input').closest('.container');

（6）eq(index)

  • 选取指定索引位置的元素
$("li").eq(2)  // 选取索引为2的列表项

（7）first()

  • 选取第一个匹配的元素
$("div").first() // 选取第一个div元素

（8）last()

  • 选取最后一个匹配的元素
$("p").last() // 选取最后一个段落元素

（9）事件

（1）克隆事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>
    <style>
        #b1 {
            height: 100px;
            width: 100px;
            background-color: red;
            border: 1px solid orange;
        }
    </style>
</head>
<body>
<button id="b1">
    你好！么么哒！
</button>

<script>
    // 绑定点击事件
    $("#b1").on("click", function () {
        // console.log(this) // this 指代的永远是当前被操作的对象

        $(this).clone(true).insertAfter($('body')) // clone 默认情况下只克隆 html 和 css 不克隆事件本身
        // clone 加参数 即可克隆事件

    })
</script>
</body>
</html>

（2）自定义模态框

  • 本质就是给标签添加或移除 hidden 属性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>
    <style>
        .cover {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(128, 128, 128, 0.4);
            z-index: 99;
        }

        .modal {
            position: fixed;
            height: 400px;
            width: 400px;
            background-color: white;
            top: 50%;
            left: 50%;
            margin-left: -300px;
            margin-top: -200px;
            z-index: 100;

        }

        .hide {
            display: none;
        }

    </style>
</head>
<body>

<div>我是最下面的</div>

<button id="d1">点我登陆</button>

<div class="cover hide"></div>
<div class="modal hide">
    <p>username:<input type="text"></p>
    <p>password:<input type="password"></p>
    <input type="button" value="确认">
    <input type="button" value="取消" id="d2">
</div>

<script>
    let $coverEle = $(".cover");
    let $modalEle = $(".modal");

    // 去除hide属性
    $("#d1").click(function () {
        // 将两个div标签的hide属性移除
        $coverEle.removeClass("hide");
        $modalEle.removeClass("hide");
    })

    // 绑定 hide属性
    $('#d2').on('click', function () {
        $coverEle.addClass("hide");
        $modalEle.addClass("hide");
    })

</script>

</body>
</html>

（3）左侧菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>
    <style>

        .left {
            float: left;
            background-color: darkgray;
            width: 20%;
            height: 100%;
            position: fixed;
        }

        .title {
            font-size: 24px;
            color: white;
            text-align: center;
        }

        .items {
            border: 1px solid blue;
        }

        .hide {
            display: none;
        }

    </style>
</head>
<body>
<div class="left">
    <dic class="menu">
        <div class="title">菜单一
            <div class="items">1111</div>
            <div class="items">2222</div>
            <div class="items">3333</div>
        </div>

        <div class="title">菜单二
            <div class="items">1111</div>
            <div class="items">2222</div>
            <div class="items">3333</div>
        </div>

        <div class="title">菜单三
            <div class="items">1111</div>
            <div class="items">2222</div>
            <div class="items">3333</div>
        </div>

        <div class="title">菜单四
            <div class="items">1111</div>
            <div class="items">2222</div>
            <div class="items">3333</div>
        </div>
    </dic>

</div>


<script>
    $('.title').click(function () {
        // 先给所有的items 加 hidden
        $('.items').addClass('hide');
        // 再将被点击的 items 标签内部的hidden移除
        $(this).children().removeClass('hide');
    })
</script>


</body>
</html>

（4）返回顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>
    <style>
        .hide {
            display: none;
        }
        #d1 {
            position : fixed;
            background-color: blue;

            right: 20px;
            bottom:20px;
            height:50px;
            width:50px;
        }

    </style>
</head>
<body>

<a href="" id="d1"></a>

<div style="height: 500px;background-color: red;"></div>
<div style="height: 500px;background-color: green;"></div>
<div style="height: 500px;background-color: orange;"></div>

<a href="#d1" class="hide">回到顶部</a>

<script>
    $(window).scroll(function(){
        if ($(window).scrollTop() > 100){
            $('#d1').removeClass('hide');
        }else{
            $('#d1').addClass('hide');
        }
    })
</script>
</body>
</html>

（5）自定义登录校验

  • 在获取用户名和密码的时候，如果用户没有输入用户名和密码，自动提示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>

</head>
<body>
<p>username:
    <input type="text" id="username">
    <span style="color: red"></span>
</p>
<p>password:
    <input type="text" id="password">
    <span style="color: red"></span>
</p>
<button id="button">提交</button>


<script>
    let $userName = $("#username");
    let $password = $("#password");

    $("#button").click(function () {
        // 获取用户名和密码。进行校验
        let username = $userName.val();
        let password = $password.val();

        if (!username) {
            $userName.next().text("用户名不能为空!")
        }

        if (!password) {
            $password.next().text("密码不能为空!")
        }

    });

    $('input').focus(function () {
        $(this).next().text('')
    })


</script>

</body>
</html>

（6）input框实时监控

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>

</head>
<body>

<input type="text" id="d1">

<script>
    $('#d1').on('input', function () {
        console.log(this.value);
    })
</script>

</body>
</html>

（7）hover事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>

</head>
<body>

<p id="d1">花前月下酒香封</p>

<script>

  $("#d1").hover( function(){ // 鼠标悬浮
    alert(" enter")
  },function(){
    alert(" leave") // 鼠标离开
  })

</script>

</body>
</html>

（8）键盘按键监控事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>

</head>
<body>


<script>
  $(window).keydown(function(event) {
    console.log(event.keyCode)
    if (event.keyCode === 16){
      alert("shift key 触发")
    }
  })

</script>

</body>
</html>

标签：jQuery,hide,元素,选择,div,选择器,d1
From： https://www.cnblogs.com/ssrheart/p/18028099

相关文章

  • vue前端引用Jquery完成复选框多选
    vue2前端引用Jquery完成复选框多选通常我们使用element-ui中el-table的多选模板完成列表的多选，但是有时需要把表格进行拆分，此时仅凭element-ui中的控件可能无法实现拆分后的多选。由于vue是JavaScript的前端框架，所以我考虑使用js来实现。jQuery作为JavaScript的补充和扩展，可以更......
  • Jquery中offset和position的区别
    一、Jquery中offset() 获取匹配元素在当前视口的相对偏移。总是计算相对于文档的位置，无论元素的父元素或祖先元素的position属性是什么。返回的对象包含两个整形属性：top和left。此方法只对可见元素有效。 例如：二、Jquery中position() 获取匹配元素相对父元素的偏移......
  • jQuery入门
    原文链接：https://zhuanlan.zhihu.com/p/635366269为什么要学jQuery？使用JavaScript开发过程中，有许多的缺点：查找元素的方法单一、遍历数组很麻烦，通常要嵌套一大堆的for循环有兼容性问题、想要实现简单的动画效果也很麻烦、代码冗余。为了解决这些问题，我们在JavaScript开发中使用jQ......
  • jQuery $.ajax() 方法概述
    原文链接：https://www.bejson.com/apidoc/jquery/jQuery.Ajax.html通过HTTP请求加载远程数据。jQuery底层AJAX实现。简单易用的高层实现见$.get,$.post等。$.ajax()返回其创建的XMLHttpRequest对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获......
  • 使用JQuery双击修改Table中Td
    <html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><style>table{border-collapse:collapse;border-spacing:0;margin-right:auto;......
  • 利用Jquery Lazyload JS插件实现网页图片延迟加载
    JqueryLazyload是一款网页图片延迟加载JS插件，本文介绍该JS的使用方法。最新的jquerylazyload可以单独使用（即不依赖jquery），本文介绍的是依赖jquery的使用及配置方法。Github项目地址：https://github.com/tuupola/lazyload本文使用的是1.9.7版本（实际与1.9.6版本一致）首先需要引用......
  • jquery+向上滚动
    <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-......
  • jquery使按钮置灰不可用
    看到有网友寻找解决按钮不可用的方法，这里简单写一下。html代码如下<buttonid="myButton">按钮</button>css代码如下#myButton{background:#acacac;border:1pxsolid#898989;}jquery代码如下$("#myButton").attr("disabled","true");或者$("#myButton&qu......
  • jquery中的form表单提交
    使用jQuery提交表单是一个常见的操作，它简化了AJAX请求的处理过程。以下是几种使用jQuery提交表单的方法：1.使用.submit()直接提交表单如果你只是想在提交表单时运行一些额外的JavaScript，可以使用.submit()方法。这不会通过AJAX发送表单，而是触发表单的提交事件，并允许你......
  • jQuery引用教程，CDN或下载教程
    如何在网页中添加jQuery？jQuery库是一个JavaScript文件，可以使用HTML的<script>标签引用它，通过其他云厂商提供的CDN在网页中添加jQuery。阿腾云atengyun.com分享多种安装jQuery的方法：下载jQuery并引用jQuery有两个版本的可供下载：Productionversion–用于实际的网站中，已被精简和......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99