美文网首页
jQuery选择器_Dom操作_样式_事件处理_动画

jQuery选择器_Dom操作_样式_事件处理_动画

作者: Vincent_永 | 来源:发表于2017-10-16 16:22 被阅读0次

jQuery 能做什么?

jQuery是一个JavaScript函数库,使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需要定义id即可。

jQuery 对象和 DOM 原生对象有什么区别?如何转化?

DOM对象是我们用传统的方法(javascript)获得的对象,jQuery对象就是用jQuery的类库选择器获得的对象。JQuery对象就是通过jQuery包装DOM对象后产生的对象。JQuery对象是jQuery独有的,其可以使用jQuery里的方法,但是不能使用DOM的方法;

  • dom对象转换成jquery对象
    对于一个dom对象,只需要用$()把dom对象包装起来,就可以获得一个jquery对象了,方法为$(dom对象)

var v = document.getElementById("v"); //DOM对象
var $v = $(v); //jQuery 对象
转换后,就可以任意使用 jQuery 的方法。

  • jQuery对象转换成DOM对象
    jquery提供了两种方法将一个jquery对象转换成一个dom对象,即[index]和get(index)

1、jQuery 对象是一个数据对象,可以通过 [index] 的方法,来得到相应的 DOM 对象。

var $v = $("#v"); //jQuery 对象
var v = $v[0]; //DOM 对象
alert(v.checked); //检测这个checkbox是否被选中

2、jQuery 本身提供,通过.get(index) 方法得到相应的 DOM 对象

var $v = $("#v"); //jQuery 对象
var v = $v.get(0); //DOM对象 ( $v.get()[0] 也可以 )
alert(v.checked); //检测这个 checkbox 是否被选中

jQuery中如何绑定事件?bind、unbind、delegate、live、on、off都有什么作用?推荐使用哪种?使用on绑定事件使用事件代理的写法?

bind.jpg
bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。
JQuery扫描文档找出所有的$(‘button’)元素,并输出函数内容。 unbind.jpg
unbind() 方法移除被选元素的事件处理程序。
从每一个匹配的元素中删除绑定的事件。如果没有参数,则删除所有绑定的事件,.unbind(type)删除指定类型事件; delegate.jpg
delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。 live.jpg
live() 方法为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。 off.jpg
on()绑定事件
6.jpg
off()解绑事件

使用on绑定事件使用事件代理的写法

7.jpg

jQuery 如何展示/隐藏元素?

show&hide.jpg

jQuery 动画如何使用?

动画是两个状态之间的一种自然过度效果。

使用jQuery实现动画效果:
1基础的有:hide()使元素隐藏、 show() 使元素显现、toggle()使原本隐藏的元素显现,原本显现的元素隐藏
2实现渐变的动画效果:fadeIn() fadeOut() fadeToggle() fadeTo()
3实现滑动的动画效果:slideDown()向下滑动出现 slideUp()向上滑动隐藏 slideToggle()两种状态切换
4实现自定义的动画效果:animate(properties[,duration][,easing][,complete])
properties是一个包含一组CSS属性和属性值的对象,动画将根据这组对象移动。
[]方括号内容表示可选内容:duration参数用来设置动画持续多少毫秒;easing参数表示过度时使用哪种缓动函数,有“linear”和“swing”;complete表示在动画完成时执行的函数。

如何设置和获取元素内部 HTML 内容?如何设置和获取元素内部文本?

9.jpg

如何设置和获取表单用户输入或者选择的内容?如何设置和获取元素属性?

10.jpg

相关文章

网友评论

      本文标题:jQuery选择器_Dom操作_样式_事件处理_动画

      本文链接:https://www.haomeiwen.com/subject/dsofuxtx.html