jquery学习总结43421.pdf

《jquery学习总结43421.pdf》由会员分享，可在线阅读，更多相关《jquery学习总结43421.pdf（9页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、$(document).ready()执行时机 必须等待网页中所有的内容加载完毕后（包括图片）才能执行 网页中所有 DOM 结构绘制完毕后就执行，可能 DOM 元素关联的东西并没有加载完 编写个数 不能同时编写多个，以下代码无法正确执行：=function(alert(test1);=function()alert(test2);结果只会输出test2 能同时编写多个 简化写法 无$(document).ready(function();可以简写成$(function();一、选择网页元素 jQuery 的基本设计和主要用法，就是选择某个网页元素，然后对其进行某种操作。这是它区别于其他函数库的

2、根本特点。使用 jQuery 的第一步，往往就是将一个选择表达式，放进构造函数 jQuery()（简写为$），然后得到被选中的元素。选择表达式可以是 CSS 选择器：$(document)as(p);ot(.myClass);ilter(.myClass);irst();q(5);ext(p);arent();losest(form);hildren();iblings();ind(h3).eq(2).html(Hello);分解开来，就是下面这样：1.$(div).find(h3).eq(2).html(Hello);nd()方法，使得结果集可以后退一步：1.$(div)2.find(h3)

3、3.eq(2)4.html(Hello)5.end().eq(0).html(World);nd()：回到最近的一个破坏性操作之前。如果之前没有破坏性操作，则返回一个空集。所谓的破坏性就是指任何改变所匹配的 jQuery 元素的操作。示例 描述：选取所有的 p 元素，查找并选取 span 子元素，然后再回过来选取 p 元素 HTML 代码:Hello,how are you jQuery 代码:$(p).find(span).end()结果:Hello how are you -四、元素的操作：取值和赋值 操作网页元素，最常见的需求是取得它们的值，或者对它们进行赋值。jQuery 使用同一个函

4、数，来完成取值（getter）和赋值（setter）。到底是取值还是赋值，由函数的参数决定。$(h1).html();tml(Hello);.html()返回或设置被选元素的内容(inner HTML)2.text()取出或设置 text 内容 3.attr()取出或设置某个属性的值 4.width()取出或设置某个元素的宽度 5.height()取出或设置某个元素的高度 6.val()取出或设置 html 内容 取出某个表单元素的值 需要注意的是，如果结果集包含多个元素，那么赋值的时候，将对其中所有的元素赋值；取值的时候，则是只取出第一个元素的值（.text()例外，它取出所有元素的 tex

5、t 内容）。五、元素的操作：移动.insertAfter()，把 div 元素移动 p 元素后面：$(div).insertAfter(p);.after()，把 p 元素加到 div 元素前面：$(p).after(div);使用这种模式的操作方法，一共有四对 1.insertAfter()和.after()：在现存元素的外部，从后面插入元素 2.insertBefore()和.before()：在现存元素的外部，从前面插入元素 3.appendTo()和.append()：在现存元素的内部，从后面插入元素 4.prependTo()和.prepend()：在现存元素的内部，从前面插入元素

6、():描述:在所有段落中后插入一个 jQuery 对象(类似于一个 DOM 元素数组)。HTML 代码:HelloI would like to say:jQuery 代码:$(p).after($(b);结果:I would like to say:Hello()：描述:把所有段落插入到一个元素之后。与$(#foo).after(p)相同 HTML 代码:I would like to say:Hello jQuery 代码:$(p).insertAfter(#foo);结果:HelloI would like to say:()：描述:在所有段落中前插入一个 jQuery 对象(类似于一个

7、 DOM 元素数组)。HTML 代码:I would like to say:Hello jQuery 代码:$(p).before($(b);结果:HelloI would like to say:()：描述：向所有段落中追加一些 HTML 标记。HTML 代码:I would like to say:jQuery 代码:$(p).append(Hello);结果:I would like to say:Hello ()描述：新建段落追加 div 中并加上一个 class HTML 代码:jQuery 代码:$().appendTo(div).addClass(test).end().add

8、Class(test2);结果:()描述：向所有段落中前置一个 jQuery 对象(类似于一个 DOM 元素数组)。HTML 代码:I would like to say:Hello jQuery 代码:$(p).prepend($(b);结果:HelloI would like to say:()描述：把所有段落追加到 ID 值为 foo 的元素中。HTML 代码:I would like to say:jQuery 代码:$(p).prependTo(#foo);结果:I would like to say:*六*、元素的操作：复制、删除和创建 复制元素使用.clone()删除元素使用.r

9、emove()和.detach()。两者的区别在于，前者不保留被删除元素的事件，后者保留，有利于重新插入文档时使用。清空元素内容（但是不删除该元素）使用.empty()。创建新元素的方法非常简单，只要把新元素直接传入 jQuery 的构造函数就行了：*$(Hello);*$(new list item);*$(ul).append(list item);七、工具方法 除了对选中的元素进行操作以外，jQuery 还提供一些工具方法（utility），不必选中元素，就可以直接使用。常用的工具方法有以下几种：$.trim()去除字符串两端的空格。$.each()遍历一个数组或对象。$.inArray

10、()返回一个值在数组中的索引位置。如果该值不在数组中，则返回-1。$.grep()返回数组中符合某种标准的元素。$.extend()将多个对象，合并到第一个对象。$.makeArray()将对象转化为数组。$.type()判断对象的类别（函数对象、日期对象、数组对象、正则对象等等）。$.isArray()判断某个参数是否为数组。$.isEmptyObject()判断某个对象是否为空（不含有任何属性）。$.isFunction()判断某个参数是否为函数。$.isPlainObject()判断某个参数是否为用或new Object建立的对象。$.support()判断浏览器是否支持某个特性。八、事

11、件操作 jQuery 可以对网页元素绑定事件。根据不同的事件，运行相应的函数。$(p).click(function()alert(Hello););目前，jQuery 主要支持以下事件：.blur()表单元素失去焦点。.change()表单元素的值发生变化 .click()鼠标单击 .dblclick()鼠标双击 .focus()表单元素获得焦点 .focusin()子元素获得焦点 .focusout()子元素失去焦点 .hover()同时为 mouseenter 和 mouseleave 事件指定处理函数 .keydown()按下键盘（长时间按键，只返回一个事件）.keypress()按下

12、键盘（长时间按键，将返回多个事件）.keyup()松开键盘 .load()元素加载完毕 .mousedown()按下鼠标 .mouseenter()鼠标进入（进入子元素不触发）.mouseleave()鼠标离开（离开子元素不触发）.mousemove()鼠标在元素内部移动 .mouseout()鼠标离开（离开子元素也触发）.mouseover()鼠标进入（进入子元素也触发）.mouseup()松开鼠标 .ready()DOM 加载完成 .resize()浏览器窗口的大小发生改变 .scroll()滚动条的位置发生变化 .select()用户选中文本框中的内容 .submit()用户递交表单 .

13、toggle()根据鼠标点击的次数，依次运行多个函数 .unload()用户离开页面 以上这些事件在 jQuery 内部，都是.bind()的便捷方式。使用.bind()可以更灵活地控制事件，比如为多个事件绑定同一个函数：$(input).bind(click change，ne()方法。$(p).one(click，function()alert(Hello);nbind(click);所有的事件处理函数，都可以接受一个事件对象(event object)作为参数，比如下面例子中的 e：$(p).click(function(e)alert;lick(function()if($(this)

14、.attr(href).match(evil)ddClass(evil);rigger()或.triggerHandler()。$(a).click();$(a).trigger(click);九、特殊效果 jQuery 允许对象呈现某些特殊效果。$(h1).show();adeIn()淡入.fadeOut()淡出.fadeTo()调整透明度.hide()隐藏元素.show()显示元素.slideDown()向下展开.slideUp()向上卷起.slideToggle()依次展开或卷起某个元素.toggle()依次展示或隐藏某个元素 除了.show()和.hide()，所有其他特效的默认执行时

15、间都是 400ms(毫秒)，但是你可以改变这个设置。*$(h1).fadeIn(300);adeOut(slow);adeOut(300,function()$(this).remove(););更复杂的特效，可以用.animate()自定义。$(div).animate(left:+=50，top()和.delay()用来停止或延缓特效的执行。$.如果设置为 true，则关闭所有网页特效。几个常见的筛选选择器：filter()：筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式 描述：保留子元素中不含有 ol 的元素。HTML 代码:HelloHow are you jQuery 代码:$(p).filter(function(index)return$(ol,this).length=0;);结果:How are you silce()：选取一个匹配的子集 描述：选择第一个 p 元素 HTML 代码:HellocruelWorld jQuery 代码:$(p).slice(0,1).wrapInner();结果:Hello 后续更新