jQuery
(1)介绍
- jQuery 是一个流行的 JavaScript 库,它简化了 JavaScript 在网页开发中的操作。jQuery 提供了许多实用的方法和函数,使得操作 DOM、处理事件、执行动画等变得更加简单和高效。
(2)jQuery基本语法
(3)基本选择器
(1)id选择器
(2)class类选择器
(3)标签选择器
(4)jQuery对象转为标签对象
(5)标签对象转为jQuery对象
| $(document.getElementById('d1')) |
| |
(4)组合选择器/分组与嵌套
| $('div') |
| $('div.c1') |
| $('div#d1') |
| $('*') |
| $('#d1,.c1,p') |
| $('div span') |
| $('div>span') |
| $('div+span') |
| $('div-span') |
(5)基本筛选器
- jQuery 提供了许多基本的筛选器,用于选择 DOM 元素的子集,使得选择元素变得更加灵活和方便。
(1):first
(2):last
(3):even
(4):odd
(5):eq()
(6):gt()
(7):lt()
(8):not()
(9):has()
(10):contains()
(6)属性选择器
- 属性选择器允许根据元素的属性值来选择 DOM 元素
| $('[username]') |
| $('[username="heart"]') |
| $('p[username="god"]') |
| $('[type]') |
| $('[type="text"]') |
(7)表单筛选器
:input
:选择所有输入元素,包括文本框、复选框、单选框等
:text
:选择所有文本框
:password
:选择所有密码框
:radio
:选择所有单选框
:checkbox
:选择所有复选框(bug:selected也会被选中)
:submit
:选择所有提交按钮
:reset
:选择所有重置按钮
:button
:选择所有按钮元素
:file
:选择所有文件上传框
:selected
:选择所有被选中的 <option>
元素
:focus
:选择当前获取焦点的元素
(1)表单对象属性
:enabled
:选择所有可用的元素。
:disabled
:选择所有禁用的元素。
:checked
:选择所有被选中的复选框或单选框。
| |
| $(':text:enabled'); |
| |
| |
| $(':checkbox:checked'); |
(8)筛选器方法
(1)filter()
| |
| $('input').filter('.required'); |
| |
| |
| $('input[type="text"]').filter(function() { |
| return $(this).val().length >= 10; |
| }); |
(2)not()
| |
| $('button').not('.disabled'); |
| |
| |
| $('option').not(function() { |
| return $(this).text() === 'admin'; |
| }); |
(3)is()
is()
方法用于检查匹配的元素集合中是否至少有一个元素匹配指定选择器,如果有则返回 true
,否则返回 false
| |
| $('input[type="checkbox"]').is(':disabled'); |
| |
| |
| $('input[type="radio"]').is(':checked'); |
(4)has()
(5)closest()
closest()
方法用于获取匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上遍历。如果给定选择器匹配,则返回该祖先元素,否则返回空集合。
| |
| $('input').closest('.container'); |
(6)eq(index)
(7)first()
(8)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 () { |
| |
| |
| $(this).clone(true).insertAfter($('body')) |
| |
| |
| }) |
| </script> |
| </body> |
| </html> |
(2)自定义模态框
| <!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"); |
| |
| |
| $("#d1").click(function () { |
| |
| $coverEle.removeClass("hide"); |
| $modalEle.removeClass("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').addClass('hide'); |
| |
| $(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> |
| <!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> |
本文作者:ssrheart
本文链接:https://www.cnblogs.com/ssrheart/p/18028099
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步