JQuery selector
Analysis: In order to find the type of tags we need from complex DOM trees better or faster
1. Hierarchical selector
<!-- When clickingh2Elemental time，forThe <span> element under #menu is added to the color background of #09F --><!-- <script type="text/javascript">
$(function () {
$('h2').click(function () {
$('#menu span').css('background-color','#09F');
});
});
</script>-->
2. Basic selector
<!-- Add styles to the label selector -->
<script type="text/javascript">
$(function () {
$('h2').click(function () {
$('h3').css('background-color', '#09F');
});
});
</script>
3. Basic filter selector
<script type="text/javascript">
$(function () {
$('h2').click(function () {
//$('li:first').css('background-color', '#09F');//The first//$('li:last').css('background-color', '#09F');//The last one//$('li:not(.three)').css('background-color', '#09F');//class is not a three element// $('li:even').css('background-color', '#09F');//Elements with even index values// $('li:eq(1)').css('background-color', '#09F');//Element with index value of 1//$('li:gt(1)').css('background-color', '#09F');//Elements with index value greater than 1//$('li:lt(1)').css('background-color', '#09F');//Elements with index value less than 1//$(':header').css('background-color', '#09F');//All title elements$(':focus').css('background-color', '#09F');//Get the element of focus});
});
</script>
4. Visibility Filter Selector
<script src="js/jquery-1.8."></script>
<script type="text/javascript">
$(function () {
// $('p:hidden').show();//Show text$('p:visible').hide();//Hide text});
</script>
<style type="text/css">
#txt_show
{
display:none;color:#00C;
}
#txt_hide
{
display:block;color:#F30;
}
</style>
</head>
<body>
<p >Click the button，I'll be hidden~</p>
<p >Hidden me，Shown，hey-hey~</p>
<input type="button" name="show" value="Click to display text" />
<input type="button" name="hide" value="Click to hide text" />
</body>
5. Attribute Selector
<!--ChangeclassThe value of the attribute isoddsbackground color of elements -->
<script type="text/javascript">
$(function () {
$("h2").click(function () {
$("[class=odds]").css("background-color", "#FFFFFF");
})
});
</script>
What can Jquery do
Access and manipulate DOM elements
Control page style
Handle page events
Extend new jQuery plugin
Perfect combination with Ajax technology
Advantages of Jquery
Small size, only about 100KB after compression
Powerful selector
Excellent DOM package
Reliable event handling mechanism
Excellent browser compatibility
Simplify programming with implicit iteration
Rich plug-in support
Decomposition of jQuery knowledge:
1. About the difference between $(function(){})
Analysis: Wait until all resources (html tags, css, img, js) on the page are loaded before execution, including (text material, pictures, js, css)
$(function(){}): After waiting for the tag material on the page to load, it starts execution.
Second point:
Only call once
$(function(){}) can be called multiple times
2. How to set styles through Jquery
1). Pass $("Selector").css("Attribute Name", "Attribute Value");
//The attribute name written here is consistent with the one written in CSS
2).$("Selector").html(): Get the html code between two tags
3).$("Selector").addClass("Attribute Value")
The dom document structure can be changed dynamically. Then set the style.
Conversion of objects and Jquery objects
Convert jquery object to dom object
jquery provides two methods to convert a jquery object into a dom object, namely [index] and get(index).
ar cr= cr=("#cr"); //jquery objectvar cr = $cr[0]; //dom object can also be written as var cr=$(0);alert(); //Detect thischeckboxWhether to choose
Convert object to jquery object
For a dom object, you just need to wrap the dom object with $() to obtain a jquery object, the method is $(dom object);
Code:
var cr=("cr"); //dom objectvar cr= cr=(cr); //Convert tojqueryObject
Light stick effect case:
js code:
$(function () {
var lis = ('li');
for (var i = 0; i < ; i++) {
lis[i].onmouseover = function () {
= 'red';
};
lis[i].onmouseout = function () {
= '';
}
}
});
jQuery code:
$(function () {
$('li').mouseover(function () {
$(this).css('background','red');
}).mouseout(function () {
$(this).css('background', '');
})
});
jQuery Waterfall Flow Case:
<script>
var margin = 10;//Set the spacing herevar li = $("li");//Here is the block namevar li_W = li[0].offsetWidth + margin;//File the actual width of the block (including spacing. Here we use the source offsetWidth function. The width() function of jQuery is not applicable because it cannot obtain the actual width. For example, if there is pandding in the element, it will not work)function liuxiaofan() {//Define it as a function for easy callingvar h = [];//Array of block height recordsvar n = / li_W | 0;//Divid the width of the window by the block width means how many blocks can be placed in a rowfor (var i = 0; i < ; i++) {//Cycle as many li as you haveli_H = li[i].offsetHeight;//Get the height of each liif (i < n) {//n is the li with the most lines, so less than n is the first lineh[i] = li_H;//Put each li into the array(i).css("top", 0);//The top value of Li in the first row is 0(i).css("left", i * li_W);//The left coordinate of the i-th li is the width of i*li}
else {
min_H = (null, h);//Get the minimum value in the array, the one with the smallest height value in the blockminKey = getarraykey(h, min_H);//Pointer corresponding to the smallest valueh[minKey] += li_H + margin;//Add a new height value after adding a new height(i).css("top", min_H + margin);//First get the Li with the smallest height, and then put the next Li under it(i).css("left", minKey * li_W); //The left coordinate of the i-th li is the width of i*li}
$("h3").eq(i).text("serial number:" + i + ",high:" + li_H);//Write the block sequence number and its height value into the corresponding block H3 title}
}
/* Use the for in operation to return the corresponding number of items of a certain value in the array (for example, calculate the smallest height value is the number in the array) */
function getarraykey(s, v) { for (k in s) { if (s[k] == v) { return k; } } }
/*Be sure to use onload here, because the image does not know the height value if it is not loaded*/
= function () { liuxiaofan(); };
/*The function is also run when the browser window changes*/
= function () { liuxiaofan(); };
</script>
The above content is the relevant knowledge of jQuery selector and jquery case introduced to you by the editor. I hope it will be helpful to you. If you want to know more about jquery, please pay attention to my website!