78-81
jQuery和Dom关系以及jQuery版本
http://jquery.cuishifeng.cn/index.html
jQuery学习参考网址html
jQuery封装了Dom、Bom、JavaScript，能够快速的使用其相关功能和扩展jquery
jQuery版本：浏览器
- 版本1系列
- 版本2系列
- 版本3系列
推荐使用版本1，对老版本(IE8如下)浏览器兼容性更好，且版本1的jQuery功能在高版本中也是适用的。 高版本的jQuery在老版本浏览器中不适用。
版本1中最高的版本是1.12
http://code.jquery.com/jquery/
jQuery下载地址dom
上图：下载后的jQuery文件要放入目录中，而后引入ide
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i1">123</div>
<script src="jquery-1.12.4.js"></script> <!--引入jQuery-->
<script>
jQuery("#i1");
$("#i1");
</script>
</body>
</html>
代码说明：函数
jQuery("#i1") 用来jQuery关联i1这个标签； $("#i1")是同样的，能够用$符号来代替jquery。学习
上图：
使用jQuery和document.getElementById均可以关联i1这个标签；
分别称为jQuery对象和document对象；
jQuery和document各自有类似的功能，也有不一样的功能；
jQuery与document能够相互转换，转换后可使用对方不一样的功能。ui
上图：
jQuery关联使用$('#i1')[0]就转换成document对象了。this
上图：
将document转成jQuery对象。code
jQuery选择器
id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i1">123</div>
<script src="jquery-1.12.4.js"></script> <!--引入jQuery-->
<script>
$("#i1"); <!--选择了id为i1的标签-->
</script>
</body>
</html>
class选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c1">123</div>
<script src="jquery-1.12.4.js"></script> <!--引入jQuery-->
<script>
$(".c1"); <!--选择了class为c1的标签-->
</script>
</body>
</html>
标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c1">
<a>a</a>
<a>b</a>
</div>
<div class="c2">
<a>c</a>
<a>d</a>
</div>
<script src="jquery-1.12.4.js"></script> <!--引入jQuery-->
<script>
$("a"); <!--选择了全部a标签-->
</script>
</body>
</html>
组合标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i10" class="c1">
<a>a</a>
<a>b</a>
</div>
<div class="c2">
<a>c</a>
<a>d</a>
</div>
<script src="jquery-1.12.4.js"></script> <!--引入jQuery-->
<script>
$("a,.c2,#i10"); <!--选择了全部的a标签和全部的c2标签和全部i10标签-->
</script>
</script>
</body>
</html>
上图：能够看到有4个a标签
上图：a标签和c2标签的组合
上图：三个组合选择
层级选择器
- 多层选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i10" class="c1">
<div>
<a>abcdefg</a>
</div>
<a>a</a>
<a>b</a>
</div>
<div class="c2">
<a>c</a>
<a>d</a>
</div>
<script src="jquery-1.12.4.js"></script> <!--引入jQuery-->
<script>
$("#i10 a"); <!--选择#i10下面全部层级的a标签-->
</script>
</body>
</html>
代码说明：
选择了#i10下的3个a标签
- 子层选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i10" class="c1">
<div>
<a>abcdefg</a>
</div>
<a>a</a>
<a>b</a>
</div>
<div class="c2">
<a>c</a>
<a>d</a>
</div>
<script src="jquery-1.12.4.js"></script> <!--引入jQuery-->
<script>
$("#i10>a"); <!--只选择#i10下一层的a标签，不会选择更深层-->
</script>
</body>
</html>
first
<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>
$('li:first'); <!--获取匹配的第一个元素，也就是list item 1-->
</script>
其余基本选择器
- eq
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i10" class="c1">
<div>
<a>abcdefg</a>
</div>
<a>a</a>
<a>b</a>
</div>
<div class="c2">
<a>c</a>
<a>d</a>
</div>
<script src="jquery-1.12.4.js"></script> <!--引入jQuery-->
<script>
$('#10 a:eq(0)') <!--选择#10下的全部a标签的下标为第0个a标签-->
</script>
</body>
</html>
属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i10" class="c1">
<div>
<a>abcdefg</a>
</div>
<a name="123">a</a>
<a name="456">b</a>
</div>
<div class="c2">
<a>c</a>
<a>d</a>
</div>
<script src="jquery-1.12.4.js"></script> <!--引入jQuery-->
<script>
$('#10 a:eq(0)')
</script>
</body>
</html>
表单对象属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" disabled> <!--disabled为不可编辑-->
<div id="i10" class="c1">
<div>
<a>abcdefg</a>
</div>
<a name="123">a</a>
<a name="456">b</a>
</div>
<div class="c2">
<a>c</a>
<a>d</a>
</div>
<script src="jquery-1.12.4.js"></script> <!--引入jQuery-->
<script>
$(':disabled') <!--选择不可编辑的标签-->
</script>
</body>
</html>
上图：由于disabled输入框是不可编辑的
多选反选取消
全选、取消
<!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="reverseAll();">
<input type="button" value="取消" onclick="cancleAll();">
<table border="1"> <!--设置表格-->
<thead> <!--表头-->
<tr>
<th>选项</th>
<th>IP</th>
<th>PORT</th>
</tr>
</thead>
<tbody id="tb"> <!--表内容-->
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
</tbody>
</table>
<script src="jquery-1.12.4.js"></script>
<script>
<!--调用全选函数-->
function checkAll() {
$('#tb :checkbox').prop('checked',true)； <!--关联#tb标签下的全部checkbox标签，使用prop来对多选框进行编辑，checked为true就全选-->
}
function cancleAll() {
$('#tb :checkbox').prop('checked',false)； <!--false所有取消选择-->
}
</script>
</body>
</html>
上2图：点击全选和取消均可以生效。
反选
- dom与jQuery对象区分
<!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="reverseAll();">
<input type="button" value="取消" onclick="cancleAll();">
<table border="1">
<thead>
<tr>
<th>选项</th>
<th>IP</th>
<th>PORT</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
</tbody>
</table>
<script src="jquery-1.12.4.js"></script>
<script>
function checkAll() {
$('#tb :checkbox').prop('checked',true);
}
function cancleAll() {
$('#tb :checkbox').prop('checked',false);
}
function reverseAll() {
<!--使用each会循环每个元素-->
$('#tb :checkbox').each(function () {
console.log(this); <!--this表明循环的每个元素内容-->
})
}
</script>
</body>
</html>
上图：点击反选，会将每一个元素（this）打印出来。
<!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="reverseAll();">
<input type="button" value="取消" onclick="cancleAll();">
<table border="1">
<thead>
<tr>
<th>选项</th>
<th>IP</th>
<th>PORT</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
</tbody>
</table>
<script src="jquery-1.12.4.js"></script>
<script>
function checkAll() {
$('#tb :checkbox').prop('checked',true);
}
function cancleAll() {
$('#tb :checkbox').prop('checked',false);
}
function reverseAll() {
// k表示下标
$('#tb :checkbox').each(function (k) {
console.log(k,this);
})
}
</script>
</body>
</html>
上图：将每一个CheckBox的下标给打印出来
<!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="reverseAll();">
<input type="button" value="取消" onclick="cancleAll();">
<table border="1">
<thead>
<tr>
<th>选项</th>
<th>IP</th>
<th>PORT</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
</tbody>
</table>
<script src="jquery-1.12.4.js"></script>
<script>
function checkAll() {
$('#tb :checkbox').prop('checked',true);
}
function cancleAll() {
$('#tb :checkbox').prop('checked',false);
}
function reverseAll() {
$('#tb :checkbox').each(function (k) {
// console.log(this);
console.log($(this)); //this在这里默认是dom对象，须要将其转成jQuery对象后才能使用jQuery相关功能。
})
}
</script>
</body>
</html>
上图：成功转换后，能够看到jQuery对象都被[]给括起来的。
- 使用dom方法
<!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="reverseAll();">
<input type="button" value="取消" onclick="cancleAll();">
<table border="1">
<thead>
<tr>
<th>选项</th>
<th>IP</th>
<th>PORT</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
</tbody>
</table>
<script src="jquery-1.12.4.js"></script>
<script>
function checkAll() {
$('#tb :checkbox').prop('checked',true);
}
function cancleAll() {
$('#tb :checkbox').prop('checked',false);
}
function reverseAll() {
$('#tb :checkbox').each(function (k) {
//使用dom方法
//checked默认等于true
if(this.checked){
this.checked =false; //若是等于true就改为false
}
else {
this.checked = true; //若是等于false就改为true
}
})
}
</script>
</body>
</html>
上2图：选中其中两个，而后点击反选，起到了反选效果。
- 使用jQuery方法
<!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="reverseAll();">
<input type="button" value="取消" onclick="cancleAll();">
<table border="1">
<thead>
<tr>
<th>选项</th>
<th>IP</th>
<th>PORT</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
</tbody>
</table>
<script src="jquery-1.12.4.js"></script>
<script>
function checkAll() {
$('#tb :checkbox').prop('checked',true);
}
function cancleAll() {
$('#tb :checkbox').prop('checked',false);
}
function reverseAll() {
$('#tb :checkbox').each(function (k) {
//经过jQuery方法
//若是this等于true
if($(this).prop('checked')){
$(this).prop('checked',false) //就将this改成false
}else {
$(this).prop('checked',true) //不然this改成true
}
})
}
</script>
</body>
</html>
代码说明：
若是是一个选项$(this).prop('checked')就表示对checked进行了选择，若是是$(this).prop('checked',false)就表示对checked进行赋值。
上2图：使用jQuery方法，作出反选效果。
- jQuery三元运算
<!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="reverseAll();">
<input type="button" value="取消" onclick="cancleAll();">
<table border="1">
<thead>
<tr>
<th>选项</th>
<th>IP</th>
<th>PORT</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
</tbody>
</table>
<script src="jquery-1.12.4.js"></script>
<script>
function checkAll() {
$('#tb :checkbox').prop('checked',true);
}
function cancleAll() {
$('#tb :checkbox').prop('checked',false);
}
function reverseAll() {
$('#tb :checkbox').each(function (k) {
// 三元运算格式
//$(this).prop('checked')：表示若是checked等于true，就将false赋值给v，不然就将true赋值给v
var v = $(this).prop('checked')?false:true;
$(this).prop('checked',v); //将checked赋值成v
})
}
</script>
</body>
</html>
上2图：使用jQuery三元运算的方式作出反选效果。
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
欢迎关注本站公众号,获取更多信息
