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的写法不同导致的兼容性问题的解决方法
Jul 29 Javascript
仿微博字符限制效果实现代码
Apr 20 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
Oct 14 Javascript
原生js做的手风琴效果的导航菜单
Nov 08 Javascript
JavaScript DOM事件(笔记)
Apr 08 Javascript
javascript绘制漂亮的心型线效果完整实例
Feb 02 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
Apr 26 Javascript
详解js实现线段交点的三种算法
Aug 09 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
Sep 02 Javascript
基于node.js express mvc轻量级框架实践
Sep 14 Javascript
微信小程序实现tab页面切换功能
Jul 13 Javascript
Vue性能优化的方法
Jul 30 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
超神学院:天使彦公认最美的三个视角,网友:我的天使快下凡吧!
2020/03/02 国漫
php 验证码实例代码
2010/06/01 PHP
使用php检测用户当前使用的浏览器是否为IE浏览器
2013/12/03 PHP
兼容ie和firefox js关闭代码
2008/12/11 Javascript
简单的js分页脚本
2009/05/21 Javascript
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
2011/03/01 Javascript
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
2011/10/13 Javascript
js的alert弹出框出现乱码解决方案
2013/09/02 Javascript
Javascript高级技巧分享
2014/02/25 Javascript
javascript清空table表格的方法
2015/05/14 Javascript
jquery实现倒计时效果
2015/12/14 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
2016/11/24 Javascript
如何制作幻灯片(代码分享)
2017/01/06 Javascript
Vue.js实现模拟微信朋友圈开发demo
2017/04/20 Javascript
bootstrap多层模态框滚动条消失的问题
2017/07/21 Javascript
vue购物车插件编写代码
2017/11/27 Javascript
node中实现删除目录的几种方法
2019/06/24 Javascript
bootstrap-table+treegrid实现树形表格
2019/07/26 Javascript
JavaScript原型继承和原型链原理详解
2020/02/04 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
2020/04/07 Javascript
Ajax获取node服务器数据的完整步骤
2020/09/20 Javascript
Python学习笔记_数据排序方法
2014/05/22 Python
Python实例一个类背后发生了什么
2016/02/09 Python
python-opencv在有噪音的情况下提取图像的轮廓实例
2017/08/30 Python
Python AES加密实例解析
2018/01/18 Python
Python基于hashlib模块的文件MD5一致性加密验证示例
2018/02/10 Python
Sanic框架请求与响应实例分析
2018/07/16 Python
符合语言习惯的 Python 优雅编程技巧【推荐】
2018/09/25 Python
python3通过selenium爬虫获取到dj商品的实例代码
2019/04/25 Python
python GUI实现小球满屏乱跑效果
2019/05/09 Python
Python基于pip实现离线打包过程详解
2020/05/15 Python
浅谈tensorflow 中的图片读取和裁剪方式
2020/06/30 Python
给Django Admin添加验证码和多次登录尝试限制的实现
2020/07/26 Python
光声世纪笔试题目
2012/08/25 面试题
元旦晚会策划方案
2014/02/18 职场文书
JavaScript流程控制(循环)
2021/12/06 Javascript