jQuery common API-style operation

1. Manipulate css methods

jQuery can use css methods to modify simple element styles, and can also operate classes to modify multiple styles.

(1) If only the attribute name is written in the parameter, the attribute value will be returned.

$(this).css("color"); // What you get is the font color of this element

(2) The parameters are the attribute name and attribute value , separated by commas . They are setting styles. The attribute must be enclosed in quotation marks . If the attribute value is a number, it does not need to be followed by units and quotation marks.

$(this).css("color","red"); // Set the font color of this element to red 

$(this).css("width",400); // The attribute value is a number, and it can be without units or quotation marks.

(3) Parameters can be in the form of objects to facilitate setting multiple sets of styles . The attribute name and attribute value are separated by colons. The attribute does not need to be quoted, but it is better to add it; if the attribute value is not a number, it needs to be quoted.

 $(this).css({"color":"blue","font-size":"20px",backgroundColor: "red"}); 

 //Set the font color for the element and set the font size and background color. If it is a compound attribute , it must use camel case naming.

2. Set class style method

Its function is equivalent to className in native JS. It can operate class styles. Be careful not to add dots to the parameters in the operating class.

(1) Add class

$("div").addClass("current"); // Add a class named current to the div element

(2) Remove class

$("div").removeClass("current"); // Remove the class named current from the div element

(3) Switching class

$("div").toggleClass("current"); // Add/remove the class named current to the div element

<!-- css样式 -->
<style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
    }
    .current {
        margin: 100px;
        background-color: skyblue;
    }
</style>
<!-- html结构 -->
<div class="current"></div>
<!-- js代码 -->
<script>
    $(function() {
        // 1. 添加类 addClass()  不要加·
        /* $('div').click(function() {
                $(this).addClass('current');
            }) */
        // 2. 删除类 removeClass()
        /*   $('div').click(function() {
                    $(this).removeClass('current')
                }) */
        // 3. 切换类 toggleClass() 表示如果本身有类current，则点击移除，否则点击添加
        $('div').click(function() {
            $(this).toggleClass('current');
        })
    })
</script>

 jQuery provides us with the toggle class toggleClass , which greatly simplifies our operations. We don't need to use variables to judge and switch content like in native JS.

2.1 The difference between class operations and className

The className in native JS will overwrite the original class name in native JS .

However, the class operations in jQuery only operate on the specified class and will not affect the original class name . In fact, you can also feel the difference through the name. One is addClass, which means adding a class. Since it is adding, of course it will not affect the original class name. , the same is true for removeClass, the specified class is removed, and unspecified classes will not be affected.

3. Case: tab bar switching

<!-- css样式 -->
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .tab {
        margin: 100px auto;
        width: 1000px;
    }
    .tab-list {
        height: 44px;
        line-height: 44px;
        background-color: #EEF1EE;
        border: 1px solid #ccc;
    }
    .tab-list ul li {
        float: left;
        list-style: none;
        padding: 0 25px;
        /* cursor: pointer; */
        cursor: pointer;
    }
    .tab-con {
        padding: 10px;
    }
    .current {
        color: #fff;
        background-color: #D6271F;
    }
    .item {
        display: none;
    }
</style>
<!-- html结构 -->
<div class="tab">
    <div class="tab-list">
        <ul>
            <li class="current">商品介绍</li>
            <li>规格与包装</li>
            <li>售后保障</li>
            <li>商品评价（5000）</li>
            <li>手机社区</li>
        </ul>
    </div>
    <div class="tab-con">
        <div class="item" style="display: block;">
            商品介绍模块内容
        </div>
        <div class="item">
            规格与包装模块内容
        </div>
        <div class="item">
            售后保障模块内容
        </div>
        <div class="item">
            商品评价（5000）模块内容
        </div>
        <div class="item">
            手机社区模块内容
        </div>
    </div>
</div>
<!-- js代码 -->
<script>
    $(function() {
        $('.tab-list ul li').click(function() {
            // 1. 利用隐式迭代，为每个小li绑定点击事件，点击后当前小li改变自身样式(添加类)，其余兄弟不变（移除类）--排他思想
            $(this).addClass('current').siblings().removeClass('current');
            // 2. 点击的同时获得对应的索引号
            var index = $(this).index();
            // 3. 根据索引号将对应的模块找出显示，其余模块隐藏
            $('.tab-con .item').eq(index).show().siblings().hide();
        })

    })

Using jQuery to achieve the tab bar switching effect is obviously much simpler than native JS, which just fits the purpose of jQuery.