jQuery选择器：

•什么是jQuery选择器
•jQuery选择器有哪优势
•jQuery选择器的应用




jQuery选择器分为:基本选择器、层次选择器、过滤选择器和表单选择器4大类。在过滤选择器中又分为:简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器6类。


(1)代码更简单

(2)支持CSS1到CSS3选择器

(3)完善的处理机制


基本选择器是jQuery中使用最多的选择器，它又元素Id、class、元素名、多个元素符组成

<scripttype="text/javascript">
        $(function () {
        $("#divOne").css("display", "block");//ID匹配元素
       $(".clsOne").css("display", "block"); 
//类匹配元素
       $("div").css("display", "block"); 
//元素名匹配元素
       $("*").css("display", "block");//匹配所有元素$("#divOne,span").css("display","block");//合并匹配元素
        });
   </script>


 层次选择器通过DOM元素间的层次关系来获取元素，主要的层次关系包括父子、后代、相邻、兄弟关系

 <scripttype="text/javascript">
        $(function () {
            //匹配后代元素
//           $("#divMid").css("display", "block");
//            $("divspan").css("display", "block");
            //匹配子元素
//           $("#divMid").css("display", "block");
//           $("div>span").css("display", "block");
            //匹配后面元素
//           $("#divMid+div").css("display", "block");
//           $("#divMid").next().css("display","block");
            //匹配所有后面的元素
//           $("#divMid~div").css("display", "block");
//           $("#divMid").nextAll().css("display","block");
            //匹配所有相邻元素
           $("#divMid").siblings("div").css("display","block");
        });
    </script>


过滤选择器
(1)简单过滤选择器

        过滤选择器是根据某类过滤规则进行元素的匹配，书写时都以(:)开头；简单过滤选择器是过滤选择器中使用最广泛的一种。

<scripttype="text/javascript">
        $(function () {
            //增加第一个元素的类别
//            $("li:first").addClass("Getfocus");
            //增加最后一个元素的类别
//            $("li:last").addClass("Getfocus");
            //给除了类别为notClass的项加上类别Getfocus
//            $("li:not(.notClass)").addClass("Getfocus");
            //给索引为奇数的项添加类别Getfocus
//            $("li:odd").addClass("Getfocus");
            //给索引为偶数的项添加类别Getfocus
//             $("li:even").addClass("Getfocus");
            //给索引为某个给定值的项添加类别Getfocus
//            $("li:eq(1)").addClass("Getfocus");
 //给索引大于某个给定值的项添加类别Getfocus

     //          $("li:gt(1)").addClass("Getfocus");

      //给索引小于某个给定值的项添加类别Getfocus

     //         $("li:lt(2)").addClass("Getfocus");

      //获取所有标题类元素并给其添加类别Getfocus

  //              $("div h1").css("width","100");

  //              $("header").addClass("Getfocus");

      //执行动画并添加Getfocus

  //              $("#spanMove").slideToggle("slow");

  //              $("#spanMove:animated").addClass("Getfocus");

(2)内容过滤选择器
             内容过滤选择器是根据元素中的文字内容或所包含的的子元素特征获取元素，其文字内容可以模糊或绝对匹配进行元素定位

 <script type="text/javascript">
        $(function () {
        //显示包含给定文本的元素
//            $("div:contains('一')").css("display","block");
            //显示包含空内容的元素
//            $("div:empty").css("display","block");

          //显示含有某个元素的元素
//          $("div:has(span)").css("display","block");
            //显示含有子元素或文本的元素
           $("div:parent").css("display", "block");
        });
   </script>

(3)可见性过滤选择器
           可见性过滤选择器根据元素是否可见的特征来获取元素。

<scripttype="text/javascript">
        $(function () {
            //$("span:hidden").show();
           //$("span:hidden").show().addClass("Getfocus");
           // $("div:visible").addClass("Getfocus");
        });
   </script>

(4)属性过滤选择器
<scripttype="text/javascript">
        $(function () {
            //显示所有含有Id属性的元素
            //            $("div[id]").show();
//
            //显示所有title为“A”的元素
            //           $("div[title='A']").show();
            //显示所有title不为“A”的元素
//          $("div[title!='A']").show();
            //显示所有title的值以“A”开始的元素
//           $("div[title^='A']").show();
            //显示所有title的值以“C”结束的元素
//           $("div[title$='C']").show();
            //显示所有title的值中含有“B”的元素
//           $("div[title*='B']").show();
            //显示所有title的值中含有“B”且属性id的值是“divAB”的元素
           $("div[title*='B'][id='divAB']").show();
        });
   </script>

(5)子元素过滤选择器

 <scripttype="text/javascript">
        $(function () {
            //每个父元素下的第二个子元素增加Getfocus类别
//          $("li:nth-child(2)").addClass("Getfocus");
            //每个父元素下的第一个子元素增加Getfocus类别
//           $("li:first-child").addClass("Getfocus");
            //每个父元素下的最后一个子元素增加Getfocus类别
//           $("li:last-child").addClass("Getfocus");
            //每个父元素下只有一个子元素增加Getfocus类别
           $("li:only-child").addClass("Getfocus");
        });
   </script>
(6)表单对象属性过滤选择器

<scripttype="text/javascript">
        $(function () {
            //改变表单内可用input元素的值
            //$("#form1input:enabled").val("这里变化啦!").css("color","red");
            //$("#form1input:disabled").val("这里变化啦!").css("color","red");
            //获取多选框选中的个数
           $("input:checked").length;
        });
   </script>
表单选择器


<scripttype="text/javascript">
        $(function () {
            //            $("#form1div").html("表单中input元素的个数一个有" + $("#form1:input").length + "个");
            //            $("#form1div").addClass("div");
            //$("#form1:text").show();
            //$("#form1:button").show();
            //$("#form1:checkbox").show();
            $("#form1:password").show();
        });
   </script>

您可能知道，Power BI中的图表(以及许多其他可视化)具有可以设置为任何静态文本的标题。您可以通过选择图表，转到“可视化对象”窗格中的“格式”选项卡，然后更改“标题”部分中的属性(如下所示)来完成此操作：
但是，如果您希望图表标题根据所选内容而改变呢？例如，您可能正在使用切片器或过滤器来允许用户选择他们想要查看数据的月份。在这种情况下，您可能想要添加一个标题，显示实际上已选择了哪一月; 如果报告使用过滤器，或者要打印报告，这将特别重要。遗憾的是，内置的Title Text属性不能用于显示动态值，但在本文章中，小悦将向您展示如何使用DAX解决此问题。
以下是包含动态图表标题的报告的简单示例：
小悦创建了一个简单的测试数据集，其中只有两个字段一个月份，一个数量，该报告包含一个柱形图，其中显示按月份显示的数量。还有一个切片器，用户可以选择一个月或多个月，在顶部有一个标题，列出在切片机中选择并显示在图表中的日期名称。
解决方案分为两部分
第一部分是创建一个度量。它将返回图表标题所需的文本，这依赖于DAX函数ConcatenateX()。这是衡量标准的DAX：
Title = "你选中了 "
& CONCATENATEX(
VALUES(Sheet1[月]),
Sheet1[月],
", "
)
这里，Values()函数用于返回包含所有选定月份的表，然后将其传递给ConcatenateX()以获取包含逗号分隔的日期名称列表的文本值。
第二部分涉及如何显示度量返回的值。在上面的报告中，小悦使用了卡片可视化，将上面的度量放入“字段”区域，然后关闭“格式”选项卡上的“类别标签”，以便仅显示度量返回的值，而不显示度量本身的名称：
这就是重新创建上述报告所需的全部内容。
对上述代码进行优化
我们可以将列表中的最后一个逗号更改为“和”，给每个月的值后面加一个月，而不是简单的以逗号分隔的月值列表：
此外，如果显示了所有月份，最好不显示非常长的月份列表，而是显示一些默认文本，如图：
这是用于完成所有这些操作的度量的DAX：
Title2 =
VAR SelectedDays = VALUES('Sheet1'[月])
VAR NumberOfSelectedDays = COUNTROWS(SelectedDays)
VAR NumberOfPossibleDays = COUNTROWS(ALL('Sheet1'[月]))
VAR AllButLastSelectedDay = TOPN(NumberOfSelectedDays-1, SelectedDays)
VAR LastSelectedDay = EXCEPT(SelectedDays, AllButLastSelectedDay)
RETURN
"你 " &
IF(NumberOfSelectedDays=NumberOfPossibleDays, "没有对月份进行筛选",
"选中了 " & IF(NumberOfSelectedDays=1, "", CONCATENATEX(AllButLastSelectedDay,'Sheet1'[月], "月, ") & " 月和 ") & LastSelectedDay & "月")
Microsoft Power BI Desktop中文最新版：下载地址
2.欢迎加入的Power BI技术群，目前正在学习阶段，有兴趣的朋友可以一起学习讨论。
Power Data技术交流群：702966126 (验证注明：博客园Power BI)
更多精彩内容请关注微信公众号：悦策PowerBI
如果您觉得阅读本文对您有帮助，请点一下“推荐”按钮，您的“推荐”将是我最大的写作动力！欢迎各位转载，作者博客:https://www.cnblogs.com/yeacer/