首页 > 代码库 > JQuery基础

JQuery基础

一.JQuery语法

   

JQuery语法

1.JQuery("选择器").action();通过选择器调用事件函数
 但JQuery中JQuery可以用$代替,即$("选择器").action();
 ①选择器,可以直接使用CSS选择器,选中元素;
②.action()表示对元素执行的操作。

 2.文档就绪函数:防止了文档在完全加载(就绪)之前运行JQuery代码
 $(document).ready(function(){
 console.log($("p"));
 $("p").hide();
 //JQuery代码
 })
 简写:$(function(){});
 [文档就绪函数与window.onload区别]
①window.onload需在网页所有内容加载完成后执行(包括图片音频);
文档就绪函数,只需在网页DOM加载完成后就能执行;
 ②window.onload直能写一个,写多个只会执行最后一个
 文档就绪函数,可以写多个,也不会被覆盖。

 3.JQuery对象与原生DOM对象互转
①原生DOM对象转JQuery对象:$(DOM对象);
    var p=document.getElementsByTagName("p");
$(p)//转为JQuery对象;
 ②JQuery对象转原生DOM对象:$("#p").get(0) $("#p")[0]
 $("#p").get(0).style.color="red";

二.使用on绑定事件

1.使用on进行单事件绑定

$("button").on("click",function(){
//$(this)取到当前调用函数的对象
console.log($(this).html())
})

2.使用on同时为一个事件绑定多个函数

$("button").on("mouseover click",function(){
console.log($(this).html())

3.调用函数时,传入自定义参数

$("button").on("click",{name:"jyc"},function(event){
//使用event.data.属性名 找到传入参数
console.log(event.data)
})

4.使用on进行多事件多函数绑定

$("button").on({
click:function(){console.log("click")},
mouseover:function(){console.log("mouse")}
}

)

5.使用on进行事件委派

将原本需要绑定到某元素上的事件,改为绑定到父元素乃至根节点上,然后委派给当前元素生效;
 eg:$("p").click(function(){});
$(document).on("click","p",function(){})

作用:
 默认的绑定方式,只能绑定到页面初始时已经有的P元素,的那个页面新增P时无法绑定到新的元素上;
 使用事件委派方式,当页面新增元素时,可以为所有新元素绑定事件;

三.off()取消事件绑定

1.$("p").off():取消所有事件;
2.$("p").off("click"):取消点击事件
3.$("p").off("click mouseover")取消多个事件
4.$(document).off("click","p"):取消事件委派;

四.动画

.show()
 ①不传参:让隐藏的元素直接显示,不进行动画。
②传入时间:多少毫秒之内完成动画
③传入(时间,函数):完成动画之后执行回调函数
show()动画执行效果:修改元素高度宽度,opacity属性

.hide():让显示元素隐藏,与show()相反

 .slideDown():让隐藏元素显示,效果从上往下,增加高度;
 .slideUp():让显示元素隐藏,效果从下往上,减少高度;
 .slideToggle()让显示的影隐藏,让隐藏的显示。

 .fadeOut():让显示元素隐藏,淡出
.fadeIn():让隐藏元素显示,淡入
 .fadeToggle():让显示的影隐藏,让隐藏的显示,淡入淡出。
 .fadeTo(时间,透明度,函数):同fadeToggle,单多了透明参数,可以指定显示的最终透明度。

animate({最终的样式属性键值对},动画时间,动画效果("linear""swing"),回调函数):自定义动画

JQuery基础