jQuery学习——jQuery初步入门，jQuery简单介绍和简单操作，jQuery的简单使用(持续更新)

jQuery是一个快速、简洁的JavaScript库，倡导写更少的代码做更多的事情

jQuery的介绍

j就是JavaScript；
query查询

意思就是把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能

jQuery封装了JavaScript常用的功能代码，优化了DOM操作、事件处理、动画设计和Ajax交互

学习jQuery本质就是学习调用这些函数（方法）

jQuery的优点

• 轻量级、核心文件才几十kb，不会影响页面加载速度
• 扩浏览器兼容，基本兼容了现在主流的浏览器
• 链式编程、隐式迭代
• 对事件、样式、动画支持，大大简化了DOM操作
• 支持插件扩展开发，有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等
• 免费、开源

一.jQuery选择器

      1.jQuery基础选择器

$("选择器")//里面直接写CSS选择器即可，但是要加引号

      2.jQuery筛选选择器

      3.jQuery筛选方法

二.jQuery样式操作

      1.操作CSS方法

jQuery可以使用css方法来修改简单元素样式；也可以操作类，修改多个样式
             ①参数只写属性名，返回属性值

$(this).css("color");

             ②参数是属性名，属性值，并用逗号分隔，是设置一组样式，属性必须加引号

$(this).css("color","red")

             ③参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号

$(this).css({
	"color":"white",
	"font-size":"20px"
});

      2.操作类的方法

              ①添加类

$("div").addClass("current");

             ②移除类

$("div").removeClass("current");

             ③切换类

$("div").toggleClass("current");

      3.类操作与className区别

原生JS中className会覆盖元素原先里面的类名

jQuery里面类操作只是对指定类进行操作，不影响原先的类名
（相当于追加类名，不影响以前的类名）

三.jQuery效果

     1.显示隐藏效果

           ①显示语法规范

show([speed,[easing],[fn]])

           ②显示参数

               （1）参数都可以省略，无动画直接显示
               （2）speed：三种预定速度之一的字符串（“slow”，“normal”，or “fast”）或表示动画时长的毫秒数值（如：1000）
               （3）easing：（Optional）用来指定切换效果，默认是“swing”，可用参数“linear”
               （4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次

---

          ①隐藏语法规范

hide([speed,[easing],[fn]])

          ②隐藏参数
               （1）参数都可以省略，无动画直接隐藏
               （2）speed：三种预定速度之一的字符串（“slow”，“normal”，or “fast”）或表示动画时长的毫秒数值（如：1000）
               （3）easing：（Optional）用来指定切换效果，默认是“swing”，可用参数“linear”
               （4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次

     2.滑动效果

          ①下滑效果语法规范

slideDown([speed,[easing],[fn]])
slideUp([speed,[easing],[fn]])
slideToggle([speed,[easing],[fn]])

          ②下滑效果参数
               （1）参数都可以省略
               （2）speed：三种预定速度之一的字符串（“slow”，“normal”，or “fast”）或表示动画时长的毫秒数值（如：1000）
               （3）easing：（Optional）用来指定切换效果，默认是“swing”，可用参数“linear”
               （4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次

     3.事件切换

hover([over,]out)

例：

$(".nav>li").hover(function(){},function(){})

如果只写一个函数，鼠标经过和鼠标离开都会触发这个函数

$(".nav>li").hover(function(){
	$(this).children("ul").slideToggle();	
})

          ①over：鼠标移到元素上要触发的函数（相当于mouseenter）

          ②out：鼠标移出元素要触发的函数（相当于mouseleave）

     4.淡入淡出效果

          ①淡入淡出效果语法规范

//淡入效果：
fadeIn([speed,[easing],[fn()]])
//淡出效果：
fadeOut([speed,[easing],[fn()]])
//淡入淡出切换效果
fadeToggle([speed,[easing],[fn()]])

          ②淡入效果参数

               （1）参数都可以省略
               （2）speed：三种预定速度之一的字符串（“slow”，“normal”，or “fast”）或表示动画时长的毫秒数值（如：1000）
               （3）easing：（Optional）用来指定切换效果，默认是“swing”，可用参数“linear”
               （4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次

---

          ①渐进方式调整到指定的不透明度

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

          ②效果参数
               （1）opacity：透明度必须写，取值0~1之间
               （2）speed：三种预定速度之一的字符串（“slow”，“normal”，or “fast”）或表示动画时长的毫秒数值（如：1000）。必须写
               （3）easing：（Optional）用来指定切换效果，默认是“swing”，可用参数“linear”

     5.自定义动画animate

          ①语法：

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

          ②参数：
               （1）params：想要更改的样式属性，以对象形式传递，必须写，属性名可以不用带引号，如果是复合属性则需要采用驼峰命名法borderLeft。其余参数都可以省略
               （2）speed：三种预定速度之一的字符串（“slow”，“normal”，or “fast”）或表示动画时长的毫秒数（如：1000）
               （3）easing：（Optional）用来指定切换效果，默认是“swing”，可用参数“linear”
               （4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次

$(function(){
	$("button").click(function(){
		$div.animate({
			left:500
		},500);
	})
})

     6.动画队列及其停止排队方法

          ①动画或效果队列
              动画或效果一旦触发就会执行，如果多次触发就造成多个动画或效果排队执行
          ②停止排队

stop()

              stop()方法用于停止动画或效果

              注意：stop()写到动画或者效果的前面，相当于结束上一次的动画

$(".nav>li").hover(function(){
	$(this).children("ul").stop().slideToggle();	
})

四.jQuery属性操作

     1.设置或者获取元素固有属性值prop()

          所谓元素固有属性就是元素本身自带的属性，比如《a》元素里面的href，比如input元素里面的type

               element.prop(“属性名”)
               element.prop(“属性名”，“属性值”)

     2.设置或者获取元素自定义属性值attr()

               element.attr(“属性名”)
               element.attr(“属性名”，“属性值”)

     3.数据缓存data()

          data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构，一旦页面刷新，之前存放的数据都将被移除
               ①date(“name”,“value”)               //向被选元素附加数据
               ②date(“name”)               //向被选元素获取数据

五.jQuery内容文本值

     1.普通元素内容html()（相当于原生innerHTML）

html()		//获取元素的内容
html("内容")		//设置元素的内容

     2.普通元素文本内容text()（相当于原生innerText）

text()		//获取元素的文本内容
text("内容")		//设置元素的文本内容

     3.获取设置表单值val()（相当于原生value）

val()		//获取元素的设置表单值
val("内容")		//设置元素的设置表单值

六.jQuery元素操作

主要是遍历、创建、添加、删除元素操作

     1.遍历元素

          jQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，都需要用到遍历
          语法一:
          $("div").each(function(index,domEle){xxx;})

          ①each()方法遍历匹配的每一个元素。主要用DOM处理。each每一个
          ②里面的回调函数有2个参数：index是每个元素的索引号；demEle是每个DOM元素对象，不是jQuery对象
          ③所以要想使用jQuery方法，需要给这个dom元素转换为jQuery对象$(domEle)

          语法二:
          $.each(object,function(index,element){xxx;})
          ①$.each()方法可用于遍历任何对象，比如数组，对象
          ②里面函数有2个参数：index是每个元素的索引号；element遍历内容

     2.创建元素

          语法：$("<li></li>");

     3.添加元素

          ①内部添加
               element.append("内容")
               把内容放入匹配元素内部最后面，类似原生appendChilid
               element.prepend("内容")
               把内容放入匹配元素内部最前面
          ②外部添加
               element.after("内容")
               把内容放入目标元素后面
               element.before("内容")
               把内容放在目标元素前面

     4.删除元素

          语法：element.remove()
             删除匹配的元素
          语法：element.empty()
             删除匹配元素里面的子节点

          语法：element.html("")
              删除匹配元素里面的子节点

七.jQuery事件操作

     1.事件注册

               单个事件注册
               element.事件(function(){})
               例：$("div").click(function(){})

     2.事件处理

               事件处理on()绑定事件
          on()方法在匹配元素上绑定一个或多个事件的事件处理函数
               1.events:一个或多个用空格分割的事件类型，如“click”或"keydown"
               2.selector:元素的子元素选择器
               3.fn:回调函数，即绑定在元素身上的侦听函数

element.on(events,[selector],fn)

     3.事件对象