jQuery 入门1

题目1: jQuery 能做什么?

选择网页元素
改变结果集
元素的操作:取值和赋值
元素的操作:移动
元素的操作:复制、删除和创建
工具方法
事件操作
特殊效果
AJAX
http://devdocs.io/jquery/

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

  • 联系:

    1. jQuery对象:通过jQuery包装DOM对象后产生的对象;
    2. 两者之间可以相互转换;
  • 区别:

    1. jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型,两者不等价;
    2. jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法. 乱使用会报错。
  • 相互转换:

    • jQuery对象转成DOM对象

      1. jQuery对象是一个数据对象,通过[index]的方法
      var $v = $("#v")  //  jQuery对象
      var v = $v[0]  //  DOM对象
      
      1. jQuery本身提供,通过.get(index)方法
      var $v = $("#v")  //  jQuery对象
      var v = $v.get(0)  //  DOM对象
      
    • DOM对象转成jQuery对象:
      对于DOM对象,只需用$()把DOM对象包装起来,就可得到jQuery对象

      var v=document.getElementById("v")  //  DOM对象
      var $v=$(v)  //  jQuery对象
      

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

如何绑定事件


  • bind(type,[data],fn)
    为每个匹配元素的特定事件绑定事件处理函数。
    jQuery 3.0中已弃用此方法,请用 on()代替。

    • type: 含有一个或多个事件类型的字符串,由空格分隔多个事件。比如"click"或"submit",还可以是自定义事件名。
    • data: 作为event.data属性值传递给事件对象的额外数据对象
    • fn: 绑定到每个匹配元素的事件上面的处理函数
  • unbind(type,[data|fn]])
    bind()的反向操作,从每一个匹配的元素中删除绑定的事件。
    jQuery 3.0中已弃用此方法,请用 off()代替。
    如果没有参数,则删除所有绑定的事件。
    你可以将你用bind()注册的自定义事件取消绑定。
    如果提供了事件类型作为参数,则只删除该类型的绑定事件。
    如果把在绑定时传递的处理函数作为第二个参数,则只有这个特定的事件处理函数会被删除。

    • type: 删除元素的一个或多个事件,由空格分隔多个事件值。
    • fn: 要从每个匹配元素的事件中反绑定的事件处理函数
  • delegate(selector,[type],[data],fn)
    指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
    jQuery 3.0中已弃用此方法,请用 on()代替。
    使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。

    • selector: 选择器字符串,用于过滤器触发事件的元素。
    • type: 附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
    • data: 传递到函数的额外数据
    • fn: 当事件发生时运行的函数
  • live(type, [data], fn)
    jQuery 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效。
    这个方法是基本是的.bind()方法的一个变体。使用 .bind()时,选择器匹配的元素会附加一个事件处理函数,而以后再添加的元素则不会有。为此需要再使用一次 .bind()才行
    从 jQuery 1.7 开始,不再建议使用.live()方法。请使用.on()来添加事件处理。使用旧版本的用户,应该优先使用 .delegate()来替代.live()

    • type: 一个或多个事件类型,由空格分隔多个事件
    • data: 传递给事件处理函数的附加参数
    • fn: 要从每个匹配元素的事件中反绑定的事件处理函数
  • on(events,[selector],[data],fn)
    在选择元素上绑定一个或多个事件的事件处理函数。
    on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。在jQuery 1.7中,.on()方法 提供绑定事件处理程序所需的所有功能。

    • events: 一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myPlugin" 。
    • selector: 一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略,当它到达选定的元素,事件总是触发。
    • data: 当一个事件被触发时要传递event.data给事件处理函数。
    • fn: 该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false。
  • off(events,[selector],[fn])
    在选择元素上移除一个或多个事件的事件处理函数。

    • events: 一个或多个空格分隔的事件类型和可选的命名空间,或仅仅是命名空间,比如"click", "keydown.myPlugin", 或者 ".myPlugin".
    • selector: 一个最初传递到.on()事件处理程序附加的选择器。
    • fn: 事件处理程序函数以前附加事件上,或特殊值false.

推荐使用哪种

推荐使用.on()因为提供绑定事件处理程序所需的所有功能


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

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
  $('ul').on('click','li',function(){})
  //  选择父容器绑定事件,再在选择器中选择目标元素

题目4:jQuery 如何展示/隐藏元素?

  • hide([speed,[easing],[fn]])
    隐藏显示的元素

    • speed: 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)
    • easing: (Optional) 用来指定切换效果,默认是"swing",可用参数"linear"
    • fn: 在动画完成时执行的函数,每个元素执行一次。
  • show(([speed,[easing],[fn]])
    显示隐藏的匹配元素。

    • speed: 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)
    • easing: (Optional) 用来指定切换效果,默认是"swing",可用参数"linear"
    • fn: 在动画完成时执行的函数,每个元素执行一次。
  • toggle([speed],[easing],[fn]
    如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。

    • speed: 隐藏/显示 效果的速度。默认是 "0"毫秒。可能的值:slow,normal,fast。"
    • easing: (Optional) 用来指定切换效果,默认是"swing",可用参数"linear"
    • fn: 在动画完成时执行的函数,每个元素执行一次。

  • slideDown([speed],[easing],[fn])
    通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。

  • slideUp([speed,[easing],[fn]])
    通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。

  • slideToggle([speed],[easing],[fn])
    通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。

  • fadeIn([speed],[easing],[fn])
    通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数。

  • fadeOut([speed],[easing],[fn])
    通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。

  • fadeToggle([speed,[easing],[fn]])
    通过不透明度的变化来开关所有匹配元素的淡入和淡出效果,并在动画完成后可选地触发一个回调函数。

  • fadeTo([[speed],opacity,[easing],[fn]])

    • speed: 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)
    • opacity: 一个0至1之间表示透明度的数字。
    • easing: (Optional) 用来指定切换效果,默认是"swing",可用参数"linear"
    • fn: 在动画完成时执行的函数,每个元素执行一次。

题目5: jQuery 动画如何使用?

animate(params,[speed],[easing],[fn])

用于创建自定义动画的函数。

这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如heighttopopacity)。注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left

而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值,样式属性就会从当前的值渐变到指定的值。如果使用的是hideshowtoggle这样的字符串值,则会为该属性调用默认的动画形式。

jQuery 1.2 中,你可以使用 em% 单位
jQuery 1.2 中,你可以通过在属性值前面指定+- 来让元素做相对运动
jQuery 1.3中,如果duration设为0则直接完成动画。而在以前版本中则会执行默认动画。
jQuery 1.8中,当你使用CSS属性在css()animate()中,将根据浏览器自动加上前缀(在适当的时候),比如("user-select", "none"); 在Chrome/Safari浏览器将设置为"-webkit-user-select", Firefox会使用"-moz-user-select", IE10将使用"-ms-user-select".


  • 参数
    • params: 一组包含作为动画属性和终值的样式属性和及其值的集合
    • speed: 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)
    • easing: 要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
    • fn: 在动画完成时执行的函数,每个元素执行一次。

  • stop([clearQueue],[jumpToEnd])
    停止所有在指定元素上正在运行的动画。
    如果队列中有等待执行的动画(并且clearQueue没有设为true),他们将被马上执行

    • clearQueue: 如果设置成true,则清空队列。可以立即结束动画。
    • gotoEnd: 让当前正在执行的动画立即完成,并且重设show和hide的原始样式,调用回调函数等。
  • finish( [queue ] )
    停止当前正在运行的动画,删除所有排队的动画,并完成匹配元素所有的动画。
    当.finish()在一个元素上被调用,立即停止当前正在运行的动画和所有排队的动画(如果有的话),并且他们的CSS属性设置为它们的目标值(所有动画的目标值)。所有排队的动画将被删除。

    • queue:停止动画队列中的名称。
  • delay(duration,[queueName])
    设置一个延时来推迟执行队列中之后的项目。

    • duration: 延时时间,单位:毫秒
    • queueName: 队列名词,默认是Fx,动画队列

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

  • html([val|fn])
    取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
    在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素,那么只有第一个匹配元素的 HTML 内容会被获取。

    • val:用于设定HTML内容的值
    • fn:此函数返回一个HTML字符串。接受两个参数,index为元素在集合中的索引位置,html为原先的HTML值。
  • text([val|fn])
    取得所有匹配元素的内容。
    结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。

    • val:用于设置元素内容的文本
    • fn:此函数返回一个字符串。接受两个参数,index为元素在集合中的索引位置,text为原先的text值

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

  • val([val|fn|arr])
    获得匹配元素的当前值。
    • val:要设置的值
    • fn:此函数返回一个要设置的值。接受两个参数,index为元素在集合中的索引位置,text为原先的text值。
    • arr:用于 check/select 的值

  • attr(name|properties|key,value|fn)
    设置或返回被选元素的属性值。

    • name:属性名称
    • properties:作为属性的“名/值对”对象
    • key,value:属性名称,属性值
    • fn:返回属性值的函数,第一个参数为当前元素的索引值,第二个参数为原先的属性值。
  • removeAttr(name)
    从每一个匹配的元素中删除一个属性

    • name:要删除的属性名
  • css(name|pro|[,val|fn])
    访问匹配元素的样式属性。
    • name:一个或多个CSS属性组成的一个数组
    • pro:要设置为样式属性的名/值对
    • val:属性名
    • fn:此函数返回要设置的属性值。接受两个参数,index为元素在对象集合中的索引位置,value是原先的属性值。

题目8: 使用 jQuery实现如下效果

效果 - 链接

题目9: 使用 jQuery 实现如下效果

效果 - 链接

题目10: 使用 jQuery 实现如下效果

效果 - 链接

题目11: 使用 jQuery 实现如下效果

效果 - 链接

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,406评论 6 503
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,732评论 3 393
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,711评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,380评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,432评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,301评论 1 301
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,145评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,008评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,443评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,649评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,795评论 1 347
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,501评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,119评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,731评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,865评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,899评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,724评论 2 354

推荐阅读更多精彩内容

  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,335评论 0 2
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,171评论 0 1
  • jQuery jQuery就是JS的一个扩展库,工具库,提供很多方便快捷的方法,所以将JS对象转换为jQuery对...
    YQY_苑阅读 237评论 0 1
  • 原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    程序员poetry阅读 16,643评论 18 503
  • $(”p”).addClass(css中定义的样式类型); 给某个元素添加样式 $(”img”).attr({sr...
    专注寒冰三千岁阅读 505评论 0 4