您的位置:首页 > Web前端 > JQuery

jQuery知识点总结

2015-10-11 17:30 776 查看
jQuery知识点:

1.什么是jQuery

jQuery是一个优秀的JavaScript框架,一个轻量级(与代码藕合度低,易于维护)JS库.

它封装了JS、CSS、DOM,提供了一致的,简洁的API.

封装了CSS3,及各种浏览器.

使用户更方便的处理HTMl,Events,实现动画效果,并且方便地为网站

提供AJAX交互.

使用户的HTML页面保持代码和HTML内容分离.

2.jQuery使用步骤:

引入jQuery的js文件

利用选择器定位节点:

<div id="d1">Hello</div>

选择器定位{$("div")\$("#d1")}

调用方法操作节点:

<div id="d1">Hello</div>

操作节点{$("div").css("font-size","30px")/$("#d1").css("font-size","30px")}

3.什么是jQuery对象:

jQuery为了解决浏览器的兼容问题而提供的一种统一封装后的对象描述

jQuery提供的方法都是针对jQuery对象特有的,而且大部分方法的返回值

类型也是jQuery对象,所以方法可以连缀调用

"jQuery对象.方法().方法().方法()..."

通过jQuery选择器选中的对象为jQuery对象.

eg.$("div")\$("#d1")

4.jQuery对象与DOM对象的关系:

jQuery对象本质上是一个DOM对象数组,它在该数组上扩展了

一些操作数组中元素的方法.

可以直接操作这个数组:

-obj.length:获取数组长度

-obj.get(index):获取数组中的某一个DOM对象.

-obj[index]:等价于obj.get(index)

DOM对象可以直接转换为jQuery对象

-$(DOM对象)

5.jQuery选择器:

jQuery选择器\基本选择器\层次选择器\过滤选择器\表单选择器

jQuery选择器类似于CSS选择(定位元素,施加样式)

能够实现定位元素,施加行为

使用jQuery选择器能够将内容与行为分离

基本选择器:

元素选择器:依据标签名定位元素

-$("标签名")

类选择器:根据class属性定位元素

-$(".class属性名")

id选择器:根据id属性定位元素

-$("#id");

选择器组:定位一组选择器所对应的所有元素

-$("#id,.importent");

层次选择器:

在select1元素下,选中所有满足select2的子孙元素

-$("select1 select2")

在select1元素下,选中所有满足select2的子元素

-$("select1>select2")

选中select1元素的,满足select2的下一个弟弟

-$("select1+select2")

选中select1元素的,满足select2的所有弟弟

-$("select1~select2")

过滤选择器:

基本过滤选择器:根据元素的基本特性定位元素,常用于表格和列表

-:first 第一个元素

-:last 最后一个元素

-:not(selector) 把selector排除在外

-:even 挑选偶数行

-:odd 挑选奇数行

-:eq(index) 下标等于index的元素

-:gt(index)

-:lt(index)

eg. $("tr:first")

内容过滤选择器:根据文本内容定位元素

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

-:empty 匹配所有不包含子元素或文本的空元素

可见性过滤选择器

-:hidden 不可见元素
$("input:hidden")

-:visible 可见元素

属性过滤选择器:根据属性定位元素

-:[attribute] 匹配具有attribute属性的元素

-:[attribute = value] 匹配属性等于value的元素

-:[attribute != value] 匹配属性不等于value的元素

eg. $("input[value='你好']")

状态过滤选择器:

-:enabled 匹配可用元素

-:disabled 匹配不可用元素

-:checked

-:selected

6.jQuery操作DOM

读写节点\增删节点\样式操作\遍历节点

插入DOM节点

parent.append(obj) 做为最后一个子节点添加进来

parent.prepend(obj) 做为第一个子节点添加进来

brother.after(obj) 做为下一个兄弟节点添加进来

brother.before(obj) 做为上一个兄弟节点添加进来

删除DOM节点

obj.remove() 删除节点

obj.remove(selector) 只删除满足selector的节点

obj.empty() 清空节点

样式操作

addClass("") 追加样式

removeClass("") 移除指定样式

removeClass() 移除所有样式

toggleClass("") 切换样式

hasClass("") 判断是否有某个样式

css("") 读取css的值

css("","") 设置多个样式

遍历节点

children()/children(seletor) 直接子节点

next()/next(selector) 下一个兄弟节点

prev()/prev(selector) 上一个兄弟节点

siblings()/siblings(selector) 所有兄弟

parent() 父节点
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: