jquery选择器之属性选择器
[attribute] 匹配指定属性名的所有元素
[attribute=value] 匹配给定的属性名是某个特定值的属性
[attribute!=value] 匹配给定的属性名不是某个特定值的属性
[attribute^=value] 以开头
[attribute$=value] 以结尾
[attribue*=value] 给定的属性包含某些值的元素
[selector1][selector2][selectorN] 复合选择器,需要同是满足所有条件
HTML示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--HTML区域-->
<h1>第一个标题</h1>
<div class="nav-2014">
<div class="w">
<div class="w-spacer"></div>
<div class="categorys">
<div class="dt">家用电器分类</div>
<div class="dp">家用电器价格</div>
</div>
<span class="hr"></span>
<div class="navitems-2014">
<div id="treasure"></div>
<span class="clr"></span>
<span class="chr"></span>
男:<input type="checkbox" checked="checked" value="nan">
女:<input type="checkbox" value="nv">
</div>
</div>
</div>
<h2>第二个标题</h2>
<div id="electronic">
<div id="firstScreen">1
<div class="w">2</div>
</div>
<ul>
<li class="ui-switch-curr">第一</li>
<li class="ui-switch-item"></li>
<li class="ui-switch-next">第三</li>
<li class="ui-switch-sub">第四</li>
</ul>
<ul>
<li class="lizi_ws_fruit" name="zhuang_guo">梨</li>
<li class="ws_pingguo_fruit" name="zhuan_wang">苹果</li>
<li id="elpsq" name="zhuang_dang"></li>
</ul>
<div class="secord_screen">
<div></div>
</div>
<div class="third_screen"></div>
</div> </body>
</html>
jquery代码
<script src="jquery-3.1.0.js"></script>
<script>
// 匹配所有包含id属性的div标签
$("div[id]")
// 在所有div标签中查找id属性为electronic的元素
$("div[id=electronic]")
$("div[id!=electronic]")
// 查找所有li标签中属性class值以ui-swithc开头的元素
$("li[class^=ui-switch]")
// 查找所有li标签中属性class的值以fruit结尾的元素
$("li[class$=fruit]")
// 查找所有li标签中属性class的值包含ws的元素
$("li[class*=ws]")
// 查找所有li标签中属性中有id且有name,且name的值以guo结尾的元素
$("li[class][name$=guo]")
console.log(objs)
</script>
jquery选择器之属性选择器的更多相关文章
- jQuery选择器之属性选择器Demo
测试代码: 06-属性选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
- 深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器
× 目录 [1]简单属性 [2]具体属性 [3]条件属性 前面的话 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选 ...
- jQuery选择器之属性筛选选择器
在这么多属性选择器中[attr="value"]和[attr*="value"]是最实用的 [attr="value"]能帮我们定位不同类型 ...
- jquery选择器之属性过滤选择器
<style type="text/css"> /*高亮显示*/ .highlight{ background-color: gray } </style> ...
- jquery选择器之属性过滤选择器详解
代码如下: <style type="text/css"> /*高亮显示*/ .highlight{ } </style> 复制代码代码如下 ...
- 晨读笔记:CSS3选择器之属性选择器
一.属性选择器 1.E[foo^="bar"]:该属性选择器描述的是选择属性以bar开头的元素,如: //所有以名称g_开头的div的字体颜色为红色div[name^=" ...
- CSS3选择器之属性选择器
一.属性选择器 1.E[foo^="bar"]:该属性选择器描述的是选择属性以bar开头的元素,如: //所有以名称g_开头的div的字体颜色为红色div[name^=" ...
- html 选择器之属性选择器
属性选择器的主要作用个人的理解就是对带有指定属性的元素设置css样式. 使用css3的属性选择器,可以指定元素的某个属性,也可以指定某个属性和这个属性所对应的值. css3的属性选择器主要包括下面几种 ...
- jQuery选择器之id选择器
页面的任何操作都需要节点的支撑,开发者如果快速高效的找到指定的节点也是前端开发中的一个重点.jQuery提供了一系列的选择器帮助开发者达到这一目的,让开发者可以更少的处理复杂选择过程与性能优化,更多专 ...
随机推荐
- transition&transform,CSS中过度和变形的设置
设置样式的过度效果transition-property: none/all; transition-duration:2s;运动时间,默认是0秒 transition-delay:0s; 延迟时间默 ...
- css样式设计
1.行内元素(图片.文本)水平居中 通过给父元素设置 text-align:center html代码: <body> <div class="txtCenter" ...
- JavaScript基础(慕课)
1. JavaScript函数: function 函数名() { 函数代码;//完成特定功能的代码. }PS:函数定义好后,是不能自动执行的,所以需调用它,只需直接在需要的位置写函数就ok了 2. ...
- free函数
free函数 原型: void free(void *ptr) 功 能: 释放ptr指向的存储空间.被释放的空间通常被送入可用存储区池,以后可在调用malloc.realloc以及calloc函数来再 ...
- three.js
webgl,three.js交流的论坛,欢迎到里面提问问题 www.webglchina.cn
- ios基础篇(十八)——Delegate 、NSNotification 和 KVO用法及其区别
一.Delegate Delegate本质是一种程序设计模型,iOS中使用Delegate主要用于两个页面之间的数据传递.iphone中常用@protocol和delegate的机制来实现接口的功能. ...
- iOS开发UI篇—九宫格坐标计算
iOS开发UI篇—九宫格坐标计算 一.要求 完成下面的布局 二.分析 寻找左边的规律,每一个uiview的x坐标和y坐标. 三.实现思路 (1)明确每一块用得是什么view (2)明确每个view之间 ...
- sqlserver中创建包含事务的存储过程
什么是事务 事务时包含1条或多条语句的逻辑单元.事务中的语句是一个整体,要么一起提交,要么一起撤销.事务在提交前可以回滚,一旦提交就不能撤销修改了,是永久性的修改. 为什么使用事务 ...
- movebase导航
利用turtlebot 的导航配置文件 由于movbase发的速度太不友好了所以使用了ros自带的滤波安装相应的包 apt-get install ros-indigo-yocs-velocity-s ...
- 64位Win7下编译hadoop 1.2.1问题解决
0.报sed的错误.原因在于没有安装cygwin.安装cygwin的时候要选择sed 1.Cannot run program "autoreconf". 这个问题在网上看了很多解 ...