Web前端学习（7）_jQuery（2）

最新推荐文章于 2024-06-24 20:44:34 发布

原创最新推荐文章于 2024-06-24 20:44:34 发布 · 447 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #web前端 #浏览器 #dom #对象

JavaWeb笔记同时被 2 个专栏收录

41 篇文章

订阅专栏

Web前端笔记

31 篇文章

订阅专栏

本文介绍jQuery的基本概念，包括jQuery的创建背景、特点及其在网页开发中的应用。详细讲解了jQuery对象与DOM对象的区别，节点操作如插入、查找、创建及删除的方法，并探讨了jQuery的事件处理机制与自定义动画功能。此外，还介绍了jQuery插件的应用，如表单验证和日期选择器。

Web前端学习（7）_jQuery（2）

1.jQuery

（1）jQuery是一个javascript库,由美国人John Resig创建
（2）其宗旨是: Write Less,Do More
（3）它是轻量级的js库(压缩后只有21k),这是其他js库所不及的!
（4）它兼容各大浏览器

2.jQuery对象

jQuery对象是通过jQuery包装DOM对象后产生的对象
如果一个对象是jQuery对象,那么它就可以使用jQuery里的方法,比如
$(“#test”).html()
以上代码等价于以下代码
document.getElementById(“test”).innerHTML;
虽然jQuery对象是包装DOM对象后产生的,但jQuery对象不能使用任何DOM对象的方法,同样DOM对象也不能使用jQuery中的方法,乱用会报错.

3.节点操作

3.1 插入节点

内部插入节点
append()
appendTo()
prepend()
prependTo()

外部插入节点
after()
before()
insertAfter()
insertBefore()

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

3.3 创建节点
使用$()函数也可以创建节点: $(“<p></p>”),返回的是一个jQuery对象。
也可以在创建节点的同时加上属性
$(“<font color=‘red’></font>”)
$(“<marquee direction=‘left’></marquee>”)

3.4 删除节点

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

4.jquery事件处理

jQuery定义了一个统一事件API,可工作在所有浏览器中!
jQuery API具有简单的形式,但功能比标准javascript API更强大

4.1 bind()方法

（1）也可以用来给jQuery对象注册事件处理程序

（2）利用bind()方法,可以为多个事件注册同一个事件处理程序

（3）bind()的最后一个特性是,第一个参数可以是对象,该对象把事件名映射到处理程序函数

5. jQuery自定义动画

5.1 与简单动画方法实现的效果相比,使用animate()方法可以实现更多通用动画效果

5.2 animate()方法
（1）第一个参数是必需的,它必需是一个对象,它是动画属性对象。该对象的属性指定要变化的CSS属性和它们的目标值;animate()方法会将每个选中元素的这些CSS属性从初始值变化到指定的目标值.
（2）第二个参数是可选的,它也是一个对象,它是动画选项对象。属性duration指明了动画持续时间,属性complete指定动画完成后自动执行的回调函数
（3）注意,animate()动画只支持数值属性,对于颜色、字体等枚举属性是无法实现动画效果的

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

（5）animate()方法还可以指定相对值

6. jQuery插件

6.1 jQuery表单验证

（1）利用jQuery表单验证框架功能,必须满足以下2点
1.引入jQuery框架(至少是1.3.2以上版本)
2.引入jQuery.validate.js表单验证框架

（2）默认验证规则

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”

（3）引入了jQuery表单验证框架后

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

6.2 jQuery插件datePicker日期选择器

6.3 jQuery树形插件