jquery基础事件，包括绑定事件、简写事件、复合事件；
创新互联公司是一家专业提供汝南企业网站建设,专注与成都做网站、网站制作、成都外贸网站建设、H5建站、小程序制作等业务。10年已为汝南众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。
一．绑定事件
jQuery 通过.bind()方法来为元素绑定这些事件。
形式：
bind(type, [data], fn)
参数：
type 表示一个或多个类型的事件名字符串；
[data]是可选的，作为 event.data 属性值传递一个额外的数据，这个数据是一个字符串、一个数字、一个数组或一个对象；
fn 表示绑定到指定元素的处理函数。
二、简写事件
为了使开发者更加方便的绑定事件，jQuery 封装了常用的事件以便节约更多的代码。 称之为简写事件。简写事件，绑定方法如下图，
三、复合事件
jQuery 提供了许多最常用的事件效果， 组合一些功能实现了一些复合事件， 比如切换功 能、智能加载等。
扩展资料
1、绑定事件fn函数
1)使用点击事件
$('input').bind('click', function () {//点击按钮后执行匿名函数
alert('点击！');
});
2)普通处理函数
$('input').bind('click', fn); //执行普通函数式无须圆括号
function fn() {
alert('点击！');
}
2、简写事件函数
1）.mouseover()和.mouseout()表示鼠标移入和移出的时候触发。而.mouseenter()和.mouseleave()表示鼠标穿过和穿出的时候触发。
2）.keydown()、.keyup()返回的是键码，而.keypress()返回的是字符编码。
3）.focus()和.blur()分别表示光标激活和丢失，事件触发时机是当前元素。而.focusin()和.focusout()也表示光标激活和丢失，但事件触发时机可以是子元素。
3、复合事件示例，背景移入移出切换效果
$('div').hover(function () {
$(this).css('background', 'black'); //mouseenter 效果
}, function () {
$(this).css('background', 'red'); //mouseleave 效果，可省略
});
参考资料
jQuery官方网站-事件
不建议如此，jquery是基于JavaScript封装而成的框架，目的是让开发者更简便地使用JavaScript，因此我们在使用各种JavaScript框架的时候，建议要有JavaScript的基础为佳，如此我们才能更快地掌握jquery和灵活的使用它。
JavaScript是现实中房子的地基，学习须得掌握基础，才能基于基础更快的掌握更深的知识。
如果满意，还望采纳，谢谢！
本文实例讲述了JQuery中基础过滤选择器用法。分享给大家供大家参考。具体如下：
!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
""
html
xmlns=""
head
meta
http-equiv="Content-Type"
content="text/html;
charset=utf-8"
/
title基础过滤选择器/title
style
type="text/css"
#main{
width:600px;
border:1px
solid
green;
margin:auto;
padding:10px;
}
#tbl{
border-collapse:collapse;
border-top:1px
solid
red;
border-left:1px
solid
red;
margin:auto;
}
#tbl
td{
width:60px;
height:60px;
border-collapse:collapse;
border-bottom:1px
solid
red;
border-right:1px
solid
red;
}
/style
script
src="jquery-1.6.2.min.js"
type="text/javascript"/script
script
type="text/javascript"
$(function
()
{
//=============举例1========================
//:first
说明:
匹配找到的第一个元素
//....1修改第一个单元格的背景色
//var
$tds
=
$("#tbl
td:first");
//$tds.css("backgroundColor",
"blue");
//....2修改第一行的背景色
//var
$trs
=
$("#tbl
tr:first");
//$trs.css("backgroundColor",
"blue");
//=============举例2========================
//:last
说明:
匹配找到的最后一个元素.与
:first
相对应.
//...1修改随后一个单元格的背景色
//var
$tds
=
$("#tbl
td:last");
//$tds.css("backgroundColor",
"blue");
//=============举例3========================
//:not(selector)
去除所有与给定选择器匹配的元素.有点类似于”非”
//...1把所有class不为tdClass的列的文本进行修改
//var
$tds
=
$("#tbl
td:not(.tdClass)");
//$tds.text("Not
tdClass");
//=============举例4========================
//:even
说明:
匹配所有索引值为偶数的元素，从
开始计数.js的数组都是从0开始计数的.
//例如要选择table中的行,因为是从0开始计数,所以table中的第一个tr就为偶数0.
//...1把索引值为偶数的行变成黄色
//var
$trs
=
$("#tbl
tr:even");
//$trs.css("backgroundColor",
"yellow");
//=============举例5========================
//:
odd
说明:
匹配所有索引值为奇数的元素,和:even对应,从
开始计数.
//var
$trs
=
$("#tbl
tr:odd");
//$trs.css("backgroundColor",
"yellow");
//=============举例6========================
//:eq(index)
说明:
匹配一个给定索引值的元素.eq(0)就是获取第一个tr元素.括号里面的是索引值,不是元素排列数.
//...1设置第二个单元格的背景色
//var
$tds
=
$("#tbl
td:eq(1)");
//$tds.css("backgroundColor",
"gray");
//=============举例6========================
//:gt(index)
说明:
匹配所有大于给定索引值的元素.
//...1把下标索引大于1的所有单元格背景色设置为灰色
//var
$tds
=
$("#tbl
td:gt(1)");
//$tds.css("backgroundColor",
"gray");
//=============举例7========================
//:lt(index)
说明:
匹配所有小于给定索引值的元素.
//...1把下标索引小于3的所有单元格背景色设置为灰色
var
$tds
=
$("#tbl
td:lt(3)");
$tds.css("backgroundColor",
"gray");
//=============举例8========================
//:header(固定写法)
说明:
匹配如
h1,
h2,
h3之类的标题元素.这个是专门用来获取h1,h2这样的标题元素.
//...1把所有的h标签背景色进行修改
var
$hs
=
$(":header");
$hs.css("backgroundColor",
"gold");
//=============举例8========================
//slice
获取下标范围内元素
var
$trs
=
$("#tbl
tr").slice(1,
3);
$trs.css("backgroundColor",
"gold");
});
/script
/head
body
div
id="main"
h1我是h1/h1
h2我是h2/h2
h3我是h3/h3
table
id="tbl"
tr
td1/tdtd1/tdtd1/td
/tr
tr
td
class="tdClass"2/tdtd2/tdtd2/td
/tr
tr
td3/tdtd3/tdtd3/td
/tr
tr
td4/tdtd4/tdtd
class="tdClass"4/td
/tr
tr
td5/tdtd5/tdtd5/td
/tr
tr
td6/tdtd6/tdtd
class="tdClass"6/td
/tr
/table
/div
/body
/html
希望本文所述对大家的jQuery程序设计有所帮助。
jQuery对象是通过jQuery包装DOM对象后产生的对象
注意：jQuery对象只能使用jQuery里的方法，DOM对象只能使用DOM对象的方法
基本选择器
层级选择器：
基本筛选器：
属性选择器：
表单筛选器：
筛选器方法：
jQuery的一些方法：
注意：对于标签上有的能够看到的属性和自定义属性用attr()方法
对于返回布尔值比如checkbox，radion，option这三个标签是否被选中，用prop方法
事件绑定方式：
注意：DOM定义的事件可以用 .on()方法来绑定事件，但是jQuery定义的事件就不可以
常用事件有：
移除事件：把on改成off，就是移除 .on()绑定的事件
阻止后续事件执行：事件函数中添加 return false; (常用于阻止表单提交等）或者e.preventDefault()
阻止事件冒泡：添加e.stopPropagation()
利用父标签去捕获子标签的事件
推荐阅读：
前端开发框架之jQuery 和 Vue 的选择
前端开发之15个jQuery小技巧分享
前端开发之JQuery入门基础操作
前端开发框架jQuery的优势与基础知识分享
用处：jquery是基于javascript类库的框架， 它里面提供了许多javascript类库，和一些css样式表的封装， 使用起来比较方便， 简化了用户与浏览器的交互， 提高了系统的性能和开发效率。
jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
扩展资料：
语言特点
1、快速获取文档元素
jQuery的选择机制构建于Css的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了JavaScript中获取页面元素的方式。
2、提供漂亮的页面动态效果
jQuery中内置了一系列的动画效果，可以开发出非常漂亮的网页，许多网站都使用jQuery的内置的效果，比如淡入淡出、元素移除等动态特效。
3、创建AJAX无刷新网页
AJAX是异步的JavaScript和ML的简称，可以开发出非常灵敏无刷新的网页，特别是开发服务器端网页时，比如PHP网站，需要往返地与服务器通信，如果不使用AJAX，每次数据更新不得不重新刷新网页，而使用AJAX特效后，可以对页面进行局部刷新，提供动态的效果。
参考资料来源：百度百科--jQuery
重庆分公司
重庆分公司
