jquery基础

1.jQuery优点

2.jQuery入口函数

$(function(){})
$(document).ready(function(){})

3.jQuery和DOM的比较

1. 用原生JS获取过来的对象是DOM对象；用jQuery方式获取过来的对象是jQuery对象（本质：通过$把DOM元素进行了包装）
2. jQuery对象只能使用jQuery方法，DOM对象则使用原生的js属性和方法
3. DOM对象与jQuery对象之间可以相互转换
   

4.jQuery选择器

层级选择器：
隐式迭代:遍历内部DOM元素（伪数组形式存储）的过程（即把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法)

jQuery筛选选择器：
Parent()、children()、find()、siblings()、eq()
Parent() 返回的是最近一级的父元素;Siblings 返回除了自身元素之外的所有亲兄弟

5.jQuery样式操作

1. 操作css方法：
   • 参数只写属性名，返回属性值（带单位）$(this).css('color')
   • 参数是属性名，属性值，逗号分隔，属性必须加引号，值如果是数字可以不加单位和引号$(this).css('color','red')
   • 参数可以是对象形式，方便设置多组样式，属性名属性值用冒号隔开，属性可以不加引号$('div').css({"width": '100px',"height": "50px"})
2. 设置类样式方法：
   • 添加类：$('div').addClass('bg')
   • 删除类：$('div').removeClass('bg')
   • 切换类（有次类名则删除，没有此类名则加上并展示效果）：$('div').toggleClass('bg')
     【注】原生JS中的className会覆盖原来的类名；jQuery里面类操作只是对指定类进行操作，不影响原先的类名

6.jQuery效果

1. 显示与隐藏效果：show([speed],[easing],[fn]) hide([speed],[easing],[fn]) 三个参数都可以省略
   • Speed:表示速度（show、normal、fast）或者表示动画时长的毫秒数值
   • Easing:指定切换效果（swing、linear）
   • Fn：回调函数，在动画完成后执行的函数
2. 滑动效果：slideDown([speed],[easing],[fn]) slideUp([speed],[easing],[fn]) slideToggle([speed],[easing],[fn])
   • 事件切换：hover([over,]out) 如果只写一个函数，鼠标经过和离开都会触发这个函数
     • over，鼠标移动到元素上要触发的函数（mouseover）
     • out，鼠标移出元素要触发的函数（mouseleave）
   • 动画队列及停止排队的方法：
     • 停止排队：stop()用于停止动画或效果，写到动画或效果前面，相当于停止结束上一次动画
3. 淡入淡出效果：fadeIn([speed],[easing],[fn]) fadeOut([speed],[easing],[fn]) fadeToggle([speed],[easing],[fn]) fadeTo([speed],opacity,[easing],[fn]) [修改速度和透明度必须要写]
4. 自定义动画：animate(params,[speed],[easing],[fn])
    &npbsp;Params:想要更改的样式属性，以对象的形式传递，必须写，复合属性需要采用驼峰命名法

7.jQuery属性操作

1. 设置或获取元素固有属性值 prop()
   • 获取元素固有属性值：element.prop("属性")
   • 获取元素自定义属性值(包含H5）：element.attr("属性")
   • 设置元素固有属性值：element.prop("属性","属性值")
   • 设置元素自定义属性值(包含H5）：element.attr("属性","属性值")
2. 数据缓存 data()
   • data() 方法可以在指定的元素上存取数据，并不会修改DOM元素结构，一旦页面刷新，之前存放的数据都将被移除
   • 附加数据(包含H5）：element.data("属性","属性值")
   • 获取数据(包含H5）：element.data("属性")

8.jQuery内容文本值

1. 普通元素内容：
   • 获取元素内容：html()
   • 设置元素内容：html("内容")
2. 普通元素文本内容：
   • 获取文本内容：text()
   • 设置文本内容：text("内容")
3. 表单值内容：
   • 获取表单值内容：val()
   • 设置表单值内容：val("内容")

9.jQuery元素操作

1. 遍历元素：
   • $("div").each(function(index,domEle){XXX;}) 主要用于dom处理
     index是每个元素的索引号，domEle是每个DOM对象，不是jQuery对象，想要使用jQuery方法，需要给dom元素转换为jQuery对象 --> $(domEle)

$(function () {
	var arr = ['pink', 'lightblue', 'hotpink']
	$('.box div').each(function (index, domEle) {
		$(domEle).css('background-color', arr[index])
	})
})

• $.each(object,function(index,element){XXX;}) 主要用于数据处理，例如数组、对象
  index是每个元素的索引号；element是遍历的内容

$.each($('div'), function (index, element) {
	console.log(element)
})

2. 创建元素：var li = $('<li></li>')
3. 添加元素：
   • 内部添加：元素生成后，他们为父子关系
     • 把内容放入匹配元素内部最后面：element.append('内容') $('ul').append(li)
     • 把内容放入匹配元素内部最前面：element.prepend('内容') $('ul').prepend(li)
       -外部添加：元素生成后，他们为兄弟关系
     • 把内容放入目标元素后面：element.after('内容')
     • 把内容放入目标元素前面：element.before('内容')
       
       4.删除元素：
   • 删除匹配的元素（本身）element.remove()
   • 删除匹配的元素集合中所有子节点 element.empty()
   • 清除匹配的元素内容 element.html("")

10.jQuery事件

1. 单个事件注册：element.事件(function(){事件处理程序})
2. jQuery事件处理：
   • on() on()方法在匹配元素上绑定一个或多个事件的事件处理函数

element.on(events,[selector],fn)  events事件类型，selector子元素选择器，fn回调函数
$('ul li').on({
	mouseover: function () {
		$(this).css('background-color', 'pink')
	},
	mouseout: function () {
		$(this).css('background-color', 'white')
	}
})
$('ul').on("mouseover", 'li', function () {
	alert("hello world")
})

• off() off方法可以移除通过on()方法添加的事件处理程序

$('div').off()  //全部解绑   
$('div').off('mouseout')  //解绑特定事件
$('ul').off('click', 'li') //解绑事件委托

• 如果有的事件只想触发一次，可以使用one()来绑定事件

$('p').one({})

• 自动触发事件 trigger()

element.事件()
element.trigger('type')
element.triggerHandler(type)  //不会触发元素的默认行为

• jQuery事件对象：element.on(events, [selector], function (event) {})
  • 阻止默认行为：event.preventDefault() 或 return false
  • 阻止冒泡：event.stopPropagation()

11.jQuery其他方法

** jQuery插件 **

1. 相关库：
   http://www.jq22.com/、< http://www.htmleaf.com/>
2. 瀑布流、图片懒加载（图片使用延迟加载可以提高网页下载速度，也能帮助减轻服务器的负载）、全屏滚动（fullpage.js)< https://github.com/alvarotrigo/fullPage.js/>

12.jQuery尺寸和位置操作

jQuery位置：offset()、position()、scrollTop()/scrollLeft()

• offset设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系
• Position 获取距离带有定位父级位置（偏移） 若没有带有定位的父级，以文档为准，只能获取，不能设置偏移
• scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧

//返回顶部操作，不是文档而是让html和body元素做动画
$('button').on('click', function () {
	$('body,html').stop().animate({
		scrollTop: 0,
	})
})