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() 父节点
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() 父节点
相关文章推荐
- jquery validate插件高级表单验证
- jQuery源码分析之jQuery中常用正则表达式分析
- jQuery的回调函数实现方式
- jquery、js调用iframe父窗口与子窗口元素的方法整理
- jQuery插件之TreeMultiselect 多用于权限配置
- jQuery中利用keyup事件和判断是否为汉字来实现动态搜索
- jQuery源码测试笔记之domManip函数
- 如何解决jQuery Validation针对动态添加的表单无法工作的问题?
- 呼吸轮播
- jQuery 源码 : queue 主要针对animate这个操作
- jquery特效(3)—轮播图①(手动点击轮播)
- jquery中的事件
- jquery特效(3)—轮播图①(手动点击轮播)
- 必看的 jQuery性能优化的38个建议 (转)
- 近20个绚丽实用的jQuery/CSS3侧边栏菜单
- 2010-10-08在浏览器中兼容+jQuery3
- jQuery的access方法测试笔记
- jquery的使用
- jQuery 笔记
- jquery ajax 使用serialize() 表单字段过多导致的问题