为了简化JavaScript的开发,出现了一些 JavaScript库。在JavaScript库中,封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互的页面, 并且兼容各大浏览器。 jQuery就是当前流行的JavaScript库之一。
⑴ 通过script标签导入jQuery库
<script type="text/javascript" src="jquery-1.7.2.js"></script>这里使用jQuery-1.7.2版本
在开发测试时,用的是未压缩的版本: jquery-1.7.2.js 在上线项目中,会使用压缩后的版本: jquery-1.7.2.min.js
压缩版本和未压缩本的区别:未压缩版本按照格式书写,有换行和注释【文件体积稍大】;而压缩版本没有换行和注释【文件体积较小】
⑵ 再写一个script标签,并在里面写js代码
Tips:可以同时使用JS代码和jQuery代码
注意:一定要在另外一个script标签里面写js或jQuery代码,而不能在导入jQuery库的script标签里面写js或jQuery代码
jQuery库中为window对象定义了一个$函数(方法) jQuery();
function( selector, context ) { // The jQuery object is actually just the init constructor 'enhanced' return new jQuery.fn.init( selector, context, rootjQuery ); }$函数会根据参数数据类型的不同做不同的工作, 返回一个jQuery封装的伪数组的对象
Tips:window.jQuery = window.$ = jQuery;
当$接收的参数是一个function(){}【函数对象】时,其和window.onload = function(){}; 的意思相同。都代表等待文档加载完成之后,再调用此函数
window.onload = function(){ }; $(function(){ }); jQuery(function(){ }); $(document).ready(function(){ });这几个函数的作用相同,都代表等待文档加载完成之后,再调用此函数
当$接收的参数是一个HTML元素字符串时,会创建一个jQuery元素对象
当$接收的参数是一个CSS选择器时,代表查找元素
注意:通过$()查找到的元素的类型是Object类型;而通过document.getElementById()找到的元素类型则不是Object类型
当$接收的参数是一个DOM对象时,会将该DOM对象转换为一个jQuery对象
之所以要转换是为了调用jQuery对象或DOM对象的方法,不转换就无法使用
DOM对象:通过js原生的方法查找到的元素对象
document.getElementById("#id")或
document.getElementsByTagName("h1")jQuery对象:通过jQuery的方法查找或者创建的元素对象
$("font")或
$("<font>字体</font>")⑴ jQuery对象转DOM对象 jQuery查找到的对象,其实就是一个数组对象,里面的元素就是一个个的DOM对象,所以可以通过下标获取对应位置的DOM对象
var 名 = jQuery对象[index]; // 取jQuery对象的第index个元素,即将jQuery对象转换成DOM对象⑵ DOM对象转jQuery对象
var 名 = $(DOM对象);根据给定的元素名匹配一个或多个元素
根据给定的ID匹配一个元素
根据给定的class匹配一个或多个元素
选择符合选择器规则的所有的标签
选择页面中所有的元素
主要选择父子关系的元素
注意:⑴ 空格隔开祖先和后代元素 ⑵ 既会选择子代元素,又会选择孙子代元素
例如:
$("body div");选择body中所有的后代div元素,包括子代和孙子代
注意:⑴ >隔开父代和子代元素,中间不要有空格 ⑵ 既会选择子代元素,又会选择孙子代元素
例如:
$("body>div");选择body中所有的子代div元素
注意:+隔开指定和兄弟元素,中间不要有空格
例如:
$("#d1+div");选择id为d1的元素的下一个div兄弟元素
注意:~隔开指定和兄弟元素,中间不要有空格
例如:
$("#d1~div");选择id为d1的元素的之后所有的div兄弟元素
例如:
$("div:first");选择第一个div元素
例如:
$("div:last");选择最后一个div元素
注意:not里头不需要写引号
例如:
$("div:not(.cls)");选择所有class不为cls的div元素
注意:索引值从0开始
例如:
$("span:even");选择索引值为偶数的所有的span
注意:索引值从0开始
例如:
$("span:odd");选择索引值为奇数的所有的span
注意:index从0开始
例如:
$("div:eq(4)")选择索引值为4的div元素
注意:index从0开始
例如:
$("span:gt(3)");选择索引值大于3的所有的span元素
注意:index从0开始
例如:
$("p:lt(2)");选择索引值小于2的所有的p元素
例如:
$(".cls:contains('abc')");选择所有class为cls的,且包含abc字符串的元素
例如:
$("div:has(span)");选择所有包含span子元素的div父元素
例如:
$("span:empty");选择所有的不包含子元素或文本内容的span元素
例如:
$("div:parent");选择所有的包含子元素或文本内容的div元素
例如:
$("span:visible");选择所有可见的span元素
注意:该方法查找到的是通过display属性设置为none或visible设置为hidden的元素
如果查找的是隐藏域【<input type="hidden" />】,则是根据属性type来匹配的例如:
$("div:hidden");选择所有隐藏的div元素
$("input:hidden");选择所有的隐藏域
例如:
$("div[name]");选择所有包含name属性的所有div
例如:
$("span[title='abc']");选择所有title属性为’abc’的所有span
注意:该方法会把没有指定属性以及不是指定属性值的指定元素选择上
例如:
$("div[title!='test']");选择所有title属性值不是test的、以及没有title属性的所有div
例如:
$("span[title^='ta']");选择所有title属性值以’ta’开头的所有span
例如:
$("div[title$='ad']");选择所有title属性值以’ad’结尾的所有div
例如:
$("div[name*='dde']");选择所有name属性包含’dde’字符的所有div
例如:
$("span[title][name*='te']");选择所有包含title属性的、且name属性包含’te’的所有span
注意:index从1开始
例如:
$("div span:nth-child(3)");选择所有div的后代span,且span的序号为3
例如:
$("table tr:first-child");选择table的第一个tr(选择table的第一行)
例如:
$("ol li:last-child");选择有序列表的最后一项
例如:
$("ul li:only-child");选择无序列表中只有包含一项的li
注意:该方法会选择:
<input type="button" value="" />或
<button></button>注意:该方法会把:
① <input type="radio" checked="checked" />和
② <input type="checkbox" checked="checked" />和
③ <select> <option selected="selected"></option> </select>选择上
在jQuery的帮助文档上,描述该函数是: 匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option) 事实上,该函数会选中select中的option
注意:该方法会选择:
<select> <option selected="selected"></option> </select>获取或设置指定元素的属性值 获取属性:
$("选择器").attr("属性名");设置属性:
$("选择器").attr("属性名", "属性值");注意: 如果选择器匹配多于一个的元素: ⑴ 设置元素的属性值时,会将所有的元素的属性值都设置上。因为设置时存在隐式迭代 ⑵ 获取元素的属性值时,只有第一个匹配到的元素的属性值会被获取到。即获取时不会迭代所有的元素 ⑶ 让指定的单选按钮【radio】或多选框【checkbox】选中时,一般修改checked属性为true;若不选中,就修改为false
示例:
$("div:first").attr("name");获取第一个div的name属性值
$("span:last").attr("class", "abc");设置最后一个span的class属性值为”abc”
$(":checkbox").attr("checked", true);选中所有的多选框
移除指定元素的一个或多个属性值 移除一个属性值:
$("选择器").removeAttr("属性名");移除多个属性值:
$("选择器").removeAttr("属性名1 属性名2 ...");注意: ⑴ 如果选择器匹配多于一个的元素,则移除属性值会将所有的元素的属性值都移除了。因为移除属性值时存在隐式迭代 ⑵ 不可以不传参数
示例:
$(":text").removeAttr("name value");移除所有的文本框的name和value属性
获取或设置指定元素的内容 获取元素内容:
$("选择器").html();设置元素内容:
$("选择器").html("要修改的内容");注意: 如果选择器匹配多于一个的元素: ⑴ 设置元素的HTML内容时,会将所有的元素的内容都设置上。因为设置时存在隐式迭代 ⑵ 获取元素的HTML内容时,只有第一个匹配到的元素的内容会被获取到。即获取时不会迭代所有的元素
注意:获取的内容有两种情况: ⑴ 元素里头没有子元素,而是文本,则返回文本内容 ⑵ 元素里头有子元素,则返回子元素的HTML代码
示例:
$("ul:eq(1)").html();获取第二个无需列表里的HTML代码
$("ul").html("<li>修改!</li>");设置所有的ul元素内容
获取或设置指定元素的文本内容 获取文本内容:
$("选择器").text();设置文本内容:
$("选择器").text("要修改的文本内容");注意: 如果选择器匹配多于一个的元素: ⑴ 设置元素的文本内容时,会将所有的元素的文本内容都设置上。因为设置时存在隐式迭代 ⑵ 获取元素的文本内容时,结果是由所有匹配元素包含的文本内容组合起来的文本【字符串拼接】
示例:
$("p").text();获取所有的p标签的文本内容,并将所有的文本内容拼接起来,返回一个拼接后的文本
$("p").text("修改!");设置所有的p元素的文本内容
获取或设置指定元素的value属性值 获取文本内容:
$("选择器").val();设置文本内容:
$("选择器").val("要修改的值");注意: 如果选择器匹配多于一个的元素: ⑴ 设置元素的value属性值时,会将所有的元素的value属性值都设置上。因为设置时存在隐式迭代 ⑵ 获取元素的value属性值时,只有第一个匹配到的元素的value属性值会被获取到。即获取时不会迭代所有的元素 ⑶ 获取select的value属性值时,获取的是select内部的option的value属性值。如果option有value属性值,则获取的就是其value属性值,如果option没有value属性值,则获取的就是其文本内容 ⑷ 设置select的value属性值时,设置的是select内部的option的value属性值。如果option有value属性值,则设置其value属性值,如果option没有value属性值,则设置其文本内容 ⑸ 设置单选按钮【radio】或多选按钮【checkbox】的value属性值时,需要传入一个数组,即在中括号([ ])中写要选中的元素对应的value属性值。多个value属性值用逗号(,)隔开。注意单选按钮的value属性值必须写在中括号中
示例:
$(":hidden:last").val();获取最后一个隐藏域的value属性值(文本框的内容)
$(":text").text("修改!");设置所有的文本框的value属性值(文本框的内容)
$(":radio[name='rd']").val(["rd3"]);选中name为’rd’的,且value属性值为”rd3”的单选按钮 注意:一定要加上中括号
$(":checkbox[name='ck']").val(["ck2", "ck3"]);选中name为’ck’的,且value属性为”ck2”和”ck3”的多选框 注意:一定要加上中括号,多个值之间用逗号隔开
返回jQuery对象中元素的个数
Tips:该方法等同于length属性
示例:
$("p").size(); 【等同于 $("p").length】获取所有p的个数
循环方法,自动遍历jQuery对象【数组】,每个数组元素【DOM对象】都会调用function()【函数】一次。 可以理解为增强for循环 每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素。该元素就是每一个被遍历到的DOM元素
jQuery对象在进行设置、修改、删除操作时,会自动遍历数组中的每一个DOM对象,然后再进行相关操作。所以查找元素的相关属性,jQuery会隐式迭代 而在查找操作时,一般都需要我们进行手动的遍历。如果不使用普通for循环,则可以使用each函数
遍历弹出每个p标签的文本内容
获取或设置元素的样式属性 获取CSS样式:
$("选择器").css("CSS样式名");设置CSS样式: ⑴ 设置单个样式:
$("选择器").css("CSS样式名", "要设置的样式值");⑵ 设置多个样式:
$("选择器").css({ "样式1":"样式值1", "样式2":"样式值2", ... });注意: 如果选择器匹配多于一个的元素: ⑴ 设置元素的CSS样式值时,会将所有的元素的CSS样式值都设置上。因为设置时存在隐式迭代 ⑵ 获取元素的CSS样式值时,只有第一个匹配到的元素的CSS样式值会被获取到。即获取时不会迭代所有的元素 ⑶ 设置多个样式时,样式名和样式值要用引号引起来。样式名和样式值用冒号连接(:)。多个样式键值对用逗号(,)隔开。注意不要加分号(;)
示例:
$("p:first").css("font-size");获取第一个p标签的字体大小样式值
$("p").css("font-size", "30px");设置所有的p标签的字体大小为30像素
$("p").css({ "background-color":"orange", "text-align":"center" });设置所有的p标签的背景颜色为橘黄色,同时让文本内容居中显示
获取或设置指定元素的宽度。注意:返回结果没有单位(px)。而通过css(“width”) 函数获取的结果会有单位(px)
获取宽度:
$("选择器").width();设置宽度:
$("选择器").width("宽度数值");Tips:不要加px单位
注意: 如果选择器匹配多于一个的元素: ⑴ 设置元素的宽度值时,会将所有的元素的宽度值都设置上。因为设置时存在隐式迭代 ⑵ 获取元素的宽度值时,只有第一个匹配到的元素的宽度值会被获取到。即获取时不会迭代所有的元素
示例:
$(":button").width();获取第一个按钮的宽度
$(":button").width("200");设置所有的按钮的宽度为200像素(px)
获取或设置指定元素的高度。注意:返回结果没有单位(px)。而通过css(“height”) 函数获取的结果会有单位(px)
获取高度:
$("选择器").height();设置高度:
$("选择器").height("高度数值");Tips:不要加px单位
注意: 如果选择器匹配多于一个的元素: ⑴ 设置元素的高度值时,会将所有的元素的高度值都设置上。因为设置时存在隐式迭代 ⑵ 获取元素的高度值时,只有第一个匹配到的元素的高度值会被获取到。即获取时不会迭代所有的元素
示例:
$("div").height();获取第一个div的高度
$("div").height("100");设置所有的div的高度为100像素(px)
获取或设置指定元素的偏移量。返回值类型为一个对象:Object{top,left} 。该对象包含了top和left两个属性,分别是指定元素的:左上角距离原点(当前浏览器窗口的左上角)的高度【top】,宽度【left】
获取偏移量:
var $offset = $("选择器").offset(); var left = $offset.left; var top = $offset.top;设置高度:
$("选择器").offset({ "top":顶偏移量, "left":左偏移量 });Tips:不要加px单位
注意: 如果选择器匹配多于一个的元素: ⑴ 设置元素的偏移量时,会将所有的元素的偏移量都设置上。因为设置时存在隐式迭代 ⑵ 获取元素的偏移量时,只有第一个匹配到的元素的偏移量会被获取到。即获取时不会迭代所有的元素
示例:
var $offset = $("div").offset(); var left = $offset.left; var top = $offset.top;获取第一个div的偏移量
$("div").offset({ "top":100, "left":600 });设置所有的div的顶偏移为100像素(px),左偏移为600像素(px)
应用于已经过滤产生了一个jQuery对象,而这时又需要继续筛选时
获取第index个元素
注意: index为正数时,代表指定元素的位置是index + 1(从0算起) index可以为负数,代表从最后一个开始倒数(从1算起)
示例:
$("div").eq(2);选择第3个div元素
$("div").eq(-2);选择倒数第2个div元素
获取第一个元素
示例:
$("span").first();选择第1个span元素
获取最后一个元素
示例:
$("div").last();选择最后1个div元素
筛选出与指定的选择器匹配的所有元素
$("选择器").filter("选择器");示例:
$("div").filter(":last");选择最后一个div元素
查询指定元素是否复合给定的表达式,返回值为true或false
$("选择器").is("表达式");示例:
$("div:last").is("empty");判断最后一个div元素是否为空【有没有元素或文本内容】
查询包含指定元素的父元素
$("选择器").has("选择器");示例:
$("div").has("span");查找包含span元素的所有div
查询不符合给定表达式的所有元素
$("选择器").not("表达式");示例:
$("div").not(".cls");查找class不为cls的所有div
获取指定父元素中包含的所有指定的子元素
$("选择器").children("选择器");注意:该函数是找子元素
示例:
$("div").children(".cls")查找div的子元素中class为’cls’的所有子元素
获取指定父元素中包含的所有指定的后代元素
$("选择器").find("选择器");注意:该函数是找子元素以及孙子元素
示例:
$("div").find(".cls")查找div的子元素中class为’cls’的所有后代元素
获取指定元素的下一个指定兄弟元素
$("选择器").next("选择器");示例:
$("#d1").next("span")查找id为d1的下一个span兄弟元素
获取指定元素的之后所有的指定兄弟元素
$("选择器").nextAll("选择器");示例:
$("#d1").nextAll("span")查找id为d1的之后所有的span兄弟元素
获取指定的起始元素到指定的结束元素之间的所有指定的兄弟元素。起始元素和结束元素都是从左(头部)开始找。注意不包括起始和结束元素
$("起始元素").nextUntil("结束元素");示例:
$("#d1").nextUntil("span")查找id为d1的元素到下一个span兄弟元素,之间的所有的兄弟元素
获取指定元素的前一个指定兄弟元素
$("选择器").prev("选择器");示例:
$(".cls").prev("div")查找class为cls的前一个div兄弟元素
获取指定元素的之前所有的指定兄弟元素
$("选择器").prevAll("选择器");示例:
$(".cls").prevAll("div")查找class为cls的之前所有的div兄弟元素
获取指定的起始元素到指定的结束元素之间的所有指定的兄弟元素。起始元素和结束元素都是从右(尾部)开始找。注意不包括起始和结束元素
$("起始元素").prevUntil("结束元素");示例:
$(".cls").prevUntil("div")查找class为cls的元素到前一个div兄弟元素,之间的所有的兄弟元素
查找当前子元素的指定父元素
$("子元素").prev("父元素");示例:
$("td :text").first().parents("tr")查找表格中,第一个包含文本框的那行
查找当前元素的所有兄弟元素
$("选择器").prev("兄弟元素");示例:
$("div[class='a']").siblings()选择class为’a’的div的所有兄弟元素
并集。把多个jQuery对象,连接到一起
$("选择器").add("选择器");示例:
$(".a").add("#b");选择所有的class为”a”和id为”b”的所有元素
给某元素追加指定的子元素
$("某元素").append("被添加的子元素");示例:
$("body").append($("<b>粗体</b>"));让body添加一个b标签
把指定元素追加为某元素的子元素
$("指定子元素").appendTo("某元素");示例:
$("<li>最后一个列表项</li>").appendTo("ul");把li标签添加为无序列表的最后一个子元素
给某元素添加一个最前面的子元素
$("指定子元素").prepend("某元素");示例:
$("ol").prepend("<li>第一个列表项</li>");给有序列表添加一个最前面的子li元素
把指定元素添加为某元素的第一个子元素
$("指定子元素").prependTo("某元素");示例:
$("<td>第一个单元格</td>").prependTo("tr:first");让td成为表格的第一行的第一个子元素
让某元素的下一个兄弟元素是指定元素 $(“某元素”).after(“指定元素”);
示例:
$("h3").after("<p>p标签</p>");给3级标题的后面添加一个p兄弟标签
让某元素的前一个兄弟元素是指定元素
$("某元素").before("指定元素");示例:
$("font").before("<b>粗体</b>");给font标签的前面添加一个b兄弟标签
让指定元素称为某元素的下一个兄弟元素
$("指定元素").insertAfter("某元素");示例:
$("<p>p标签</p>").insertAfter("h1");让p标签成为1级标题的下一个兄弟元素
让指定元素成为某元素的前一个兄弟元素
$("指定元素").insertBefore("某元素");示例:
$("<b>粗体</b>").insertBefore("font");让b标签成为font标签的前一个兄弟元素
如果append或者after、before的节点(元素)不是新创建的,而是通过DOM查询到的HTML页面中已经存在的节点,则append或after、before操作变为移动操作
把所有的某元素用指定元素替换
$("某元素").replaceWith("指定元素");示例:
$("h4").replaceWith("<p>p标签</p>");把所有的4级标题用p标签替换
让指定元素替换所有的某元素
$("指定元素").replaceAll("某元素");示例:
$("<font>字体</font>").replaceAll("a");用font标签替换所有的a标签
清空某元素的所有子元素
$("指定元素").empty();示例:
$("ul").empty();清空所有的无需列表(删除所有无序列表中的li元素)
删除某元素
$("指定元素").remove();示例:
$("font").remove();删除所有的font标签
有的标签有特定的含义,例如a标签会跳转到指定的href连接;submit按钮会提交表单数据到action指定的资源文件等。而这些行为就是标签的默认行为 标签的默认行为比设置的点击事件的级别要高。所以要取消标签的默认行为,就要在点击事件的最后写上return false; 这就是告诉含有特定含义的标签,不要指定其默认行为
示例:取消a标签的跳转功能
$("a").click(function(){ return true; });事件会按照DOM层次结构像水泡一样不断向上,直到根节点【body】。例如给父元素和子元素都设置了单击事件,这时如果单击子元素,则也会触发父元素的单击事件。 取消事件的冒泡就是在事件处理函数中返回false (return false;)
给指定元素添加一个或多个class属性
添加一个class属性:
addClass("class属性名");添加多个class属性:
addClass("class属性名1 class属性名2 ...");多个class之间用空格隔开
注意:class不要加点(.)
示例:
$("div").addClass("a");给所有的div添加一个class类:”a”
移除指定元素的一个或所有class属性
移除一个class属性:
removeClass("class属性名");移除多个class属性:
removeClass("class属性名1 class属性名2 ...");多个class之间用空格隔开 移除所有的class属性:
removeClass();不要写引号 什么都不传就是移除所有的class属性
示例:
$("span").removeClass("a b");移除所有span元素的【a和b】class属性
$("div").removeClass();移除所有div元素的所有的class属性
判断指定元素是否有指定的一个或多个class属性,如果有就移除;如果没有就添加 一个class属性:
toggleClass("class属性名");多个class属性:
toggleClass("class属性名1 class属性名2 ...");多个class之间用空格隔开
示例:
$("div").toggleClass("a b");添加或移除所有div的【a和b】class属性
判断指定元素是否包含指定的一个或多个class属性。返回值为true或false 一个class属性:
hasClass("class属性名");多个class属性:
hasClass("class属性名1 class属性名2 ...");多个class之间用空格隔开
注意:如果查询的结果有多个,则只会判断第一个元素
示例:
$("div").hasClass("a b");判断第1个div是否包含【a和b】class属性
隐藏指定的显示元素
$("指定元素").hide();注意: ⑴ 该方法对已经隐藏的元素无效果 ⑵ 调用该方法时,会将元素的display属性修改为none ⑶ 可以传入参数,以控制隐藏的速度。参数可以是可选的3个默认参数:”slow”,”normal”,”fast”,分别表示动画时长的毫秒数:600毫秒,400毫秒,200毫秒;也可以传入数值,代表指定的动画时长的毫秒数 ⑷ 如果匹配到的结果是多个,则会隐藏多个元素
示例:
$("div").hide("slow");隐藏所有的div,历时600毫秒
显示指定的隐藏元素
$("指定元素").show();注意: ⑴ 该方法使用的前提是指定元素已经被隐藏了,否则调用无效果 ⑵ 调用该方法时,会将元素的display属性修改为block ⑶ 可以传入参数,以控制显示的速度。参数可以是可选的3个默认参数:”slow”,”normal”,”fast”,分别表示动画时长的毫秒数:600毫秒,400毫秒,200毫秒;也可以传入数值,代表指定的动画时长的毫秒数 ⑷ 如果匹配到的结果是多个,则会显示多个元素
示例:
$("div").show(1000);显示所有的div,历时1000毫秒
判断指定元素是否可见。如果可见,则设置为隐藏;如果不可见,则设置为显示
$("指定元素").toggle();注意: ⑴ 可以传入参数,以控制显示或隐藏的速度。参数可以是可选的3个默认参数:”slow”,”normal”,”fast”,分别表示动画时长的毫秒数:600毫秒,400毫秒,200毫秒;也可以传入数值,代表指定的动画时长的毫秒数 ⑵ 如果匹配到的结果是多个,则会切换多个元素的显示或隐藏效果 ⑶ 此动画效果默认包含缩放、透明度和位移三个动画
示例:
$("div").toggle("slow");显示或隐藏所有的div,历时600毫秒
向上滑动指定元素【让指定的元素的高度(height)从设置的height变为0】
$("指定元素").slideUp();注意: ⑴ 该方法对已经向上滑动过的元素无效果 ⑵ 可以传入参数,以控制滑动的速度。参数可以是可选的3个默认参数:”slow”,”normal”,”fast”,分别表示动画时长的毫秒数:600毫秒,400毫秒,200毫秒;也可以传入数值,代表指定的动画时长的毫秒数 ⑶ 如果匹配到的结果是多个,则会切换多个元素的滑动效果
示例:
$("div").slideUp(800);向上滑动所有的div,历时800毫秒
向下滑动指定元素【让指定的元素的高度(height)从0变为设置的height】
$("指定元素").slideDown();注意: ⑴ 该方法使用的前提是指定元素已经向上滑动过了 ⑵ 可以传入参数,以控制滑动的速度。参数可以是可选的3个默认参数:”slow”,”normal”,”fast”,分别表示动画时长的毫秒数:600毫秒,400毫秒,200毫秒;也可以传入数值,代表指定的动画时长的毫秒数 ⑶ 如果匹配到的结果是多个,则会切换多个元素的滑动效果
示例:
$("div").slideDown("fast");向下滑动所有的div,历时200毫秒
向上或向下滑动指定元素【如果已经向上滑动过,则向下滑动;如果没有滑动或已经向下滑动过,则向上滑动】
$("指定元素").slideToggle();注意: ⑴ 可以传入参数,以控制滑动的速度。参数可以是可选的3个默认参数:”slow”,”normal”,”fast”,分别表示动画时长的毫秒数:600毫秒,400毫秒,200毫秒;也可以传入数值,代表指定的动画时长的毫秒数 ⑵ 如果匹配到的结果是多个,则会切换多个元素的滑动效果
示例:
$("div").slideToggle("fast");向上或向下滑动所有的div,历时200毫秒
让指定元素淡出【透明度从1变为0】
$("指定元素").fadeOut();注意: ⑴ 可以传入参数,以控制淡出效果的速度。参数可以是可选的3个默认参数:”slow”,”normal”,”fast”,分别表示动画时长的毫秒数:600毫秒,400毫秒,200毫秒;也可以传入数值,代表指定的动画时长的毫秒数 ⑵ 如果匹配到的结果是多个,则会切换多个元素的淡出效果
示例:
$("div").fadeOut(300);让所有的div淡出,历时300毫秒
让指定元素淡入【透明度从0变为1】
$("指定元素").fadeIn();注意: ⑴ 该方法对没有淡出的元素无效果 ⑵ 可以传入参数,以控制淡入效果的速度。参数可以是可选的3个默认参数:”slow”,”normal”,”fast”,分别表示动画时长的毫秒数:600毫秒,400毫秒,200毫秒;也可以传入数值,代表指定的动画时长的毫秒数 ⑶ 如果匹配到的结果是多个,则会切换多个元素的淡入效果
示例:
$("div").fadeIn(700);让所有的div淡入,历时700毫秒
让指定元素淡入到指定透明度或淡出到指定透明度
$("指定元素")..fadeToggle(速度, 指定透明度);注意: ⑴ 可以传入参数,以控制淡入或淡出效果的速度。参数可以是可选的3个默认参数:”slow”,”normal”,”fast”,分别表示动画时长的毫秒数:600毫秒,400毫秒,200毫秒;也可以传入数值,代表指定的动画时长的毫秒数 ⑵ 如果匹配到的结果是多个,则会切换多个元素的淡入或淡出效果 ⑶ 透明度的变化为:完全透明【0】,完全不透明【1】 ⑷ 如果当前透明度小于要指定的透明度,则是淡入;如果当前透明度大于要指定的透明度,则是淡出
示例:
$("div").fadeToggle(500, 0.5);让所有的div淡入或淡出到透明度为0.5,历时500毫秒
让指定元素淡入或淡出
$("指定元素").fadeToggle();注意: ⑴ 可以传入参数,以控制淡入或淡出效果的速度。参数可以是可选的3个默认参数:”slow”,”normal”,”fast”,分别表示动画时长的毫秒数:600毫秒,400毫秒,200毫秒;也可以传入数值,代表指定的动画时长的毫秒数 ⑵ 如果匹配到的结果是多个,则会切换多个元素的淡入或淡出效果 ⑶ 透明度的变化为:完全透明【0】,完全不透明【1】
示例:
$("div").fadeToggle("slow");让所有的div淡入或淡出,历时600毫秒
给指定元素设置单击事件。需要传入一个响应函数
$("指定元素").click(function(){ // 单击事件 });示例:
$("a").click(function(){ alert(1); return false; // 取消默认行为 });给所有的a标签设置弹框的单击事件
给指定元素设置鼠标移入事件。需要传入一个响应函数
$("指定元素").click(function(){ // 鼠标移入事件 });给指定元素设置鼠标移出事件。需要传入一个响应函数
$("指定元素").click(function(){ // 鼠标移出事件 });给指定元素设置鼠标移动事件。需要传入一个响应函数
$("指定元素").click(function(){ // 鼠标移动事件 });Tips:当事件被触发时,浏览器会创建一个事件对象。其封装了如鼠标的坐标信息,或者是键盘的按键信息等。在调用事件处理函数时,会将事件对象传递给事件的响应函数。如果想获取响应对象,就需要给响应函数传递一个参数,来代表该对象
$("指定元素").click(function(event){ // 鼠标移动事件 });这里的event就是响应对象
示例:
$("div").mousemove(function(event){ var left = event.clientX; // 获取鼠标指针的水平坐标 var top = event.clientY; // 获取鼠标指针的垂直坐标 $("font").text("left:" + left + ", top:" + top); });获取鼠标指针的水平和垂直坐标,并将其作为font元素的内容
为每个匹配元素的特定事件绑定事件处理函数。需要传入两个参数,第一个为事件类型的字符串,比如”click”或”submit”。可以写多个事件,用空格隔开。第二个为响应函数
$("指定元素").bind("事件名称", function(){ // 事件响应操作 });示例:
$("div").bind("mouseenter mouseleave", function(){ $(this).fadeToggle(); });鼠标移入和移出div元素,对应地淡入和淡出div
给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效。 使用场景:可以给已经存在的指定元素和使用DOM操作添加进来的指定元素,都绑定上相应的事件
使用示例:
$("a").live("click", function(){ alert(1); return false; }); $("<a href='#'>超链接</a>").appendTo("body");通过live函数设置的a标签的单击事件,不仅可以让页面上已有的a标签绑定上单击事件,同时通过JS添加到页面中的元素也有了单击事件。
src(source):引入的资源。如果没有引入可能会造成页面显示出问题 href(HyperText Reference):引用的资源。即时不存在,页面也可以显示
window.onload = function(){}; 会等所有的页面加载完成后,浏览器才会调用此函数。因为它会考虑src引入的资源
$(function(){}); 当前页面中的内容加载完成后,此函数就会被浏览器调用。它不会考虑src引入的资源