当前位置: 澳门新濠3559 > 服务器运维 > 正文

$ 表示该元素下的所有元素,、ID选择符、【澳门

时间:2019-12-26 07:51来源:服务器运维
本章内容根据本人在开发中常用到的选择符作为例子来进行讲解,如有更多常用的简单的例子可回复提供,参与讨论,一起学习研究,首先我们从常用的CSS选择符开始。CSS选择符包括通

本章内容根据本人在开发中常用到的选择符作为例子来进行讲解,如有更多常用的简单的例子可回复提供,参与讨论,一起学习研究,首先我们从常用的CSS选择符开始。 CSS选择符包括通配选择符、ID选择符、属性选择符、包含选择符、类选择符等,他们的基本格式为: 通配选择符:$ 表示该元素下的所有元素。 ID选择符:$ 表示获得指定ID的元素。 属性选择符:$ 表示type属性为text的所有input元素。 包含选择符:$ 表示ul元素下所有的li元素里的所有a元素。 类选择符:$ 表示所有引用Class样式的元素。 当然这些选择符是可以配合使用的比如说:$("#ID input[type=text]"),这种写法表示指定ID元素下的type属性为text的所有input元素。在JQuery中有些细微的改动都是非常有趣的,比如$.addClass.addClass,他们显示出来的效果是不同的,第一种是将ul下的所有li元素添加样式,第二种是将ul下的第一个li元素添加样式,具体更多的使用方法可以自行测试。 XPath选择符所涵盖的内容不多,他们的基本格式为: $ 表示选择所有元素内 属性带有title的元素。 $ 表示所有属性title值是以t为开头的元素。 $ 表示所有属性title值是以t为结尾的元素。 $ 表示所有属性title值是包含t的元素。 XPath选择符和CSS选择符一样,也可以配合使用,可以多个XPath选择符一起使用,也可以和CSS选择符一起使用,所以想要达到你想要的要求用JQuery方法是有很多种的。 自定义选择符是选择以一个冒号开头的一种选择符,说到自定义选择符,那就不说到我们经常用到:gt、:odd、:even,这些是我们最常用到的,比如:odd和:even这两个我们通常用他来做有条纹样式的表格,使用方法相当简单,如 $.addClass和$.addClass只要简单的使用两行代码就可以制作出我们想要的条纹样式。 当然在实际开发中我们一般会使用选择符配合DOM遍历方法来进行操作,如: $("#table td:contains.parent.addClass 这句代码表示取得'Window窗口'单元格,再取得他的父级元素,然后找到该元素中包含的所有编号大于0的单元格。当然有些方法是可以简化的,在这里我只是为了表示JQuery的连缀效果,这种格式也是不推荐的,我本人一般是这样书写的: $("#table td:contains .parent //找到td元素 .not(":contains //不是window窗口的元素 .addClass; //添加样式 将他们分开,后面标明,以便于增强可读性。 下面我提供几个在实际开发最常用的代码: $.val; //清空所有文本框 $.val;//清空text元素下所有文本框 //获取选中的所有CheckBox的值 $("input:checkbox:checked").each { alert; $("select option:selected").val()//获取选中的下拉框的值 $("select option:selected").text()//获取选中的下拉框的文本 本人对于JQuery选择符的理解到此为止,仅供参考,欢迎感兴趣的朋友参与讨论。未完待续........ demo打包下载

    包含选择符:$("ul li a") 表示ul元素下所有的li元素里的所有a元素。 

    $("[@title$=t]") 表示所有属性title值是以t为结尾的元素。 
    $("[@title*=t]") 表示所有属性title值是包含t的元素。 

  自定义选择符是选择以一个冒号(:)开头的一种选择符,说到自定义选择符,那就不说到我们经常用到:gt()、:eq()、:odd、:even,这些是我们最常用到的,比如:odd和:even这两个我们通常用他来做有条纹样式的表格,使用方法相当简单,如 $("#table tr:odd").addClass("odd")和$("#table tr:even").addClass("even")只要简单的使用两行代码就可以制作出我们想要的条纹样式。 

     $("#table td:contains('Window窗口')").parent().find("td:gt(0)").addClass("highlight") 

     $("input[type='text']").val(''); //清空所有文本框 
$("#text input:text").val('');//清空text元素下所有文本框 

    //获取选中的所有CheckBox的值 

    属性选择符:$("input[type=text]") 表示type属性为text的所有input元素。 

    $("[@title^=t]") 表示所有属性title值是以t为开头的元素。 

将他们分开,后面标明,以便于增强可读性。 

    类选择符:$(".Class") 表示所有引用Class样式的元素。 

以上只是jq的基本知识,另外的知识有空补上!!!

  当然在实际开发中我们一般会使用选择符配合DOM遍历方法来进行操作,如: 

    $("[@title]") 表示选择所有元素内 属性带有title的元素。 

  这句代码表示取得'Window窗口'单元格,再取得他的父级元素,然后找到该元素中包含的所有编号大于0的单元格。当然有些方法是可以简化的,在这里我只是为了表示JQuery的连缀效果,这种格式也是不推荐的,我本人一般是这样书写的: 

XPath选择符和CSS选择符一样,也可以配合使用,可以多个XPath选择符一起使用,也可以和CSS选择符一起使用,所以想要达到你想要的要求用JQuery方法是有很多种的。 

CSS选择符包括通配选择符、ID选择符、属性选择符、包含选择符、类选择符等,他们的基本格式为:
    通配选择符:$("#ID *") 表示该元素下的所有元素。 

  XPath选择符(自1.3版本后已经不支持,但也可了解下)所涵盖的内容不多,他们的基本格式为: 

下面我提供几个在实际开发最常用的代码(由于实在太晚,扛不住了!): 

     $("select option:selected").text()//获取选中的下拉框的文本

     $("select option:selected").val()//获取选中的下拉框的值 

     $("#table td:contains('Window窗口')") 
.parent()    //获取父级 
.find("td")   //找到td元素 
.not(":contains('Window窗口')")   //不是window窗口的元素 
.addClass("highlight");  //添加样式 

当然这些选择符是可以配合使用的比如说:$("#ID input[type=text]"),这种写法表示指定ID元素下的type属性为text的所有input元素。在JQuery中有些细微的改动都是非常有趣的,比如$("ul li").addClass("Class")和$("ul > li").addClass("Class"),他们显示出来的效果是不同的,第一种是将ul下的所有li元素添加样式,第二种是将ul下的第一个li元素添加样式,具体更多的使用方法可以自行测试。 

    ID选择符:$("#ID") 表示获得指定ID的元素。 

     $("input:checkbox:checked").each(function() { 
alert($(this).val()); 
}); 

编辑:服务器运维 本文来源:$ 表示该元素下的所有元素,、ID选择符、【澳门

关键词: