首页 > 代码库 > 2017-6-2 jQuery 基础 选择器

2017-6-2 jQuery 基础 选择器

2024-09-30 14:13:38   218人阅读

技术分享

用代码练习：

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src=http://www.mamicode.com/"js/jquery-1.7.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        .div1 
        {
            width:100px;
            height:100px;
            background-color:red;
            float:left;
            margin-left:20px;
        }
        #d1 
        {
            background-color:green;
        }
         .div2
        {
            width:100px;
            height:100px;
            background-color:blue;
            float:left;
            margin-left:20px;
        }

            .div3
        {
            width:50px;
            height:50px;
            background-color:blue;
            float:left;
            margin-left:20px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="div1">11111
        <div class="div3"></div>
    </div>
    <div class="div1" id="d1"> 2222</div>
        <div class="div1" id="d2"> 3333</div>
        <div class="div1"> 444441</div>
   <div class="div2"> 555552</div>
    </form>
</body>
</html>
<script type="text/javascript">

    //ID选择器
    //$("#d1").click(function () {
    //    alert("aa");
    //});
    //class选择器
    //$(".div1").click(function () {
    //    alert("aa");
    //    alert($(this).index());
    //});
    //标签选择器
    //$("div").click(function () {
    //    alert("11");
    //});
    //并列选择器
    //$(".div1,.div2").click(function () {
    //    alert("bb");
    //});
    //后代选择器
    //$(".div1 .div3").click(function () {
    //    alert("cc");

    //});

    //过滤选择器
    //首：
    //$(".div1:first").click(function () {
    //    alert("这是第一个");
    //});
    //尾：
    //$(".div1:last").click(function () {
    //    alert("这是最后一个");
    //});
    //等于：
    //$(".div1:eq(2)").click(function () {
    //    alert("这是第三个");
    //});
    //$(".div1").eq(2).click(function () {
    //    alert("这是第三个");
    //});
    ////大于：
    //$(".div1:gt(0)").click(function () {
    //    alert("aa");
    //});
    ////小于：
    //$(".div1:lt(3)").click(function () {
    //    alert("aa");
    //});
    ////排除：not(选择器)
    //$(".div1:not(.div1:eq(2))").click(function () {
    //    alert("aa");
    //});
    ////奇数：
    //$(".div1:odd").click(function () {
    //    alert("aa");
    //});
    ////偶数：
    //$(".div1:even").click(function () {
    //    alert("aa");
    //});
    ////属性名过滤：
    //$(".div1[id]").click(function () {
    //    alert("aa");
    //});
    ////属性名等于或者非等于值的过滤：
    //$(".div1[id=d1]").click(function () {
    //    alert("aa");
    //});
    //$(".div1[id!=d1]").click(function () {
    //    alert("aa");
    //});
    //包含字符串的过滤：
    $(".div1:contains(‘1‘)").click(function () {
        alert("aa");
    });

</script>

 

2017-6-2 jQuery 基础 选择器


联系
我们