jQuery选择器
2014-01-16 17:14
441 查看
选择器概念
jQuery选择器是通过标签、属性或者内容对HTML内容进行选择,选择器运行对HTML元素组或者单个元素进行操作。jQuery选择器使用$符号,等同于jquery,例如: $(“li”) = jquery(“li”)
同样等同于javascript中的:document.getElemmentsByTagName/id/class语句;
1 元素选择器
$(“P”); //选择P元素,注意P为大写;$(“ #container”); //选择id=”container”的元素;
$(“ .articles”); //选择class=”articles”的元素;
$(“.promo”, ”#france”); //id与class混合选择,用 “,”分隔开;
2 属性选择器
jQuery使用XPath表达式来选择带有给定属性的元素:$(“[href]”) 选择所有带有href属性的元素;
$(“href=’#’”) 选取所有带有href值等于“#”的元素;
$(“href!=’#’”) 选取所有带有href值不等于“#”的元素;
$(“href$=’.jpg’”)选取所有href值以”.jpg”结尾的元素;
3 CSS选择器
jQuery CSS选择器可用于改变HTML元素的CSS属性$(“P”).css(“background-color”,”red”);
4 其他选择器语法
$(this) 当前HTML元素$(“P”) 所有<P>元素
$(“p.intro”) 所有class=”intro”的<P>元素
$(“.intro”) 所有class=”intro”的元素
$(“ul li:first”) 每个<ul>的第一个<li>元素
$(“[href$=’.jpg’]”) 所有带有以“.jpg”结尾的属性值的href元素
$(“div#intro.head”) id=”intro”的<div>元素中的所有class=”head”的元素
选择指定元素下的所有子元素
$(“#destinations li”); //选中id为destinations下所有的li子元素;
选择直属子元素
$(“#destionations > li”); //使用“>”符号选择直属子元素,与不加“>”符号的区别为//只为#destionations下一个层次的子元素,不包括子子元素;
伪选择器
first(第一个) last(最后一个) odd(奇数个) even(偶数个)
伪选择器的语法为在子元素名称后面加“:”号,加参数;
$(“#destionations li:frist”);
$(“#destionations li:last”);
$(“#destionations li:odd”);
$(“#destionations li:even”);
相关文章推荐
- jQuery UI Datepicker中文显示
- JQUERY1.9学习笔记 之基本过滤器(九) 小于选择器
- .net文件上传,客户端用jquery file upload
- JQUERY1.9学习笔记 之基本过滤器(八) 最后元素选择器
- jquery文字上下滚动的实现方法
- 自动设置iframe大小的jQuery代码
- jQuery 滑动方法slideDown向下滑动元素
- jQuery 中datepicker的用法
- jquery sortable的拖动方法示例详解
- jQuery插件开发的两种方法及$.fn.extend的详解
- 10个最好的 jQuery 视频插件(转)
- 使用 jQuery() 操作 DOM 对象要注意的小问题
- 利用js简单实现进度条功能,替换jquery progressbar
- JQuery动画效果
- 创建一个自定义 jQuery 插件
- jQuery学习笔记(二)之jQuery选择器
- 扩展编写jquery插件的方法
- jquery类选择器无法取得对象问题原因
- 鼠标覆盖行高亮显示 奇偶行背景颜色不同 css+jquery Table
- jquery tree