1. way binding events so far learned
1. write on the label inside foo = onclick (the this);
2. native of JS DOM DOM bindings = function objects .onclick () {...}
3. jQuery version binding event jQuery object .click (function () {...})
2. the way we want to use jQuery to bind future events
.on ( "the Click", function () {...})
$ ( " # t1 "). on (" click "," selector ", function () {...} )
applies to the next element (page generation time is not yet label) binding event (event delegate)
event risk bubble and event capture
use event bubbling to the existing label binding events to capture the event offspring label.
3. Event between
1 blocked subsequent event executed
explicit write to false return;
2. for loop, the current loop exits ---> with BREAK;
4. added a keyboard event
example: a batch operation
5. DOM executed after finished loading
$ (Document) .ready (function () {
// Write operation specific binding events
});
6. Animation (to understand)
3. supplement the jQuery
1. .each cycle
1. $ .each (A1, function () {...})
2. $ ( "div") each (function (). {
the console.log (the this); -> the this means that each label into the circulation
} )
2. .data
1. strings can be stored
2 may be a digital memory
3. the memory can jQuery object
3. plugin mechanism
1. in addition to the specific extension jQuery object
$ .fn.extend ({
"S9": function () {
...
}
})
2. Add global extended to jQuery
$ .extend ({
"S9": function () {
...
}
})
Because many of the elements are added through js or jQuery, can be seen as the next element, when the trigger button, these elements have not yet, so I can not bind the event in advance.
Since these elements being future does not exist, you can give it to the next element binding events through existing elements.
table, table inside the tbody, a page is loaded there, try to choose a location close to the label of the element at which the future, make the page faster query speed.
<script src="../../jquery-3.2.1.min.js"></script>
<script>
$("#b1").on("click",function () {
//生成要添加的数据
var tr = document.createElement("tr");
$(tr).html("<td>3</td><td>小红</td><td>瓜子</td><td><button class=\"delete\">删除</button></td>");
// language=JQuery-CSS
$("#t1").find("tbody").append(tr);
})
$(".delete").on("click",function () {
$(this).parent().parent().remove();
})
</script>
Written so that you can solve:
$("tbody").on("click",".delete",function () {
$(this).parent().parent().remove();
})
Bulk Action: When you check multiple checkbox in the table, and then select the operation, select which one, all the checkbox is checked and selected the same one at the same time selected. (a little complicated)
Here it comes to handling keyboard events to press the ctrl key to enter the batch, for example, the number 17 represents the ctrl (first paragraph small program can determine on behalf of a digital keyboard a few).
General idea is that, through select the location to find the checkbox, then the selected checkbox to select the control value consistent.
Also note that the keyboard is pressed into the batch operation, lift the keyboard to exit the batch operation, both defined as two events.
In the console keyboard digital acquisition is how much, or directly Baidu.
var $body = $("body");
$body.on("keydown", function (event) {
console.log(event);
//ctrl键
});
. $ ( "select") ON ( "Change", function () {
// get the current select value
var value = $ (the this) .val (); // find Click select CheckBox
var = $ $ thisCheckbox (the this .) .parent () SIBLINGS () First () Find ( ": checkbox");..
the console.log ($ thisCheckbox [0]);
// determines whether the checkbox is checked
if ($ thisCheckbox.prop ( "checked" ) && mODE) {
// true batch mode enters // find all selected checkbox, attention should check with a circulating taken generally
var $ the checked = $ ( "INPUT [type = 'CheckBox']: the checked");
for ( I = 0 var; I <$ checked.length; I ++) { // find the same row select
$ ($ checked [i]) parent () siblings () last () find ( "select")..... val (value);
}
}
})
Complete code:
<table border="1" id="t1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>小强</td>
<td>冰淇淋</td>
<td>
<select>
<option value="0">上线</option>
<option value="1">下线</option>
<option value="2"> Offline </ Option>
<TD> banana </ td>
<TD> Bob </ td>
<TR>
</ TR>
</ td>
</ SELECT>
<td><input type="checkbox"></td>
<td>
<select>
<option value="0">上线</option>
<option value="1">下线</option>
<option value="2">离线</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>小明</td>
<td>香蕉</td>
<td>
<select>
<option value="0">上线</option>
<option value="1">下线</option>
<option value="2">离线</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>小明</td>
<td>香蕉</td>
<td>
<select>
<option value="0">上线</option>
<option value="1">下线</option>
<option value="2">离线</option>
</select>
</td>
</tr>
</tbody>
</table>
<Script the src = "../../ jQuery-3.2.1.min.js"> </ Script>
<Script>
var = MODE to false;
var = $ $ body ( "body");
$ body.on ( "keyDown", function (Event) {
the console.log (Event);
// Ctrl key
iF (event.keyCode ===. 17) {
// into the batch operating mode
mODE = to true;
}
});
// if the key lift up, exit the batch mode of operation
$ body.on ( "keyUp", function (Event) {
console.log (Event);
// Ctrl key
IF (event.keyCode === 17) {
// enter batch mode of operation
= to false MODE;
}
})
$ ( "SELECT") ON (. "change", function () {
// get to select the current value of
var value = $ (the this) .val ();
// Click to select find the CheckBox
var $ thisCheckbox = $ (the this) .parent () SIBLINGS () First () the Find (. ".. : checkbox ");
console.log ($ thisCheckbox [0]);
// determine whether the checkbox is checked
iF ($ thisCheckbox.prop (" the checked ") && the mODE) {
// really into the batch mode
// find all selected the checkbox, attention should check with a circulating taken generally
var $ the checked = $ ( "INPUT [type = 'CheckBox']: the checked");
for (var I = 0; I <$ checked.length; I ++) {
// found select the same line of
$ ($ checked [i]) parent () siblings () last () find ( "select") val (value).....;
}
}
})
</script>