2017-6-2 jQuery 基础 选择器

Posted Zoe

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了2017-6-2 jQuery 基础 选择器相关的知识，希望对你有一定的参考价值。

用代码练习：

 

<%@ 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="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 基础 选择器的主要内容，如果未能解决你的问题，请参考以下文章

jQuery选择器基础入门教程

jQuery基础学习01 jQuery选择器

jquery基础

jQuery基础 ——样式篇（jQuery选择器）

JQuery基础选择器

jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq