jQuery selector
jQuery is a JavaScript library, which integrates DOM/BOM/JavaScript class library. With simple syntax and cross platform compatibility, it greatly simplifies the operations of JavaScript developers in traversing HTML documents, operating DOM, executing animation and developing Ajax.
Implementation: dynamic effects
Operation: (same as DOM selector)
1. Find and filter elements
2. Operation element
jQuery file import method:
CSS: <link rel='stylesheet' href=''/>
jQuery: <script src=''></script>
------------------
jQuery method call:
jQuery.method or $.method
jQuery selector and DOM selector:
jQuery object [0] = > DOM object
DOM object = > $(DOM object)
------------------------jQuery selector lookup element
Find a tag or a class of tags directly
1.id
$('#id') # get ID tag
2.class
$('. c1') # get class tag
3. label
$('a ') # get all a
4. combination
$('a,. c1, #id ') # get all tags
5. Hierarchy
$('#id a') # get all a tags under the ID tag (children and grandchildren)
$('#id > a') # get all a tags under the ID tag (only the first level tag, sub)
$('#id > A: first') # get the first tag of all a tags under the ID tag (only the first tag)
6. basic
$('#id > A: first') # get the first tag of all a tags under the ID tag (only the first tag)
$('#id > A: last') # get the last tag of all a tags under the ID tag (only the first tag)
$('#id > A: eq()') # get the EQ index tags in all a tags under the ID tag (only the first level tags)
7. attribute
$('[bbq]') # get all tags with bbq attribute
$('[bbq='123'] ') # get all tags with bbq=123 attribute
Form properties
$('input[type='test ']') # get all input tags of type='test '
$(': Test') # get all input tags of type='test '(short for above)
Eg jQuery programming example - dialog box multi / positive / negative selection
jQuery method has built-in loop: $('') method
In the following example, this in jQuery refers to the dom object, that is, the element of the current loop
Methods: prop, each
<body>
<input type="button" value="Select all" onclick="checkAll()">
<input type="button" value="Reverse selection" onclick="reverseAll()">
<input type="button" value="cancel" onclick="cancleAll()">
<table border="1">
<thead>
<tr>
<th>option</th>
<th>IP</th>
<th>port</th>
</tr>
</thead>
<tbody>
<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-3.6.0.js"></script> #Reference jQuery Library
<script>
function checkAll(){
$(':checkbox').prop('checked',true) #Loop to get each checked and set it to true
}
function cancleAll(){
$(':checkbox').prop('checked',false) #Loop to get each checked and set it to false
}
function reverseAll(){
$(':checkbox').each(function(){ #Loop through each checked and call the function
1.dom object /* if(this.checked){ #If checked (true)
this.checked =false;
}else{
this.checked =true;
}
*/
2.jquery object /* if($(this).prop('checked')){ #If the returned child is true (checked)
$(this).prop('checked',false); #Get checked and set to false
}else{
$(this).prop('checked',true); #Get checked and set to true
}
*/
//Ternary operation: var v = condition? True value: false value;
3.Logical operation /* var v=$(this).prop('checked')?false:true; #Assignment according to operation logic
$(this).prop('checked',v); #Get checked and set as v object
*/
})
}
</script>
</body>--------------------jQuery binding event
$('a/#id/c1').click(function() {}) - bind events to all tags, and this in the function is the object that triggers the event
--------------------jQuery filter
$(''). Filter
$(this).next() - next
$(this).prev() - previous
$(this).parent() - parent
$(this).children() - Children
$(this).siblings() - siblings (excluding itself)
Eg jQuery programming example - hiding and displaying the drop-down menu
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.header{
background-color:black;
color:white;
}
.content{
min-height:50px;
}
.hide{
display:none;
}
</style>
</head>
<body>
<div style="height:400px;width:200px;border:1px solid #dddddd;">
<div class="item">
<div class="header">Title 1</div>
<div class="content">content</div>
</div>
<div class="item">
<div class="header">Title 2</div>
<div class="content hide">content</div>
</div>
<div class="item">
<div class="header">Title 3</div>
<div class="content hide">content</div>
</div>
</div>
<script src="jquery-3.6.0.js"></script>
<script>
$('.header').click(function(){ #Bind click events to all header s
$(this).next().removeClass('hide'); #The filter next() method gets the label and removes the class style
$(this).parent().siblings().find('.content').addClass('hide');
}) #The filter can be clicked (checked) indefinitely, this Father all peers (except yourself) Find the subordinate label (class style) Add style
$(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')
}) #JQuery supports chain programming because $(this) next(). Removeclass ('hide ') is also a jQuery object, so it can continue filtering
</script>
</body>--------------------jQuery text operation
$(‘’). text() - get text
$(‘’). text('< a > ABC < / a >') - set text content (content only)
$(‘’). html() - get text (additional tag information)
$(‘’). html('< a > ABC < / a >') - set the text content (additional label information)
$(‘’). val() - get value
$(‘’). val('avc ') - set value
Eg jQuery programming example - Information Management window
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{ #Dynamic pop-up window
display:none;
}
.modal{ #Popup
position:fixed;
top:50%;
left:50%;
width:500px;
height:400px;
margin-left:-250px;
margin-top:-200px;
background-color:#dddddd;
z-index:10;
}
.shadow{ #mask
position:fixed;
top:0px;
left:0px;
right:0px;
bottom:0px;
opacity:0.6;
background-color:black;
z-index:9;
}
</style>
</head>
<body>
<a onclick="addElement()">add to</a> #Add information
<table border="1">
<tr>
<td>1.1.1.1</td>
<td>80</td>
<td>
<a class="edit">edit</a> <a>delete</a>
</td>
</tr>
<tr>
<td>1.1.1.2</td>
<td>81</td>
<td>
<a class="edit">edit</a> <a>delete</a>
</td>
</tr>
</table>
<div class="modal hide"> #Popup
<div>
<input name="hostname" type="text"/>
<input name="port" type="text"/>
</div>
<div>
<input type="button" value="cancel" onclick="cancleModal()"/>
<input type="submit" value="Sign in" onclick=""/>
</div>
</div>
<div class="shadow hide"></div> #Mask
<script src="jquery-3.6.0.js"></script> #Reference jQuery
<script>
function addElement(){
$('.modal').removeClass('hide').next().removeClass('hide') #jQuery chain programming
}
function cancleModal(){
$('.modal').addClass('hide').next().addClass('hide') #jQuery chain programming
$('.modal input[type="text"]').val('')
} #Get the input[type="text"] tag object under modal and assign a value
$('.edit').click(function(){ #Get the edit selector tag object and bind the event
$('.modal').removeClass('hide').next().removeClass('hide') #jQuery chain programming
var tds =$(this).parent().prevAll(); #this refers to the object of the event
var port =$(tds[0]).text(); #tds to obtain the list of ports and hosts
var host =$(tds[1]).text();
console.log(port,host);
$('.modal input[name="hostname"]').val(host)
$('.modal input[name="port"]').val(port)
}) #Get the input[name = ""] tag object under modal and assign a value
</script>
</body>--------------------jQuery style operation
addClass
removeClass
toggleClass
EG-
<body>
<input id="i1" type="button" value="switch"/>
<div class="c1 hide">adafgsdfg</div>
<script src="jquery-3.6.0.js"></script>
<script>
$('#i1').click(function(){
$('.c1').toggleClass('hide'); #If there is a hide style, it will be deleted; if there is no hide style, it will be added
})
</script>
</body>--------------------jQuery property operation
$(''). attr(') - get, add, modify attributes ----- for custom attributes
$(''). attr('n ') - gets the value of the attribute
$(''). attr('n ',' x ') - modify attribute / add attribute value
$(''). removeAttr() - delete attribute
$(''). prop(') - get, set the value ----- for the application of checkbox and radio
$(''). prop('checked ') - get checked value
$(''). prop('checked ', true/false) - sets the checked value
$(''). index() - get the index value of the object
Eg jQuery programming example - Information Management window (jQuery optimization - find through custom attributes)
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display:none;
}
.modal{
position:fixed;
top:50%;
left:50%;
width:500px;
height:400px;
margin-left:-250px;
margin-top:-200px;
background-color:#dddddd;
z-index:10;
}
.shadow{
position:fixed;
top:0px;
left:0px;
right:0px;
bottom:0px;
opacity:0.6;
background-color:black;
z-index:9;
}
</style>
</head>
<body>
<a onclick="addElement()">add to</a>
<table border="1">
<tr>
<td target="hostname">1.1.1.1</td>
<td target="post">80</td>
<td>
<a class="edit">edit</a> <a>delete</a>
</td>
</tr>
<tr>
<td target="hostname">1.1.1.2</td>
<td target="post">80</td>
<td>
<a class="edit">edit</a> <a>delete</a>
</td>
</tr>
</table>
<div class="modal hide">
<div>
<input name="hostname" type="text"/>
<input name="post" type="text"/>
</div>
<div>
<input type="button" value="cancel" onclick="cancleModal()"/>
<input type="submit" value="Sign in" onclick=""/>
</div>
</div>
<div class="shadow hide"></div>
<script src="jquery-3.6.0.js"></script>
<script>
function addElement(){
$('.modal').removeClass('hide').next().removeClass('hide')
}
function cancleModal(){
$('.modal').addClass('hide').next().addClass('hide')
$('.modal input[type="text"]').val('')
}
$('.edit').click(function(){
$('.modal').removeClass('hide').next().removeClass('hide')
var tds =$(this).parent().prevAll();
tds.each(function(){
var n =$(this).attr('target'); // #Gets the target attribute value of the event object
var text =$(this).text(); // #Gets the value (content) of the event object tag
var a1 ='.modal input[name="';
var a2 ='"]'
var temp =a1 + n + a2;
//String splicing, ' modal input[type="$(this).attr('target')"]' ==>a1 + n + a2
$(temp).val(text);
})
})
</script>
</body>Eg jQuery programming example - menu window (jQuery optimization - find through custom attributes)
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display:none;
}
.menu{
height:38px;
background-color:#dddddd;
line-height:38px;
}
.active{
background-color:brown;
}
.menu .menu-item{
float:left;
border-right:1px solid red;
padding:0px 5px;
cursor:pointer; #css Style: cursor changes to small hand
}
.content{
min-height:100px;
border:1px solid #dddddd;
}
</style>
</head>
<body>
<div style="width:700px;margin:0px auto;">
<div class="menu">
<div class="menu-item active" a="1">Menu one</div> #Custom properties
<div class="menu-item" a="2">Menu II</div>
<div class="menu-item" a="3">Menu III</div>
</div>
<div class="content">
<div b="1">Content I</div>
<div class="hide" b="2">Content II</div>
<div class="hide" b="3">Content III</div>
</div>
<script src="jquery-3.6.0.js"></script>
<script>
//jQuery obtains selectors in the same way as CSS defines selectors, requiring + '# /.', Always forget to add '. / #'
$('.menu-item').click(function(){
$(this).addClass('active').siblings().removeClass('active')
var target =$(this).attr('a'); #Gets the value of the custom attribute a
$('.content').children("[b='"+ target +"']").removeClass('hide').siblings().addClass('hide');
//. children() get all child tags Children ('[expression]') is further filtered. target is a variable and needs to be spliced with strings
})
</script>
</div>
</body>Eg jQuery programming example - menu window (jQuery optimization - find through index)
<script>
//jQuery obtains selectors in the same way as CSS defines selectors, requiring + '# /.'
$('.menu-item').click(function(){
$(this).addClass('active').siblings().removeClass('active');
var v =$(this).index(); #Get the index value of the event object (event object - list) var = $('. Content') children(). eq(v). removeClass('hide'). siblings(). addClass('hide');
}) #eq('') get the same
</script>--------------------jQuery document processing
$(''). append() - add tail
$(''). prepend() - added at the front
$(''). after() - add at the same level
$(''). before() - add siblings
$(''). remove() - delete
$(''). empty() - empty content (not for labels)
$(''). clone - copy content
EG exercise example
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="t1" type="text"/>
<input id="a1" type="button" value="add to"/>
<input id="a2" type="button" value="delete"/>
<ul id="u1">
<li>1</li>
<li>2</li>
</ul>
<script src="jquery-3.6.0.js"></script>
<script>
$('#a1').click(function(){
var v =$('#t1').val();
var temp ="<li>" + v + "</li>";
$('#u1').append(temp); // Post append
//Add $('#u1') before prepend(temp);
//Add $('#u1') at the same level after(temp)
//Add $('#u1') at the same level before(temp)
})
$('#a2').click(function(){
var index =$('#t1').val();
$('#u1 li').eq(index).remove(); #Clear (label corresponding to index)
})
</script>
</body>--------------------jQuery operation on CSS
$(''). css('style name ',' style value ') - modify css Style
Eg jQuery programming example - dynamic display of likes
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container{
padding:50px;
border:1px solid #dddddd;
}
.item{
position:relative; #Combined application of relative and absolute
width:30px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
<span>fabulous</span> #Inline label
</div>
</div>
<div class="container">
<div class="item">
<span>fabulous</span>
</div>
</div>
<div class="container">
<div class="item">
<span>fabulous</span>
</div>
</div>
<div class="container">
<div class="item">
<span>fabulous</span>
</div>
</div>
<script src="jquery-3.6.0.js"></script>
<script>
$('.item').click(function(){
AddFavor(this);
});
function AddFavor(self){
var fontsize =15;
var top =0;
var right =0;
var opacity =1;
var tag =document.createElement('span'); #Creating label objects using dom selectors
$(tag).text('+1'); #$to jQuery object
$(tag).css('color','green');
$(tag).css('position','absolute'); #CSS style actions
$(tag).css('fontSize',fontsize + 'px');
$(tag).css('right',right + 'px'); #"+ 'px' is required for pixel values
$(tag).css('top',top + 'px');
$(tag).css('opacity',opacity);
$(self).append(tag); #Append number to the tail
var obj= setInterval(function(){ #Timer for dynamic effects
fontsize =fontsize +5;
top =top -5;
right =right -5;
opacity =opacity -0.2;
$(tag).css('fontSize',fontsize + 'px');
$(tag).css('right',right + 'px');
$(tag).css('top',top + 'px');
$(tag).css('opacity',opacity);
if(opacity<0){ //If < 0, interrupt the timer and clear the dynamic tag, otherwise the timer will run continuously
clearInterval(obj); //obj is the timer handle
$(tag).remove();
}
},100); #Dynamic effect duration
}
</script>
</body>--------------------jQuery location operation
$(''). scrollTop() - get location / $(window) Scrolltop () - get the position of the main window
$(''). scrollTop(0) - set position / $(window) scrollTop(0) - sets the position of the main window
-EG-
<body>
<div id="i1" style="height:100px;overflow:auto"> #Small scroll window
<p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
<p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
<p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
</div>
<div style="height:1000px;overflow:auto"></div> #Window scrolling window
<script src="jquery-3.6.0.js"></script>
</body>$(''). scrollLeft() - get the position of left and right windows
$(''). scrollLeft(0) - sets the position of the left and right windows
$(''). offset() - get the coordinates of the specified tag in HTML
$('').offset().top
$('').offset().left
--------------------jQuery event
DOM: three binding methods
jQuery: Four
I:
$('.c1').click()
$('.c1').blur()
$('.c1').change()
II:
$('.c1').bind('click',function() {}) binds events to the C1 tag
$('.c1').unbind('click',function() {}) unbind
III:
Method 3 can delegate events. For newly added and created label objects, you can also attach events!!!!!
$('.c1').delegate('a','click',function() {}) binds all a tag events under C1
$('.c1').undelegate('a','click',function(){ })
-EG-
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="t1" type="text"/>
<input id="a1" type="button" value="add to"/>
<ul id="u1">
<li>1</li>
<li>2</li>
</ul>
<script src="jquery-3.6.0.js"></script>
<script>
$('#a1').click(function(){
var v =$('#t1').val();
var temp ="<li>" + v + "</li>";
$('#u1').append(temp);
});
$('ul').delegate('li','click',function(){ #Delegate events, and bind events for adding labels after
var v =$(this).text();
alert(v);
})
</script>IV:
$('.c1').on('click',function(){ })
$('.c1').off('click',function(){ })
Eg jQuery programming example - form verification
Requirements: first pop-up verification, and then jump
Knowledge points: different binding and execution order of dom and jQuery events
<body>
<a onclick="return ClickOn()" href="http://www.baidu. Com "> here < / a > #dom
<a id="i1" href="http://www.baidu. Com "> here < / a > #jquery
<script src="jquery-3.6.0.js"></script>
<script>
function ClickOn(){ #dom events
alert(123);
return true; #return true indicates the following events (jump)
}
$('#i1').click(function(){ #jQuery event
alert('abc');
return false; #return true indicates that no subsequent events will occur (jump)
})
</script>
</body>
#dom event, execute the event first and then jump. The application of return must be described in the label
#jQuery event: execute the event first and then jump. There is no need to explain the application of return----------=-------Prevent events from happening
return false;true
Eg jQuery programming example - full login verification window
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.error{
color:red;
}
</style>
</head>
<body>
<form id="f1" action="e13.html" method="get">
<div><input name="n1" type="text"/></div>
<div><input name="n2" type="password"/></div>
<input type="submit" value="Submit"/>
</form>
<script src="jquery-3.6.0.js"></script>
<script>
$(':submit').click(function(){
$('.error').remove(); //#Every time an event is triggered, the error is cleared first
var flag =true;
$('#f1').find('input[type="text"],input[type="password"]').each(function(){
var v =$(this).val();
if(v.length <= 0){
flag =false; //return false, global variable
var tag =document.createElement("span"); //#dom create label
tag.className ='error'; //Adding styles to dom
tag.innerHTML='Required '; //. innerHTML "=" assignment;
$(this).after(tag); // #Same level tail append
}
})
return flag; //return false
})
</script>
</body>------------------Make an event happen
$(function(){ ...... }) //When the page frame is loaded, it is automatically executed
$(':submit').click(function(){ ......... }) //When all elements of the page are fully loaded, execute
#Because the program is executed in sequence, if the pre event content cache is large (eg:img), you need to apply $(function() {...})
------------------jQuery extension
$.extend({......}) - Extensions can call ($.) Custom jQuery method for
<body>
<script src="jquery-3.6.0.js"></script>
<script>
$.extend({
'pqm':function(){
return 'wa'
}
});
var v =$.pqm();
alert(v);
</script>
</body>$.fn.extend({......}) - To extend the custom jQuery method, you need to use the selector object ($('').) Make a call
-------------------------------------------------------------------------
!!!!!!!!!! Note:
jQuery add style: $('') css('style name ',' style value ')
dom add style: object className =' '
Similarly, other operations basically follow such rules.
$(''). Method (') - get, modify, set
dom object Method = '' - modify, set
jQuery obtains selectors in the same way as CSS defines selectors, requiring + '# /.', Always forget to add '. / #'