JQ的基础知识

事件注册

• 简单事件注册

  jQuery中的简单事件注册 将原生的js事件封装成了函数

// jQuery中的简单事件注册都支持对于同一事件源注册多个相同的事件
      $(btn).click(function (){
        console.log(123);
      })
      $(btn).click(function (){
        console.log(456);
      })
      $(btn).click(function (){
        console.log(789);
      })

• on的方式注册事件

  jQuery当中推荐使用on的方式,这是最现代,最高效的 zepto是移动端的jQuery也支持on的事件注册

 $('#btn').on('click',function (){
        console.log(123);
      })
      $('#btn').on('click',function (){
        console.log(456);
      })

动画

jQuery动画的特点:简约、“粗暴”、干净利落、直截了当，所有的动画都支持时间和回调函数

show/hide/toggle 操作的属性: width height opacity display:none

slideDown/slideUp/slideToggle 操作的属性: height display:none

fadeIn/fadeOut/fadeTo/fadeToggle 操作的属性: opacity display:none

animate({},speed,callback) 参数必须是对象

mousenter与mouseleave

用法和mouseover与mouseout是类似的,不同点是处理了冒泡

通过调试发现,从大盒子到小盒子的进入只会触发小盒子的mouseenter事件,其它事件不触发
从小盒子进入大盒子时,只会触发小盒子的mouseleave事件,其它事件不触发

动态创建元素

• $()
• html()

操作节点

• 动态创建节点
  • $()
  • html()
• 追加节点
  • append
  • appendTo
  • prepend
  • after
  • before

删除节点

• empty()
• html(’’)
• remove()

克隆元素

• clone(true/false)
  • 无论是true还是false都表示深度克隆,即会克隆标签及标签间的一切内容
  • 参数为true还会克隆事件,false不会克隆事件

获取或设置表单的值

• val()

设置或获取标签的标准或自定义属性

• attr()
• prop() disabled checked selected

其它样式设置

• width() 一般用于获取页面可视区的大小
• height() 一般用于获取页面可视区的大小
• offset() 返回值 是一个对象,获取的是当前标签对象到页面的距离,与父元素有无定位没有关系
• position() 返回值也是一个对象，与父元素的有无定位有关系
• scrollLeft() 获取或是设置页面被卷去的左侧的距离
• scrollTop() 获取或是设置页面被卷去的顶部的距离

链式编程的原理

• 链式编程的原理,就是当前jQuery对象调用完了这个方法后,这个方法还是返回当前jQuery对象
• 链式编程多用于设置的操作的地方

each

• 可以用来遍历jQuery对象,数组，普通对象
• 一定要使用jQuery对象来调用

jQuery中的常用方法（03-常用方法对比.avi）

原生javascript	jQuery中的方法
innerText/TextContent	text()
innerHTML	html()
style.width/height/top	css(属性名,属性值)/css({})
box.className=’’	addClass()/removeClass()/hasClass()/toggleClass()
原生javascript中的标签索引	index()
表单的值value	val()
setAttribute/getAttribute	attr(属性名,属性值)/prop()
nextSibling/nextElementSibling	next()
previousSibling/previousElementSibling	prev()
firstChild/firstElementChild	first()/:first
lastChild/lastElementChild	last()/:last
scrollLeft/scrollTop	scrollLeft()/scrollTop()
clientWidth/clientHeight	width()/height()
offsetLeft/offsetTop	position()
children	children([选择器])
cloneNode(true/false)	clone(true/false)
父元素.appendChild(子元素)	append()
insertBefore	insertBefore()

jQuery中的事件注册

1.简单事件注册

​ jQuery中的简单事件注册,可以对同一事件源注册多个相同的事件,互相不冲突,也没有兼容性的问题

2.bind的方式注册事件(了解)

​ .bind(type,callback)-

• 优点:
  • 可以对同一事件源注册多个不同的事件,这些事件的事件处理程序是同一个
• 缺点:
  • 不支持动态创建出来的元素

3.delegate的方式注册事件(了解)

​

​ .delegate(selector,type,callback)

• 优点:与前两种方式最大的优势：减少事件绑定次数提高效率，支持动态创建出来的元素绑定事件！

4.on的方式注册事件(重点,最现代的方式)

• 优点:可以实现以上方式注册事件所有的功能

jQuery中的事件解绑

1.unbind

2.undelegate

3.off

多库共存

1.在一个项目当中有可能会引入多个方法库文件

插件的使用

1.为什么要使用插件

​ 因为jQuery中的方法虽然很丰富,但是并不是面面俱到,并不是十全十美的,比如说animate中就不能实现背景颜色的动画 ,此时就需要借助于插件来完善当前的功能

插件的使用步骤:

1.jQuery.color.js

• 1.引入jQuery文件
• 2.引入jQuery.color.js文件
• 3.调用animate方法

2.jQuery.ui.js

* 1. 引入css样式
* 2. 引入jquery文件
* 3. 引入插件文件
* 4. 复制对应的html结构代码到页面当中
* 5. 调用对应的方法

​

3.jQuery.lazyload.js

* 1. 先引入img插件结构
* 2. 引入jQuery文件
* 3. 引入插件文件
* 4. 调用对应的方法

​

##如何制作插件

在插件函数当中this表示jQuery对象

1.函数扩展法

• $.pluginName =function(参数){}

​

2.对象扩展法

• $.fn.pluginName = function(参数){}

is与:animated

• is用于判断是不是某个元素或者某个元素是否具有某个状态
• :animated是一个选择器,只有具有运动状态的标签对象才可以用这个选择器来选取