JS之JQuery补充

最新推荐文章于 2023-05-28 13:37:49 发布

jredu1996

最新推荐文章于 2023-05-28 13:37:49 发布

阅读量156

点赞数

分类专栏： jquery 入门文章标签： jquery JQuery

本文链接：https://blog.csdn.net/jredu1996/article/details/77483627

版权

入门同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

jquery

3 篇文章 0 订阅

订阅专栏

过滤

<!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>

jredu1996

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS之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>
复制链接

扫一扫

专栏目录