Today's article is the third article of jQuery API. I am in a good mood today, because I have broken 300 fans. I hope all the front-end coders can have smooth sailing on the road of programming and writing, and all get certified as soon as possible. Okk , let’s get down to business, this article will take you into the world of chain programming, which is also a great advantage of jQuery, which can further improve the readability and simplicity of the code, allowing you to enter a higher level Realm's code world.
Another is the further description of the modification of the style. It is no longer just a css method. We will touch the style manipulation class and more style manipulation methods in this article.
------- Next let's enter the code world -------
Article directory:
The realization principle of chain programming:
Two: the operation of style modification
1. The parameter only writes the attribute name
2. The parameter is the attribute value and attribute name, separated by commas
3. The parameters are in the form of objects to facilitate the setting of multiple sets of styles
Two: operation class to modify the style
It has three main style class methods:
Three: The difference between jQuery's class operation and native className operation:
One: chain programming
What is chain programming? :
Chain programming and implicit iteration are the two major characteristics of jQuery. In fact, chain programming can be imagined literally. It is chained like a chain. In the field of programming, it is to separate multiple codes. What do you mean by writing together? Yes, that's right, remember our exclusive thought case, what we did at that time was that the first CSS set the clicked element itself, and the second CSS set the clicked element's sibling element. In fact, the chain programming idea can be used here. By connecting two lines of code, it can be seen that the advantage of chain programming is to reduce code redundancy and increase simplicity.
The realization principle of chain programming:
After the current object calls the first method, it will return a jQuery object, which can continue to call other methods, which is the basic implementation principle of chain programming.
Chain programming example:
Let's take the exclusive thought button as an example, and compare the amount of code redundancy without chain programming:
//不使用链式编程
<script>
$('button').click(function(){
$(this).css('background','red')
$(this).siblings('button').css('background','')
})
</script>
//使用链式编程
<script>
$('button').click(function(){
$(this).css('background','red').siblings('button').css('background','')
})
</script>Two: the operation of style modification
One: operation css method
There are several ways to operate css:
- The parameter writes only the attribute name: the return result is the attribute value
- The parameter is the attribute value and attribute name, separated by commas
- The parameters are in the form of objects, written in curly brackets, in the form of key-value pairs, to facilitate setting multiple sets of styles
1. The parameter only writes the attribute name
The return result is the property value
<div></div>
<script>
$('div').click(function(){
console.log($(this).css('backgroundColor'));
})
</script>
2. The parameter is the attribute value and attribute name, separated by commas
The result is to produce the style effect you want to modify (here is red before clicking)
<body>
<div></div>
<script>
$('div').click(function(){
$(this).css('backgroundColor','pink');
})
</script>
</body>
3. The parameters are in the form of objects to facilitate the setting of multiple sets of styles
Note that the style is unloaded in curly braces, written in the form of key-value pairs, and compound attributes should use camel case naming
<body>
<div></div>
<script>
$('div').click(function(){
$(this).css({'backgroundColor':'pink',
'border':'2px solid'});
})
</script>
</body>
Two: operation class to modify the style
Equivalent to classList and className of native js
It has three main style class methods:
- addClass('class name'): add class name
- removeClass('classname'): remove the classname
- toggleClass('classname'): toggle class name
1.addClass('class name')
The function is to add the class name, here the current class is added after clicking
<style>
div{
width: 300px;
height: 300px;
background-color: rgb(255, 146, 146);
}
.current{
background-color: rgb(0, 160, 246);
}
</style>
<script src="./jquery.js"></script>
</head>
<body>
<div></div>
<script>
$('div').click(function(){
$(this).addClass('current')
})
</script>After clicking, the div has more class names current
2. removeClass('class name')
The function is to delete the class name. Click here to delete the original class name.
<style>
.current{
width: 300px;
height: 300px;
background-color: rgb(0, 160, 246);
}
</style>
<script src="./jquery.js"></script>
</head>
<body>
<div class="current"></div>
<script>
$('div').click(function(){
$(this).removeClass('current')
})
</script>
</body>Deleted the class name current of the div after clicking
3. toggleClass('class name')
This method can actually achieve a class name switching effect. It actually determines whether there is such a class name, delete it if there is, and add it if there is not.
div{
width: 300px;
height: 300px;
background-color: rgb(255, 146, 146);
}
.current{
width: 300px;
height: 300px;
background-color: rgb(0, 160, 246);
}
</style>
<script src="./jquery.js"></script>
</head>
<body>
<div class="current"></div>
<script>
$('div').click(function(){
$(this).toggleClass('current')
})
</script>
</body>After clicking, it will switch back and forth between the two classes. If there is current, it will be deleted. If not, the class name will be added.
Three: The difference between jQuery's class operation and native className operation:
The original className overwrites the original class name, while jQuery's class methods (addClass, etc.) append the class name to the original class.