前端开发 | 在线支持

【示例】

HTML

<input type="button" id="id-input-add-element" value="动态添加元素">
<input type="button" id="id-input-sel-nohttp" value="过滤本地链接">
<input type="button" id="id-input-sel-httpstart" value="过滤链接开头">
<input type="button" id="id-input-sel-httpend" value="过滤链接结尾">
<input type="button" id="id-input-sel-multi" value="多属性过滤器">
<div class="ulclass">
    <span>网站导航</span><br/>
    <ul>
        <li><a href="http://www.baidu.com" rel="selfViewOpen">百度</a></li>
        <li><a href="http://www.pku.edu.cn">北京大学</a></li>
        <li><a href="#">No http://</a></li>
    </ul>

JS

$(document).ready(function(){
	$("#id-input-add-element").click(function(){
		//动态添加元素
		$("<li><a href='http://www.google.com' rel='google' target='_blank'>谷歌</a></li>").appendTo("div.ulclass>ul");
		$("div.ulclass>ul").append("<li><a href='http://www.microsoft.com' rel='microsoft'>微软</a></li>");
		$("#div-log").html($("#div-log").html()+"<p>"+"动态添加元素"+"</p>");
	});
	//jquery [attribute=value] 属性过滤器，全字符匹配
	$("a[rel='selfViewOpen']").click(function(e){
		//设置元素属性attr
		$(this).attr("target","_self");
		$("#div-log").html($("#div-log").html()+"<p>"+"通过rel='selfViewOpen'属性值过滤元素,设定本页打开连接方式"+"</p>");
	});
	$("#id-input-sel-nohttp").click(function(){
		//JQuery [attribute!=value] 同 not([attr="value"])
		//全字符匹配，取出属性以不包括指定字符串的元素
		//取得不包含 http:// 字符串的并添加一段字符串
		//[href*=value] 属性过滤，模糊匹配
		$("a").not("[href*='http://']").append("<b>---本地链接网站</b>");
		$("#div-log").html($("#div-log").html()+"<p>"+"过滤本地链接"+"</p>");
	});
	$("#id-input-sel-httpstart").click(function(){
		//JQuery [attribute^=value] 取出属性以指定字符串开头的元素
		$("a[href^='http://']").attr("target","_blank").css("background-color","gray");
		$("#div-log").html($("#div-log").html()+"<p>"+"过滤连接开头"+"</p>");
	});
	$("#id-input-sel-httpend").click(function(){
		//JQuery [attribute$=value] 取出属性以指定字符串结尾的元素
		$("a[href$='edu.cn']").css("background-color","red").append("---教育网");
		$("#div-log").html($("#div-log").html()+"<p>"+"过滤连接结尾"+"</p>");
	});
	$("#id-input-sel-multi").click(function(){
		//JQuery [attribute$=value] 取出属性以指定字符串结尾的元素
		$("a[rel='google'][target='_blank']").css("background-color","green").append("---多属性过滤器");
		$("#div-log").html($("#div-log").html()+"<p>"+"过滤连接结尾"+"</p>");
	});
});

下载源代码