jQuery

jQuery的引入

jQuery就是一个是js类库,对常用的方法和对象进行封装,方便我们使用。
jQuery对象是通过jQuery包装DOM对象产生的对象，虽然jQuery对象是包装DOM对象后产生的，但是jQuery对象不能使用任何DOM对象的方法，同样DOM对象也不能使用jQuery对象的方法。

1.DOM编程：var obj = Document.getElementById(id); 获取的obj是dom对象；

2.我们如果想使用jQuery中里面已经封装好的一些方法和属性的的话,首先获取标签的jQuery对象,然后通过里面封装的一些方法和属性对jQuery对象进行操作。

例如：
以前通过js获取对象的时候：
var obj=document.getElementById("id"); – 获取的obj是一个dom对象

funtion getId(id){    return document.getElementById("id");}

$(“选择器”)来获取元素 – 获取的是标签元素对应的jQuery对象

---

jQuery和html的整合

jquery是单独的js文件，通过script标签的src属性导入即可。

1.获取一个jquery对象：
$(“选择器”) 或者 jQuery(“选择器”)

2.dom对象和jquery对象之间的转换：
dom对象===>jquery对象 ：

$(dom对象)

jquery对象===>dom对象：
（1）每一个jQuery对象都是一个数组对象，可以通过[index]方法来得到对象的DOM对象；
（2）jQuery本身提供get(index)方法获取DOM对象。

方式1: jquery对象[index]
方式2: jquery对象.get(index)

注意：通过id获取到的元素组成的数组，长度为1。

---

选择器

1.基本选择器：

$("#id值")  $(".class值")  $("标签名") 

获取多个选择器，用逗号隔开：

$("#id值,.class值")

注意：一个网页中id只能使用一次，class可以使用毒刺。

2.层次选择器 ：

• a b：a的所有b后代
• a>b：a的所有b孩子(不包括孙子)
• a+b：a的下一个兄弟(大兄弟)
• a~b：a的所有弟弟们

注意：如果要访问某个节点的父节点，使用parent方法即可。

3.基本过滤选择器：

• :frist 匹配找到的第一个元素（单个元素）
• :last 匹配找到的最后一个元素（单个元素）
• :not(selector) 匹配符合条件以外的元素（集合）
• :even 匹配所有索引为偶数的元素
• :eq(index)匹配指定索引值的元素
• :gt(index) > 匹配大于指定索引的元素
• :lt(index) < 匹配小于指定索引的元素

4.内容过滤：
内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上。

• :contains(text)
• :empty
• :has(“选择器”)：包含指定选择器的元素
• :parent

5.可见过滤：
:hidden 在页面不展示元素 。一般指 input type=”hidden” 和 样式中display:none
:visible

6.属性过滤器：
属性过滤选择器和一般的选择器有不同，它不是以：开头，而是以[]括起来的。
通过元素的属性来获取相应的元素：
[属性名]
[属性名=”值”]

• [attibute]
• [attibute=value]
• [attibute!=value]
• [attibute^=value]
• [attibute$=value]
• [attibute*=value]
• [属性过滤器1][属性过滤器2]…[属性过滤器n]

7.表单过滤：
:input 所有的表单子标签 input select textarea button
input 仅仅获取input标签

---

属性和CSS操作总结

1.对属性的操作：
attr()：设置或者获取元素的属性
（1）获取：

attr("属性名称")

（2）设置一个属性：

attr("属性名称"，"值")

（3）设置多个属性：

attr({    "属性1"："值1"，    "属性2"："值2"})

removeAttr("属性名称")：移除指定的属性
2.添加CSS属性：
addClass("指定的样式值")相当于attr("class","指定的样式值")
3.对CSS操作：操作元素的style属性
css()：获取或者设置CSS样式
（1）获取：

css("属性名")

（2）设置一个属性：

css("属性名","值")

（3）设置多个属性：

css({    "属性1":"值1",    "属性2":"值2"})

---

设置和获取HTML，文本和值

1.设置或者获取value属性：
设置和获取某个元素的值:val(),该方法专用于具有value属性的元素（如文本框，下拉框，单选框，复选框等）
jQuery对象.val()：获取
jQuery对象.val("…")：设置

2.设置获取标签体的内容：
html()：获取标签体的HTML内容
html("…")：设置标签体的HTML内容

text()：获取标签体的文本内容
text("…")：设置标签体的文本内容

3.设置和获取的区别：
设置的区别：
html：会把字符串解析
text：只作为普通的字符串

获取的区别：
html：获取的html源码
text：获取知识页面展示的内容

---

常用的遍历节点方法

取得匹配节点的所有子元素组成的集合:children() 该方法只考虑子元素，而不考虑后代元素
取得匹配元素后面紧邻的同辈元素的集合:next()
取得匹配元素前面紧邻的同辈元素的集合:prev()
取得匹配元素前后所有同辈元素:siblings()

---

表单对象属性过滤选择器及文档操作

1.表单对象属性过滤选择器：

：enabled 可用的
：disabled 不可用
：checked 选中的（针对单选框和复选框）
：selected 选中的（针对下拉框选项）

2.jQuery中的DOM操作：
DOM（Document Object Model 文档对象模型），一种与浏览器，平台，语言无关的接口。使用该接口可以轻松访问页面中的所有标准组件。

3.文档操作：
内部插入节点：

a.append(c)：将c插入到a的内部（标签体）后面
c.appendTo(a)：c被插入到a的内部（标签体）后面
a.prepend(c)：将c插入到a的内部的前面
c.prependTo(a)：c被插入到a的内部的前面

外部插入节点：

a.after(c)：将c放到a的前面
c.insertAfter(a)：c被放到a的前面
a.before(c)：将c放到a的前面
c.insertBefore(a)：c被放到a的前面

查找节点：
查找属性节点,通过jQuery选择器完成
查找到所需要的元素后,可以调用jQuery对象的attr方法来获取或设置它的各种html属性

创建节点：
使用$()函数也可以创建节点: $(“<标签></标签>”),返回的是一个jQuery对象。
也可以在创建节点的同时加上属性：

$(“<font color=‘red’></font>”)$(“<marquee direction=‘left’></marquee>”)

删除节点：

remove():从DOM中删除所有匹配元素,这个方法的返回值是一个指向已被删除的节点的引用(被指向的节点类型是jQuery对象)。
empty():清空所有后代节点

---

jQuery事件处理

1.页面加载：
js：在一个页面中只能使用一次
window.onload=function(){}

jquery：在一个页面中可以使用多次
方式1:

$(function(){...})

方式2:

$(document).ready(function(){});

2.派发事件：
$("选择器").click(function(){...});等价于原生js中dom对象.onclick=function(){....}

掌握事件:
focus
blur
change
click

3.jquery中效果：
隐藏或展示：

show(毫秒数)
hide(毫秒数)
toggle()：展示/隐藏的过渡动画效果

滑入或滑出：

slideDown(毫秒数)：向下滑入
slideUp(毫秒数)：向上滑出
slide()：滑入/划出的过渡动画效果

淡入或淡出：

fadeIn(int)：淡入
fadeOut(int)：淡出
fadeToggle()：淡入/淡出的过渡动画效果

4.animate()方法：
（1）与简单动画方法实现的效果相比,使用animate()方法可以实现更多通用动画效果。

• 第一个参数是必需的,它必需是一个对象,它是动画属性对象。该对象的属性指定要变化的CSS属性和它们的目标值;animate()方法会将每个选中元素的这些CSS属性从初始值变化到指定的目标值。
• 第二个参数是可选的,它也是一个对象,它是动画选项对象。属性duration指明了动画持续时间,属性complete指定动画完成后自动执行的回调函数。

注意：animate()动画只支持数值属性,对于颜色、字体等枚举属性是无法实现动画效果的。
一个例子：

（2）animate()方法还可以指定相对值，如下：

（3）animate()方法的动画属性对象中的属性值可以是hide、show和toggle：

5.jQuery表单验证：
（1）jQuery表单验证是jQuery的一个插件。
（2）我们自己利用jQuery表单验证框架功能，必须满足下面两点：

第一：引入jQuery框架（至少是1.3.2以上版本）
第二：引入jQuery.validate.js表单验证框架

还有一个可选的操作：引入jQuery表单验证的提前制作好的样式：

注意：必须先引入jQuery框架，再引入jQuery表单验证框架，顺序不能乱。

表单验证的例子：

效果如下：

以上代码中的username:”required”表示表单中的username输入框中的值是必须的（不能为空），也可以改写为：

（3）jQuery表单验证总结：

1. 通过jQuery获得表单
2. 调用表单的validate()方法
3. validate()方法必须接受一个对象直接量参数
4. 该对象必须有两个属性：a.rules：验证规则 b.messages：验证错误时的提示信息
5. 这两属性的属性值还是一个对象直接量
6. 在这个对象直接量中的属性名必须是表单重元素的名字

（4）jQuery表单验证（默认验证规则）

1.required:true
2.email:true
3.url:true
4.date:true
5.number:true
6.digits:true
7.creditcard
8.equalsTo:”#field”
9.accept:”.txt”
10.maxlength:5
11.minlength:3
12.rangelength:[3,5]
13.max:5
14.min:10
15.range:[5,10]
16.dateISO:true(只验证格式,不验证有效性)
17.remote:”index.jsp”(ajax中会用到)

6.jQuery插件datePicker日期选择器：

7.jQuery树形插件：