jquery
获取jquery
选择器
事件
ready
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){
alert('啦啦啦')
});
on
在选择元素上绑定一个或多个事件的事件处理函数。
$('button').on('click',function () {
$('div').fadeToggle()
})
off
在选择元素上移除一个或多个事件的事件处理函数。
$('button').off('click')
one
为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。
$('ul').one('mousemove',function(){
console.log('ulmove')
})
hover
一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法
$('button').hover(function(){
$('div').css('color','yellow')},function(){
$('div').css('color','green')
}
)
change
当元素的值发生改变时，会发生 change 事件。
$("input[type='text']").change( function() {
$('div').css('color','red')
});
//当input的值发生改变时（也就是输入数据时），字体颜色改变
jquery鼠标事件
click
当点击元素时，会发生点击事件。
$("p").click(function () {
$('p').css('color','red')
});
dblclick
当双击元素时，会发生 dblclick 事件。
$("div").dblclick(function () {
$('div').css('color','#fac')
});
mousedown
当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
mousedown 与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生。
mouseenter
当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。
与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。
mouseleave
当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。
与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
mousemove
当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。
mousemove事件处理函数会被传递一个变量——事件对象，其.clientX 和 .clientY 属性代表鼠标的坐标
mouseout
当鼠标指针从元素上移开时，发生 mouseout 事件。
注释：与 mouseleave 事件不同，不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
mouseover
当鼠标指针位于元素上方时，会发生 mouseover 事件。
mouseup
当在元素上放松鼠标按钮时，会发生 mouseup 事件。
jquery窗口事件
blur
当元素失去焦点时触发 blur 事件。
$('input[type="text"]').blur(function () {
$('div').css('color','yellow')
})
focus
当元素获得焦点时，触发 focus 事件。
$("input[type=text]").focus(function(){
this.blur();
});//当获得焦点时，无法使用此文本框
focusin
当元素获得焦点时，触发 focusin 事件。
focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。
$("input[type=text]").focusin(function(){
$("div").css('color','red')
});
focusout
当元素失去焦点时触发 focusout 事件。
focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。
$("input[type=text]").focusout(function(){
$("div").css('color','yellow')
});
jquery键盘事件
keyDown
当键盘或按钮被按下时，发生 keydown 事件。
$(window).keydown(function(event){
switch(event.keyCode) {
case 27:
console.log('esc')
break;
case 13:
console.log('Enter')
break;
// 不同的按键可以做不同的事情
// 不同的浏览器的keycode不同
// 常用keyCode： 空格 32 Enter 13 ESC 27
}
});
keypress
当键盘或按钮被按下时，发生 keypress 事件。
keyUp
当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。
resize
当调整浏览器窗口的大小时，发生 resize 事件。
$(window).resize(function(){
alert("Stop it!");
});
属性
属性
attr（返回或设置属性）
设置或返回被选元素的属性值。
//返回文档中所有图像的src属性值。也就是图像的地址
$("img").attr("src");
//为所有图像设置src和alt属性。设置多个属性
$("img").attr({src:"img.jpg",alt:"图片"})
//为所有图像设置src属性。设置单个属性
$("img").attr("src","img.jpg");
removeAttr（删除属性）
从每一个匹配的元素中删除一个属性
$("img").removeAttr("src");
//只能删除一个属性
prop
获取在匹配的元素集中的第一个元素的属性值。
removeProp
用来删除由.prop()方法设置的属性集
prop,removeProp两个难以理解，需要重点关注
属性CSS类
addClass
为每个匹配的元素添加指定的类名。
//添加一个类名
$('img').addClass('img') //为img标签添加img类名
removeClass
从所有匹配的元素中删除全部或者指定的类。
$("p").removeClass("selected")//从匹配的元素中删除 'selected' 类
$("p").removeClass()//删除匹配元素的所有类
toggleClass
如果存在（不存在）就删除（添加）一个类。
$("img").toggleClass("selected")
//有class类名，就删除
//没有class类名，就添加
HTML代码/文本/值
html
取得第一个匹配元素的html内容。
设置匹配元素的html内容
这个函数不能用于XML文档。但可以用于XHTML文档。
//使用方式
//返回p元素的内容。(也就是获取p元素里面的内容)
$('p').html();
//设置所有 p 元素的内容,(这会清空原先p标签里面的内容，然后再添加)
$('p').html('hello');
//使用函数来设置所有匹配元素的内容。
$("p").html(function(n){
return "这个 p 元素的 index 是：" + (n+1);
});
text（文本）
取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
//返回p元素的文本内容。他会获取所有的p元素的文本内容并将他们拼接起来返回
$('p').text()
//设置所有 p 元素的文本内容
$('p').text('hello')
//使用函数来设置所有匹配元素的文本内容。
$("p").text(function(n){
return "这个 p 元素的 index 是：" + n;
});
val（值）
获得匹配元素的当前值，也可以设置匹配元素的当前值
//获取文本框中的值
$("input").val();
//设定文本框的值
$("input").val("hello world!");
//使用函数设置文本框的值
$('input:text.items').val(function() {
return this.value + ' ' + this.className;
});
CSS
jquery获取css样式方式（两种）
$('#div1').css('color','yellow')//单行css样式
$('#div1').css({//多行css样式
'color':'red',
'background':'lightblue',
"width":"100px"
})
位置
offset
获取匹配元素在当前视口的相对偏移。也就是left和top
<p>Hello</p><p>2nd Paragraph</p>
<script>
const p = $("p:last");//选择最后一个符合条件的元素
const offset = p.offset();//获取元素的位置
p.html( "left: " + offset.left + ", top: " + offset.top );
</script>
position
获取匹配元素相对父元素的偏移。 也就是匹配元素在已定位元素的位置
<style>
div{
width: 300px;
height: 300px;
position: relative;
background: #c4c7ce;
}
#div1{
width: 100px;
height: 100px;
background: #8ed047;
}
</style>
</head>
<body>
<div>
<div id="div1"></div>
</div>
<p></p>
</body>
</html>
<script>
const div1 = $("#div1");
const position = div1.position();
$("p").html( "left: " + position.left + ", top: " + position.top );
</script>
尺寸
height
取得匹配元素当前计算的高度值（px）。获取或设置元素的高度
width
取得第一个匹配元素当前计算的宽度值（px）。获取或设置元素的宽度
innerHeight
获取第一个匹配元素内部区域高度（包括补白（padding）、不包括边框）。
innerWidth
获取第一个匹配元素内部区域宽度（包括补白（padding）、不包括边框）。
outerHeight
获取第一个匹配元素外部高度（默认包括补白和边框（border））。
outerWidth
获取第一个匹配元素外部宽度（默认包括补白和边框（border））。
效果
基础效果
show
显示隐藏的匹配元素。
<body>
<p style="display: none">Hello</p>
</body>
</html>
<script>
$('p').show()
</script>
hide
隐藏显示的元素
<body>
<p>Hello</p>
</body>
</html>
<script>
$('p').hide()
</script>
toggle
用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。
如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
$('button').on('click',function () {
$('p').toggle()
})
滑动效果
slideDown
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
以滑动方式显示隐藏的 元素
$('div').slideDown()
slideUp
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数
$('div').slideUp()
slideToggle
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
动态的滑落或滑起//当元素隐藏时滑落，当元素显示时滑起
或通过点击事件来实现滑起或滑落
$('div').slideToggle()
//也可通过点击重复使用此函数
$('button').on('click',function () {
$('div').slideToggle()
})
淡入淡出效果
fadeIn
有两种参数：速度和透明度(必须)
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
opacity:一个0至1之间表示透明度的数字。
通过不透明度的变化来实现所有匹配元素的淡入效果
$('div').fadeIn()//由透明到不透明的变化
fadeOut
有两种参数：速度和透明度(必须)
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
opacity:一个0至1之间表示透明度的数字。
通过不透明度的变化来实现所有匹配元素的淡出效果
$('div').fadeOut()//由不透明到透明的变化
fadeTo
有两种参数：速度和透明度(必须)
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
opacity:一个0至1之间表示透明度的数字。
动态的淡入或淡出//当元素隐藏时淡入，当元素显示时淡出
$('div').fadeTo('slow',0.5) //
fadeToggle
有两种参数：速度和透明度(必须)
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
opacity:一个0至1之间表示透明度的数字。
动态的淡入或淡出//当元素隐藏时淡入，当元素显示时淡出
也可以通过点击事件来实现淡入或淡出
$('button').on('click',function () {
$('div').fadeToggle()
})
文档处理
内部插入
append(在元素的后面插入)
向每个匹配的元素内部追加内容。
$('p').append('<b>Myfirend</b>')//在P里面插入b
// 效果：<p>hello<b>Myfirend</b></p>
appendTo(在元素的后面插入)
把所有匹配的元素追加到另一个指定的元素元素集合中。
$('p').appendTo('#div1') //将P插入到div1中
prepend
向每个匹配的元素内部前置内容。
$('p').append('<b>Myfirend</b>')//在P前面插入b
// 效果：<p><b>Myfirend</b>hello</p>
prependTo
把所有匹配的元素前置到另一个、指定的元素元素集合中。
$('#p1').prependTo('#div2')
外部插入
after
在每个匹配的元素之后插入内容。
$("p").after("<b>Hello</b>");
//结果：
//<p>I would like to say: </p><b>Hello</b>
before
在每个匹配的元素之前插入内容。
insertAfter
把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
//<div id="foo">Hello</div><p>I would like to say: </p>
$("p").insertBefore("#foo");
//结果:<p>I would like to say: </p><div id="foo">Hello</div>
insertBefore
把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
