JQuery之选择器

层级关系选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层级关系选择器</title>
</head>
<body>
<ul id="university">
    <li>烟台大学
        <ul>
            <li id="math">数学院</li>
            <li>法学院</li>
            <li>航海学院</li>
        </ul>
    </li>
    <li>青岛理工大学</li>
    <li>山东科技大学</li>
</ul>
</body>
<script src="../js/jquery.min.js"></script>
<script>
    /*后代选择器*/
    /*var result = $("#university li");
     console.log(result);*/

    /*子代选择器*/
    /*var result = $("#university > li");
     console.log(result);*/

    /*相邻选择器*/
    var result = $("#math + li");
    console.log(result);
</script>
</html>

 

 

伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
</head>
<body>
<h1>欢迎来到北京大学</h1>
<ul>
    <li>烟台大学</li>
    <li>鲁东大学</li>
    <li>山东大学</li>
    <li>清华大学</li>
    <li>北京大学</li>
</ul>
爱好：<input type="checkbox">篮球
<input type="checkbox">足球

<br>

<button id="run">Run</button>
<span style="position: relative">qwer</span>

</body>
<script src="../js/jquery.min.js"></script>
<script>
    /*获取第一个元素*/
    /*first伪类和first()方法获取的元素一样的。*/
    console.log($("li:first"));
    /*当作选择器来使用*/
    console.log($("li").first());
    /*当作一个方法使用*/
    /*获取最后一个元素*/
    console.log($("li:last"));
    console.log($("li").last());

    /*取非选择器*/
    console.log($("input:not(:checked)"));
    console.log($("input:checked"));

    /*索引值为偶数的元素 实际返回奇数行的元素，因为索引开始为0*/
    console.log($("li:even"));
    /*索引值为奇数的元素 实际返回偶数行的元素，因为索引开始为0*/
    console.log($("li:odd"));

    /*获取指定索引值得元素*/
    console.log($("li:eq(3)"));
    /*获取索引值大于指定值得元素 直到最后一个（不包括索引值本身）*/
    console.log($("li:gt(2)"));
    /*获取索引值小于指定值得元素 直到第一个（不包括索引值本身）*/
    console.log($("li:lt(2)"));

    /*获取所有的标题元素*/
    console.log($(":header").css("color", "red"));

    /*获取所有包含动画的元素*/
    $("#run").click(function () {
        $("span:not(:animated)").animate({"left": "+=20"}, 1000);
    });
</script>
</html>

 

 

内容选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内容选择器</title>
</head>
<body>
<div>
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>
    <div>
        <p>jieruijiaoyu</p>
    </div>
</div>

<div></div>
</body>
<script src="../js/jquery.min.js"></script>
<script>
    /*查找所有包含指定文本的元素*/
    console.log($("div:contains('John')"));
    /*查找所有没有子元素或内容的元素*/
    console.log($("div:empty"));
    /*非空*/
    console.log($("div:not(empty)"));
    /*查找所有包含指定元素的元素*/
    console.log($("div:has(p)"));
    /*查找含有子元素或内容得元素*/
    console.log($("div:parent"));
</script>
</html>

 

 

可见性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>可见性</title>
</head>
<body>
<div>烟台大学</div>
<div style="display: none">杰瑞教育</div>
<input type="text" value="烟台大学">
<input type="hidden" value="杰瑞教育">
</body>
<script src="../js/jquery.min.js"></script>
<script>
    /*查找所有隐藏或者type类型等于hidden的类型*/
    console.log($("div:hidden"));
    console.log($("input:hidden"));
</script>
</html>

 

 

属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="div4">div4</div>
<div id="div5">div5</div>
<div id="div51">div51</div>
<div class="div6">div6</div>
</body>
<script src="../js/jquery.min.js"></script>
<script>
    /*查找所有包含id属性的元素*/
    console.log($("div[id]"));
    /*查找所有属性值等于某个值得元素*/
    console.log($("div[id=div2]"));
    /*查找所有属性值不等于某个值得元素*/
    console.log($("div[id!=div2]"));
    /*查找所有属性值以某个值开头的元素*/
    console.log($("div[id^=div]"));
    /*查找所有属性值以某个值结尾的元素*/
    console.log($("div[id$=5]"));
    /*查找所有属性值包含某个值的元素*/
    console.log($("div[id*=5]"));
    /*复合选择器*/
    console.log($("div[id][id!=div2]"));
</script>
</html>

 

 

子元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子元素选择器</title>
</head>
<body>
<ul>
    <li>北京大学</li>
    <li>清华大学</li>
    <li>山东大学</li>
    <li>复旦大学</li>
    <li>香港大学</li>
</ul>
<div>
    <p>123</p>
</div>
<div>
    <p>123</p>
    <p>123</p>
</div>
</body>
<script src="../js/jquery.min.js"></script>
<script>
    /*返回符合条件的子元素*/
    console.log($("li:nth-child(odd)"));
    console.log($("li:nth-child(even)"));
    /*返回第一个字元素*/
    console.log($("li:first-child"));
    /*返回最后一个字元素*/
    console.log($("li:last-child"));
    /*返回只有一个资源的元素       独生子*/
    console.log($("p:only-child"));
</script>
</html>

 

 

表单选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单选择器</title>
</head>
<body>
<form>
    <input type="button" value="Input Button"/><br>
    <input type="checkbox"/><br>

    <input type="file"/><br>
    <input type="hidden"/><br>
    <input type="image"/><br>

    <input type="password"/><br>
    <input type="radio"/><br>
    <input type="reset"/><br>

    <input type="submit"/><br>
    <input type="text"/><br>
    <select>
        <option>Option1</option>
        <option>Option2</option>
        <option>Option3</option>
    </select>

    <textarea></textarea>
    <button>Button</button>

</form>
</body>
<script src="../js/jquery.min.js"></script>
<script>
    /*返回表单里的所有元素：input textarea button select*/
    console.log($(":input"));
    /*返回type类型为button的和button标签的元素*/
    console.log($(":button"));
    console.log($(":text"));
    console.log($(":checkbox"));
    console.log($(":radio"));
    console.log($(":image"));
    console.log($(":password"));
    console.log($(":reset"));
    console.log($(":submit"));
</script>
</html>

 

posted @ 2017-08-14 20:39  哈喽杏红  阅读(125)  评论(0)  编辑  收藏  举报