jQuery使用之（一）

什么是jQuery

 

-----jQuery  是一个优秀的javascript框架，一个轻量级的JS库

-----兼容CSS3，以及各种浏览器

-----使用户更方便的出来HTML、Events、Dom实现动画效果，并且方便的为网站提供AJAX交互

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

 

需要注意的是：jQuery 2.x 开始不支持Inrernet Explorer 6、7、8

 

 

jQuery的编程步骤

 

-----引入jQuery的js文件

-----使用选择器定位节点

-----调用方法操作节点

 

 

简单使用：

 

 

什么是jQuery对象

 

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

-----jQuery提供方法都是针对jQuery对象特有的，而且大部分的返回值也是jQuery对象，所以方法可以连缀调用

 

DOM对象--->jQuery对象

语法：$(dom对象)

 

jQuery对象--->DOM对象

语法：$obi.get(0)   将当前jQuery对象转换成dom数组，并获取第一个

 

 

 

 

选择器的种类

 

-----基本选择器

 

#id   特点快，尽量使用id选择器

语法：$("#id")

 

.class   根据class属性定位元素

语法：$(".class")

 

element  根据html标签

语法：$("element")

 

selector1，selector2    合并选择器的合集

语法：$("#id",".class","element")

 

 

-----层次选择器

 

selecr1  空格  select2     找到节点1后，再在节点1的子节点中寻找节点2

语法：$("#id  div")

 

select1  > select2      只查找到子节点，不查找间接子节点

语法：$("#id > div")

 

select1  + select2      下一个兄弟节点

语法：$("#id + div")

 

 

select1  ~ select2      下面所有兄弟节点

语法：$("#id + div")

 

 

-----过滤选择器

 

在已筛选出来的节点中过滤出需要的节点

 

”：“     开始或者      ”[ ]“

 

基本过滤选择器

：first   第一个元素

：last    最后一个元素

：not（selector） 把selector排除在外

：even   挑选偶数行

：odd   挑选奇数行

：eq（index） 下标等于index的元素

：gt（index） 下标大于index的元素

：lt（index）  小标小于index的元素

 

内容过滤选择器

：contains（text） 匹配包含给定文本的元素

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

：has（selector） 匹配含有选择器所匹配的元素

：parent    匹配含有子元素或者文本元素的元素

 

可见性过滤选择器

：hidden  匹配所有不可见元素，或type为hidden的元素

：visble  匹配所有的可见元素

 

属性过滤选择器

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

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

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

 

子元素过滤选择器

：nith-child（index）   将为每一个父元素匹配子元素，index是从1开始的整数，表示对应的位置子元素

：eq（index） 匹配一个给定索引值的元素，index是从0开始的整数

 

 

jQuery操作DOM

 

-----查询

 

html（）

text（）

val()

attr（）

 

-----创建、插入、删除

 

创建dom节点

语法：$(html)

例如：var  obj = $("<div>haha</div>")    返回的是一个obj的对象

 

插入dom节点  基本的

append（）  做为最后一个子节点添加进来

prepend（） 做为第一个子节点添加进来

after（）       做为下一个兄弟节点添加进来

before（）     做为上一个兄弟节点添加进来

 

删除dom节点

remove（）  移除

remove（selector） 选择器定位后删除

empty（）清空节点

 

 

-----复制

 

clone()

clone(true)   复制的节点也会具有行为（将处理代码一块复制）

 

-----样式操作

 

attr（） 获取和设置属性

addclass（）追加样式

removeClass（）移除样式  有参数就移除参数名的，没参数移除所有样式

toggleClass（）切换样式

hasClass（）是否有某个样式

css（）读取css的值

css（  ，）设置多个样式

 

 

-----遍历节点

 

children（）/children（selector）只考虑直接子节点

next（）/next（selector）下一个兄弟节点

prev（）/prev（selector）上一个兄弟节点

siblings（）/siblings（selector）其他兄弟

find（selector）查找满足选择器的所有后代

parent（）父节点