jquery基础,jQuery基础内容

jquery中有哪些基础事件方法

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零基础好学吗？

不建议如此，jquery是基于JavaScript封装而成的框架，目的是让开发者更简便地使用JavaScript，因此我们在使用各种JavaScript框架的时候，建议要有JavaScript的基础为佳，如此我们才能更快地掌握jquery和灵活的使用它。

JavaScript是现实中房子的地基，学习须得掌握基础，才能基于基础更快的掌握更深的知识。

如果满意，还望采纳，谢谢！

JQuery中基础过滤选择器用法实例分析

本文实例讲述了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程序设计有所帮助。

前端开发JS框架之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是用来干什么的？

用处：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