当前位置: 首页 > Web前端 > HTML

前端开发jQuery入门基本操作

时间:2023-03-28 12:18:35 HTML

下载JQuery目前jQuery主要有3个版本:1.x:兼容ie678,使用最广泛,官方只做BUG维护,不会有新功能添加。所以对于一般项目,可以使用1.x版本。2.x:不兼容ie678,很少人用,官方只做BUG维护,不会增加新功能。如果不考虑兼容低版本浏览器,可以使用2.x,3.x:不兼容ie678,只支持最新的浏览器。除非有特殊要求,一般不会使用3.x版本,很多老的jQuery插件都不支持这个版本。该版本目前为官方主要更新维护版本。注:jquery-xxx.js和jquery-xxx.min.js的区别:jquery-xxx.js是开发版,面向程序员,缩进和注释很好,体积较大,适合前端培训。jquery-xxx.min.js:生产版,在程序中使用,无缩进,体积更小,程序加载速度更快。导入JQuery的js文件,直接导入min.js文件。例如:JQuery对象与JS对象的区别和转换①在运行时更方便区分JQuery对象。JQuery对象和js对象方法不通用。②转换jq-->js:jqobject[index]或者jqobject.get(index)js-->jq:$(jsobject)JQuery的简单使用①事件绑定比如点击id为b的按钮弹出弹出一个提示框。JQuery代码如下:$("#b").click(function(){alert("b");});相同效果的JS代码如下,可见JS代码比较复杂。document.getElementById("b").onclick=function(){alert("b");}②入口函数入口函数是当前页面加载完成后运行的函数。JQuery代码如下:$(function(){alert("页面加载完成");});JS代码如下:window.onload=function(){alert("pageloadingcomplete");};注意:window.onload和$(function)的区别:window.onload只能定义一次,如果定义多次,后面的会覆盖前面的;而$(function)可以定义多次。③样式控制例如将id为div1的元素的背景颜色设置为红色。JQuery代码如下:$("#div1").css("background-color","re??d");或者:$("#div1").css("backgroundColor","re??d");相当于JS代码:document.getElementById("div1").style.backgroundColor="red";