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>

 

posted @ 2017-08-16 18:32  哈喽杏红  阅读(144)  评论(0)  编辑  收藏  举报