一.常用的选择器
1.基本选择器
全局选择器: | $("*") |
标签选择器: | $("HTML标签名") |
类选择器: | $(".class类名") |
id选择器: | $("#id值") |
交集选择器: | $("选择器1 选择器2") |
并集选择器: | $("选择器1,选择器2") |
2.层次选择器
后代选择器: | $("选择器1 选择器2") |
子选择器: | $("选择器1>选择器2") |
相邻元素选择器: | $("选择器1+选择器2") 可用next()代替 |
同辈元素选择器: | $("选择器1~选择器2") 可用 nextAll()代替 |
3.基本过滤选择器
:first | 选取第一个元素 |
:last | 选取最后一个元素 |
:even | 选取索引是偶数的所有元素 |
:odd | 选取索引是奇数的所有元素 |
:eq(index) | 选取索引等于index的元素 |
:gt(index) | 选取索引大于index的元素 |
:lt(index) | 选取索引小于index的元素 |
:not(选择器) | 去除所有与给定选择器匹配的元素 |
:hidden | 选取所有不可见的元素 |
:visible | 选取所有可见的元素 |
4.表单选择器
$("input[name='one']") | 选择name值为‘one’的表单元素 |
:input | 选择input、textarea、select和button元素 |
:text | 选择所有的单行文本框 |
:checkbox | 选择所有的多选框 |
:radio | 选择所有的单选框 |
:checked | 选取所有选中的元素(单选框 复选框) |
二.常见的事件与绑定
1.鼠标单击click()事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
<p id="demo" style="display: none">这是一段测试文字</p>
<input type="button" value="点我上面出现文字">
<script>
$("input[value='点我上面出现文字']").click(function () {
$(this).prev().show();
})
</script>
</body>
</html>
2.mouseover(鼠标移到某元素上)与mouseout(鼠标移开)事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>mouse事件绑定</title>
<script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
<span>show</span>
<p style="display: none">这是一段测试文字</p>
<script>
$(function () {
$("span").bind("mouseover",function () {
$(this).next().show();
}).bind("mouseout",function () {
$(this).next().hide();
})
})
</script>
</body>
</html>
3.hover(enter,leave)复合事件:模拟光标悬停事件,当光标移到到元素上时,会触发指定的第一个函数(enter),当光标移出这个元素时,会触发指定的第二个函数(leave)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hover</title>
<script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
<span>show</span>
<p style="display: none">这是一段测试文字</p>
<script>
$(function () {
$("span").hover(function () {
$(this).next().show();
},function(){
$(this).next().hide();
})
});
</script>
</body>
</html>
4.连续单击事件:toggle好像失效了,我们用条件判断来模拟连续单击
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>连续单击事件绑定</title>
<script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
<span>show</span>
<p>这是一段测试文字</p>
<script>
$(function () {
$("span").bind("click",function () {
var $content = $(this).next();
if ($content.is(":visible")){
$content.hide();
}else {
$content.show();
}
})
});
</script>
</body>
</html>
5.阻止默认行为:下例为阻止文本框为空时提交,需要提交一个参数event,event.preventDefault()可简化为return false;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止默认行为</title>
<script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
<form action="">
用户名:<input type="text" id="username">
<input type="submit" value="提交" id="sub">
<span></span>
</form>
<script>
$(function () {
$("#sub").bind("click",function (event) {
var username = $("#username").val();
if (username == ""){
$(this).next().html("用户名不能为空");
event.preventDefault();
}
})
});
</script>
</body>
</html>
6.模拟操作触发自定义事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模拟操作自动触发事件</title>
<script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
<h>点击显示下面的文字</h>
<p style="display: none">这是隐藏的文字哦</p>
<script>
$(function () {
$("h").bind("click",function () {
$(this).next().show();
})
//下面这句页面刷新后自动显示隐藏的文字,不需要点击h标签
$("h").trigger("click");
});
</script>
</body>
</html>