zoukankan      html  css  js  c++  java
  • jQuery选择器

    (一)基本选择器

    基本:ID,class,标签选择器
    组合:并列,后代,子级

    (二)过滤选择器
    1.基本过滤:按照冒号前面的元素在HTML文档中的原始位置来过滤
    :first,:last,:eq(n),not(选择器),:lt(n),:gt(n),odd,even

    2.属性过滤:根据元素的属性进行筛选
    [属性名],[属性名=值],[属性名!=值],[属性名*=值],[属性名^=值],[属性名$=值]

    3.内容过滤
    :has(选择器) 找出带有某种选择器的子元素的外部元素
    :contains(文字)

    <%@ page language="java" contentType="text/html; charset=utf-8"
        pageEncoding="utf-8"%>
       
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="JS/jquery-1.11.1.min.js"></script> 
    <script type="text/javascript">
    $(document).ready(function(){
        //***********内容过滤选择器*************
        //$("div:has(span)").css("background-color","green");找包含span标签的div
        //$("div:has(*)").css("background-color","green");*是找带有子元素的div
        //$("div:contains(ve)").css("background-color","green");找内容包含ve的div
        //***********属性过滤选择器*************
        //$("div[title]").css("background-color","green");找有title属性的div
        //$("div[title=love]").css("background-color","green");找title是love的div
        //$("div[title!=love]").css("background-color","green");找title不是love的div
        //$("div[title*=ve]").css("background-color","green");*=包含
        //$("div[title^=ve]").css("background-color","green");^=以什么开头
        //$("div[title$=ve]").css("background-color","green");$=以什么结尾
        //***********基本过滤选择器*************
        //$("div:first").css("background-color","green");第一个div
        //$("div:last").css("background-color","green");最后一个div
        //$("div:eq(1)").css("background-color","green");根据索引号找,索引号从0开始
        //$("div:lt(2)").css("background-color","green");找索引号2之前的
        //$("div:gt(2)").css("background-color","green");找索引号2之后的
        //$("div:not(div:eq(1))").css("background-color","green");not(过滤器)是排除掉哪一个
        //$("div:odd").css("background-color","green");奇数
        //$("div:even").css("background-color","green");偶数
        //***********基本选择器*************
        //$("div").css("background-color","green");    找所有的div
        //$(".tt").css("background-color","green"); 根据Class名找
        //$("#d5").css("background-color","green"); 根据ID名找
        //$("div,p").css("background-color","green"); 找所有的div和p,并列关系
        //$("div p").css("background-color","green"); 找div里面的p,后代关系
        //$("div.tt").css("background-color","green");找class是tt的div
        //$("div>p").css("background-color","green"); 找是div子级的p
        
    });
    </script>
    <style type="text/css">
    div{
        width:100px;
        height:100px;
        background-color: yellow;
        border: 5px solid red;
        margin: 10px;
        float: left;
    }
    span{
        width:80px;
        height:80px;
        background-color: blue;
        border: 1px solid red;
        margin: 10px;
        float: left;
    }
    p{
        width:50px;
        height:50px;
        background-color: aqua;
        border: 1px solid red;
        margin: 10px;
        float: left;
    }
    </style>
    </head>
    <body>
    <div id="d1" class="tt" title="love">title="love"</div>
    <div id="d2">
        <span>
            <p></p>
        </span>
    </div>
    <div id="d3">
        <p></p>
    </div>
    <div id="d4" class="tt"></div>
    <div id="d5" title="very">title="very"</div>
    </body>
    </html>
  • 相关阅读:
    Notes of Daily Scrum Meeting(12.18)
    Notes of Daily Scrum Meeting(12.17)
    Notes of Daily Scrum Meeting(12.16)
    Notes of Daily Scrum Meeting(12.8)
    Notes of Daily Scrum Meeting(12.5)
    Notes of Daily Scrum Meeting(12.3)
    Notes of Daily Scrum Meeting(11.12)
    Linux中profile、bashrc、bash_profile之间的区别和联系
    Linux GCC编译
    mysql 5.7.16 远程连接
  • 原文地址:https://www.cnblogs.com/hq233/p/6405384.html
Copyright © 2011-2022 走看看