jquerychange事件JQuery笔记（上）jquery中的change事件学会了吗，

日期：2023/03/23 19:15作者：吴耀华人气：

导读：1.JQuery简介。 jQuery是一套跨浏览器的JavaScript库，简化HTML与JavaScript之间的操作。由John Resig...

1.JQuery简介。

jQuery是一套跨浏览器的javascript库，简化html与JavaScript之间的操作。由John Resig在2006年1月的BarCamp NYC上发布第一个版本。目前是由 Dave Methvin 领导的开发团队进行开发。全球前10000个访问最高的网站中，有59%使用了jQuery，是目前最受欢迎的JavaScript库。简单来说就是一款免费且开放源代码的JavaScript代码库，类似的JavaScript代码库还有比如：jQuery、dojo、prototype、ExtJS。

2.JQuery特点。

动态特效

ajax

通过插件来扩展

方便的工具 - 例如浏览器版本判断

渐进增强

链式调用

多浏览器支持，支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+（在2.0.0中取消了对Internet Explorer6,7,8的支持）。

3.JQuery中的选择器

在JQuery中，获得页面中元素的方式就称做选择器。

基本

层级

简单

内容

可见性

属性

子元素

表单

表单对象属性

3.1.基本

#id ：通过id属性值获取元素

Element ：通过元素名获取元素selector1,selector2 ：获取列表中指定的所有元素.

class ：获取使用class样式的所有元素

3.2简单

first ：匹配第一个元素

last ：匹配最后一个元素

even ：匹配索引为偶数的元素

odd ：匹配索引为奇数的元素

eq(index) ：匹配索引为指定值的元素

gt(index) ：匹配索引大于指定值的元素

lt(index) ：匹配索引小于指定值的元素

not(selector) ：匹配除了指定选择器之外的所有元素

3.3层级

ancetor descendant：匹配祖先元素下的后代元素

parent > child ：匹配父元素下的子元素

prev + next ：匹配上一个元素的后面的元素，必须是挨着的

prev~siblings ：匹配前一个元素的所有平辈元素，在prev元素后面才能匹配

3.4内容

:contains(text)：匹配内容中包含指定内容的元素

:empty ：匹配内容为空的元素

:has(selector)：匹配内容中包含指定选择器的元素

:parent：匹配内容不为空的元素

3.5可见性

hidden：匹配隐藏的元素

visible：匹配显示的元素

3.6属性

[attribute]：匹配具有指定属性的元素

[attribute=value]：匹配属性值等于指定值的元素

[attribute!=value]：匹配属性值不等于指定值的元素

[attribute^=value]：匹配属性值以指定值的开始的元素

[attribute$=value]：匹配属性值以指定值的结束的元素

[attribute*=value]：匹配属性值中包含指定值的元素

[selector1][selector2][selectorN]：同时满足所有条件，则匹配

3.7子元素

:nth-child(index/even/odd)：匹配指定索引的元素，从1算起

:first-child：匹配第一个子元素

:last-child：匹配最后一个元素

:only-child：如果子元素是父元素的唯一元素，则匹配

3.8表单

:input：匹配所有表单元素

:text：匹配文本框

:password：匹配密码框

:radio：匹配单选按钮

:checkbox：匹配复选框

:submit：匹配提交按钮

:reset：匹配重置按钮

:image：匹配图像按钮

:button：匹配按钮

:file：匹配文件框

:hidden：匹配隐藏域

3.9表单对象属性

:enabled：匹配状态可用的表单元素

:disabled：匹配状态不可用的表单元素

:checked：匹配被选中的元素单选或复选

:selected：匹配被选中的元素匹配的是option

4.0 JQuery对象与dom对象

4.1什么是dom对象

以上方式获取回来的是dom对象，dom对象可以调用dom属性和相关方法，dom对象不能调用JQuery方法。

4.2什么是JQuery对象

以上方式获取回来的是JQuery对象，其实，jQuery对象本身就是一个数组，选择器匹配回来几个数组元素，jQuery对象（数组）长度就是元素个数。每个jQuery对象下的某个元素都是一个dom对象。

4.3dom对象与JQuery对象的相互转换

1)JQuery对象转dom对象

语法: JQuery[0]或JQuery.get(0)

2)dom对象转JQuery对象

语法: $(dom)

5、属性操作

5.1基本属性

attr(name)：获取指定属性的值

attr(key,value)：获取指定属性的值

attr(properties)：一次设置多个属性的值，要求参数必须是json对象

attr(key,fn)：通过一个函数的返回值设置指定属性的值

removeAttr(name)：删除指定的属性

5.2css

addClass(class)：添加样式

removeClass(class)：移除样式

toggleClass(class)：切换样式

hasClass(class)：判断是否使用了摸个样式，返回true:有，false:没有

5.3html/文本/值

html()

html(val)

text()

text(val)

val()

val(val)

6、css操作

6.1 基本css

css(name)：获取指定样式的值 css(name,value)：设置指定样式的值 css(properties)：一次设置多个样式的值，要求参数的json对象

6.2 位置

offset()：获取元素的位置，返回json对象，包含left和top属性 offset(coordinates) ：设置元素的位置，要求参数json对象，必须包含left和top

6.3尺寸

width()：获取宽度 width(value)：设置宽度 height()：获取高度 height(value)：设置高度

7、事件编程

7.1页面载入

js中

window.onload=function(){ //页面初始化}

JQuery中封装了方法用于页面加载

$(document).ready(function(){ //页面初始化});

7.2基本事件

change(fn)：内容改变 click(fn)：点击 dblclick(fn)：双击 focus(fn)：获取焦点 keydown(fn)：键盘按下 keyup(fn)：键盘抬起 keypress(fn)：键盘点击 load(fn)：页面加载 unload(fn)：页面关闭 mousedown(fn)：鼠标按下 mouseup(fn)：鼠标抬起 mousemove(fn)：鼠标移动 mouseover(fn)：鼠标经过 mouseout(fn)：鼠标离开 resize(fn)：改变尺寸 scroll(fn)：滚动条滚动 select(fn)：选择内容 submit(fn)：提交按钮

6.3事件切换

hover(over,out) #over：鼠标经过时执行的事件处理程序 #out：鼠标离开时执行的事件处理程序 toggle(fn,fn) #当鼠标点击时的事件绑定 #第一次点击时触发第一个事件处理程序 #第二次点击时触发第二个事件处理程序