Catalog
jQuery Knowledge Carding 20190818
1. Time Binding and Unbinding
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>18_Event Binding and Unbinding</title>
</head>
<style type="text/css">
* {
margin: 0px;
}
.out {
position: absolute;
width: 200px;
height: 200px;
top: 20px;
left: 10px;
background: blue;
}
.inner {
position: absolute;
width: 100px;
height: 100px;
top: 50px;
background: red;
}
.divBtn {
position: absolute;
top: 250px;
}
</style>
<body style="height: 2000px;">
<div class="out">
//External DIV
<div class="inner">inside div</div>
</div>
<div class='divBtn'>
<button id="btn1">Unbind all events</button>
<button id="btn2">Unbind mouseover Event</button>
<button id="btn3">Test event coordinates</button>
<a href="http://Www.baidu.com "id=" test4 > > </a>
</div>
<!--
1. Event binding(2 species):
* eventName(function(){})
//Bind the listener for the corresponding event name, such as: $(' div').click(function(){});
* on(eventName, funcion(){})
//Universal binding event listeners, such as: $(' div').on('click', function(){})
* Advantages and disadvantages:
eventName: Coding convenience, But only one monitor can be added., And event monitoring does not support it.
on: Coding inconvenient, Multiple listeners can be added, And more general
2. Event unblocking:
* off(eventName)
3. Coordinates of events
* event.clientX, event.clientY The upper left corner relative to the viewport
* event.pageX, event.pageY Relative to the top left corner of the page
* event.offsetX, event.offsetY Relative to the upper left corner of the event element
4. Event-related processing
* Stop event bubbling : event.stopPropagation()
* Prevent default behavior of events : event.preventDefault()
-->
<script src="js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
// 1. Bind the click event listener function to div whose class is out, and print'out clicked'(bind in two ways)
/*$('.out').click(function () {
console.log('out click1')
})*/
$('.out').on('click', function () {
console.log('out clicked2')
})
//2. Mouse-in and Mouse-out Event Binding Listening Functions for div s with class inner
/*$('.inner')
.mouseenter(function () {
console.log('Enter... '
})
.mouseleave(function () {
console.log('Leave... '
})*/
$('.inner')
.on('mouseenter', function () {
console.log('Get into...')
})
.on('mouseleave', function () {
console.log('leave...')
})
/*$('.inner').hover(function () {
console.log('Enter... '
}, function () {
console.log('Leave... '
})*/
//3. Click btn1 to deactivate all event listeners on inner
$('#btn1').click(function () {
$('.inner').off()
})
//4. Click btn2 to remove the mouseover event on inner
$('#btn2').click(function () {
$('.inner').off('mouseover')
})
//5. Click btn3 to get event coordinates
$('#Btn3'. click (function (event) {// event time object
console.log(event.offsetX, event.offsetY) // The origin is the upper left corner of the time element
console.log(event.clientX, event.clientY) // Origin is the upper left corner of the window
console.log(event.pageX, event.pageY) // Origin is the top left corner of the page
})
//6. Click on the. inner area. External click listening does not respond
$('.inner').click(function (event) {
console.log('click inner')
// Stop event bubbling
event.stopPropagation()
})
//7. Click on the link if the current time is even.
$('#test4').click(function () {
var time = Date.now(event)
alert(time)
if(time%2===0) {
// Prevent default behavior of events
event.preventDefault()
}
})
})
</script>
</body>
</html>2. Distinguishing mouseover from mouseenter
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>19_Event handover</title>
</head>
<style type="text/css">
* {
margin: 0px;
}
.div1 {
position: absolute;
width: 200px;
height: 200px;
top: 50px;
left: 10px;
background: olive;
}
.div2 {
position: absolute;
width: 100px;
height: 100px;
top: 50px;
background: red;
}
.div3 {
position: absolute;
width: 200px;
height: 200px;
top: 50px;
left: 230px;
background: olive;
}
.div4 {
position: absolute;
width: 100px;
height: 100px;
top: 50px;
background: yellow;
}
.divText{
position: absolute;
top: 330px;
left: 10px;
}
</style>
<body>
<div class="divText">
//Distinguish mouse events
</div>
<div class="div1">
div1.....
<div class="div2">div2....</div>
</div>
<div class="div3">
div3.....
<div class="div4">div4....</div>
</div>
<!--
//What is the difference between mouseover and mouseenter?
* mouseover: It also triggers when a child element is moved in., Corresponding mouseout
* mouseenter: Triggered only when the current element is moved, Corresponding mouseleave
hover()What we use is mouseenter()and mouseleave()
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
$('.div1').mouseover(function () {
console.log('Move in div1 Or its child elements')
}).mouseout(function () {
console.log('Move out div1 Or its child elements')
})
$('.div3').mouseenter(function () {
console.log('Move in div3 element')
}).mouseleave(function () {
console.log('Move out div3 element')
})
$('.div3').hover(function () {
console.log('Move in div33 element')
this.style.background = 'red'
}, function () {
console.log('Move out div33 element')
this.style.background = 'blue'
})
</script>
</body>
</html>3. Time delegation (delegation/agency)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>20_Event Delegation 2</title>
</head>
<body>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
<li>22222</li><br>
<button id="btn1">Add new li</button>
<button id="btn2">delete ul Upper event delegate listener</button>
<!--
1. Incident Delegation/Agent):
* Multiple child elements(li)Event monitoring delegates to parent elements(ul)Handle
* The listening callback is added to the parent element.
* When manipulating any child element(li)Time, Events bubbled up into parent elements(ul)
* Parent elements do not handle events directly, It is based on event.target Get the child elements of the event(li), Call the event callback function through this child element
2. Two parties entrusted with the event:
* Entrusting party: Owner li
* Entrusted party: intermediary ul
3. Benefits of using event delegation
* Add new child elements, Automatic Event Response Processing
* Reduce the number of event monitors: n==>1
4. jQuery Event delegation API
* Setting up event delegation: $(parentSelector).delegate(childrenSelector, eventName, callback)
* Remove event delegation: $(parentSelector).undelegate(eventName)
-->
<script src="js/jquery-1.10.1.js"></script>
<script>
$(function () {
//Event delegation
$('ul').delegate('li', 'click', function () {
console.log(this) // Click on li of the event
this.style.background = 'red'
})
$('#btn1').click(function () {
$('ul').append('<li>xxxxxxxxx</li>')
})
$('#btn2').click(function () {
// Remove event delegation
$('ul').undelegate()
})
})
</script>
</body>
</html>4. Multi-database coexistence
If there are two libraries with $, there is a conflict. The jQuery library can release the usage of $to allow another library to work properly, at which point the jQuery library can only use jQuery.
jQuery.noConflict()
5. The difference between window. onload and $(document).ready()
- window.onload: Only one monitored callback can be called back after the image including the page has been loaded.
- Document. ready (): Equivalent to: $(function() {}), callback after page loading (early), you can have multiple listening callbacks.
6. Custom plug-ins
- Tool methods for extending jQuery: $. extend(obj)
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});- Method for extending jQuery objects: $. fn.extend(object)
jQuery.fn.extend({
check: function() {
return this.each(function() { this.checked = true; });
},
uncheck: function() {
return this.each(function() { this.checked = false; });
}
});- Custom file: my_jQuery_plugin.js
/*
Tool Method for Extending jQuery: $. extend(object)
min(a, b) : Returns a smaller value
max(c, d) : Returns a larger value
leftTrim() : Remove the space on the left of the string
rightTrim() : Remove the space to the right of the string
*/
//regular
/*
^ Match string start
\s Matching spaces
+ Match once or more
$ Match the end of the string
*/
//Expand $
$.extend({
min: function (a, b) {
return (a < b) ? a : b
},
max: function (a, b) {
return (a > b) ? a : b
},
leftTrim: function (strToBeTrimed) {
return strToBeTrimed.replace(/^\s+/, '')
},
rightTrim: function (strToBeTrimed) {
return strToBeTrimed.replace(/\s+$/, '')
}
})
//Extend $('#id').XXXXX
//$.fn.extend(object)
// checkAll(): All selected
// unCheckAll(): Not at all.
// reverseCheck(): Total Back Selection
$.fn.extend({
checkAll: function () {
// console.log('checkAll')
this.prop('checked', true)
},
unCheckAll: function () {
this.prop('checked', false)
},
reverseCheck: function () {
this.each(function () {
this.checked = !this.checked
})
}
})- Use custom plug-ins
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>25_Extension plug-in</title>
<style type="text/css">
* {
margin: 0px;
}
.div1 {
position: absolute;
width: 100px;
height: 100px;
top: 50px;
left: 10px;
background: red;
}
</style>
</head>
<body>
<input type="checkbox" name="items" value="Football"/>Football
<input type="checkbox" name="items" value="Basketball"/>Basketball
<input type="checkbox" name="items" value="Badminton"/>Badminton
<input type="checkbox" name="items" value="Table Tennis"/>Table Tennis
<br/>
<input type="button" id="checkedAllBtn" value="whole　choose"/>
<input type="button" id="checkedNoBtn" value="Totally unselected"/>
<input type="button" id="reverseCheckedBtn" value="Reverse election"/>
<!--
1. extend jQuery Tool Approach
$.extend(object)
2. extend jQuery Object Method
$.fn.extend(object)
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script src="js/my_jQuery_plugin.js" type="text/javascript"></script>
<script type="text/javascript">
/*
Demand:
1. Add four tool methods to $
* min(a, b) : Returns a smaller value
* max(c, d) : Returns a larger value
* leftTrim() : Remove the space on the left of the string
* rightTrim() : Remove the space to the right of the string
2. Add three functional methods to jQuery objects:
* checkAll() : All election
* unCheckAll() : Totally unselected
* reverseCheck() : All negative election
*/
// Get the maximum and minimum
var a = 1
var b = 2
var result_min = $.min(a, b)
var result_max = $.max(a, b)
console.log(result_min)
console.log(result_max)
// Left trim and right trim
var str = ' name of a fictitious monkey with supernatural powers '
console.log('|' + str + '|')
var resultStrLeft = $.leftTrim(str)
console.log('|' + resultStrLeft + '|')
var resultStrRight = $.rightTrim(str)
console.log('|' + resultStrRight + '|')
//All election
$('#checkedAllBtn').click(function () {
$(':checkbox').checkAll()
})
//Totally unselected
$('#checkedNoBtn').click(function () {
$(':checkbox').unCheckAll()
})
//Reverse election
$('#reverseCheckedBtn').click(function () {
$(':checkbox').reverseCheck()
})
</script>
</body>
</html>7. Use plug-ins
- Plug-ins are extensions based on jQuery. There are many plug-ins on jQuery's official website: http://plugins.jquery.com/.
- Common plug-ins:
- Form Check Plug-in: jquery-validation
- jquery UI
- Date plug-in: laydate
- Use plug-ins based on documentation and demo