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

﹏ヽ暗。殇╰゛Y 2022-06-12 00:49 200阅读 0赞

**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树形插件