jQuery

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>

本文作者:ssrheart

本文链接:https://www.cnblogs.com/ssrheart/p/18028099

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   ssrheart  阅读(7)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示
💬
评论
📌
收藏
💗
关注
👍
推荐
🚀
回顶
收起