jQuery是一个JavaScript库,用于简化Javascript的开发。适合HTML元素选取与操作、CSS操作、HTML事件操作、JS特效和动画、DOM遍历和修改、AJAX、Utilities等等。
jquery-3.1.0.js//未压缩版,代码易读,适合开发环境下使用jquery-3.1.0.min.js//压缩版,访问速度快,代码可读性差。适合在生产环境下使用jquery-3.1.0.slim.js//精简版,去掉了ajax的功能,如果你不需要用到ajax或者使用了独立的第三方ajax库,就可以用这个jquery-3.1.0.slim.min.js//精简压缩版,只是对精简版的代码进行了压缩1.2获取jQuery1.下载到本地
jQuery的核心是jQuery()函数,但一般都写成$(),也可以理解为$即jQuery。$()可以完成如下操作:
/*jQuery使用```$```符号作为jQuery的简介方式,但是某些其他JavaScript库中的函数(比如Prototype)同样使用```$```符号。为防止两者发生冲突,可以使用noConflict()的方法来解决该问题。*///在jQuery中使用自定义的名称代替$符号varjq=jQuery.noConflict();2.1.2ready()当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度。
简单地说,这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法,可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数,而99.99%的JavaScript函数都需要在那一刻执行。
在DOM加载完成时运行的代码,可以这样写:
$(document).ready(function(){//在这里写你的代码...});简写:
$(function($){//可以在这里继续使用$作为别名...});2.2选择器查找DOM中元素的方式:CSS选择器。
注意:使用$()获取的结果是个元素数组,而不是某一个元素。
创建一个超链接,使用append()方法
$("#test").remove();删除某个元素的所有子节点,使用empty()方法
$(document.body).empty();2.3.3隐藏元素隐藏元素使用hide()方法
//隐藏所有
元素$("p").hide();//隐藏所有class="test"的元素$(".test").hide();2.4样式修改样式要使用jQuery对象中的css()方法
//修改单个样式$("#testdiv").css("color","red");//修改多个样式$("#testdiv").css({color:"red",backgroundColor:"yellow"});2.4.1修改CSS类修改CSS类分别使用addClass()与removeClass()方法
$("#test_id").toggleClass("class1");用jQuery对象封装普通的DOM对象,以此得到的jQuery对象叫做封装器对象。封装器对象一般用于改进另一个对象的功能。以下代码表示,用jQuery对象封装元素对象,以使用toggleClass()切换"class1"类。
vartarget=$(e.target());if(e.type=="mouseover"||e.type=="mouseout"){target.toggleClass("class1");}2.4.3检查CSS类检查CSS类是否应用于某元素,使用hasClass()方法
$("#test_id").hasClass("class1");2.5属性2.5.1attr()attr()为指定元素指定属性,可用于所有属性
//为所有图像设置src和alt属性$("img").attr({src:"test.jpg",alt:"TestImage"});//为所有图像设置src属性$("img").attr("src","test.jpg");//把src属性的值设置为title属性的值$("img").attr("title",function(){returnthis.src});2.5.2removeAttr()//删除指定属性$("img").removeAttr("src");2.5.3prop()与attr不同,prop()专门用于checked属性
//获取复选框中checked的属性值。选中复选框为true,没选中为false。$(":checkbox").prop("checked");//禁用页面上的所有复选框$("input[type='checkbox']").prop({disabled:true});禁用和选中所有页面上的复选框。$("input[type='checkbox']").prop("disabled",false);$("input[type='checkbox']").prop("checked",true);通过函数来设置所有页面上的复选框被选中$("input[type='checkbox']").prop("checked",function(i,val){return!val;});全选,反选,取消的功能实现: