JQuery基础

来源：互联网发布：微艾薇h5建站编辑：程序博客网时间：2024/06/05 16:22

一、引用jQuery

1、引用本地jQuery库

<head>

</head>

2、通过CDN引用

<head>

</script>

</head>

或

<head>

</script>

</head>

二、基础语法

1、操作符

$(selector).action()：对selector执行action方法

如：

$(this).hide() -隐藏当前元素

$("p").hide() -隐藏所有段落

$("p.test").hide() -隐藏所有 class="test"的段落

$("#test").hide() -隐藏所有 id="test"的元素

$(document).ready(function(){}）：文档就绪事件

2、选择器

$("p")：选取所有<p>元素

$("#test")：选择id为test的元素

$(".test")：选择class="test"的元素

其他选择器例子：

3、事件

常见的DOM事件：

bind()

向匹配元素附加一个或更多事件处理器

blur()

触发、或将函数绑定到指定元素的 blur 事件

change()

触发、或将函数绑定到指定元素的 change 事件

click()

触发、或将函数绑定到指定元素的 click 事件

dblclick()

触发、或将函数绑定到指定元素的 double click 事件

delegate()

向匹配元素的当前或未来的子元素附加一个或多个事件处理器

die()

移除所有通过 live() 函数添加的事件处理程序。

error()

触发、或将函数绑定到指定元素的 error 事件

event.isDefaultPrevented()

返回 event 对象上是否调用了 event.preventDefault()。

event.pageX

相对于文档左边缘的鼠标位置。

event.pageY

相对于文档上边缘的鼠标位置。

event.preventDefault()

阻止事件的默认动作。

event.result

包含由被指定事件触发的事件处理器返回的最后一个值。

event.target

触发该事件的 DOM 元素。

event.timeStamp

该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。

event.type

描述事件的类型。

event.which

指示按了哪个键或按钮。

focus()

触发、或将函数绑定到指定元素的 focus 事件

keydown()

触发、或将函数绑定到指定元素的 key down 事件

keypress()

触发、或将函数绑定到指定元素的 key press 事件

keyup()

触发、或将函数绑定到指定元素的 key up 事件

live()

为当前或未来的匹配元素添加一个或多个事件处理器

load()

触发、或将函数绑定到指定元素的 load 事件

mousedown()

触发、或将函数绑定到指定元素的 mouse down 事件

mouseenter()

触发、或将函数绑定到指定元素的 mouse enter 事件

mouseleave()

触发、或将函数绑定到指定元素的 mouse leave 事件

mousemove()

触发、或将函数绑定到指定元素的 mouse move 事件

mouseout()

触发、或将函数绑定到指定元素的 mouse out 事件

mouseover()

触发、或将函数绑定到指定元素的 mouse over 事件

mouseup()

触发、或将函数绑定到指定元素的 mouse up 事件

one()

向匹配元素添加事件处理器。每个元素只能触发一次该处理器。

ready()

文档就绪事件（当 HTML 文档就绪可用时）

resize()

触发、或将函数绑定到指定元素的 resize 事件

scroll()

触发、或将函数绑定到指定元素的 scroll 事件

select()

触发、或将函数绑定到指定元素的 select 事件

submit()

触发、或将函数绑定到指定元素的 submit 事件

toggle()

绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。

trigger()

所有匹配元素的指定事件

triggerHandler()

第一个被匹配元素的指定事件

unbind()

从匹配元素移除一个被添加的事件处理器

undelegate()

从匹配元素移除一个被添加的事件处理器，现在或将来

unload()

触发、或将函数绑定到指定元素的 unload 事件

三、效果

1、隐藏/显示

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

$(selector).toggle(speed,callback)：切换隐藏与显示

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

2、淡入淡出

jQuery 拥有下面四种 fade 方法：

$(selector).fadeIn(speed,callback)：淡入隐藏的元素

$(selector).fadeOut(speed,callback)：淡出显示的元素

$(selector).fadeToggle(speed,callback)：淡入淡出切换

$(selector).fadeTo(speed,opacity,callback)：渐变为给定的不透明度

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

3、滑动

$(selector).slideDown(speed,callback)：向下滑动元素

$(selector).slideUp(speed,callback)：向上滑动元素

$(selector).slideToggle(speed,callback)：向上、向下滑动切换

4、动画

$(selector).animate({params},speed,callback)

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

params可操作多个属性，可使用相对值，可使用预定义值"show", "hide", "toggle"，可使用队列

例子：

$("button").click(function(){

var div=$("div");

div.animate({left:'100px'},"slow");

div.animate({fontSize:'3em'},"slow");

});

$(selector).stop(stopAll,goToEnd)：停止动画

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

四、HTML

1、捕获/设置

text() -设置或返回所选元素的文本内容
html() -设置或返回所选元素的内容（包括 HTML标记）
val() -设置或返回表单字段的值
attr() -获取属性的值

以上方法同样可传入参数或回调函数，如传入参数则为设置，不传则为获取。

回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串

例子：

$("#btn1").click(function(){

$("#test1").text(function(i,origText){

return "Old text: " + origText + " New text: Hello world!

(index: " + i + ")";

});

2、添加/删除元素

append() -在被选元素的结尾插入内容
prepend() -在被选元素的开头插入内容
after() -在被选元素之后插入内容
before() -在被选元素之前插入内容

remove() -删除被选元素（及其子元素）
empty() -从被选元素中删除子元素

3、CSS

addClass() -向被选元素添加一个或多个类
removeClass() -从被选元素删除一个或多个类
toggleClass() -对被选元素进行添加/删除类的切换操作

css("propertyname","value")：如果不传value则为获取，传value为设置

4、尺寸

width()：设置或返回元素的宽度（不包括内边距、边框或外边距）
height()：设置或返回元素的高度（不包括内边距、边框或外边距）
innerWidth()：返回元素的宽度（包括内边距）
innerHeight()：返回元素的高度（包括内边距）
outerWidth()：返回元素的宽度（包括内边距和边框）
outerHeight()：返回元素的高度（包括内边距和边框）

五、遍历

1、向上遍历

parent()：方法返回被选元素的直接父元素，只会向上一级对DOM树进行遍历
parents()：返回被选元素的所有祖先元素，它一路向上直到文档的根元素
parentsUntil()：返回直到给定元素之间的所有祖先元素

2、向下遍历

children()：返回被选元素的所有直接子元素，只会向下一级对DOM树进行遍历
find()：返回被选元素的后代元素，一路向下直到给定元素

3、水平遍历

siblings()：返回被选元素的所有同胞元素
next()：返回被选元素的下一个同胞元素
nextAll()：返回被选元素的所有跟随的同胞元素
nextUntil()：返回介于给定参数之间的所有跟随的同胞元素
prev()：返回被选元素的上一个同胞元素
prevAll()：返回被选元素的所有之前的同胞元素
prevUntil()：返回介于给定参数之间的所有之前的同胞元素

4、过滤

first() 方法返回被选元素的首个元素

last() 方法返回被选元素的最后一个元素

eq(index) 方法返回被选元素中带有指定索引号的元素

filter(lambda) 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回

not() 方法返回不匹配标准的所有元素（与filter相反）

六、Ajax

在不重载全部页面的情况下，实现了对部分网页的更新

1、load

$(selector).load(URL,data,callback):从服务器加载数据，并把返回的数据放入被选元素中

必需的 URL 参数规定您希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

如：

$("#div1").load("/demo/ajax/demo_test.txt")

也可以把选择器加到URL参数中

$("#div1").load("/demo/ajax/demo_test.txt" #p1)

2、get/post

$.get(URL,callback):通过 HTTP GET 请求从服务器上请求数据

必需的 URL 参数规定您希望请求的 URL。

可选的 callback 参数是请求成功后所执行的函数名，其中第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。

$.post(URL,data,callback)：通过 HTTP POST 请求从服务器上请求数据

必需的 URL 参数规定您希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。

可选的 callback 参数是请求成功后所执行的函数名，其中第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。

七、其他

1、noConflict

释放$标示符：执行$.noConflict后，将不再使用$标示符，而必须使用全名的jQuery来选择元素（为了避免与其他的框架标示符冲突）

$.noConflict返回对jQuery的引用，故可以通过赋值重命名标示符

如：

jq = $.noConflict

Jq(document).ready()

释放标示符后，在jQuery的document.ready方法中的回调function传入$仍可在function内部使用$标示符

JQuery基础

一、引用jQuery

1、引用本地jQuery库

2、通过CDN引用

二、基础语法

1、操作符

2、选择器

3、事件

三、效果

1、隐藏/显示

2、淡入淡出

3、滑动

4、动画

四、HTML

1、捕获/设置

2、添加/删除元素

3、CSS

4、尺寸

五、遍历

1、向上遍历

2、向下遍历

3、水平遍历

4、过滤

六、Ajax

1、load

2、get/post

七、其他

1、noConflict

八、插件

1、Validate

2、Accordion

3、Autocomplete

4、Message

5、密码验证

6、Prettydate

7、Tooltip

8、Treeview