jQuery 教程手册（新）: jQuery 简介; jQuery 安装; jQuery 语法; jQuery 选择器; jQuery 事件; jQuery隐藏和显示; jQuery 淡入淡出; jQuery滑动; jQuery动画; jQuery停止动画; jQuery Callback 方法; jQuery链; jQuery捕获; jQuery设置; jQuery添加元素; jQuery删除元素; jQuery CSS 类; jQuery css() 方法; jQuery 尺寸; jQuery 遍历; jQuery祖先; jQuery后代; jQuery同胞; jQuery过滤; jQuery AJAX 简介; jQuery load() 方法; jQuery get() 和 post() 方法; jQuery noConflict() 方法; jQuery JSONP; jQuery 选择器; jQuery 事件方法; jQuery 效果方法; jQuery HTML / CSS 方法; jQuery 遍历方法; jQuery AJAX 方法; jQuery数据; jQuery DOM 元素方法; jQuery 核心; jQuery 属性; jQuery prepend() 方法; jQuery prependTo() 方法; jQuery prop() 方法; jQuery remove() 方法; jQuery removeAttr() 方法; jQuery removeClass() 方法; jQuery removeProp() 方法; jQuery replaceAll() 方法; jQuery replaceWith() 方法; jQuery scrollLeft() 方法; jQuery scrollTop() 方法; jQuery text() 方法; jQuery toggleClass() 方法; jQuery unwrap() 方法; jQuery val() 方法; jQuery wrap() 方法; jQuery wrapAll() 方法; jQuery wrapInner() 方法; jQuery escapeSelector() 方法; jQuery cssHooks 方法; jQuery add() 方法; jQuery children() 方法; jQuery closest() 方法; jQuery contents() 方法; jQuery each() 方法; jQuery eq() 方法; jQuery filter() 方法; jQuery find() 方法; jQuery first() 方法; jQuery has() 方法; jQuery is() 方法; jQuery last() 方法; jQuery next() 方法; jQuery nextAll() 方法; jQuery nextUntil() 方法; jQuery not() 方法; jQuery offsetParent() 方法; jQuery parent() 方法; jQuery parents() 方法; jQuery parentsUntil() 方法; jQuery prev() 方法; jQuery prevAll() 方法; jQuery prevUntil() 方法; jQuery siblings() 方法; jQuery slice() 方法; jQuery * 选择器; jQuery #id 选择器; jQuery .class 选择器; jQuery 多个类选择器; jQuery element 选择器; jQuery 多个元素选择器; jQuery :first 选择器; jQuery :last 选择器; jQuery :even 选择器; jQuery :odd 选择器; jQuery :first-child 选择器; jQuery ajax() 方法; jQuery :first-of-type选择器; jQuery :last-child 选择器; jQuery :last-of-type 选择器; jQuery :nth-child() 选择器; jQuery :nth-last-child() 选择器; jQuery :nth-of-type() 选择器; jQuery :nth-last-of-type() 选择器; jQuery :only-child 选择器; jQuery :only-of-type 选择器; jQuery parent > child 选择器; jQuery 父后代选择器; jQuery element + next 选择器; jQuery element ~ siblings 选择器; jQuery :eq() 选择器; jQuery :gt() 选择器; jQuery :lt() 选择器; jQuery :not() 选择器; jQuery :header 选择器; jQuery :animated 选择器; jQuery :focus 选择器; jQuery :contains() 选择器; jQuery :has() 选择器; jQuery :empty 选择器; jQuery :parent 选择器; jQuery :hidden 选择器; jQuery :visible 选择器; jQuery :root 选择器; jQuery :lang() 选择器; jQuery ajaxComplete() 方法; jQuery ajaxError() 方法; jQuery ajaxSend() 方法; jQuery ajaxSetup() 方法; jQuery ajaxStart() 方法; jQuery ajaxStop() 方法; jQuery ajaxSuccess() 方法; jQuery [attribute] 选择器; jQuery [attribute=value] 选择器; jQuery [attribute!=value] 选择器; jQuery [attribute$=value] 选择器; jQuery [attribute|=value] 选择器; jQuery [attribute^=value] 选择器; jQuery [attribute~=value] 选择器; jQuery [attribute*=value] 选择器; jQuery [name="value"][name2="value2″] 选择器; jQuery :input 选择器; jQuery :text 选择器; jQuery :password 选择器; jQuery :radio 选择器; jQuery :checkbox 选择器; jQuery :submit 选择器; jQuery :reset 选择器; jQuery :button 选择器; jQuery :image 选择器; jQuery :file 选择器; jQuery :enabled 选择器; jQuery :disabled 选择器; jQuery :selected 选择器; jQuery :checked 选择器; jQuery :target 选择器; jQuery bind() 方法; jQuery blur() 方法; jQuery change() 方法; jQuery get() 方法; jQuery click() 方法; jQuery getJSON() 方法; jQuery dblclick() 事件; jQuery getScript() 方法; jQuery delegate() 方法; jQuery load() 方法; jQuery die() 方法; jQuery param() 方法; jQuery error() 方法; jQuery post() 方法; jQuery event.currentTarget 属性; jQuery serialize() 方法; jQuery event.data 属性; jQuery serializeArray() 方法; jQuery event.delegateTarget 属性; jQuery 核心 jQuery() 方法; jQuery event.isDefaultPrevented() 方法; jQuery 核心 noConflict() 方法; jQuery event.isImmediatePropagationStopped() 方法; jQuery DOM 元素方法 get() 方法; jQuery event.isPropagationStopped() 方法; jQuery DOM 元素方法 - index() 方法; jQuery event.namespace 属性; jQuery DOM 元素方法 - size() 方法; jQuery event.pageX 属性; jQuery DOM 元素方法 - toArray() 方法; jQuery event.pageY 属性; jQuery 遍历 clearQueue() 方法; jQuery event.preventDefault() 方法; jQuery 数据 data() 方法; jQuery event.relatedTarget 属性; jQuery 数据 jQuery.data() 方法; jQuery event.result 属性; jQuery 遍历 dequeue() 方法; jQuery event.stopImmediatePropagation() 方法; jQuery 遍历 jQuery.dequeue() 方法; jQuery event.stopPropagation() 方法; jQuery 遍历 hasData() 方法; jQuery event.target 属性; jQuery 遍历 queue() 方法; jQuery event.timeStamp 属性; jQuery 遍历 jQuery.queue() 方法; jQuery event.type 属性; jQuery 数据 removeData() 方法; jQuery event.which 属性; jQuery 数据 jQuery.removeData() 方法; jQuery event.metakey 属性; jQuery context 属性; jQuery focus() 方法; jQuery jQuery.fx.interval 属性; jQuery focusin() 方法; jQuery jQuery.fx.off 属性; jQuery focusout() 方法; jQuery jQuery.support 属性; jQuery keydown() 方法; jQuery keypress() 方法; jQuery select() 方法; jQuery hover() 方法; jQuery keyup() 方法; jQuery live() 方法; jQuery load() 方法; jQuery mousedown() 方法; jQuery mouseenter() 方法; jQuery mouseleave() 方法; jQuery mousemove() 方法; jQuery mouseout() 方法; jQuery mouseover() 方法; jQuery mouseup() 方法; jQuery off() 方法; jQuery on() 方法; jQuery one() 方法; jQuery $.proxy() 方法; jQuery ready() 方法; jQuery resize() 方法; jQuery scroll() 方法; jQuery submit() 方法; jQuery toggle() 方法; jQuery trigger() 方法; jQuery triggerHandler() 方法; jQuery unbind() 方法; jQuery undelegate() 方法; jQuery unload() 方法; jQuery contextmenu() 方法; jQuery.holdReady()方法; jQuery animate() 方法; jQuery clearQueue() 方法; jQuery delay() 方法; jQuery dequeue() 方法; jQuery fadeIn() 方法; jQuery fadeOut() 方法; jQuery fadeTo() 方法; jQuery fadeToggle() 方法; jQuery finish() 方法; jQuery hide() 方法; jQuery show() 方法; jQuery queue() 方法; jQuery slideDown() 方法; jQuery slideUp() 方法; jQuery slideToggle() 方法; jQuery stop() 方法; jQuery toggle() 方法; jQuery addClass() 方法; jQuery after() 方法; jQuery append() 方法; jQuery appendTo() 方法; jQuery attr() 方法; jQuery before() 方法; jQuery clone() 方法; jQuery css() 方法; jQuery detach() 方法; jQuery empty() 方法; jQuery hasClass() 方法; jQuery height() 方法; jQuery html() 方法; jQuery innerHeight() 方法; jQuery innerWidth() 方法; jQuery insertAfter() 方法; jQuery insertBefore() 方法; jQuery offset() 方法; jQuery offsetParent() 方法; jQuery outerHeight() 方法; jQuery outerWidth() 方法; jQuery width() 方法; jQuery position() 方法

jQuery 选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作

蹊下更新时间：2019-02-12 15:28:04

具体内容
相关视频
相关知识
最新评论

jQuery 选择器

选择器允许您对元素组或单个元素进行操作。

jQuery 选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

jQuery 元素选择器

jQuery 元素选择器基于元素名选取元素。

在页面中选取所有 <h1> 元素:

$("h1")

实例

$(document).ready(function(){
  $("button").click(function(){
    $("h1").css("color","pink")
  });
});

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图：

#id 选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。

通过 id 选取元素语法如下：

$("#test")

实例

$(document).ready(function(){
  $("button").click(function(){
    $("#test").css("color","red")
  });
});

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图：

.class 选择器

jQuery 类选择器可以通过指定的 class 查找元素。

语法如下：

$(".test")

实例

$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图：

更多实例

语法	描述
$(this)	当前 HTML 元素
$("p")	所有 <p> 元素
$("p.intro")	所有 class="intro" 的 <p> 元素
$(".intro")	所有 class="intro" 的元素
$("#intro")	id="intro" 的元素
$("ul li:first")	每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']")	所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head")	id="intro" 的 <div> 元素中的所有 class="head" 的元素

推荐手册

jQuery 选择器

实例

实例

实例