文章介绍了jQuery的选择器，包括基本选择器、ID选择器、类选择器等，并展示了如何使用$()进行元素选取。此外，详细讲解了jQuery的事件处理，如on()、off()、one()等方法，以及事件代理的概念和使用示例。文章还提到了一些常见的jQuery事件，如click()、mouseenter()等。
jQuery的选择器与CSS3中的选择器几乎完全一致，这里就不再赘述。总体梳理：
基本选择器
层次选择器
伪类选择器
伪元素选择器器
属性选择器 具体用法如下：
$("form")
$("ul.nav > li")
jQuery中所有选择器都以美元符号开头：$()
例如：
元素选择器
在页面中选取所有<div>元素
$("div")
实例 用户点击按钮后所有<div>元素都隐藏
$(document).ready(function(){
$("button").click(function(){
$("div").hide();
});
});#id选择器 通过 id 选取元素语法如下
$("#div1")
实例 用户点击按钮后，有id="div1"属性都元素都将被隐藏
$(document).ready(function(){
$("button").click(function(){
$("#div1").hide();
});
});.class选择器 jQuery 类选择器可以通过指定的 class 查找元素
$(".box")
实例 用户点击按钮后所有带有 class="box" 属性的元素都隐藏
$(document).ready(function(){
$("button").click(function(){
$(".box").hide();
});
});3.jQuery事件
jQuery的事件绑定与Element元素不同，不可以使用onxxx属性，也不能使用addEventListener，而是使用on()，可以理解为on是对于Element元素事件绑定的封装。 on()也支持事件代理。
on(event,[selector],[data],fn)
off(event,[selector],fn)
one(event,[selector],fn)
trigger(event,[data]) jQuery的事件绑定还支持快捷绑定
click([data],fn) …
3.1.事件的基本使用
jQuery事件方法语法
on() off()
bind() unbind()
快捷绑定click()等
在jQuery中，大多数DOM事件都有一个等效都jQuery方法
页面中指定一个点击事件：
$("p").click();
下一步是定义触发事件的内容：
$("p").click(function(){
//动作触发后执行都代码！！
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01-事件的基本使用.html</title>
</head>
<body>
<button>新增</button>
<button>修改</button>
<div>标题</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script>
$(function () {
// 第一个参数 事件类型 第二个参数(可选的) 要传递的参数 第三个参数 事件处理函数
/*
$('button').bind('click', '123', function (event) {
console.log('button点击');
console.log(event);
console.log(event.data);//123
})
*/
// 点击新增或者修改按钮，改变div内部的内容
$('button').bind('click', function (event) {
// 通过event.target(DOM节点，可以拿到内部的内容) 来判断当前是哪个按钮点击
// console.log(event.target);
// console.log(event.target.innerHTML);
if($(event.target).html() === '新增'){
$('div').html('新增学生信息')
}else{
$('div').html('修改学生信息')
}
})
// 解绑 unbind() 无参时 解除绑定的所有事件
// $('button').unbind()
// 解绑 unbind('click') 传递参数->事件类型
// $('button').unbind('click')
// 解绑 unbind() 解绑click对应的事件
function clickEvent() {
console.log('我是click事件');
}
$('button').click(clickEvent)
// 第一个参数 事件类型 第二个参数 事件名称
$('button').unbind('click', clickEvent)
})
</script>
</body>
</html>3.2.事件代理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02-事件代理.html</title>
</head>
<body>
<button>点我啊</button>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script>
// 点击body
// 第一个参数 事件类型 第二个参数(可选) 将要代理谁 第三个参数(可选) 传递给事件内部的参数 第四个参数 事件处理程序
// $('body').on('click', function (event) {
// console.log(event);
// })
// button做代理
$('body').on('click','button', [1,2], function (event, a, b) {
console.log(event, a, b);
})
// 事件解绑 移除代理 使用off
// $('body').off('click', 'button')
// 模拟事件执行 trigger 第一个参数 事件类型 第二个参数 数组参数(传递给形参)
$('button').trigger('click', [1, 2])
</script>
</body>
</html>3.3.事件类型4
常用**的jQuery事件快速绑定方法**
1.$(document).ready()
$(document).ready()方法允许我们在文档完全加载完后执行函数
2.click()
click()方法是当按钮点击事件被触发时会调用一个函数
3.dbclick()
当双击元素时，会发生dbclick事件
4.mouseenter()
当鼠标指针穿过元素时，会发生mouseenter事件
5.mouseleave()
当鼠标指针离开元素时，会发生mouseleave事件
6.mousedown()
当鼠标指针移动到元素上方，并按下鼠标按键时，会发生mousedown事件
7.mouseup()
当元素上松开鼠标按钮时，会发生mouseup事件
8.hover()
hover()方法用于模拟光标悬停事件
当鼠标移动到元素上时，会触发指定当第一个函数（mouseenter）；当鼠标移出这个元素时，会触发指定当第二个函数（mouseleave）
9.blur()
当元素失去焦点时，发生blur事件
10.keydown()
键盘事件：按键按下事件
11.keyup()
键盘事件：按键抬起事件
12.表单事件等等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>03-事件类型方法.html</title>
</head>
<body>
<p>一段文字</p>
<button>点我啊</button><br>
输入一些东西: <input type="text">
<form action="">
name:
<input type="text" value="zhangsan">
<span style="display: none;">请输入你的名字</span>
<br>
<input type="submit" value="提交">
</form>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script>
$(function () {
//click() 鼠标单击事件
//当点击事件在某个<p>元素上触发时，隐藏当前当<p>元素
$("p").click(function(){
$(this).hide();
});
// dblclick() 鼠标双击事件
$('button').dblclick(function () {
alert('dblclick')
})
// mouseenter() 鼠标进入事件 不支持子元素
$('button').mouseenter(function () {
console.log('mouseenter：你的鼠标移到了button的元素上！');
$('button').css('background', 'red')
})
// mouseleave() 鼠标离开事件 不支持子元素
$('button').mouseleave(function () {
console.log('mouseleave:再见，你的鼠标离开了该button');
$('button').css('background', 'blue')
})
// mousedown() 当鼠标指针移动到元素上方，并按下鼠标按键时
$('button').mousedown(function () {
console.log('mousedown:鼠标在该按钮上按下');
})
// mouseup() 当元素上松开鼠标按钮时，会发生mouseup事件
$('button').mouseup(function () {
console.log('mouseup:鼠标在button上松开');
})
// hover() 鼠标悬停事件
$('button').hover(function () {
console.log('hover');
$(this).css("background-color","#cccccc");
})
//blur() 失去焦点
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
// 键盘事件
// keydown 按键按下事件
$('input').keydown(function () {
$('input').css('background', 'blue')
})
// keyup 按键抬起事件
$('input').keyup(function () {
$('input').css('background', 'yellow')
})
// submit()
$('form').submit(function () {
alert('submit')
return false;
})
// focus
$('input:text').focus(function () {
// 动画
$('span').css('display','inline').fadeOut(3000)
})
})
</script>
</body>
</html>
扫一扫
880
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
