JQuery的一些小小的知识

Posted 哈喽杏红

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQuery的一些小小的知识相关的知识,希望对你有一定的参考价值。

过滤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤</title>
</head>
<body>
<ul class="ul">
    <li>北京大学1</li>
    <li id="li2">北京大学2</li>
    <li>北京大学3</li>
</ul>
</body>
<script src="../js/jquery.min.js"></script>
<script>
    /*eq索引值*/
    console.log($("li:eq(1)"));
    /*.eq   方法*/
    console.log($("li").eq(1));

    console.log($("ul").hasClass("ul"));

    console.log($("li").filter("#li2"));

    console.log($("li").get());
    //等于    console.log($("li")[0]);

</script>
</html>

 

 

map方法has方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map方法has方法</title>
</head>
<body>
<p>123</p>
<form>
    <input type="text" name="name" value="John"/>
    <input type="text" name="password" value="password"/>
    <input type="text" name="url" value="http://ejohn.org/"/>
</form>
<input type="text" name="ccy" value="ccy">

<ul>
    <li>list item 1</li>
    <li>list item 2
        <ul>
            <li>list item 2-a</li>
            <li>list item 2-b</li>
        </ul>
    </li>
    <li>list item 3</li>
    <li>list item 4</li>
</ul>
</body>
<script src="../js/jquery.min.js"></script>
<script>
    $("p").append($("input").map(function () {
        return $(this).val();
    }).get().join(","));


    /*参数1:要查找的元素
    * 参数2:查找的范围*/
    console.log($("input",$("form")));

    /*get*()    (get后边括号是空的)一次把全部的jquery对象转换成js对象*/


    $(li).has(ul).css(background-color, red);
</script>
</html>

 

 

查找

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查找</title>
</head>
<body>
<ul>
    <li>北京大学1
    <ul>
        <li>理学院</li>
        <li>法学院</li>
    </ul></li>>
    <li>北京大学2</li>
</ul>
<ul>
    <li>清华大学1</li>
    <li>清华大学2</li>
</ul>

<p><span>Hello</span>, how are you?</p>
</body>
<script src="../js/jquery.min.js"></script>
<script>
    console.log($("ul").children());

    console.log($("p").find("span"));
</script>
</html>

 

以上是关于JQuery的一些小小的知识的主要内容,如果未能解决你的问题,请参考以下文章

常用Javascript代码片段集锦

自己写一个小小的jQuery功能

VS Code中自定义Emmet代码片段

Visual Studio 2012-2019的130多个jQuery代码片段。

jQuery应用 代码片段

很实用的JQuery代码片段(转)