jQuery

什么是jQuery

jQuery是JavaScript的一个工具库，是对JavaScript对象和函数的封装。

引入jQuery方法

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js" ></script>
<script src="js/jquery-1.12.4.js" type="text/javascript"></script>

选择公式：$(selector).action()

<a href="" id="a">点我</a>
//选择器就是css的选择器
$("#a").click(function(){
    alert("hello,jquery");
})

页面加载时运行：$(document).ready(function(){...})

可简写为：$(function{...})

等同于：window.onload()

方法

方法	方法说明
$(selector).addClass()	添加class
$(selector).css("属性","属性值")	设置单个css属性
$(selector).({"属性1":"值","属性2":"值"})	设置多个css属性
$(selector).show()	显示
$(selector).hide()	隐藏

选择器

基本选择器

选择器语法	说明
element	标签选择器
.class	类选择器
#id	ID选择器
selector,selector	并集选择器
*	全局选择器

层次选择器

选择器	选择器语法	说明	实例
后代选择器	ancestor descendant	选取ancestor元素里的所有descendant（后代）元素	$("#menu span" )选取#menu下的元素
子选择器	parent>child	选取parent元素下的child（子）元素	$(" #menu>span" )选取#menu的子元素
相邻元素选择器	prev+next	选取紧邻prev元素之后的next元素	$(" h2+dl " )选取紧邻 元素之后的同辈元素
同辈元素选择器	prev~sibings	选取prev元素之后的所有siblings元素	$(" h2~dl " )选取 元素之后所有的同辈元素

属性选择器

选择器语法	说明
[attribute]	选取包含给定属性的元素
[attribute=value]	选取等于给定属性是某个特定值的元素
[attribute !=value]	选取不等于给定属性是某个特定值的元素
[attribute^=value]	选取给定属性是以某些特定值开始的元素
[attribute$=value]	选取给定属性是以某些特定值结尾的元素
[attribute\*=value]	选取给定属性是以包含某些值的元素

过滤选择器

基本过滤选择器

选择器语法	说明	实例
:first	选取第一个元素	$(" li:first" )选取所有 元素中的第一个 元素
:last	选取最后一个元素	$(" li:last" )选取所有 元素中的最后一个 元素
:not(selector)	选取去除所有与给定选择器匹配的元素	$(" li:not(.three)" )选取class不是three的元素
:even	选取索引是偶数的所有元素（index从0开始）	$(" li:even" )选取索引是偶数的所有 元素
:odd	选取索引是奇数的所有元素（index从0开始）	$(" li:odd" )选取索引是奇数的所有 元素
:eq(index)	选取索引等于index的元素（index从0开始）	$(“li:eq(1)” )选取索引等于1的 元素
:gt(index)	选取索引大于index的元素（index从0开始）	$(" li:gt(1)" )选取索引大于1的 元素（注：大于1，不包括1）
:lt(index)	选取索引小于index的元素（index从0开始）	$(“li:lt(1)” )选取索引小于1的 元素（注：小于1，不包括1）
:header	选取所有标题元素，如h1~h6	$(":header" )选取网页中所有标题元素
:focus	选取当前获取焦点的元素	$(":focus" )选取当前获取焦点的元素
:animated	选择所有动画	$(":animated" )选取当前所有动画元素

可见性过滤选择器

更多操作选择器语法	说明	实例
:visible	选取所有可见的元素	$(":visible" )选取所有可见的元素
:hidden	选取所有隐藏的元素	$(":hidden" )选取所有隐藏的元素

事件

鼠标事件

鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件。

语法	说明	执行时机
click( )	触发或将函数绑定到指定元素的click事件	单击鼠标时
mouseover( )	触发或将函数绑定到指定元素的mouseover事件	鼠标指针移过时
mouseout( )	触发或将函数绑定到指定元素的mouseout事件	鼠标指针移出时
mouseenter( )	触发或将函数绑定到指定元素的mouseenter事件	鼠标指针进入时
mouseleave( )	触发或将函数绑定到指定元素的mouseleave事件	鼠标指针离开时

相同点与不同点

方法	相同点	不同点
mouseover( )	鼠标进入被选元素时会触发	鼠标在其被选元素的子元素上来回进入时： 触发mouseover( )不触发mouseenter
mouseout( )	鼠标离开被选元素时会触发	鼠标在其被选元素的子元素上来回离开时： 触发mouseout不触发mouseleave

键盘事件

用户每次按下或者释放键盘上的键时都会产生事件。

方法名	说明	执行时机
keydown( )	触发或将函数绑定到指定元素的keydown事件	按下键盘时
keyup( )	触发或将函数绑定到指定元素的keyup事件	释放按键时
keypress( )	触发或将函数绑定到指定元素的keypress事件	产生可打印的字符时

复合事件

hover()

hover()方法相当于mouseover与mouseout事件的组合。

语法格式：hover(enter,leave)

$(".top-m .on").hover(function(){
    $(".topDown").show();
},
                      function(){
    $(".topDown").hide();
}
                     );

toggle()

toggle()方法用于模拟鼠标连续click事件。

toggle()方法不带参数，与show( )和hide( )方法作用一样。

语法格式：toggle(fn1,fn2,...,fnN);

$("input").toggle(
    function(){$("body").css("background","#ff0000");},
    function(){$("body").css("background","#00ff00");},
    function(){$("body").css("background","#0000ff");}
)

toggleClass()

toggleClass( )可以对样式进行切换

语法格式：toggleClass(className);

$("input").click(function(){$("p").toggleClass("red");})

方法对比

• toggle( fn1,fn2...)：实现单击事件的切换，无须额外绑定click事件
• toggle( )：实现事件触发对象在显示和隐藏状态之间切换
• toggleClass( )：实现事件触发对象在加载某个样式和移除某个样式之间切换

动画效果

元素的显示与隐藏

$(selector).show([speed],[callback])

$(selector).hide([speed],[callback])

• speed ：可选，表示速度，默认为“0”，可能值：毫秒（如1000）、slow、normal、fast
  • slow ：缓慢的
  • normal ：正常的
  • fast ：迅速的
• callback ：可选，show函数执行完后，要执行的函数

淡入淡出

fadeIn()和fadeOut()可以通过改变元素的透明度实现淡入淡出效果。

$(selector).fadeIn([speed],[callback])

$(selector).fadeOut([speed],[callback])

动态显示/隐藏

slideDown()可以使元素逐步延伸显示。

slideUp()则使元素逐步缩短直至隐藏。

$(selector).slideDown([speed],[callback])

$(selector).slideUp([speed],[callback])

动画

$(selector).animate({params},speed,callback);

• 必需的 params 参数定义形成动画的 CSS 属性。
• 可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
• 可选的 callback 参数是动画完成后所执行的函数名称。

 

---

❤️ END ❤️