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