网页编程之jQuery常用知识点整理
备注:本文的知识点针对后端编程人员的需求进行整理,所涉知识较为基础。
1.1 jQuery是什么
jQuery是一个JavaScript代码库,极大的简化了JavaScript编程。
1.2 如何在网页中添加jQuery
-
从jquery.com下载jQuery库
-
从CDN中载入jQuery
-
jQuery有两个版本
-
Production version :用于实际的网站中,精简了注释和源码,体积小。
-
Development version:用于测试和开发,包含注释和源码,体积大。
-
jQuery 库是一个 JavaScript 文件,可以使用 HTML 的 script标签引用它:
<head>
<script src="jquery-1.10.2.min.js"></script>
</head>
1.3 jQuery语法
通过jQuery语法,可以查询HTML元素,并对其执行一些操作。
1.3.1 基础语法
jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。
基础语法: $(selector).action()
- 美元符号定义jquery
- 选择符(selector)用于查询和查找HTML元素
- 通过action()方法对元素进行操作,这里的action()方法是泛指,并非实际方法。
1.3.2 文档就绪事件
所有 jQuery 函数位于一个 document ready 函数中:
$(document).ready(function(){
// jQuery 代码...
});
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码,即在 DOM 加载完成后才可以对 DOM 进行操作。
如果在文档没有完全加载之前就运行函数,操作可能失败。
jQuery 入口函数与 JavaScript 入口函数的区别:
-
jQuery的入口函数是在HTML所有标签(DOM)都加载之后就会去执行。
-
JavaScript的window.onload事件是等到所有内容包括外部图片之类的文件加载完毕
才去执行。
1.4 jQuery选择器
jQuery 选择器对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头:$()。
元素选择器:通过元素名选取元素
获取p标签元素
$("p")
#id选择器:通过元素的id属性获取元素
获取id为test的元素
$("#test")
.class选择器:获取指定的class元素
获取class为test的元素
$(".test")
其他选择器:
选择器名 | 选择器描述 |
---|---|
$("*") | 选取所有元素 |
$(this) | 选取当前 HTML 元素 |
$(“p.intro”) | 选取 class 为 intro 的 p标签元素 |
$(“p:first”) | 选取第一个p元素 |
$(“ul li”) | 选取所有ul元素下的li元素 |
$(“ul li:first”) | 选取第一个ul元素下的第一个li元素 |
$(“ul li:first-child”) | 选取每个ul元素的第一个li元素 |
$("[href]") | 选取带有 href 属性的元素 |
$(“a[target=’_blank’]”) | 选取所有 target 属性值等于 “_blank” 的 a元素 |
$(":button") | 选取所有 type=“button” 的 input元素 和 button元素 |
$(“tr:even”) | 选取偶数位置的 tr 元素 |
(“tr:odd”) | 选取奇数位置的 tr元素 |
1.5 jQuery事件
jQuery是为事件特别设计的。
1.5.1 什么是事件
页面对不同访问者的响应叫做事件。
事件处理程序指的是当HTML中发生某些事件时所调用的方法,比如:
-
在元素上移动鼠标
-
单机某个按钮
-
按下键盘某个按键
在事件中经常使用术语"触发"(或"激发")例如: “按下按键时触发 keypress 事件”。
常见DOM事件:
鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
---|---|---|---|
click | keypress | submit | load |
dblclick | keydown | change | resize |
mouseenter | keyup | focus | scroll |
mouseleave | blur | unload | |
hover |
1.5.2 jQuery事件方法语法
在 jQuery 中,大多数 DOM 事件都有一个等效的 jQuery 方法。
页面中指定一个点击事件:
$("p").事件();
如果事件触发后需要执行操作,可以这样写:
$("p").事件(function(){
// 事件触发后执行的代码!!
});
1.5.3 jQuery事件绑定
bind()方法
bind() 方法向被选元素添加一个或多个事件处理程序,以及当事件发生时运行的函数。
语法:
$(selector).bind(event,function)
示例:
$("p").bind("click",function(){
alert("这个元素被单击。");
});
在上述示例中,当鼠标单机p元素时就会触发函数,弹出弹窗。
one()方法
one() 方法为被选元素添加一个或多个事件处理程序,并规定当事件发生时运行的函数。
当使用 one() 方法时,每个元素只能运行一次事件处理程序函数。
语法:
$(selector).one(event,function)
示例:
$("p").one("click",function(){
alert("这个元素被单击。");
});
在上述示例中,当鼠标单机p元素时就会触发函数,弹出弹窗。
但是这个事件仅可触发一次,第二次点击时,将会失效。
1.6 jQuery 添加元素
通过 jQuery,可以很容易地添加新元素/内容。
1.6.1 jQuery append()方法
jQuery append() 方法在被选元素的结尾插入内容(仍然在元素的内部)。
$("p").append("追加文本");
1.6.2 jQuery prepend()方法
jQuery prepend() 方法在被选元素的开头插入内容(仍然在元素的内部)
$("p").prepend("在开头追加文本");
1.6.3 通过append()和prepend()添加多个元素
append() 和 prepend() 方法能够通过参数接收无限数量的新元素。
下面是使用append()方法向body标签末尾添加多个文本的示例
同样的也可以使用prepend()方法向body标签头部添加多个文本
function appendText()
{
var txt1="<p>文本。</p>"; // 使用 HTML 标签创建文本
var txt2=$("<p></p>").text("文本。"); // 使用 jQuery 创建文本
var txt3=document.createElement("p");
txt3.innerHTML="文本。"; // 使用 DOM 创建文本 text with DOM
$("body").append(txt1,txt2,txt3); // 追加新元素
}
1.6.4 jQuery after()和before()方法
jQuery after() 方法在被选元素之后插入内容。
jQuery before() 方法在被选元素之前插入内容。
$("img").after("在后面添加文本");
$("img").before("在前面添加文本");
1.6.5 通过after()和before()添加多个元素
after() 和 before() 方法能够通过参数接收无限数量的新元素。
function afterText()
{
var txt1="<b>I </b>"; // 使用 HTML 创建元素
var txt2=$("<i></i>").text("love "); // 使用 jQuery 创建元素
var txt3=document.createElement("big"); // 使用 DOM 创建元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3); // 在图片后添加文本
}
1.7 jQuery 获取或设置内容和属性
Query 拥有可操作 HTML 元素和属性的强大方法。
1.7.1 获得内容 -text()、html()、val()
- text()-设置或返回所选元素的文本内容,类似于js中的innnertext
- html()-设置或返回所选元素的内容(包括HTML标记),类似于js中的innnerhtml
- val()-设置或返回表单字段的值,类似于js中的value
下面是一组示例:
$("#test").text());
$("#test").html());
$("#test").val());
1.7.2 获取属性 -attr()
jQuery attr() 方法用于获取属性值。
attr(“param”)方法中的参数是元素的属性。
如果没有相应的属性,则返回undefined。
比如获得id为test的超链接标签的href属性:
$("#test").attr("href");
与此方法比较类似的一个方法是**prop()**方法:
-
对于 HTML 元素本身就带有的固有属性,在处理时,使用 prop 方法。
-
对于 HTML 元素我们自己自定义的 DOM 属性,在处理时,使用 attr 方法。
-
具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop()方法。
使用prop()方法时,如果没有相应的属性,返回空字符串“”。
1.7.3 设置内容和属性
对于text()、html()、val()三个方法,只需给定相应的参数即可设置或改变元素的值。
$("#test1").text("Hello world!");
$("#test2").html("<b>Hello world!</b>");
$("#test3").val("RUNOOB");
使用attr()也可以设置和改变元素的属性。
只需在参数中给定属性和要改变的值即可。
例如:将id为test的超链接标签的href属性设置为百度的链接。
$("#test").attr("href","http://www.baidu.com");
1.8 jQuery删除元素
通过 jQuery,可以很容易地删除已有的 HTML 元素。
1.8.1 删除元素和内容
如果需要删除元素和内容,jQuery中提供了两个方法:
-
remove() - 删除被选元素本身及其下的所有子元素
$("#div1").remove();
-
empty() - 仅删除被选元素的子元素
$("#div1").empty();
1.8.2 过滤需要被删除的元素
jQuery remove() 方法也可接受一个参数,允许对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法。
下面这个示例将移除所有id为div1下的class为italic的p元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1>p").remove(".italic");
});
});
</script>
</head>
<body>
<div id="div1">
<p>这是一个段落。</p>
<p class="italic"><i>这是另外一个段落。</i></p>
<p class="italic"><i>这是另外一个段落。</i></p>
<button>移除所有 class="italic" 的 p 元素。</button>
</div>
</body>
</html>
需要注意的是,这样的写法是错误的:
$("#div1").remove(".italic");
子元素的过滤器需要被包含在父元素的过滤器当中
这种写法父元素首先会选出id为div1的元素
但这些元素中并没有包含class为italic的元素。
1.9获取并设置CSS类
通过 jQuery,可以很容易地对 CSS 元素进行操作。
jQuery 拥有若干进行 CSS 操作的方法。
1.9.1 jQuery addClass()方法
该方法用于向被选元素添加一个或者多个类(class属性),从而为其添加已指定的css样式。
.important{
height:100px;
width:100px;
}
$("div").addClass("important");
在上述示例中,我们实现规定好了一种样式
通过改变div元素的class属性,为其指定了样式。
1.9.2 jQuery removeClass()方法
该方法用于从被选元素删除一个或多个类(class属性),从而删除已匹配的css样式。
$("div").removeClass("important");
1.9.3 jQuery toggleClass()方法
顾名思义,toggle是开关、切换的意思。
该方法用于对被选元素进行添加或删除类的切换操作。
$("div").toggleClass("important");
如果被选择的元素没有class属性,则为其添加class=“important”
如果被选择的元素已经有了class=”implortant“属性,则将其删除
1.9.4 jQuery css()方法
css() 方法设置或返回被选元素的一个或多个样式属性。
如需返回指定的 CSS 属性的值,则需给定指定的属性作为参数。
获取p元素的背景颜色:
$("p").css("background-color");
如果在css()方法中指定了两个参数,则可以设置该属性。
第一个参数为属性名,第二个参数为属性值。
设置p元素的背景颜色为黄色:
$("p").css("background-color","yellow");
当需要设置多个css属性时,可以使用json,语法格式如下:
css({“propertyname”:“value”,“propertyname”:“value”,…});
示例:
$("p").css({"background-color":"yellow","font-size":"200%"});
上述示例中,为所有p元素 添加了背景颜色和字体的样式。
1.10 jQuery 替换元素
有两个常用的替换元素的方法,replaceWith() replaceAll()
1.10.1 jQuery replaceWith()方法
replaceWith() 方法把被选元素替换为新的内容。
语法:
$(selector).replaceWith(*content,*function(index))
说明:
-
content:必需参数。规定要插入的内容(可以包含html标签)
- 可能的值:
- HTML元素
- jQuery对象
- DOM元素
- 可能的值:
-
function(index):可选参数。规定返回替换内容的函数。
- index:返回集合中元素的index位置。
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>replaceWith</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
//将第一个P元素内的文本替换为HelloWorld。
$("p:first").replaceWith("Hello world!");
//如果在参数内加上HTML标签也是可以的。
//$("p:first").replaceWith("<b>Hello world!</b>");
//这样的话气体会加粗
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>使用新文本替换第一个P元素</button>
</body>
</html>
1.10.2 jQuery replaceAll方法
replaceAll() 方法把被选元素替换为新的 HTML 元素。
语法:
$(content).replaceAll(selector)
说明:
- content:必需。规定要插入的内容(必须包含HTML标签)。
- selector:必需。规定哪一个元素将被替换。
- 通过语法可以看出replaceAll方法实际是将HTML转成
了jQuery对象然后替换了被选择的内容,所以其必须
包含HTML标签,而不能是单纯的文本。
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>replaceAll</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
//这里一定不能缺少HTML标签,否则无法替换。
$("<span><b>Hello world!</b></span>").replaceAll("p:last");
});
});
</script>
</head>
<body>
<button>用一个span元素替换最后一个p元素</button><br>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
</html>