jQuery四种选择器使用及示例

jQuery 元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取

元素。

$("p.intro") 选取所有 class="intro" 的

元素。

$("p#demo") 选取所有 id="demo" 的

元素。

示例代码：

jquery 部分

rush:js;"> $(document).ready(function(){//页面加载完成后执行 tagName(); // idName(); // className(); });

function tagName(){
$('p').addClass('heighlight');
}

function idName(){
$('#div').addClass('heighlight2');
}
function className(){
$('p.pClass').addClass('heighlight2');
}

html部分

rush:js;">

this is my name!!

css部分

rush:css;"> .heighlight { background-color: blue;

}
.heighlight2 {
background-color: red;
}

.alt{
background-color:#ccc;
}

jQuery 属性选择器

Query 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

jquery部分，其他部分同上。

rush:js;"> $(document).ready(function(){ attribute(); });

function attribute(){
$('[href="#"]').addClass('heighlight');
}

jQuery CSS 选择器

.addClass()或者是.css()

rush:js;"> $(document).ready(function(){ cssName(); });

function cssName(){
$('p').css("background-color","pink");
}

jQuery 自定义选择符

rush:js;"> $(document).ready(function(){ custom(); });

function custom(){
$('tr:odd').addClass('alt');
}

附表

normal; border-collapse: collapse; border-bottom: rgb(204,204) 1px solid; text-transform: none; word-spacing: 0px; color: rgb(68,68,68); padding-bottom: 0px; text-align: left; padding-top: 0px; font: 14px/28px 'Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','Microsoft YaHei',STHeiti,'WenQuanYi Micro Hei',Simsun,sans-serif; padding-left: 0px; margin: 0px; border-spacing: 1px; border-left: rgb(204,204) 1px solid; widows: 1; letter-spacing: normal; padding-right: 0px; background-color: rgb(255,255,255); text-indent: 0px; -webkit-text-stroke-width: 0px"> ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px"> ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">

ottom: rgb(204,204) 1px solid; font-weight: 500; padding-bottom: 1px; padding-top: 1px; padding-left: 2px; margin: 0px; border-left: rgb(204,204) 1px solid; padding-right: 2px">选择器		ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">	ottom: rgb(204,204) 1px solid; padding-bottom: 1px; padding-top: 1px; padding-left: 2px; margin: 0px; border-left: rgb(204,204) 1px solid; padding-right: 2px">*ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">	ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">idottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">	ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">classottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">	ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">element 元素ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">	ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">class.ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">classottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">	ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">	irstirst")一个 元素ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">	一个 元素ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">	ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">	ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">	ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">index)ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">	ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">no)ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">	ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">no)ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">	ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">selector)ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">	标题元素 - ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">	ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">	ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">text)ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">	ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">	元素ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">	ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">	ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">	ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">attribute]属性的元素ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">	ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">attribute=ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">value]属性的值等于 "#" 的元素ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">	ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">attribute!=ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">value]属性的值不等于 "#" 的元素ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">	ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">attribute$=ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">value]属性的值包含以 ".jpg" 结尾的元素ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">	元素ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">	元素ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">	元素ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">	diodio")dio" 的 元素ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">	BoxBox")Box" 的 元素ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">	元素ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">	元素ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">	元素ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">	元素ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">	元素ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">	ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">	disableddisabled")ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">	ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">	相关文章 jquery页面搜索关键词突出显示 页面搜索关键词突出 // 页面搜索关键词突出 $(function () {... jQuery实时显示日期、时间 jQuery实时显示日期、时间 html: <span id=&quot... jQuery 添加水印 jQuery 添加水印 <script src="../../../..... Sys.WebForms.PageRequestManagerParserErrorException:无法分析从服务器收到的消息 中文：Sys.WebForms.PageRequestManagerParserErrorExceptio... Asp.net 后台调用js方法 1. 用Response.Write方法 代码如下： Response.Write(&q... Jquery实现按钮点击遮罩加载，处理完后恢复 Jquery实现按钮点击遮罩加载，处理完后恢复 思路： 1.点击按... Copyright © 2018 编程之家. 当前版本 V7.0.16 编程之家 版权所有 闽ICP备13020303号-8