jQuery的基本使用
程序员文章站
2022-07-02 18:07:32
一、jQuery简介 jQuery是一个快速、简洁的JavaScript框架，它封装了JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口； ......
一、jQuery简介
jQuery是一个快速、简洁的JavaScript框架，它封装了JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。
在HTML中使用jQuery时，只需像导入其他JavaScript文件一样，导入一下它就行。
# 在HTML中导入导入jQuery <script src="jquery-1.12.4.js"></script>
注：本篇文章只介绍jQuery的常用方法，若需详细了解，请参阅jQuery中文文档。
二、使用jQuery查找HTML元素
同使用JavaScript操作HTML文档一样，使用jQuery操作HTML文档也需找到某个具体元素，然后再对其操作。但是使用jQuery查找HTML中的某个元素，便比使用DOM简单了许多，如果你之前熟悉CSS，那么使用jQuery对你而言，将更加容易。
jQuery的选择机制构建于CSS的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了JavaScript中获取页面元素的方式。
# 基本选择器
$('#id'); ---- 使用id选择HTML元素
$('.c1'); ---- 使用class选择HTML元素
$('div'); ---- 使用标签名选择HTML元素
$('#id,span,.c1'); ---- 使用组合选择器，选择多个HTML元素
# 层级选择器
$("form input"); ---- 找到form下所有的input标签
$("form > input"); ---- 找到form下的所有的子级input标签
$('label + input'); --- 匹配跟在所有 label 后面的 input 元素（同级标签）
$("form ~ input"); ---- 所有与form同级的input标签
注： 使用上面的选择器，常常会选中多个HTML元素，所以我们需要筛选器帮我们过滤出我们需要做操作的某一个具体元素。
# 基本筛选器
:first
$('div:first'); --- 获取匹配的第一个div标签
:last
$('li:last'); --- 获取匹配的最后一个li标签
:eq(index)
$('input:eq(3)'); --- 获取匹配的第3个input标签（从0开始）
# 根据属性筛选
<input type='text'/>
<input type='text'/>
<input type='file'/>
<input type='password'/>
$('input[type="text"]'); ---- 匹配含有type="text"属性的input标签
$(':text'); ---- 匹配所有的单行文本框
# jQuery常用筛选器
$('span').next(); --- 当前标签的下一个标签（同级）
$('span').nextAll(); --- 查找当前元素之后所有的同辈元素
$('span').nextUntil(); --- 查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止
$('div').prev(); --- 当前标签的上一个标签（同级）
$('div').prevAll(); --- 查找当前元素之前所有的同辈元素
$('div').prevUntil(); --- 查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止
$('a').parent(); --- 当前标签的父标签（一个）
$('a').parents(); --- 取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。
$('a').parentUnstil(); --- 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止
$('p').children(); --- 当前标签的子标签（多个）
$('p').siblings(); --- 当前标签的兄弟标签（多个）
$('p').find('#i1'); --- 在当前标签的子子孙孙标签中id=i1的标签
# 可以使用下面的.eq(), .first(), .last()代替上面的三个基本筛选器
$("p:eq(1)"); --- 第一个p元素
$('p').eq(0); --- 第0个p元素
$('p').first(); --- 第一个p元素
$('p').last(); --- 最后一个p元素
$('div').hasClass("c1"); --- 检查当前元素是否含有类c1 有true， 无false
三、使用jQuery操作HTML元素
使用jQuery方法查找的元素，返回的结果都是jQuery对象，对于jQuery对象的操作，jQuery有自己的方法。当然，我们可以将jQuery对象转换成为DOM对象来使用DOM中的方法，同样也可以将DOM对象转换为jQuery对象来使用jQuery中的方法。
#DOM对象==>jQuery对象
tag = document.getElementById('i1'); $(tag);
# jQuery对象==>DOM对象
# jQuery匹配到一个元素
object = $('#i1');
mytag = object[0];
# jQuery匹配到多个元素
object = $('div');
tag_0 = object[0];
tag_1 = object[1];
tag_2 = object[2];
关于DOM的使用，请参阅：http://www.cnblogs.com/God-Li/p/8535677.html
HTML元素文本内容的操作：
$(this).text(); --- 获取当前标签的文本内容，将标签过滤掉
$(this).text("hello"); --- 设置文本内容，如果写"<a>123</a>"对标签不解析，会将a标签当做普通文本
$(this).html(); --- 获取当前标签的HTML
$(this).html('<a>1</a>'); ---- 内容含有标签时，应用此方法设置
$(this).val(); ---- 获取标签的val值，主要用于input类标签
$(this).val("string"); ----- 设置标签的val值
HTML元素属性操作：
$(this).attr('n') --- 获取属性n的值
$(this).attr('n', 'v') --- 自定义属性n，为其设置值v
$(this).removeAttr('n') --- 将属性n移除
<input type="checkbox" id="i1" />
# 专门用于checkbox, radio
$(this).prop('checked')
$(this).prop('checked', true)
HTML元素样式操作：
# 整体样式操作
$('#i1').addClass('c1') --- 为id=i1的标签加上c1中的样式
$('#i1').removeClass('c2') --- 为id=i1的标签移除c2中的样式
$('#i1').toggleClass('c3') --- 检查id为i1的标签是否具有样式c3，没有为其添加，有将其移除
# CSS属性具体操作
$('#i2').css('color', 'white');
$('#i2').css(''opacity'', 0.6');
$(tag).css('fontSize', '30px');
HTML文档处理：
append
$("div").append("<span>Hello</span>"); --- 向所有div标签追加一个尾部的子标签<span>Hello</span>
prepend
$("p").prepend("<a>Hello</a>"); --- 向所有p标签插入一个头部的子标签<a>Hello</a>
after
$("div").after("<a>Hello</a>"); ----- 在所有div标签后面添加一个<a>Hello</a>(同级)
befor
$("p").after("<a>Hello</a>"); ----- 在所有p标签前面添加一个<a>Hello</a>(同级)
remove
$("p").remove(); --- 移除整个文档中的p标签
empty
$("p").empty(); --- 把所有p便签的子元素（包括文本节点）删除
clone
$("#i1").clone(); ---- 复制id=i1的标签
使用jQuery对标签绑定事件
# 第一种绑定方式
$('c1').click(function() {
console.log('123')
})
# 第二种绑定方式与解绑
$('.c1').bind('click', function(){
})
$('.c1').unbind('click', function(){
})
# 第三种方式
$('.c1').delegate('click', function(){
})
$('.c1').undelegate('click', function(){
})
# 第四种方式
$('.c1').on('click', function(){
})
$('.c1').off('click', function(){
})
#组织事件发生,在函数末尾加上
- return false;
jQuery的插件扩展：使用jQuery的插件扩展，可以为jQuery提供一些原本没有的方法，这是jQuery的核心机制。
# 第一种扩展方式
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
#调用：
$.min(1, 2);
$.max(3, 4);
# 第二种扩展方式
jQuery.fn.extend({
check: function() {
return this.each(function() { this.checked = true; });
},
uncheck: function() {
return this.each(function() { this.checked = false; });
}
});
#调用：
$("input[type=checkbox]").check();
$("input[type=radio]").uncheck();
jQuery部分代码的自动执行
# 等待页面加载完成下面的对':sbumit'事件的绑定才能完成
$(':submit').click(function () {
alert("hello");
});
# 页面框架加载完毕下面的代码就立即执行
$(function () {
$(':submit').click(function () {
alert("hello");
});
});
#第二种方式主要用于一些对标签事件的绑定，有时当页面存在大量的图片，一时很难加载完毕，如果使用的是第一种方式，图片没加载完成前，绑定事件的这些标签不可用
HTML元素位置的操作
$("div.demo").scrollTop(); ---- 获取匹配元素相对滚动条顶部的偏移
$("div.demo").scrollTop(300); ----- ---- 设置匹配元素相对滚动条顶部的偏移
$(window).scrollTop() ----- 获取当前位置到顶部的位置
$(window).scrollTop(0) ------ 设置当前位置到顶部的位置，传0即回到顶部
$(this).scrolleft([val]) ----- 左部，应用同上
$(this).offset() ---- 获取匹配元素在当前视口的相对偏移
$(this).offset({ top: 10, left: 30 }); ---- 单位为px
$(this).position() ---- 获取匹配元素相对父元素的偏移。
$("p").height(); ---- 获取第一段的高
$("p").height(20); ---- 把所有段落的高设为 20:
$("p").width(); ---- 获取第一段的宽
$("p").width(20); ---- 把所有段落的宽度设为 20:
jQuery对多个元素的循环：当我们要使用jQuery操作多个元素时，比如实现复选框的全选功能，就需要对多个同一类型的元素进行操作。
$('#t1 :checkbox').each(function (k) {
//k是当前元素的索引
// this代指当前循环的元素，是DOM对象
alert(123);
};
四、使用jQuery完成一些常用示例
例一：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8 <input type="button" value="全选" onclick="checkAll();"/>
9 <input type="button" value="反选" onclick="reverseAll()"/>
10 <input type="button" value="取消" onclick="cancelAll();"/>
11 <table id="t1" border="1">
12 <thead>
13 <tr>
14 <th>选项</th>
15 <th>host</th>
16 <th>port</th>
17 </tr>
18 </thead>
19 <tbody>
20 <tr>
21 <td><input type="checkbox"></td>
22 <td>1.1.1.1</td>
23 <td>22</td>
24 </tr>
25 <tr>
26 <td><input type="checkbox"></td>
27 <td>1.1.1.1</td>
28 <td>22</td>
29 </tr>
30 <tr>
31 <td><input type="checkbox"></td>
32 <td>1.1.1.1</td>
33 <td>22</td>
34 </tr>
35 <tr>
36 <td><input type="checkbox"></td>
37 <td>1.1.1.1</td>
38 <td>22</td>
39 </tr>
40 </tbody>
41
42 <script src="jquery-1.12.4.js"></script>
43 <script>
44 function checkAll() {
45 $('#t1 :checkbox').prop('checked', true);
46 }
47
48 function cancelAll() {
49 $('#t1 :checkbox').prop('checked', false);
50 }
51
52 function reverseAll() {
53 $('#t1 :checkbox').each(function () {
54 // this代指当前循环的元素，是DOM对象
55 // 第一种方式
56 // if (this.checked) {
57 // this.checked = false;
58 // } else {
59 // this.checked = true;
60 // }
61
62 // 第二种方式
63 // if ($(this).prop('checked')) {
64 // $(this).prop('checked', false);
65 // } else {
66 // $(this).prop('checked', true);
67 // }
68
69 // 三元运算: var v = 条件 ? v1 : v2
70 // var v = $(this).prop('checked') ? false : true;
71 // $(this).prop('checked' , v);
72
73
74 $(this).prop('checked', $(this).prop('checked') ? false : true);
75 })
76
77 }
78 </script>
79 </table>
80 </body>
81 </html>
例二：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .item {
8 margin-bottom: 15px;
9 }
10
11 .menu {
12 background-color: blueviolet;
13 height: 30px;
14 line-height: 30px;
15 font-weight: bolder;
16 }
17
18 .hide {
19 display: none;
20 }
21
22 .content {
23 background-color: lightseagreen;
24 }
25 </style>
26 </head>
27 <body>
28 <div style="height: 150px;"></div>
29 <div style="width: 350px; border: 1px solid red;">
30 <div class="item">
31 <div id="i1" class="menu">菜单1</div>
32 <div class="content">
33 <div>内容1</div>
34 <div>内容1</div>
35 <div>内容1</div>
36 <div>内容1</div>
37 </div>
38 </div>
39 <div class='item'>
40 <div id="i2" class="menu">菜单2</div>
41 <div class="content hide">
42 <div>内容2</div>
43 <div>内容2</div>
44 <div>内容2</div>
45 <div>内容2</div>
46 </div>
47 </div>
48 <div class='item'>
49 <div id="i3" class="menu">菜单3</div>
50 <div class="content hide">
51 <div>内容3</div>
52 <div>内容3</div>
53 <div>内容3</div>
54 <div>内容3</div>
55 </div>
56 </div>
57 <div class='item'>
58 <div id="i4" class="menu">菜单4</div>
59 <div class="content hide">
60 <div>内容4</div>
61 <div>内容4</div>
62 <div>内容4</div>
63 <div>内容4</div>
64 </div>
65 </div>
66 </div>
67 <script src="jquery-1.12.4.js"></script>
68 <script>
69 $(".menu").click(function () {
70 // $(this).next().removeClass("hide");
71 // $(this).parent().siblings().find(".content").addClass("hide");
72 $(this).next().removeClass("hide").parent().siblings().find(".content").addClass("hide");
73 })
74 </script>
75 </body>
76 </html>
例三：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6
7 <style>
8 .hide{
9 display: none;
10 }
11 .menu{
12 height: 38px;
13 background-color: #eeeeee;
14 line-height: 38px;
15 }
16 .menu .menu-item{
17 float: left;
18 border-right: 1px solid red;
19 padding: 0 5px;
20 cursor: pointer;
21 }
22 .active{
23 background-color: brown;
24 }
25 .content{
26 min-height: 150px;
27 border: 1px solid #eeeeee;
28 }
29 </style>
30 </head>
31 <body>
32 <div style="height: 150px; width: 500px; margin: 0 auto">
33 <div class="menu">
34 <div class="menu-item active" a="1">菜单一</div>
35 <div class="menu-item" a="2">菜单二</div>
36 <div class="menu-item" a="3">菜单三</div>
37 </div>
38
39 <div class="content">
40 <div b="1">内容一</div>
41 <div b="2" class="hide">内容二</div>
42 <div b="3" class="hide">内容三</div>
43 </div>
44
45 <script src="jquery-1.12.4.js"></script>
46 <script>
47 $(".menu .menu-item").click(function () {
48 $(this).addClass("active").siblings().removeClass("active");
49 var target = $(this).attr("a");
50 $(".content").children("[b='" + target + "']").removeClass("hide").siblings().addClass("hide");
51 })
52 </script>
53 </div>
54 </body>
55 </html>
例四：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6
7 <style>
8 .modle{
9 position: fixed;
10 background: #dddddd;
11 height: 100px;
12 width: 400px;
13 text-align: center;
14 margin: 15% 50%;
15 left: -200px;
16 z-index: 6;
17 }
18 .shadow{
19 position: fixed;
20 background: black;
21 top: 0;
22 right: 0;
23 bottom: 0;
24 left: 0;
25 opacity: 0.5;
26 z-index: 5;
27 }
28
29 .hidden{
30 display: none;
31 }
32 </style>
33 </head>
34 <body>
35 <p><input type="button" value="添加" onclick="addElement();"></p>
36
37 <div class="modle hidden">
38 <label for="host">host:</label>
39 <input id="host" type="text" name="host"/>
40 <label for="host">host:</label>
41 <input id="port" type="type" name="port"/>
42 <p>
43 <input type="button" value="confirm">
44 <input type="button" value="cancel" onclick="cancelModel();">
45 </p>
46 </div>
47
48 <div class="shadow hidden"></div>
49
50 <table id="t1" border="1" style="margin-top: 10px;">
51 <thead>
52 <tr>
53 <th>host</th>
54 <th>port</th>
55 <th>operate</th>
56 </tr>
57 </thead>
58 <tbody>
59 <tr>
60 <td>1.1.1.11</td>
61 <td>80</td>
62 <td><a class="edit">编辑</a> | <a class="delet">删除</a></td>
63 </tr>
64 <tr>
65 <td>1.1.1.12</td>
66 <td>80</td>
67 <td><a class="edit">编辑</a> | <a class="delet">删除</a></td>
68 </tr>
69 <tr>
70 <td>1.1.1.13</td>
71 <td>80</td>
72 <td><a class="edit">编辑</a> | <a class="delet">删除</a></td>
73 </tr>
74 <tr>
75 <td>1.1.1.14</td>
76 <td>80</td>
77 <td><a class="edit">编辑</a> | <a class="delet">删除</a></td>
78 </tr>
79 </tbody>
80 </table>
81 <script src="jquery-1.12.4.js"></script>
82 <script>
83 function addElement() {
84 $("div[class='modle hidden'], div[class='shadow hidden']").removeClass('hidden');
85 }
86 function cancelModel() {
87 $("div[class='modle'] input[name='host'],input[name='port']").val("");
88 $("div[class='modle'], div[class='shadow']").addClass('hidden');
89 }
90
91 $('#t1 tbody').delegate('a[class="edit"]', 'click', function () {
92 addElement();
93 var tags = $(this).parent().prevAll();
94 var port = $(tags[0]).text();
95 var host = $(tags[1]).text();
96 $('div[class="modle"] input[name="host"]').val(host);
97 $('div[class="modle"] input[name="port"]').val(port);
98 });
99
100 $('.modle input[value=confirm]').click(function () {
101
102 var host = $('.modle input[name="host"]').val();
103 var port = $('.modle input[name="port"]').val();
104 var temp_tr = $('#t1 tbody tr').first().clone();
105 temp_tr.children().first().text(host).next().text(port);
106 $('#t1 tbody').append(temp_tr[0]);
107 $("div[class='modle'], div[class='shadow']").addClass('hidden');
108 });
109
110 $('#t1 tbody').delegate('a[class="delet"]', 'click', function () {
111 $(this).parent().parent().remove();
112 });
113 </script>
114 </body>
115 </html>
例五：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .container{
8 padding: 50px;
9 border: 1px solid #eeeeee;
10 }
11 .container .item{
12 position: relative;
13 width: 30px;
14 cursor: pointer;
15 }
16 </style>
17 </head>
18 <body>
19 <div class="container">
20 <div class="item">
21 <span>赞</span>
22 </div>
23 </div>
24 <div class="container">
25 <div class="item">
26 <span>赞</span>
27 </div>
28 </div>
29 <div class="container">
30 <div class="item">
31 <span>赞</span>
32 </div>
33 </div>
34 <div class="container">
35 <div class="item">
36 <span>赞</span>
37 </div>
38 </div>
39
40 <script src="jquery-1.12.4.js"></script>
41 <script>
42 $(".item").click(function () {
43 addFavor(this);
44 });
45
46 function addFavor(self) {
47 var fontSize = 20;
48 var top = 0;
49 var right = 0;
50 var opacity = 1;
51
52 var tag = document.createElement('span');
53 $(tag).text('+1');
54 $(tag).css('color', 'green');
55 $(tag).css('position', 'absolute');
56 $(tag).css('fontSize', fontSize + "px");
57 $(tag).css('top', top + "px");
58 $(tag).css('right', right + "px");
59 $(tag).css('opacity', opacity);
60 $(self).append(tag);
61
62 obj = setInterval(function () {
63 fontSize = fontSize + 10;
64 top = top - 10;
65 right = right - 10;
66 opacity = opacity - 0.1;
67
68 $(tag).css('fontSize', fontSize + "px");
69 $(tag).css('top', top + "px");
70 $(tag).css('right', right + "px");
71 $(tag).css('opacity', opacity);
72 if (opacity < 0) {
73 clearInterval(obj);
74 $(tag).remove();
75 }
76 }, 40);
77 }
78 </script>
79 </body>
80 </html>
例六：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6
7 <style>
8 .error{
9 color: red;
10 }
11 </style>
12 </head>
13 <body>
14 <div></div>
15 <form id="f1" action="s5.html" method="post">
16 <div><input name='n1' tex="用户名" type="text" placeholder="用户名"/></div>
17 <div><input name='n2' tex="密码" type="password" placeholder="密码"/></div>
18 <div><input name='n3' tex="邮箱" type="email" placeholder="邮箱"/></div>
19 <div><input name='n1' tex="端口" type="number" placeholder="端口"/></div>
20 <div><input name='n1' tex="IP" type="text" placeholder="IP"/></div>
21
22 <input type="submit" />
23 </form>
24
25 <script src="jquery-1.12.4.js"></script>
26 <script>
27
28 // 页面框架加载完毕执行
29 $(function () {
30 // 页面完全加载完毕自动执行
31
32 $(':submit').click(function () {
33 $('.error').remove();
34 var falg = true;
35 $('#f1').find('input[type="text"],input[type="password"],input[type="email"],input[type="number"]').each(function () {
36 var v = $(this).val();
37 var n = $(this).attr('tex');
38 if (v.length <=0) {
39 flag = false;
40 var tag = document.createElement('span');
41 tag.className = 'error';
42 tag.innerHTML = n + '必填';
43 $(this).after(tag);
44 }
45 });
46 return false;
47 });
48
49 });
50
51 </script>
52 </body>
53 </html>