jQuery API学习之DOM操作与事件篇

DOM属性操作:

名称 描述
.addClass() 为每个匹配的元素添加指定的样式类名
.hasClass() 确定任何一个匹配元素是否有被分配给定的类
.attr() 获取或设置属性的值。可以有一个或两个参数,,返回集合中的第一个,两个参数代表设置属性值(第一个 属性名称 第二个是属性值),设置集合中的全部
.prop() 获取匹配的元素集中第一个元素的属性值为匹配的元素设置一个或多个属性,设置集合中的全部
.removeAttr() 移除指定属性
.removeClass() 从所有匹配的元素中删除全部或者指定的类。
.removeProp() 为集合中匹配元素删除一个属性
.toggleClass() 在匹配元素集合中的每个元素上添加或删除一个或多个样式类
.val() 设置或返回匹配元素的值。

attr()与prop()的区别:

.attr() .prop()
已有或自定义的属性都可以获取到 获取到已有的默认的属性,自定义的获取不到

DOM操作:

获取或设置文本内容:

名称 描述
.text() 设置或获取所选元素的文本内容
.html() 设置或获取匹配的元素集合中的 HTML 内容。
text()与html()区别:
操作 text() html()
设置文本时 text()不会区别html代码,会把里面的内容全部识别为文本内容。设置集合中的全部 html()方法会自动识别里面是文本内容还是html代码。设置集合中的全部
获取文本时 获取的是纯文本内容,并且获取匹配集合中的所有匹配元素的文本内容 文本和html代码都会获取到,并且获取匹配集合中的第一个html内容

添加并包裹现有内容:

名称 | 描述
---|---|---
.wrap(wrappingElement) | 在每个匹配==元素外层==包上一个html元素。
.unwrap() | 将匹配元素集合的父级元素删除,保留自身在原来的位置上。只能删掉紧挨的父级元素。没有参数 (unwrap()不会移除body元素)。
.wrapAll(wrappingElement) | 在所有匹配元素外面包一层html结构
.wrapInner(wrappingElement) | 在==匹配元素里的内容==外包一层结构

添加到现有的元素内:

名称 描述 注释
.append() 在每个匹配元素里面的==末尾==处插入参数内容 append 附加
.appendTo() 将匹配的元素插入到目标元素的最后面
.prepend() 将参数内容插入到每个匹配元素的==前面==(元素内部) prepend 前缀
.prependTo() 将所有元素插入到目标前面(元素内)

添加到现有的元素外:

名称 注释
.after() 在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点
.before() 根据参数设定,在匹配元素的前面插入内容
.insertAfter() 在目标元素后面插入集合中每个匹配的元素(注:插入的元素作为目标元素的兄弟元素)
.inserBefore() 在目标元素前面插入集合中每个匹配的元素

复制元素:

名称 描述
clone() 生成被选元素的副本,包含子节点、文本和属性(只是拷贝,不会移动) 元素包含的事件
clone(true) 生成被选元素的副本,包含子节点、文本和属性,含有此元素包含的事件

DOM移除:

名称 描述
.detach() 从DOM中去掉所有匹配的元素(不会移除元素上的事件及JQuery数据)
.empty() 从DOM中移除集合中匹配元素的所有子节点
.remove() 将匹配元素集合从DOM中删除 (同时移除元素上的事件及JQuery数据)
.unwrap() 将匹配元素集合的父级元素删除,保留自身在原来的位置上。只能删掉紧挨的父级元素。

DOM替换:

名称 描述
A.replaceAll(B) 用集合的匹配元素替换每个目标元素 用A替换B中所有节点
A.repalceWith(B) 用提供的内容替换集合中所有匹配的元素 用B替换A

jQuery 事件:

浏览器事件:

名称 描述
.error() 当元素遇到错误(没有正确载入)时,发生 error 事件。error() 方法触发 error 事件,或规定当发生 error 事件时运行的函数
.resize() 当调整浏览器窗口的大小时,发生 resize 事件。resize() 方法触发 resize 事件,或规定当发生 resize 事件时运行的函数。
.scroll() 当用户滚动指定的元素时,会发生 scroll 事件。scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口)。scroll() 方法触发 scroll 事件,或规定当发生 scroll 事件时运行的函数

文档加载:

名称 描述
.load() 当指定的元素(及子元素)已加载时,会发生 load() 事件。该事件适用于任何带有 URL的元素(比如图像、脚本、框架、内联框架)。根据不同的浏览器(Firefox 和IE),如果图像已被缓存,则也许不会触发 load 事件。
.ready() 当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件。由于该事件在文档就绪后发生,因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。正如上面的例子中那样。ready() 函数规定当 ready 事件发生时执行的代码。ready() 函数仅能用于当前文档,因此无需选择器。
.unload() 当用户离开页面时,会发生 unload 事件。具体来说,当发生以下情况时,会发出 unload 事件:1点击某个离开页面的链接。2.在地址栏中键入了新的 URL。3.使用前进或后退按钮。4.关闭浏览器。5.重新加载页面unload() 方法将事件处理程序绑定到 unload 事件。unload() 方法只应用于 window 对象。

表单事件:

名称 描述
.blur() 当元素失去焦点时发生 blur 事件。blur() 函数触发 blur 事件,或者如果设置了 function 参数,该函数也可规定当发生 blur 事件时执行的代码。
.focus() 当元素获得焦点时,发生 focus 事件。当通过鼠标点击选中元素或通过 tab 键定位到元素时,该元素就会获得焦点。focus() 方法触发 focus 事件,或规定当发生 focus 事件时运行的函数。
.change() 当元素的值发生改变时,会发生 change 事件。该事件仅适用于文本域(text field),以及 textarea 和 select 元素。change() 函数触发 change 事件,或规定当发生 change 事件时运行的函数。
.focusin() focusin 事件会在元素(或者其内部的任何元素)获得焦点时触发。这跟 focus 事件的显著区别在于,它可以在父元素上检测子元素获得焦点的情况
.focusout() focusout 事件会在元素(或者其内部的任何元素)失去焦点时触发。这跟 blur 事件的显著区别在于,它可以在父元素上检测子元素失去焦点的情况
.select() 当 textarea 或文本类型的 input 元素中的文本被选择时,会发生 select 事件。select() 方法触发 select 事件,或规定当发生 select 事件时运行的函数。
.submit() 当提交表单时,会发生 submit 事件。该事件只适用于表单元素。submit() 方法触发 submit 事件,或规定当发生 submit 事件时运行的函数。

键盘事件:

名称 描述
.keydown() 当按钮被按下时,发生 keydown 事件。keydown() 方法触发 keydown 事件,或规定当发生 keydown 事件时运行的函数。
.keypress() keypress 事件与 keydown 事件类似。当按钮被按下时,会发生该事件。它发生在当前获得焦点的元素上。不过,与 keydown 事件不同,每插入一个字符,就会发生 keypress 事件。keypress() 方法触发 keypress 事件,或规定当发生 keypress 事件时运行的函数。
.keyup() 当按钮被松开时,发生 keyup 事件。它发生在当前获得焦点的元素上。keyup() 方法触发 keyup 事件,或规定当发生 keyup 事件时运行的函数。

鼠标事件:

名称 描述
.click() 触发、或将函数绑定到指定元素的 click 事件
.dblclick() 触发、或将函数绑定到指定元素的 double click 事件
.hover() 将二个事件函数绑定到匹配元素上,分别当鼠标指针进入和离开元素时被执行。
.mousedown() 当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。与 click 事件不同,mousedown 事件仅需要按键被按下,而不需要松开即可发生。mousedown() 方法触发 mousedown 事件,或规定当发生 mousedown 事件时运行的函数。
.mouseenter() 当鼠标指针穿过元素时,会发生 mouseenter 事件。该事件大多数时候会与 mouseleave 事件一起使用。mouseenter() 方法触发 mouseenter 事件,或规定当发生 mouseenter 事件时运行的函数。
.mouseleave() 当鼠标指针离开元素时,会发生 mouseleave 事件。该事件大多数时候会与 mouseenter 事件一起使用。mouseleave() 方法触发 mouseleave 事件,或规定当发生 mouseleave 事件时运行的函数。
.mousemove() 当鼠标指针在指定的元素中移动时,就会发生 mousemove 事件。mousemove() 方法触发 mousemove 事件,或规定当发生 mousemove 事件时运行的函数。
.mouseout() 当鼠标指针从元素上移开时,发生 mouseout 事件。该事件大多数时候会与 mouseover 事件一起使用。mouseout() 方法触发 mouseout 事件,或规定当发生 mouseout 事件时运行的函数。
.mouseover() 当鼠标指针位于元素上方时,会发生 mouseover 事件。该事件大多数时候会与 mouseout 事件一起使用。mouseover() 方法触发 mouseover 事件,或规定当发生 mouseover 事件时运行的函数。
.mouseup() 当在元素上放松鼠标按钮时,会发生 mouseup 事件。与 click 事件不同,mouseup 事件仅需要放松按钮。当鼠标指针位于元素上方时,放松鼠标按钮就会触发该事件。mouseup() 方法触发 mouseup 事件,或规定当发生 mouseup 事件时运行的函数。

相关链接:

DOM操作demo以及资料访问地址:vss上面 \99.Study\DOM operation.rar
事件demo以及资料访问地址:vss上面 \99.Study\event.rar

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,088评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,715评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,361评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,099评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,987评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,063评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,486评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,175评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,440评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,190评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,550评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2 335

推荐阅读更多精彩内容