进阶14:jQuery

题目1: jQuery 能做什么?

JQuery 是个JS库,一些效果JS要用繁重的代码才能实现,但可以通过jQ一些封装好的方法方便快捷,简单明确的就能实现。jQ缺点是,代码是很多是意大利面条式,修改困难。

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

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

  • 区别:
    1. jQuery对象和DOM原生对象是两种不同的对象类型,两者不等价。
    2. 方法不一样,jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法。
  • 转化:
    1. DOM原生对象转化为jQuery对象:
      $(document.querySelector('.div1'))
    2. jQuery对象转化为DOM原生对象:
      $('.div1>li')[index]

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

在1.7之前的版本中jQuery处理事件有多个方法, (google 搜索: jquery live bind degelate)作用各不相同,后来统一的使用on/off方法:
.on( events [,selector ] [,data ], handler(eventObject) )

各参数意义:

  1. events:一个或多个空格分隔的事件类型和可选的命名空间,或仅仅是命名空间,比如"click", "keydown.myPlugin", 或者 ".myPlugin"
  2. selector:一个选择器字符串,用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null 或者忽略了该选择器,那么被选中的元素总是能触发事件
  3. data:当一个事件被触发时,要传递给事件处理函数的event.data
  4. handler(eventObject):事件被触发时,执行的函数。若该函数只是要执行return false的话,那么该参数位置可以直接简写成 false
  • bind/unbind:为一个元素绑定/接触绑定一个事件处理程序。jq1.7版本前的绑定和解绑写法。
  • delegate:为指定的元素(属于被选元素的子元素)添加一个或
    多个事件处理程序,并规定当这些事件发生时运行的函数
  • live:这种方法是将页面的document元素作为事件代理元素,太消耗资源,已经过时。在新版本中推荐用.on()法,即时在旧版本中,也推荐使用.delegate()方法来取代.live()方法。
  • on:在选定的元素上绑定一个或多个事件处理函数,提供绑定事件处理的所有功能
  • off:用来移除on绑定的事件处理函数。
image.png
image.png

jQuery 如何展示/隐藏元素?

方法 效果
.hide 用于隐藏元素,没有参数的时候等同于直接设置display属性
.show 用于显示元素,用法和hide类似
.toggle 用来切换元素的隐藏、显示,类似于toggleClass,用法和show、hide类似

jQuery 动画如何使用?

http://js.jirengu.com/zimuyamuwe/1/edit
自定义动画http://js.jirengu.com/saweyesesa/1/edit

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

$(selector).html(); //没有值时则是获取
$(selector).html('xxx'); // 设置
$(selector).text(); //没有值时则是获取内部文本
$(selector).text('xxx');//设置

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

$('input').val(); // 获取
$('input').val('想要设置的内容')
$(selector).attr('id'); // 获取元素属性
$(selector).attr('id', '设置的元素属性值');

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

http://js.jirengu.com/wifuzejife/2/edit

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

http://js.jirengu.com/pucowuyemi/6/edit

题目10:实现如下效果

http://js.jirengu.com/tininusovo/1/edit

题目11: 模仿视频6,完成 左右切换的 Tab 效果

http://js.jirengu.com/qujebagebo/1/edit

推荐阅读更多精彩内容