JQuery基础与事件和动画

JQuery语法
1、JQuery("选择器").action; 通过选择器调用时间函数
但Jquery可以用$符号代替，即$("选择器").action;
①选择器可以直接使用css选择器，选中元素
②.action表示直接对元素执行的操作；
2、文档就绪函数：防止文档在完全加载之前运行Jquery代码
$(document).ready(function(){
JQuery代码
});
文档就绪函数简写方式
$(function(){

});
3、[文档就绪函数&window.onload区别]
1、window.onload需在网页所有内容加载完成后执行(包括图片音频)
文档就绪函数，只需要在网页DOm结构加载以后便会执行
2、 window.onload，只能写一个，写多个只会执行最后一个
文档就绪函数，可以写多个，也不会被覆盖

4、JQuery与原生DOM互转
①原生DOM对象转JQuery对象： $(DOM对象)
var p = document.getElementsByName("p");
$(p) 转换为JQwery对象
②JQuery对象转原生DOM对象： $("#p").get(0) $("#p")[0]
$("#p").get(0).style.color = "red";

使用on绑定事件* ①、使用on进行单事件绑定*//*$("button").on("click",function(){//$(this)取到当前调用时间函数的对象console.log($(this).html());})*///②使用on同时为多个事件，绑定同一函数/*$("button").on("click mouseover",function(){

//$(this)取到当前调用时间函数的对象
console.log($(this).html());
})

//③调用函数时，传入自定义参数
/*$("button").on("click",{name:"jianghao"},function(event){
//使用event.data.属性名找到传入的参数
console.log(event.data.name);
})
④使用on进行多事件多函数绑定
$("button").on({
click:function(){
console.log("click")
},
mouseover:function(){
console.log("mouseover")
}
});
//⑤使用on进行事件委派
>>>将原本需要绑定到某元素上的事件改为绑定在父元素乃至根节点上，然后委派给当前元素生效
>>>作用：默认的绑定方式只能绑定到页面初始时的已有元素，当页面新增元素时，无法绑定到新元素上
使用事件委派方式，当新页面新增元素时，可以为所有新元素绑定事件

$("button").on("click",function(){
var p = $("<p>dsjsdio</p>")
$("p").after(p)
})
$(document).on("click","p",function(){
alert("1")
})
//使用.one()绑定的函数只能执行一次
$("button").one("click", function(){
alert("1");
});
//.trigger("event");自动触发某元素的事件

$("p").click(function(event,arg1,arg2){//触发事件时传递参数
alert("触发了p的click事件"+arg1+arg2)
})
$("button").click(function(){
$("p").trigger("click",["haha","hehe"])
})*/

动画

.show()
①不传参：让隐藏的元素直接显示，不进行动画
②传入时间：多少毫秒之内完成动画

③传入(时间,函数): 完成动画之后执行回调函数
show()动画执行效果：同时修改元素的宽度、高度、opacity属性

.hide()效果：让显示元素影藏，与show相反

.slideDown():让隐藏元素显示，从上往下高度增加
.slideUp():让显示元素隐藏，从下往上高度减少
.slideToggle():让显示的隐藏，让隐藏的显示

.fadeOut():让显示的隐藏,淡入
.fadeIn():让隐藏的显示,淡出
.fadeToggle():让显示的隐藏,让隐藏的显示，淡入淡出
.fadeTo(时间,透明度,函数)：同.fadeToggle()，但是多了透明度参数，可以指定显示的透明度
.animate自定义动画
$("p").animate({
width:"50px",
opacity: "0.2",
},5000,"linear",function(;){
})
$("p").fadeOut(5000,function(){
alert("1");
})
})
off() 取消事件绑定
1、$("p").off():取消所有事件
2、$("p").off( "click")取消点击事件
3、$("p").off( "click mouseover")取消多个事件
4、$(document).off("click","p")取消委派事件

巴特西

JQuery基础与事件和动画

最新文章

热门文章