jQuery

核心函数:$() {}

1、传入函数时,表示页面加载完成之后,执行该函数,等价于 window.onload = function () {}

2、传入 HTML 字符串时,创建该 HTML 标签对象

3、传入 选择器字符串时

(1)$("#id属性值");id 选择器,根据 id 查询标签对象

(2)$("标签名");标签名选择器,根据指定的标签名查询标签对象

(3)$(".class属性值");类型选择器,根据 class 属性查询标签对象

4、传入 DOM 对象时,把该 DOM 对象转换为 jQuery 对象

 

jQuery 对象、DOM 对象

1、DOM 对象来源

(1)通过 getElementByld() 查询的标签对象

(2)通过 getElementsByName() 查询出来的标签对象

(3)通过 getElementsByTagName() 查询出来的标签对象

(4)通过 createElement() 方法创建的对象

2、jQuery 对象来源

(1)通过 jQuery 提供的 API 创建的对象

(2)通过 jQuery 包装的 DOM 对象

(3)通过 jQuery 提供的 API 查询的对象

3、jQuery 对象本质:DOM 对象数组 + jQueny 提供的一系列功能函数

4、使用区别

(1)jQuery 对象不能使用 DOM 对象的属性和方法

(2)DOM 对象不能使用 jQueny 对象的属性和万法

5、转换

(1)DOM 对象转 jQuery 对象

var $obj = $(DOM对象);

(2)jQuery 对象转 DOM 对象

var DOM = $obj[下标];

 

选择器

1、基本选择器

(1)#id 选择器:根据 id 查找标签对象

(2).class先择器:根据 class 查找标签对象

(3)element 选择器:根据标签名查找标签对象

(4)* 选择器:表示任意的,所有的元素

(5)selector1, selector2 组合选择器:合并选择器1,选择器2的结果并返回

2、层级选择器

(1)ancestor descendant 后代选择器:在给定的祖先元素下匹配所有的后代元素

(2)parent > child 子元素选择器:在给定的父元素下匹配所有的子元素

(3)prev + next 相邻元素选择器:匹配所有紧接在 prev 元素后的 next 元素

(4)prev ~ sibings 之后的兄弟(同辈)元素选择器:匹配 prev 元素之后的所有 siblings 元素

 

过滤选择器

1、基本过滤选择器

(1):first 获取第一个元素

(2):last 获取最后一个元素

(3):not(selector) 去除所有与给定选择器匹配的元素

(4):even 匹配所有索引值为偶数的元素,从 0 开始计数

(5):odd 匹配所有索引值为奇数的元素,从 0 开始计数

(6):eq(index) 匹配一个给定索引值的元素

(7):gt(index) 匹配所有大于给定索引值的元素

(8):lt(index) 匹配所有小于给定素引值的元素

(9):header 匹配如 h1、h2、h3 等标题元素

(10):animated 匹配所有正在执行动画效果的元素

2、内容过滤器

(1):contains(text) 匹配包含给定文本的元素

(2):empty 匹配所有不包含子元素或者文本的空元素

(3):parent 匹配含有子元素或者文本的元素

(4):has(selector) 匹配含有选择器所匹配的元素的元素

3、属性过滤器

[attribute] $("[href]") 所有带有 href 属性的元素
[attribute=value] $("[href='default.htm']") 所有带有 href 属性且值等于 "default.htm" 的元素
[attribute!=value] $("[href!='default.htm']") 所有带有 href 属性且值不等于 "default.htm" 的元素
[attribute$=value] ("[href='.jpg']") 所有带有 href 属性且值以 ".jpg" 结尾的元素
[attribute|=value] $("[title|='Tomorrow']") 所有带有 title 属性且值等于 'Tomorrow' 或者以 'Tomorrow' 后跟连接符作为开头的字符串
[attribute^=value] $("[title^='Tom']") 所有带有 title 属性且值以 "Tom" 开头的元素
[attribute~=value] $("[title~='hello']") 所有带有 title 属性且值包含单词 "hello" 的元素
[attribute*=value] $("[title*='hello']") 所有带有 title 属性且值包含字符串 "hello" 的元素
[name=value][name2=value2] ("input[id][name='man']" ) 带有 id 属性,并且 name 属性以 man 结尾的输入框

4、表单过滤器

:input $(":input") 所有 input 元素
:text $(":text") 所有带有 type="text" 的 input 元素
:password $(":password") 所有带有 type="password" 的 input 元素
:radio $(":radio") 所有带有 type="radio" 的 input 元素
:checkbox $(":checkbox") 所有带有 type="checkbox" 的 input 元素
:submit $(":submit") 所有带有 type="submit" 的 input 元素
:reset $(":reset") 所有带有 type="reset" 的 input 元素
:button $(":button") 所有带有 type="button" 的 input 元素
:image $(":image") 所有带有 type="image" 的 input 元素
:file $(":file") 所有带有 type="file" 的 input 元素
:enabled $(":enabled") 所有启用的元素
:disabled $(":disabled") 所有禁用的元素
:selected $(":selected") 所有选定的下拉列表元素
:checked $(":checked") 所有选中的复选框选项
.selector $(selector).selector 在jQuery 1.7中已经不被赞成使用。返回传给jQuery()的原始选择器
:target $("p:target") 选择器将选中ID和URI中一个格式化的标识符相匹配的<p>元素

 

属性操作

1、属性

(1)attr(name|properties|key,value|fn):设置或返回被选元素的属性值

(2)prop(name|properties|key,value|fn):获取在匹配的元素集中的第一个元素的属性值

(3)removeProp(name):用来删除由.prop()方法设置的属性集

2、CSS

(1)addClass(class|fn):为每个匹配的元素添加指定的类名

(2)removeClass([class|fn]):从所有匹配的元素中删除全部或者指定的类

(3)toggleClass(class|fn[,sw]):如果存在(不存在)就删除(添加)一个类

 

3、HTML 代码 / 文本 / 值

(1)html([val|fn]):取得第一个匹配元素的 html 内容,这个函数不能用于 XML 文档,但可以用于 XHTML 文档

(2)text([val|fn]):取得所有匹配元素的内容,结果是由所有匹配元素包含的文本内容组合起来的文本,这个方法对 HTML 和 XML 文档都有效

(3)val([val|fn|arr]):获得匹配元素的当前值

 

DOM 处理

1、内部插入

(1)append(content|fn):向每个匹配的元素内部追加内容,这个操作与对指定的元素执行 appendChild 方法,将它们添加到文档中的情况类似

(2)appendTo(content):把所有匹配的元素追加到另一个指定的元素元素集合中,实际上,使用这个方法是颠倒了常规的 $(A).append(B) 的操作,即不是把 B 追加到 A 中,而是把 A 追加到 B 中

(3)prepend(content|fn):向每个匹配的元素内部前置内容,这是向所有匹配元素内部的开始处插入内容的最佳方式

(4)prependTo(content):把所有匹配的元素前置到另一个、指定的元素元素集合中,实际上,使用这个方法是颠倒了常规的 $(A).prepend(B) 的操作,即不是把 B 前置到 A 中,而是把 A 前置到 B 中

2、外部插入

(1)after(content|fn):在每个匹配的元素之后插入内容

(2)before(content|fn):在每个匹配的元素之前插入内容

(3)insertAfter(content):把所有匹配的元素插入到另一个、指定的元素元素集合的后面,实际上,使用这个方法是颠倒了常规的 $(A).after(B) 的操作,即不是把 B 插入到 A 后面,而是把 A 插入到 B 后面

(4)insertBefore(content):把所有匹配的元素插入到另一个、指定的元素元素集合的前面,实际上,使用这个方法是颠倒了常规的 $(A).before(B) 的操作,即不是把 B 插入到 A 前面,而是把 A 插入到 B 前面

3、包裹

(1)wrap(html|ele|fn):把所有匹配的元素用其他元素的结构化标记包裹起来,这种包装对于在文档中插入额外的结构化标记最有用,而且它不会破坏原始文档的语义品质。这个函数的原理是检查提供的第一个元素(它是由所提供的 HTML 标记代码动态生成的),并在它的代码结构中找到最上层的祖先元素(包裹元素)。当 HTML 标记代码中的元素包含文本时无法使用这个函数。因此,如果要添加文本应该在包裹完成之后再行添加

(2)unwrap():这个方法将移出元素的父元素,这能快速取消 .wrap() 方法的效果,匹配的元素(以及他们的同辈元素)会在 DOM 结构上替换他们的父元素

(3)wrapAll(html|ele):将所有匹配的元素用单个元素包裹起来,这与 '.wrap()'<a href="http://docs.jquery.com/Manipulation/wrap" title="Manipulation/wrap"></a> 是不同的,'.wrap()' 为每一个匹配的元素都包裹一次。这种包装对于在文档中插入额外的结构化标记最有用,而且它不会破坏原始文档的语义品质。这个函数的原理是检查提供的第一个元素并在它的代码结构中找到最上层的祖先元素(包装元素)

(4)wrapInner(html|ele|fn):将每一个匹配的元素的子内容(包括文本节点)用一个 HTML 结构包裹起来,这个函数的原理是检查提供的第一个元素(它是由所提供的 HTML 标记代码动态生成的),并在它的代码结构中找到最上层的祖先元素(包装元素)

4、替换

(1)replaceWith(content|fn):将所有匹配的元素替换成指定的 HTML 或 DOM 元素

(2)replaceAll(selector):用匹配的元素替换掉所有 selector 匹配到的元素

5、删除

(1)empty():删除匹配的元素集合中所有的子节点

(2)remove([expr]):从 DOM 中删除所有匹配的元素,这个方法不会把匹配的元素从 jQuery 对象中删除,因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外,其他的比如绑定的事件,附加的数据等都会被移除

(3)detach([expr]):从DOM中删除所有匹配的元素,这个方法不会把匹配的元素从 jQuery 对象中删除,因而可以在将来再使用这些匹配的元素。与 remove() 不同的是,所有绑定的事件、附加的数据等都会保留下来

6、复制

(1)clone([Even[,deepEven]]):克隆匹配的 DOM 元素并且选中这些克隆的副本,在想把 DOM 文档中元素的副本添加到其他位置时这个函数非常有用

 

$(function () {}); 与 window.onload = function () {} 区别

1、触发时机

(1)jQuery 的页面加载完成之后,是浏览器的内核解析完页面的标签创建好 DOM 对象之后就会马上执行

(2)原生 JavaScript 的页面加载完成之后,除了要等浏览器内核解析完标签创建好 DOM 对象,还要等标签显示时需要的内容加载完成

2、触发顺序

(1)jQuery:先执行

(2)原生 JavaScript:后执行

3、执行次数

(1)原生 JavaScript 的页面加载完成之后,只会执行最后一次的赋值函数

(2)jQuery 的页面加载完成之后是全部把注册的 function 函数,依次顺序全部执行

 

事件冒泡

1、概述:父子元素同时监听同一个事件,当触发子元素的事件的时候,同一个事件也被传递到了父元素的事件里去响应

2、解决:在事件函数体内,return false;

 

事件对象

1、概述:封装有触发的事件信息的一个 JavaScript 对象

2、获取:在给元素绑定事件的时候,在事件的 function(),参数列表加入 event,event 是 JavaScript 传递参事件处理函数的事件

posted @   半条咸鱼  阅读(49)  评论(0编辑  收藏  举报
(评论功能已被禁用)
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示