Web前端学习(7)_jQuery(2)
来源:互联网 发布:汉朝军制知乎 编辑:程序博客网 时间:2024/06/11 00:47
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树形插件
- Web前端学习(7)_jQuery(2)
- Web前端学习(6)_jQuery
- WEB前端技术_JQuery学习_1
- 【Web前端学习笔记】Web前端框架_JQuery
- web前端_jquery的cookie插件的使用
- 【知了堂学习笔记】_jQuery基础知识之选择器(一)
- WEB前端学习 Day 2(边框)
- Web前端学习(2)_css
- web前端学习(一)
- jQuery学习篇(2)_jQuery 选择器
- web前端学习(7)
- web前端学习(2)
- Web 前端学习笔记之 HTML 入门(2)
- web前端学习之路(一)
- web前端学习记录(一)
- web 前端学习笔记(1)
- WEB前端学习 Day4(定位)
- WEB前端学习 Day5(背景)
- 页面跳转传值解析为json格式
- 如何生成下载的二维码
- django编写第一个博客学习笔记(一)
- java开发C语言编译器:把printf编译成java字节码的算法详解
- 浅谈CAS在分布式ID生成方案上的应用
- Web前端学习(7)_jQuery(2)
- selenium--处理windows对话框
- Android获取设备CPU核数以及内存大小的方法
- MyBatis--2
- 【Java】Integer变量相等(==)比较问题
- iOS代码混淆总结
- 数据库优化之路-mysql
- VL09增强-冲销
- 安卓学习笔记---Android Studio生成签名文件,自动签名,以及获取SHA1和MD5值