[Web front end | jQuery] jQuery commonly used API

jQuery commonly used API

1: jQuery selector

$("Selector") // Write the CSS selector directly in the selector, but add quotation marks

Attributes description use
ID selector Get the element with the specified ID $("#id")
Select all selector Match all elements $("*’’)
Class selector Get elements of the same class $(".class")
Label selector Get all elements of the same type of label $(“div”)
Union selector Select multiple elements s(“div,p,li”)
Intersection selector Intersection element $(“Ii.current”)
Child selector Use the> sign to get the parent-child level elements; note that the grandchildren level elements will not be obtained $(“ul>li”);
Descendant selector Use spaces to represent descendant selectors to get all li elements under ul, including grandchildren, etc. $(“ul li”);

2: jQuery implicit iteration

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

jQuery style cannot use style

jQuery style settings:

$('div').css('属性','值');

3: jQuery filter selector

Attributes use description
:first $("li:first’) Get the first li element
:last $("li:last’) Get the last li element
:eq(index) $(“li:eq(2)”) Among the obtained li elements, the element with index number 2 is selected, and the index number index starts from 0.
:odd $(“Ii:odd”) Among the obtained li elements, select the element with an odd index number
:even $(“Ii:even”) Among the obtained li elements, select the element with an even index number

4: jQuery filtering method

Attributes use description
parent() $(“li”).parent(); Find parent
children(selector) $(“ul” ).children(“li”) Equivalent to $("ul>li"), the nearest level (pro son)
find(selector) $(“ul” ).find(“li”); Equivalent to $("ul li"), descendant selector
siblings(selector) $( “.first” ). siblings(“li”); Find sibling nodes, not including yourself
nextAll([expr]) $(".first"). nextAl1() Find all sibling elements after the current element
prevtAll ([expr]) $(".last") . prevAll() Find all sibling elements before the current element
hasClass(class) $( 'div ’ ).hasClass(“protected”) Check whether the current element contains a particular class, if so, return true
eq(index) $ (“Li”). Ea (2); Equivalent to $("li:eq(2)"), index starts from 0

[Talking]
Suddenly discovered that the font can be changed Suddenly discovered that the font can be changedSudden natural hair now ,It may be to variations of the words thereof
suddenly found that the font may be changed
merrychristmas. Merry christmas.merrychristmas.
merry christmas

<body>
    <div class="test"></div>
    <div></div>
</body>
<script>
    var flag = $('div:first').hasClass('test');
    console.log(flag);
//结果返回true
</script>

5: jQuery's exclusive thought

<script>
    //先全局函数
    $(function () {
     
     
        //点击li,让li添加底下内容
        // 1:变化li的背景色
        $(".tab_list li").click(function () {
     
     
            $(this).addClass('current').siblings().removeClass('current');
            // 2:变化底下的内容
            //  获取被点击li的索引号
            var index = $(this).index();
            $(".tab_con .item").eq(index).show().siblings().hide();
        })
    })
</script>

Guess you like

Origin blog.csdn.net/qq_43490212/article/details/111655102