jQuery 属性选择器element[herf*='value']使用示例


Posted in Javascript onOctober 20, 2013

一个针对jQuery属性选择器的小例子,增加对jQUery属性选择器的理解:

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<style type="text/css"> 
a{ 
margin-right:20px; 
} 
ol{ 
position:relative; 
width:600px; 
margin-left:400px; 
} 
dt{ 
margin:10px; 
height:100px; 
background-color:#EAEAEA; 
border:3px dotted orange; 
} 
.showMessage{ 
width:380px; 
float:left; 
background-color:#D8D8D8; 
border:1px dotted red; 
} 
</style> 
<script type="text/javascript"> 
$(document).ready(function(){ 
var subject = ""; 
var describe = ""; //name|="value" 
$("#attri1").bind("click",function(){ 
var topValue=$("#attri1").offset().top; 
subject = "Attribute Contains Prefix Selector [name|=\"value\"]"; 
describe = "Selects elements that have the specified attribute with a value either equal to a given string or starting with that string followed by a hyphen (-)."; 
$("a[hreflang|='en']").css("border","3px dotted green"); 
showMessage(subject,describe,topValue); 
}); 
//name*="value" 
$("#attri2").bind("click",function(){ 
var topValue=$("#attri2").offset().top; 
subject = "Attribute Contains Selector [name*=\"value\"]"; 
describe = "Selects elements that have the specified attribute with a value containing the a given substring."; 
$( "input[name*='man']" ).val( "has man in it!" ); 
showMessage(subject,describe,topValue); 
}); 
//name~="value" 
$("#attri3").bind("click",function(){ 
var topValue=$("#attri3").offset().top; 
subject = "Attribute Contains Word Selector [name~=\"value\"]"; 
describe = "Selects elements that have the specified attribute with a value containing a given word, delimited by spaces."; 
$( "input[name~='man']" ).val( "mr. man is in it!" ); 
showMessage(subject,describe,topValue); 
}); 
//name$="value" 
$("#attri4").bind("click",function(){ 
var topValue=$("#attri4").offset().top; 
subject = "Attribute Ends With Selector [name$=\"value\"]"; 
describe = "Selects elements that have the specified attribute with a value ending exactly with a given string. The comparison is case sensitive."; 
$( "input[name$='letter']" ).val( "a letter" ); 
showMessage(subject,describe,topValue); 
}); 
//name="value" 
$("#attri5").bind("click",function(){ 
var topValue=$("#attri5").offset().top; 
subject = "Attribute Equals Selector [name=\"value\"]"; 
describe = "Selects elements that have the specified attribute with a value exactly equal to a certain value."; 
$( "input[value='Hot Fuzz']" ).next().text( "Hot Fuzz" ); 
showMessage(subject,describe,topValue); 
}); 
//name$="value" 
$("#attri6").bind("click",function(){ 
var topValue=$("#attri6").offset().top; 
subject = "Attribute Not Equal Selector [name!=\"value\"]"; 
describe = "Select elements that either don't have the specified attribute, or do have the specified attribute but not with a certain value."; 
$( "input[name!='newsletter']" ).next().append( "<b>; not newsletter</b>" ); 
showMessage(subject,describe,topValue); 
}); 
//name$="value" 
$("#attri7").bind("click",function(){ 
var topValue=$("#attri7").offset().top; 
subject = "Attribute Starts With Selector [name^=\"value\"]"; 
describe = "Selects elements that have the specified attribute with a value beginning exactly with a given string."; 
$( "input[name^='news']" ).val( "news here!" ); 
showMessage(subject,describe,topValue); 
}); 
//name$="value" 
$("#attri8").bind("click",function(){ 
var topValue=$("#attri8").offset().top; 
subject = "Has Attribute Selector [name]"; 
describe = "Selects elements that have the specified attribute, with any value.<br><b><font color=\"red\">you can click the div which have id element</font></b>"; 
$( "div[id]" ).one( "click", function() { 
var idString = $( this ).text() + " = " + $( this ).attr( "id" ); 
$( this ).text( idString ); 
}); 
showMessage(subject,describe,topValue); 
}); 
//name$="value" 
$("#attri9").bind("click",function(){ 
var topValue=$("#attri9").offset().top; 
subject = "Multiple Attribute Selector [name=\"value\"][name2=\"value2\"]"; 
describe = "Matches elements that match all of the specified attribute filters."; 
$( "input[id][name$='man']" ).val( "only this one" ); 
showMessage(subject,describe,topValue); 
}); 

}); 
function showMessage(subject,describe,topValue){ 
$("#showMessage").html("<font color=\"red\"><b>"+subject+"</b></font><br>"+describe) 
.addClass("showMessage").css("margin-top",topValue).hide().show(1000); 
} 
</script> 
</head> 
<body> 
<div id="showMessage"></div> 
<ol> 
<dt> 
<input type="button" id="attri1" value="a[hreflang|='en']"/><br><br> 
<a href="#" hreflang="en">en</a> 
<a href="#" hreflang="en-">en-</a> 
<a href="#" hreflang="english">english</a> 
</dt> 
<dt> 
<input type="button" id="attri2" value="name*='man'"/><br><br> 
<input name="man-news"> 
<input name="milkman"><br> 
<input name="letterman2"> 
<input name="newmilk"> 
</dt> 
<dt> 
<input type="button" id="attri3" value="input[name~='man']"/><br><br> 
<input name="man-news"> 
<input name="milk man"><br> 
<input name="letterman2"> 
<input name="newmilk"> 
</dt> 
<dt> 
<input type="button" id="attri4" value="input[name$='letter']"/><br><br> 
<input name="newsletter"> 
<input name="milkman"><br> 
<input name="jobletter"> 
</dt> 
<dt> 
<input type="button" id="attri5" value="input[value='Hot Fuzz']"/><br><br> 
<div> 
<label> 
<input type="radio" name="newsletter" value="Hot Fuzz"> 
<span>name?</span> 
</label> 
</div> 
<div> 
<label> 
<input type="radio" name="newsletter" value="Cold Fusion"> 
<span>value?</span> 
</label> 
</div> 
<div> 
<label> 
<input type="radio" name="newsletter" value="Evil Plans"> 
<span>value?</span> 
</label> 
</div> 
</dt> 
<dt> 
<input type="button" id="attri6" value="input[name!='newsletter']"/><br><br> 
<div> 
<input type="radio" name="newsletter" value="Hot Fuzz"> 
<span>name is newsletter</span> 
</div> 
<div> 
<input type="radio" value="Cold Fusion"> 
<span>no name</span> 
</div> 
<div> 
<input type="radio" name="accept" value="Evil Plans"> 
<span>name is accept</span> 
</div> 
</dt> 
<dt> 
<input type="button" id="attri7" value="input[name^='news']"/><br><br> 
<input name="newsletter"> 
<input name="milkman"><br> 
<input name="newsboy"> 
</dt> 
<dt> 
<input type="button" id="attri8" value="div[id]"/><br> 
<div>no id</div> 
<div id="hey">with id</div> 
<div id="there">has an id</div> 
<div>nope</div> 
</dt> 
<dt> 
<input type="button" id="attri9" value="input[id][name$='man']"/><br><br> 
<input id="man-news" name="man-news"> 
<input name="milkman"><br> 
<input id="letterman" name="new-letterman"> 
<input name="newmilk"> 
</dt> 
<dt> 
<input type="button" value="clearEffects" onclick="javaScript:window.location.reload();"/> 
</dt> 
</ol> 
</body> 
</html>
Javascript 相关文章推荐
js中AppendChild与insertBefore的用法详细解析
Dec 16 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
May 27 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
Jan 28 Javascript
浅谈JavaScript中的Math.atan()方法的使用
Jun 14 Javascript
无缝滚动的简单实现代码(推荐)
Jun 07 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
Jun 25 Javascript
AngularJS控制器之间的数据共享及通信详解
Aug 01 Javascript
Highcharts学习之坐标轴
Aug 02 Javascript
jQuery实现简洁的轮播图效果实例
Sep 07 Javascript
JS正则表达式验证密码格式的集中情况总结
Feb 23 Javascript
微信小程序登录session的使用
Mar 17 Javascript
Javascript原生ajax请求代码实例
Feb 20 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
Oct 20 #Javascript
浏览器的JavaScript引擎的识别方法
Oct 20 #Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
Oct 18 #Javascript
jquery 循环显示div的示例代码
Oct 18 #Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
Oct 18 #Javascript
简单实用的全选反选按钮例子
Oct 18 #Javascript
关于jquery的多个选择器的使用示例
Oct 18 #Javascript
You might like
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
PHP自动重命名文件实现方法
2014/11/04 PHP
Zend Framework缓存Cache用法简单实例
2016/03/19 PHP
PHPExcel简单读取excel文件示例
2016/05/26 PHP
PHP XML Expat解析器知识点总结
2019/02/15 PHP
详解PHP 二维数组排序保持键名不变
2019/03/06 PHP
PHP中Session ID的实现原理实例分析
2019/08/17 PHP
yii框架数据库关联查询操作示例
2019/10/14 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
基于jQuery的动态表格插件
2011/03/28 Javascript
js确定对象类型方法
2012/03/30 Javascript
JavaScript中点击事件的写法
2016/06/28 Javascript
原生js实现节日时间倒计时功能
2017/01/18 Javascript
BOM之navigator对象和用户代理检测
2017/02/10 Javascript
node.js中EJS 模板快速入门教程
2017/05/08 Javascript
谈谈React中的Render Props模式
2018/12/06 Javascript
[01:29:31]VP VS VG Supermajor小组赛胜者组第二轮 BO3第一场 6.2
2018/06/03 DOTA
[01:54]TI珍贵瞬间系列(三):翻盘
2020/08/28 DOTA
python多进程实现进程间通信实例
2017/11/24 Python
python实现快速排序的示例(二分法思想)
2018/03/12 Python
python之pandas用法大全
2018/03/13 Python
Python读取数据集并消除数据中的空行方法
2018/07/12 Python
在python环境下运用kafka对数据进行实时传输的方法
2018/12/27 Python
理想高通滤波实现Python opencv示例
2019/01/30 Python
Tensorflow实现部分参数梯度更新操作
2020/01/23 Python
pycharm设置当前工作目录的操作(working directory)
2020/02/14 Python
python游戏开发的五个案例分享
2020/03/09 Python
python logging.info在终端没输出的解决
2020/05/12 Python
CSS 说明横向进度条最后显示文字的实现代码
2020/11/10 HTML / CSS
多视角3D逼真HTML5水波动画
2016/03/03 HTML / CSS
SHEIN香港:价格实惠的女性时尚服装
2018/08/14 全球购物
Rosetta Stone官方网站:语言学习
2019/01/05 全球购物
商超业务员岗位职责
2014/03/12 职场文书
党员个人剖析材料
2014/09/30 职场文书
Python实现照片卡通化
2021/12/06 Python
mybatis源码解读之executor包语句处理功能
2022/02/15 Java/Android