01-动画效果
show 显示
概念:显示隐藏的匹配元素 语法：show(speed,callback) 参数：
- speed：三种预定速度之一的字符串('slow','normal','fast')或表示动画时长的毫秒值（如：1000毫秒==1秒）
- callback:在动画完成时执行的函数，每个元素执行一次
方式一：
$("div").show(); 解释：无参数，表示让指定的元素直接显示出来。其实这个方法的底层就是通过display: block;实现的。
方式二：
$('div').show(3000); 解释：通过控制元素的宽高、透明度、display属性，逐渐显示，2秒后显示完毕。
方式三：
$("div").show("slow"); 方式四：
//show(毫秒值，回调函数; $("div").show(5000,function () { alert("动画执行完毕！"); }); hide 隐藏
hide(speed,callback)跟show使用方法类似，表示隐藏显示的元素。
可以通过show（）和hide（）方法，来动态控制元素的显示隐藏。
$(selector).hide();$(selector).hide(1000); $(selector).hide("slow");$(selector).hide(1000, function(){}); 
toggle 开关式显示隐藏
如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
显示和隐藏的来回切换采用的是toggle()方法：就是先执行show()，再执行hide()。
代码如下：
$('#btn').click(function(){ $('#box').toggle(3000,function(){ $(this).text('盒子出来了'); if ($('#btn').text()=='隐藏') { $('#btn').text('显示'); }else{ $('#btn').text('隐藏'); } }); }) slideDown 滑入
概念：通过高度变化（向下增大）来到动态地显示所有匹配的元素，在显示完成后触发一个回调函数
用法和参数跟上面类似
$(selector).slideDown(speed, 回调函数);
slideUp 滑出
通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
用法和参数跟上面类似
$(selector).slideUp(speed, 回调函数);
slideToggle 滑入和滑出的切换效果
概念:通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数
跟toggle用法类似
$(selector).slideToggle(speed, 回调函数);
fadeIn 淡入
概念：通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
$(selector).fadeIn(speed, callback);作用：让元素以淡淡的进入视线的方式展示出来。
fadeOut 淡出
概念：通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
$(selector).fadeOut(1000);作用：让元素以渐渐消失的方式隐藏起来
fadeTo 调整透明度
概念：把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
fadeToggle 淡入淡出的切换
概念：通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
实现淡入淡出的效果就是使用此方法
$(selector).fadeToggle('fast', callback);作用：通过改变透明度，切换匹配元素的显示或隐藏状态。 animate 自定义动画
概念：用于创建自定义动画的函数
语法：animate({params}, [speed], [fn])
参数：
params:一组包含作为动画属性和终值的样式属性和及其值的集合（要执行的动画CSS属性）(必选)
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
fn:在动画完成时执行的回调函数，每个元素执行一次。
stop 停止
概念：停止所有在指定元素上正在运行的动画
语法：stop([clearQueue],[jumpToEnd])
参数：
clearQueue:如果设置成true，则清空队列。可以立即结束动画。
gotoEnd:让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等。
$(selector).stop(true, false);
第一个参数：
-
true：后续动画不执行。
-
false：后续动画会执行。
第二个参数：
-
true：立即执行完成当前动画。
-
false：立即停止当前动画。
PS：参数如果都不写，默认两个都是false。实际工作中，直接写stop()用的多。
delay 延时
概念：用来做延迟的操作
语法：delay(1000)，一秒之后做后面的操作
案例一：鼠标悬停时，弹出下拉菜单
上方代码中，关键的地方在于，用了stop函数，再执行动画前，先停掉之前的动画。
注意：javascript:void(0); //跟javascript:;效果一样。
案例二：右下角弹出小广告
02-属性操作
jQuery的属性操作模块分为四个部分：HTML属性操作、DOM属性操作、类样式操作 和 值操作。
html属性操作：是对html文档中的属性进行读取，设置和移除操作。比如attr()、removeAttr()DOM属性操作：对DOM元素的属性进行读取，设置和移除操作。比如prop()、removeProp()类样式操作：是指对DOM属性className进行添加，移除操作。比如addClass()、removeClass()、toggleClass()值操作：是对DOM属性value进行读取和设置操作。比如html()、text()、val()
attr()
设置属性值 或者 返回被选元素的属性值.
//获取值：attr()设置一个属性值的时候 只是获取值 var id = $('div').attr('id') console.log(id) var cla = $('div').attr('class') console.log(cla) //设置值 //1.设置一个值 设置div的class为box $('div').attr('class','box') //2.设置多个值，参数为对象，键值对存储 $('div').attr({name:'hahaha',class:'happy'}) removeAttr()
移除属性
//删除单个属性$('#box').removeAttr('name');$('#box').removeAttr('class');//删除多个属性$('#box').removeAttr('name class'); prop()
设置或返回被选中元素的属性和值。
当该方法用于返回属性值时，则返回第一个匹配元素的值。
当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。
语法：
返回属性的值：
$(selector).prop(property)
设置属性和值：
$(selector).prop(property,value)
设置多个属性和值：
$(selector).prop({property:value, property:value,...}) 关于attr()和prop()的区别
根据官方的建议：具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()，具体见下表：
addClass 添加多个类名
为每个匹配的元素添加指定的类名。
$('div').addClass("box");//追加一个类名到原有的类名 还可以为匹配的元素添加多个类名
$('div').addClass("box box2");//追加多个类名 removeClass
从所有匹配的元素中删除全部或者指定的类。
移除指定的类（一个或多个）
$('div').removeClass('box')； 移除全部的类
$('div').removeClass(); 可以通过添加删除类名，来实现元素的显示隐藏。
var tag = false; $('span').click(function(){ if(tag){ $('span').removeClass('active') tag=false; }else{ $('span').addClass('active') tag=true; } }) - 张三
- 李四
- 王五
toggleClass
如果存在这个类，就删除这个类；如果不存在这个类，就添加这个类。
$('span').click(function(){ //动态的切换class类名为active $(this).toggleClass('active')}) html 获取值
html() 是获取选中标签元素中所有的内容。
$('#box').html(); 设置值：设置该元素的所有内容 会替换掉 标签中原来的内容。
$('#box').html('百度一下'); text
获取值：
text() 获取匹配元素包含的文本内容。
语法：
$('#box').text(); trim()是清除文本前后的空格$('#box').text().trim(); 设置值：
设置该所有的文本内容$('#box').text('百度一下'); 注意：值为标签的时候 ，不会被渲染为标签元素， 只会被当做值渲染到浏览器中。
val
获取值：
val() 用于表单控件中获取值，比如input、textarea、 select等等
设置值：
$('input').val('设置了表单控件中的值')； 清空值：
// 清空input输入框中的内容$('input').val(''); 03-文档操作
插入操作
知识点1：
语法：
父元素.append(子元素)解释：追加某元素，在父元素中添加新的子元素。子元素可以为：stirng | element（js对象） | jquery元素。
代码如下：
var oli = document.createElement('li');oli.innerHTML = '哈哈哈'; $('.box').append('hyp'); // 可以插入普通文本$('ul').append('PS:如果追加的是jquery对象那么这些元素将从原位置上消失。简言之，就是一个移动操作。
知识点2：
语法：
子元素.appendTo(父元素)
解释：追加到某元素 ，子元素添加到父元素
$('PS:要添加的元素同样既可以是stirng 、element(js对象) 、 jquery对象。
知识点3：
语法：
父元素.prepend(子元素)；
解释：前置添加， 添加到父元素的第一个位置。
$('ul').prepend('知识点4：
语法：
子元素.prependTo(父元素)；
解释：前置添加， 添加到父元素的第一个位置
$('标签').prependTo('ul') 知识点5：
语法：
兄弟元素.after(要插入的兄弟元素)； 要插入的兄弟元素.inserAfter(兄弟元素)；
解释：在匹配的元素之后插入内容
$('ul').after('我是一个h3标题
') $('我是一个h2标题
').insertAfter('ul') 知识点6：
语法：
兄弟元素.before(要插入的兄弟元素)； 要插入的兄弟元素.inserBefore(兄弟元素)；
解释：在匹配的元素之后插入内容
$('ul').before('我是一个h3标题
') $('我是一个h2标题
').insertBefore('ul') 克隆操作
语法：
$(选择器).clone();
解释：克隆匹配的DOM元素。
$('button').click(function() { // 1.clone()：克隆匹配的DOM元素 // 2.clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力) $(this).clone(true).insertAfter(this);}) 修改操作
知识点1：
语法：
$(selector).replaceWith(content);
将所有匹配的元素替换成指定的string、js对象、jquery对象。
//将所有的h5标题替换为a标签$('h5').replaceWith('hello world')//将所有h5标题标签替换成id为app的dom元素$('h5').replaceWith($('#app')); 知识点2：
语法：
$('哈哈哈
')replaceAll('h2'); 解释：替换所有。将所有的h2标签替换成p标签。
$('
').replaceAll('h4') 删除操作
知识点1：
语法：
$(selector).remove();
解释：删除节点后，事件也会删除（简言之，删除了整个标签）
$('ul').remove(); 知识点2：
语法：
$(selector).detach();
解释：删除节点后，事件会保留。
var $btn = $('button').detach() //此时按钮能追加到ul中 $('ul').append($btn) 知识点3：
语法：
$(selector).empty();
解释：清空选中元素中的所有后代节点，保留元素。
//清空掉ul中的子元素，保留ul$('ul').empty() 04-使用jQuery操作input的value值