Now there is a need to select all the elements that have background images.
This problem is a bit tricky. We can't use the select expression to complete this problem.
Using jquery's Dom filtering method filter (), you can select elements based on any conditions expressed in the function.
The filter method in jquery allows you to pass a string (that is, a selector expression) as an argument.
Or a function is passed. Its return value defines whether an element is selected.
The passed function will run for each element in the current selection set.
When the function returns false, the corresponding function is removed from the selection set. Whenever the return value is true, the corresponding element
Not affected.
Copy Code code as follows:
JQuery (' * '). Filter (function () {
Return!! JQuery (this). CSS (' background ');
});
The above code selects all elements that have a background picture.
The initial collection is all elements (*). Then call filter () with a function as a parameter.
This function is judged on each set for attribute background attributes.
If it does, it is reserved. Otherwise, the element is deleted in the result set.
What you see!! Is any undefined in the middle of JavaScript, an empty type, and, of course, false.
If the function call returns these values, then the function returns False, thereby removing in the collection
An element that has no background attribute.
As a matter of fact!! is not necessary. Because jquery converts these return values to Boolean types. But retention is still a good idea.
So anyone who sees your code can be absolutely sure of your intentions. (This facilitates the readability of your code).
In a function that passes filter (), you can refer to the current element through the This keyword.
The inclusion of it in the jquery function becomes a jquery object.
this//General element object.
JQuery (this)//jquery object.
Here are some examples of inspiring your imagination.
Copy Code code as follows:
JQuery (' div '). Filter (function () {
var width = jQuery (this). width;
Return width >100 && widht < 200;
});
Returns 10 or 20 elements of a child element.
JQuery (' * '). Filter (function () {
var children = JQuery (this). Childern (). length;
Return Children ===10 | | Children ===20;
});
Here's a code example: Determine which elements have background colors and change their background color to black.
Copy Code code as follows:
<title></title>
<style type= "Text/css" >
. c1{
Background-color:yellow;
}
. c2{
Background-color:green;
}
p{
Background-color:pink;
}
h3{
Background-color:gray;
}
</style>
<body>
<div class= "C1" >bye Bye beautiful</div>
<div class= "C2" >nothing but the girl</div>
<p>the Lazy song</p>
<script type= "Text/javascript" src= "Jquery.2.0.3.js" ></script>
<script type= "Text/javascript" >
JQuery (document). Ready (function ($) {
var ret = $ (' * '). Filter (function (index) {
Return!$ (this). CSS (' Background-color ');
});
$.each (ret, function (index, VAL) {
$ (val). css (' background-color ', ' black ');
});
});
</script>
</body>
