jQuery的选择器

jQuery的选择器

1.1 基本选择器

jQuery语法 JS语法/解释
$('#id属性值') document.getElementById()
$('tag标签名称') document.getElementsByTagName()
$('.clsss属性值') class属性值选择器
$('*') 通配符选择器,表示选择所有节点
$('s1,s2,s3') 联合选择器

示例:

jQuery代码 解释
$('#username').css('color', 'red'); id为username的节点的color属性值设置为red
$('input').css('background-color', 'blue'); input标签节点的background-color属性值设置为blue
$('.apple').css('background-color', 'green'); class属性值为apple的节点的background-color属性值设置为green
$('*').css('background-color', 'gray'); 所有节点的background-color属性值设置为gray
$('input,#username,.apple').css('font-size', '25px') input标签、id为username的节点、class属性值为apple的节点 的font-size属性值设置为25px

1.2 层次选择器

1.$(s1 s2) 派生选择器,获取s1内部的所有s2节点(不考虑层次)

<div>
    <span>span>①
    <p>
        <span>span>②
    p>
div>
<span>span>③

$('div span')获取的节点为①和②

2.$(s1>s2) 直接子元素选择器,获取s1内部的直接子元素节点s2

<div>
    <span>span>①
    <p>
        <span>span>②
    p>
    <span>span>③
div>
<span>span>④

$('div>span')获取的节点为①和③

3.$(s1+s2) 直接兄弟选择器,获取s1后边紧挨着的第一个兄弟关系的s2节点

<div>
    <span>span>①
    <p>
        <span>span>②
    p>
    <span>span>③
div>
<span>span>④
<span>span>⑤

$('div+span')获取的节点为④

4.$(s1~s2) 后续全部兄弟节点选择器,获取s1后边全部兄弟关系的s2节点

<div>
    <span>span>①
    <p>
        <span>span>②
    p>
    <span>span>③
div>
<span>span>④
<span>span>⑤
<p>p>
<span>span>⑥

$('div~span')获取的节点为④⑤⑥

1.3 并且(过滤)选择器

jQuery语法 解释
:first 匹配找到的第一个元素
:last 匹配找到的最后一个元素
:not(selector) 去除所有给定选择器匹配的元素
:even 匹配所有索引值为偶数的元素,从0开始计数
:odd 匹配所有索引值为奇数的元素,从0开始计数
:eq(index) 匹配一个给定索引值的元素,从0开始计数
:gt(index) 匹配所有大于给定索引值的元素,从0开始计数
:lt(index) 匹配所有小于给定索引值的元素,从0开始计数
:header 匹配如h1、h2、h3之类的标题元素
<body>
    <h1 class="hero">一级标题h1>①
    <h2>二级标题h2>②
    <h3>三级标题h3>③

    <li>刘备li>④
    <li id="zhang">张飞li>⑤
    <li>关羽li>⑥
    <li id="zhao">赵云li>⑦

    <li>孙权li>⑧
    <li class="hero">周瑜li>⑨
    <li>黄盖li>⑩
    <li>吕蒙li>⑪    
body>
jQuery表达式 获取的元素
$("li:first")
$("li:last")
$("li:eq(4)")
$("li:gt(4)") ⑨⑩⑪
$("li:lt(3)") ④⑤⑥
$("li:even") ④⑥⑧⑩
$("li:odd") ⑤⑦⑨⑪
$("li:not(#zhao,#zhang)") ④⑥⑧⑨⑩⑪
$(":header") ①②③

联合选择器并且选择器

  1. 联合选择器使用逗号”,”分隔,比如$('#zhang,#zhao,.hero')获取的元素为①⑤⑦⑨
  2. 并且选择器无需分隔,但使用时要保证不会产生歧义。比如:$(":header.hero")$(".hero:header")获取的结果一样,都是①;但$("li.hero")$(".heroli")获取的结果不一样,因为$(".heroli")有歧义

1.4 内容过滤选择器

jQuery语法 解释
:contains 节点必须包含指定的内容
:empty 节点内容为空
:has 节点内部包含指定的选择器
:parent 寻找的节点必须作为父元素节点存在
<div>linken love beijingdiv>①
<div class="apple">jack love shanghaidiv>②
<div>div>③
<div><img/>div>④
<div>      div>⑤
jQuery表达式 获取的元素
$("div:contains(beijing)")
$("div:empty")
$("div:has(#apple)")
$("div:parent") ①②④⑤

1.5 表单域选中选择器

这里用一个Demo来演示:


<html>
<head>
    <title>title>

    <script type="text/javascript" src="jquery-1.4.4.js">script>

    <script type="text/javascript">

        function f1() {
            // 获得复选框的选中情况
            console.log($("input:lt(4):checked"));
            // 获得下拉列表的选中情况
            console.log($("option:selected"));

            // 每个过滤选择器使用之前,已经获得的元素节点的下表进行归为(从0开始重新计算)
            console.log($("input:gt(3):lt(2)"));// 结果:男、女
            console.log($("input:gt(1):lt(3)"));// 结果:足球、乒乓球、男
            console.log($("input:even:gt(1)"));// 结果:男、保密
        }

    script>
head>
<body>

    <h1>表单域选中选择器h1>

    爱好:
    <input type="checkbox" name="hobby[]" value="篮球"/>篮球  
    <input type="checkbox" name="hobby[]" value="排球"/>排球  
    <input type="checkbox" name="hobby[]" value="足球"/>足球  
    <input type="checkbox" name="hobby[]" value="乒乓球"/>乒乓球  

    br>

    性别:
    <input type="radio" name="sex" value="男">男  
    <input type="radio" name="sex" value="女">女  
    <input type="radio" name="sex" value="保密">保密  

    br>

    学历:
    <select>
        <option value="0">请选择option>
        <option value="1">小学option>
        <option value="2">中学option>
        <option value="3">大学option>
    select>

    br>

    <input type="button" value="触发" onclick="f1()"/>

body>
html>

你可能感兴趣的:(jquery,jQuery)