JQ 一些常用的方法

原创

mb64996c8d8661e 2023-06-27 00:19:32 博主文章分类：境-JS ©著作权

文章标签 html jquery HTML 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者mb64996c8d8661e的原创作品，请联系作者获取转载授权，否则将追究法律责任

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>选取带有 href 属性的元素例子</title>
</head>
<body>
<h2>这是标题</h2>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<p><a href="http://onestopweb.cn">HTML 教程</a></p>
<p><a href="http://onestopweb.iteye.com">CSS 教程</a></p>
<button>点我</button>
<script src="jquery-1.10.1.min.js"></script>
<script>
$(function(){
	$("button").click(function(){
		$("[href]").hide();
	});	
});
</script>
</body>
</html>

效果图：

JQ 一些常用的方法_html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>选取所有 target 属性值等于 "_blank" 的 <a> 元素例子</title>
</head>
<body>
<h2>这是标题</h2>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<p><a href="http://onestopweb.cn">HTML 教程</a></p>
<p><a href="http://onestopweb.iteye.com" target="_blank">CSS 教程</a></p>
<button>点我</button>
<script src="jquery-1.10.1.min.js"></script>
<script>
$(function(){
	$("button").click(function(){
		$("a[target='_blank']").hide();
	});
});
</script>
</body>
</html>

效果图：

JQ 一些常用的方法_jquery_02

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>选取所有 target 属性值不等于 "_blank" 的 <a> 元素例子</title>
</head>
<body>
<h2>这是标题</h2>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<p><a href="http://onestopweb.cn">HTML 教程</a></p>
<p><a href="http://onestopweb.iteye.com" target="_blank">CSS 教程</a></p>
<button>点我</button>
<script src="jquery-1.10.1.min.js"></script>
<script>
$(function(){
	$("button").click(function(){
		$("a[target!='_blank']").hide();
	});
});
</script>
</body>
</html>

效果图：

JQ 一些常用的方法_jquery_03

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>选取所有 type="button" 的 <input> 元素 和 <button> 元素例子</title>
</head>
<body>
<h2>这是标题</h2>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<p><a href="http://onestopweb.cn">HTML 教程</a></p>
<p><a href="http://onestopweb.iteye.com" target="_blank">CSS 教程</a></p>
<button>点我</button>
<script src="jquery-1.10.1.min.js"></script>
<script>
$(function(){
	$("button").click(function(){
		$(":button").hide();
	});
});
</script>
</body>
</html>

效果图：

JQ 一些常用的方法_HTML_04

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>选取偶数位置的 <tr> 元素例子</title>
</head>
<body>
<table border="1">
	<tr>
		<th>网站名</th>
		<th>网址</th>
	</tr>
	<tr>
		<td>Google</td>
		<td>http://www.google.com</td>
	</tr>
	<tr>
		<td>Baidu</td>
		<td>http://www.baidu.com</td>
	</tr>
	<tr>
		<td>淘宝</td>
		<td>http://www.taobao.com</td>
	</tr>
	<tr>
		<td>Facebook</td>
		<td>http://www.facebook.com</td>
	</tr>
</table>
<script src="jquery-1.10.1.min.js"></script>
<script>
$(function() {
	$("tr:even").css("background-color","yellow");
});
</script>
</body>
</html>

效果图：

JQ 一些常用的方法_html_05

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>选取奇数位置的 <tr> 元素例子</title>
</head>
<body>
<table border="1">
	<tr>
		<th>网站名</th>
		<th>网址</th>
	</tr>
	<tr>
		<td>Google</td>
		<td>http://www.google.com</td>
	</tr>
	<tr>
		<td>Baidu</td>
		<td>http://www.baidu.com</td>
	</tr>
	<tr>
		<td>淘宝</td>
		<td>http://www.taobao.com</td>
	</tr>
	<tr>
		<td>Facebook</td>
		<td>http://www.facebook.com</td>
	</tr>
</table>
<script src="jquery-1.10.1.min.js"></script>
<script>
$(function() {
	$("tr:odd").css("background-color","yellow");
});
</script>
</body>
</html>

效果图：

JQ 一些常用的方法_jquery_06