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 相关文章推荐
与jquery serializeArray()一起使用的函数,主要来方便提交表单
Jan 31 Javascript
jQuery表单验证插件formValidator(改进版)
Feb 03 Javascript
那些年,我还在学习jquery 学习笔记
Mar 05 Javascript
JavaScript中实现sprintf、printf函数
Jan 27 Javascript
Javascript连接Access数据库完整实例
Aug 03 Javascript
JavaScript中的Object对象学习教程
May 20 Javascript
JS实现保留n位小数的四舍五入问题示例
Aug 03 Javascript
标准的js无缝滚动效果
Aug 30 Javascript
jQuery实现的手风琴侧边菜单效果
Mar 29 jQuery
JavaScript实现一个空中避难的小游戏
Jun 06 Javascript
JavaScript callback回调函数用法实例分析
May 08 Javascript
js脚本中执行java后台代码方法解析
Oct 11 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
一步一步学习PHP(3) php 函数
2010/02/15 PHP
php实现的表单验证类完整示例
2019/08/13 PHP
laravel 验证错误信息到 blade模板的方法
2019/09/29 PHP
PHP $O00OO0=urldecode &amp; eval 解密,记一次商业源码的去后门
2020/09/13 PHP
javascript下阻止表单重复提交、防刷新、防后退
2007/08/17 Javascript
JS 获取span标签中的值的代码 支持ie与firefox
2009/08/24 Javascript
用js脚本控制asp.net下treeview的NodeCheck的实现代码
2010/03/02 Javascript
借助script进行Http跨域请求:JSONP实现原理及代码
2013/03/19 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
2016/04/06 Javascript
前端js文件合并的三种方式推荐
2016/05/19 Javascript
Javascript中的迭代、归并方法详解
2016/06/14 Javascript
浅谈键盘上回车按钮的js触发事件
2017/02/13 Javascript
Bootstrap 3 进度条的实现
2017/02/22 Javascript
JavaScript实现全选取消效果
2017/12/14 Javascript
详解小程序云开发数据库
2019/05/20 Javascript
vue滚动固定顶部及修改样式的实例代码
2019/05/30 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
2019/12/23 Javascript
js实现文字头像的生成代码
2020/03/07 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
python获取外网IP并发邮件的实现方法
2017/10/01 Python
python 每天如何定时启动爬虫任务(实现方法分享)
2018/05/21 Python
Python GUI Tkinter简单实现个性签名设计
2018/06/19 Python
python 3.6.2 安装配置方法图文教程
2018/09/18 Python
django admin 添加自定义链接方式
2020/03/11 Python
python中xlrd模块的使用详解
2021/02/01 Python
html5适合移动应用开发的12大特性
2014/03/19 HTML / CSS
新西兰优惠网站:Treat Me
2019/07/04 全球购物
婚鞋、新娘鞋、礼服鞋、童鞋:Nina Shoes
2019/09/04 全球购物
阿尔卡特(中国)的面试题目
2014/08/20 面试题
服装厂厂长职责
2013/12/16 职场文书
长辈证婚人证婚词
2014/01/09 职场文书
文案策划求职信
2014/03/18 职场文书
学校拾金不昧表扬信
2015/01/16 职场文书
2015年计划生育协会工作总结
2015/05/13 职场文书
四年级作文之说明文作文
2019/10/14 职场文书
Go语言应该什么情况使用指针
2021/07/25 Golang