The use of jQuery selector, jqueryt features implicit iteration and chain programming

1. jQuery selector

1.1 jQuery basic selector

There are many ways to get elements in native JS, which are very complicated, and the compatibility is inconsistent. Therefore, jQuery has been encapsulated to make the obtaining of elements a unified standard.

$("选择器") //里面直接写CSS选择器即可，但是要加引号

Insert picture description here

1.2 Implicit iteration

The process of traversing internal DOM elements (stored in pseudo-array form) is called implicit iteration.

Simple understanding: loop traversal for all matched elements, execute the corresponding method, don't need to write loop operations ourselves, which simplifies our operations.

$("div").css("background","pink"); //隐式迭代就是把匹配的所有元素，内部进行遍历循环，给每一个元素添加css这个方法

1.3 jQuery filter selector

Insert picture description here

1.4 jQuery filtering method

Insert picture description here

1.5 Exclusive thoughts in jQuery

Want to choose one more effect, exclusive thought: set the style of the current element, and clear the style of the remaining sibling elements.

<body>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <script>
        $(function() {
     
     
            //1. 隐式迭代，给所有的按钮都绑定了点击事件
            $("button").click(function() {
     
     
                // 2. 当前元素变化背景颜色
                $(this).css("background", "pink");
                // 3. 其余的兄弟元素去掉背景颜色 
                $(this).siblings("button").css("background", "")
            });
        })
    </script>
</body>

1.6 jQuery chain programming

Chain programming is to save the amount of code. When using chain programming, you must pay attention to which object executes the style.

$(this).css('color','red').siblings().css('color','');Set your own color to red and remove the color of brother elements