手把手教你从基础学习JQuery

时间:2024-01-06 20:04:20

JQuery

JQuery 语法

1、jQuery("选择器").action();通过选择器调用事件函数
但jQuery中,jQuery可以用$代替,即$("选择器").action();
① 选择器,可以直接使用css选择器,选中元素
② .action();表示对元素执行的操作
2、文档就绪函数:防止文档在完全加载(就绪)之前运行jQuery代码
$(document).ready(function(){
jQuery 代码
});
简写方式:$(function(){});
【文档就绪函数与window.onload区别】
① window.onload需在网页所有内容加载完成之后执行(包括图片音频)
文档就绪函数,只需要在网页DOM结构加载以后便执行
② window.onload 只能写一个,写多个只会执行最后一个
文档就绪函数,可以写多个,不会被覆盖掉
3、jQuery对象与原生DOM对象互转
① 原生DOM对象转jQuery对象:$(DOM对象);
var p = documengt.getElementsByTagName("p");
$(P); //转为jQuery对象
② jQuery对象转为原生DOM对象:$("#p").get(0) $("#p")[0]
$("#p").get(0).style.color = "red"

事件绑定快捷方式
$("button:first").click(function(){
alert(1);
});


 使用on绑定事件


① 使用on进行单事件绑定
$("button").on("click",function(){
$(this) 取到当前调用事件函数的对象
console.log($(this).html());
});

② 使用on同时为多个事件绑定同一个函数
$("button").on("mouseover click",function(){
console.log($(this).html());
});

③ 调用函数时传入自定义参数
$("button").on("click",{name:"liumeng"},function(event){
//使用event.date.属性名 找到传入的参数
console.log(event.date.name);
});

④ 使用on进行多时间多函数绑定
$("button").on({
click:function(){
console.log("click")
},
mouseover:function(){
console.log("mouseover")
}
});
⑤ 使用on进行事件委派
【事件委派】
 将原本需要需要绑定到某元素上的事件,改为绑定在父元素乃至根节点上,然后委派给当前元素生效。
 eg:$("p").click(function(){alert(1)};

 $(document).on("click","p",function(){alert(1);});
 作用:
 默认的绑定方式,只能绑定到页面初始时已有的p元素,当页面新增p元素时,无法绑定到新元素上;
使用委派方式,当页面新增元素时,可以为所有新元素绑定事件。


$(document).on("click","button",function(){
alert(1);
});

案例
$("button").on("click",function(){
var p = $("<p>444</p>");
$("p").after(p);
});
默认绑定方式
$("p").click(function(){
alert(1);
});
委派方式
 $(document).on("click","p",function(){
alert(1);
});

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

使用.one绑定方式只能使用一次*/
$("button").one("click",function(){
alert(1);
});
.trigger("event"):自动触发某元素的事件
 $("p").trigger("click",["haha","hehe"]);触发事件时,传递参数

$("p").click(function(event,ag1,ag2){
alert("触发了p事件"+ag1+ag2);
})
$("button").click(function(){
$("p").trigger("click",["haha","hehe"]);
})
/******动画*********/
.show()动画执行效果:同时修改元素的宽、高、opacity属性
 ① 不传参:让隐藏的元素直接显示,不进行动画。
 ② 传入时间:多少毫秒之内完成动画
 ③ 传入(时间,函数):完成都动画后,执行回调函数
.hide():让显示元素隐藏,与show()相反

.slideDown():让隐藏元素显示,效果为从上往下,增加高度
 .slideUp():让显示元素隐藏,效果为从下往上,减小高度
 .slideToggle():让显示的隐藏,隐藏的显示
 .fadeOut():让显示元素隐藏,谈出
 .fadeIn():让隐藏元素显示,谈入
 .fadeToggle():让显示的隐藏,隐藏的显示谈入谈出
 .fadeTo(时间,透明度,函数):同.fadeToggle(),但是多了透明度参数,可以指定显示的最终透明度
 .animate({最终的样式属性健值对},动画时间,动画效果("linear""swing"),回调函数):自定义动画

HTTP:超文本传输协议
URL:统一资源定位符
组成:协议名://主机名(IP地址):端口号/项目资源地址?传递的参数键值对#锚点
eg:http://127.0.0.1:8080/jd/index.html?name=jiaohao
localhost或127.0.0.1表示本机IP

JSON 对象
1、JSON是键值对的集合,键与值之间用“:”分割,多个键值对之间用“,”分割
2、多个JSON对象可以放到数组中去。JSON对象和数组可以相互嵌套;
JSON对象的键必须是字符串。