jQuery and jQuery version and Dom relations
http://jquery.cuishifeng.cn/index.html
jQuery learning Reference Site
jQuery encapsulates Dom, Bom, JavaScript, you can quickly use functions and their associated extension
jQuery version:
- Version 1 Series
- Version 2 series
- Version 3 Series
recommend using version 1, better browser compatibility for older versions (IE8 or less), and jQuery function version 1 in the high version is also applicable. High version of jQuery is not applicable in the old version of the browser.
The highest version 1 is 1.12
http://code.jquery.com/jquery/
jQuery Download
The figure: jQuery After downloading the file to be placed in the directory, and then introduced
<!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>Code Description:
jQuery ( "# i1") is used to associate i1 jQuery label; $ ( "# i1") is the same, may be used instead of the symbol $ jquery.
Figure:
with jQuery document.getElementById and can be associated with this tag i1;
referred jQuery objects and document objects;
jQuery and each document has a similar function, have different functions;
jQuery the document can be converted to each other, can be used after conversion the other different functions.
Figure:
the jQuery used in association $ ( '# i1') [ 0] is converted into a document object.
Top:
the document converted into jQuery object.
jQuery selector
id selector
<!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 selector
<!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>Tag selector
<!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>Combination tag
<!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>
Above: 4 can see a tag
Above: a combination of tags and labels c2
Above: selecting a combination of three
Level selector
- Multilayer selection
<!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>Code Description:
3 a tag selected in # i10
- Select the sublayer
<!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>
Other basic selectors
- 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>Attribute selectors
<!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>
Form Object Properties
<!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>
Above: disabled because the input box is not editable
Multiple-choice anti-election canceled
Select All, cancel
<!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>
Figure 2: Click Select All and Cancel can take effect.
Invert Selection
- dom jQuery object and distinguish
<!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>
Above: Click to invert the selection, each element is (this) printed.
<!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>
Top: each index print to 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>
Figure: After a successful conversion, see jQuery object are [] to enclosed.
- Use dom methods
<!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>
Figure 2: select one of the two, and then click Invert Selection, played anti-election results.
- Using jQuery method
<!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>Code Description:
If it is an option $ (this) .prop ( 'checked') it means to be checked is selected, if it is $ (this) .prop ( 'checked', false) it means to be checked assignment.
FIG 2: Use jQuery methods, made unselected effect.
- ternary operator 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>
FIG 2: ternary operator use jQuery made unselected effect.