最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
jquery css选择器实现代码
时间:2010-11-25 编辑:简简单单 来源:一聚教程网
css教程选择符包括通配选择符、id选择符、属性选择符、包含选择符、类选择符等,他们的基本格式为:
通配选择符:$("#id *") 表示该元素下的所有元素。
id选择符:$("#id") 表示获得指定id的元素。
属性选择符:$("input[type=text]") 表示type属性为text的所有input元素。
包含选择符:$("ul li a") 表示ul元素下所有的li元素里的所有a元素。
类选择符:$(".class") 表示所有引用class样式的元素。
当然这些选择符是可以配合使用的比如说:$("#id input[type=text]"),这种写法表示指定id元素下的type属性为text的所有input元素。在jquery中有些细微的改动都是非常有趣的,比如$("ul li").addclass("class")和$("ul > li").addclass("class"),他们显示出来的效果是不同的,第一种是将ul下的所有li元素添加样式,第二种是将ul下的第一个li元素添加样式,具体更多的使用方法可以自行测试。
xpath选择符(自1.3版本后已经不支持,但也可了解下)所涵盖的内容不多,他们的基本格式为:
$("[@title]") 表示选择所有元素内 属性带有title的元素。
$("[@title^=t]") 表示所有属性title值是以t为开头的元素。
$("[@title$=t]") 表示所有属性title值是以t为结尾的元素。
$("[@title*=t]") 表示所有属性title值是包含t的元素。
xpath选择符和css选择符一样,也可以配合使用,可以多个xpath选择符一起使用,也可以和css选择符一起使用,所以想要达到你想要的要求用jquery方法是有很多种的。
自定义选择符是选择以一个冒号(:)开头的一种选择符,说到自定义选择符,那就不说到我们经常用到:gt()、:eq()、:odd、:even,这些是我们最常用到的,比如:odd和:even这两个我们通常用他来做有条纹样式的表格,使用方法相当简单,如 $("#table tr:odd").addclass("odd")和$("#table tr:even").addclass("even")只要简单的使用两行代码就可以制作出我们想要的条纹样式。
当然在实际开发中我们一般会使用选择符配合dom遍历方法来进行操作,如:
$("#table td:contains('window窗口')").parent().find("td:gt(0)").addclass("highlight")
这句代码表示取得'window窗口'单元格,再取得他的父级元素,然后找到该元素中包含的所有编号大于0的单元格。当然有些方法是可以简化的,在这里我只是为了表示jquery的连缀效果,这种格式也是不推荐的,我本人一般是这样书写的:
$("#table td:contains('window窗口')")
.parent() //获取父级
.find("td") //找到td元素
.not(":contains('window窗口')") //不是window窗口的元素
.addclass("highlight"); //添加样式
将他们分开,后面标明,以便于增强可读性。
下面我提供几个在实际开发最常用的代码(由于实在太晚,扛不住了!):
$("input[type='text']").val(''); //清空所有文本框
$("#text input:text").val('');//清空text元素下所有文本框
//获取选中的所有checkbox的值
$("input:checkbox:checked").each(function() {
alert($(this).val());
});
$("select option:selected").val()//获取选中的下拉框的值
$("select option:selected").text()//获取选中的下拉框的文本
-
下一个: jquery 匿名函数详细教程
相关文章
- jQuery css()选择器使用说明 07-09
- jquery css选择器 09-10
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31