一、jQuer介绍及安装
1、jQuery介绍
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架),极大简化了JavaScript 编程。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
2、jQuery使用
下载地址:jQuery CDN
压缩版:https://code.jquery.com/jquery-1.12.4.min.js
正常版:https://code.jquery.com/jquery-1.12.4.js
jquery操作文档:jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm
这里我们使用正常版来做实验(方便查看),压缩版的适用于生产,版本使用1.12版本兼容之前版本浏览器。
(1)把jquery-1.12.4.js
复制到同级目录
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i1">dream</div>
<script src="jquery-1.12.4.js"></script>
<script>
//jQuery('#1');或者下面那种调用方法
$('#1');
</script>
</body>
</html>
(2)转换
jquery对象[0] ===>> Dom对象
$(Dom对象) ===>> jquery对象
二、查找元素
1、基本选择器
$('#id') ###查找id
$('.class') ###查找class
$('element') ###查找所有指定标签
$('*') ###查找所有
$('a,p,...') ###查找多个标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i1" class="c1">
<a>1</a>
<a>1</a>
</div>
<div class="c1">
<a>1</a>
</div>
<script src="jquery-1.12.4.js"></script>
</body>
</html>
2、层级选择器
$('#i1 a') ###获取id为i1下面的所有a标签
$('#i1>a') ###父子,只会一层
3、基本筛选器
(1)命令说明
$('li:first'); ###找出第一个 $('li:last'); ###找出最后一个 $('tr:eq(index)'); ###通过index查找
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<script src="jquery-1.12.4.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
<script src="jquery-1.12.4.js"></script>
</body>
</html>
(2)层级和first叠加使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c1">
<div>
<a>2</a>
</div>
<a>1</a> //找出这个
<a>1</a>
<a>1</a>
</div>
<script src="jquery-1.12.4.js"></script>
</body>
</html>
$('.c1>a:first') ###我们可以进行叠加使用
4、属性
$('[attribute]') ###具有attribute属性的所有标签
$('[attribute="value"]') ###attribute属性等于value的
5、选择实例
$('#tb :checkbox').prop('checked'); ###获取值
$('#tb :checkbox').prop('checked',true); ###设置值
jQuery内置循环:$('#tb :checkbox').xxx
$('#tb :checkbox').each(function(k){
//k当前索引值
//this,DOM,当前循环得元素 $(this)
})
eg:
三元运算:var v = 条件? 真值:假值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="全选" onclick="CheckAll();" />
<input type="button" value="取消" onclick="Cancel();"/>
<input type="button" value="反选" onclick="Reverse();" />
<table border="1">
<thead>
<tr>
<th>选择</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type='checkbox'/></td>
<td>dream</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td><input type='checkbox'/></td>
<td>dream1</td>
<td>男</td>
<td>21</td>
</tr>
<tr>
<td><input type='checkbox'/></td>
<td>dream2</td>
<td>男</td>
<td>22</td>
</tr>
</tbody>
</table>
<script src="jquery-1.12.4.js"></script>
<script>
function CheckAll() {
$('#tb :checkbox').prop('checked',true);
}
function Cancel() {
$('#tb :checkbox').prop('checked',false);
}
function Reverse() {
$('#tb :checkbox').each(function () {
//还可以通过this.checked判断
//this当前循环得每个元素
//三元运算 var v = 条件? 真值:假值;
var v = $(this).prop('checked')?false:true;
$(this).prop('checked',v);
})
}
</script>
</body>
</html>
6、样式操作
$(#id).addClass('hide') ###添加class $(#id).removeClass('hide') ###删除class $(#id).toggleClass('hide') ###对设置或移除被选元素的一个或多个类进行切换
开关:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
</style>
</head>
<body>
<input id='i1' type="button" value="开关" />
<div class="c1 hide">dreamya</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('#i1').click(function () {
//上面这几条等于下面一条
// if($('.c1').hasClass('hide')){
// $('.c1').removeClass('hide');
// }else {
// $('.c1').addClass('hide');
// }
$('.c1').toggleClass('hide');
})
</script>
</body>
</html>
三、筛选器
1、查找
$(this).next() ###下一个
$(this).nextAll() ###所有下面的
$(this).nextUntil(#id) ###找到所有下面到id为止
$(this).prev() ###上一个
$(this).prevAll() ###所有上面的
$(this).prevUntil(#id) ###找到所有上面到id为止
$(this).parent() ###父
$(this).parents() ###祖先
$(this).parentsUntil() ###直到那个祖先
$(this). siblings() ###兄弟
$(#id).find(#id1) ###查找所有id下面的的id1标签
2、过滤
$(this).eq(index|-index) ###选择器选取带有指定index值的元素
$(this).first() ###选择器选取第一个元素
$(this).last() ###选择器选取最后一个元素
$(this).hasClass(class) ###检查被选元素是否包含指定的class
eg.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.header{
background-color: #0c0c0c;
color: #9cc2cb;
height: 40px;
line-height: 40px;
width:80px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div>
<div class="item">
<div class="header">目录一</div>
<div class="content">内容一</div>
<div class="content">内容一</div>
</div>
<div class="item">
<div class="header">目录二</div>
<div class="content hide">内容二</div>
<div class="content hide">内容二</div>
</div>
<div class="item">
<div class="header">目录三</div>
<div class="content hide">内容三</div>
<div class="content hide">内容三</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.header').click(function () {
//可以合并成(链式编程):$(this).nextAll().removeClass('hide').parent().siblings().find('.content').addClass('hide');
$(this).nextAll().removeClass('hide');
$(this).parent().siblings().find('.content').addClass('hide');
})
</script>
</body>
</html>
文档操作:
$(#id).text() ###获取文本内容
$(#id).text("<a>1</a>") ###设置文本内容
$(#id).html() ###获取html内容
$(#id).html("<a>1</a>") ###设置文本内容
Dom中有value:
$(#id).val() ###查询值
$(#id).val("1") ###设置值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.frame {
position: fixed;
top: 50%;
left: 50%;
width: 600px;
height: 400px;
margin-left: -300px;
margin-top: -200px;
background-color: #0f9e60;
z-index: 10;
}
.shadow{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity:0.7;
background-color: black;
z-index: 9;
}
</style>
</head>
<body>
<input type="button" value="添加" class="edit"/>
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>编辑</th>
<th>删除</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td>dream</td>
<td>男</td>
<td>20</td>
<td><a class="edit">修改</a></td>
<td><a class="del">-</a></td>
</tr>
<tr>
<td>DM</td>
<td>男</td>
<td>21</td>
<td><a class="edit">修改</a></td>
<td><a class="del">-</a></td>
</tr>
<tr>
<td>dreamya</td>
<td>男</td>
<td>22</td>
<td><a class="edit">修改</a></td>
<td><a class="del">-</a></td>
</tr>
</tbody>
</table>
<div class="frame hide">
<span>姓名:</span>
<input name="username" type="text" />
<br/>
<span>性别:</span>
<input name="gender" type="text" />
<br/>
<span>年龄:</span>
<input name="age" type="text" />
<input name='cancle' type="button" value="取消">
</div>
<div class="shadow hide"></div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.edit').click(function () {
//删除hide
$('.shadow,.frame').removeClass('hide');
})
//添加hide和赋值
$('#tb .edit').click(function () {
$('.shadow,.frame').removeClass('hide');
var tds = $(this).parent().prevAll();
//进行赋值
var username = $(tds[2]).text();
var gender = $(tds[1]).text()
var age = $(tds[0]).text();
$('.frame input[name="username"]').val(username);
$('.frame input[name="gender"]').val(gender);
$('.frame input[name="age"]').val(age);
});
//删除hide
$('.frame input[name="cancle"]').click(function () {
$('.shadow,.frame').addClass('hide');
//清除原有的值,防止显示错乱
$('.frame input[type="text"]').val('');
})
</script>
</body>
</html>
四、属性操作
1、用于自定义属性
$(#id).attr(key) ###获取属性
$(#id).attr(key,value) ###设置属性,可以
$(#id).removeattr(key) ###删除属性
2、专用于checkbox,radio
$(#id).prop('checked') ####获取值
$(#id).prop('checked',true) ###设置值
3、示例一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.frame {
position: fixed;
top: 50%;
left: 50%;
width: 600px;
height: 400px;
margin-left: -300px;
margin-top: -200px;
background-color: #0f9e60;
z-index: 10;
}
.shadow{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity:0.7;
background-color: black;
z-index: 9;
}
</style>
</head>
<body>
<input type="button" value="添加" class="edit"/>
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>编辑</th>
<th>删除</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td target="username">dream</td>
<td target="gender">男</td>
<td target="age">20</td>
<td><a class="edit">修改</a></td>
<td><a class="del">-</a></td>
</tr>
<tr>
<td target="username">DM</td>
<td target="gender">男</td>
<td target="age">21</td>
<td><a class="edit">修改</a></td>
<td><a class="del">-</a></td>
</tr>
<tr>
<td target="username">dreamya</td>
<td target="gender">男</td>
<td target="age">22</td>
<td><a class="edit">修改</a></td>
<td><a class="del">-</a></td>
</tr>
</tbody>
</table>
<div class="frame hide">
<span>姓名:</span>
<input name="username" type="text" />
<br/>
<span>性别:</span>
<input name="gender" type="text" />
<br/>
<span>年龄:</span>
<input name="age" type="text" />
<input name='cancle' type="button" value="取消">
</div>
<div class="shadow hide"></div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.edit').click(function () {
//删除hide
$('.shadow,.frame').removeClass('hide');
})
//添加hide和赋值
$('#tb .edit').click(function () {
$('.shadow,.frame').removeClass('hide');
var tds = $(this).parent().prevAll();
//进行赋值
$(tds).each(function () {
//获取当前自定义target属性值
var n = $(this).attr('target');
//获取当前文本内容
var text = $(this).text();
var temp = '.frame input[name="' + n + '"]';
$(temp).val(text);
})
// var username = $(tds[2]).text();
// var gender = $(tds[1]).text()
// var age = $(tds[0]).text();
// $('.frame input[name="username"]').val(username);
// $('.frame input[name="gender"]').val(gender);
// $('.frame input[name="age"]').val(age);
});
//删除hide
$('.frame input[name="cancle"]').click(function () {
$('.shadow,.frame').addClass('hide');
//清除原有的值,防止显示错乱
$('.frame input[type="text"]').val('');
})
</script>
</body>
</html>
4、菜单切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.active{
color: burlywood;
background-color: #001F3F;
}
.menu{
height: 38px;
background-color: #0c0c0c;
color: #9cc2cb;
line-height: 38px;
cursor: pointer;
}
.menu .menu-item{
float: left;
border-right: 1px solid rebeccapurple;
padding: 0 10px;
}
.content{
min-height: 200px;
border: 1px solid burlywood;
}
</style>
</head>
<body>
<div style="width: 500px; margin: 0 auto;">
<div class="menu">
<div class="menu-item active" a="1">菜单一</div>
<div class="menu-item" a="2">菜单二</div>
<div class="menu-item" a="3">菜单三</div>
</div>
<div class="content">
<div b="1">内容一</div>
<div class="hide" b="2">内容二</div>
<div class="hide" b="3">内容三</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.menu .menu-item').click(function () {
$(this).addClass('active').siblings().removeClass('active');
var n = $(this).attr('a');
$('.content ').children('[b="' + n + '"]').removeClass('hide').siblings().addClass('hide');
})
</script>
</body>
</html>
5、通过index实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.active{
color: burlywood;
background-color: #001F3F;
}
.menu{
height: 38px;
background-color: #0c0c0c;
color: #9cc2cb;
line-height: 38px;
cursor: pointer;
}
.menu .menu-item{
float: left;
border-right: 1px solid rebeccapurple;
padding: 0 10px;
}
.content{
min-height: 200px;
border: 1px solid burlywood;
}
</style>
</head>
<body>
<div style="width: 500px; margin: 0 auto;">
<div class="menu">
<div class="menu-item active">菜单一</div>
<div class="menu-item">菜单二</div>
<div class="menu-item">菜单三</div>
</div>
<div class="content">
<div>内容一</div>
<div class="hide">内容二</div>
<div class="hide">内容三</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.menu .menu-item').click(function () {
$(this).addClass('active').siblings().removeClass('active');
// $(this).index();
$('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');
})
</script>
</body>
</html>
相信很多人在刚接触前端或者中期时候总会遇到一些问题及瓶颈期,如学了一段时间没有方向感或者坚持不下去一个人学习枯燥乏味有问题也不知道怎么解决,对此我整理了一些资料 喜欢我的文章想与更多资深大牛一起讨论和学习的话 欢迎加入我的学习交流群907694362