`

JQ 一些常用的方法

 
阅读更多
<!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>

 效果图:

 

<!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>

 效果图:

 

<!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>

 效果图:

 

<!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>

 效果图:

 

<!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>

 效果图:

 

<!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>

 效果图:

 
 

 

 

 

 

 

 

 

 

  • 大小: 18 KB
  • 大小: 19.5 KB
  • 大小: 19.5 KB
  • 大小: 19.7 KB
  • 大小: 30 KB
  • 大小: 29.8 KB
分享到:
评论

相关推荐

    java中常用的JQ+JS资源.zip

    "java中常用的JQ+JS资源.zip" 这个压缩包集合了一些常用的jQuery和JavaScript的实战案例,这对于Java开发者理解前端技术,尤其是进行前后端交互时非常有帮助。以下是这些资源涉及的一些关键知识点: 1. **jQuery库*...

    jq6500语音芯片

    3. **JQ650-28P语音模块使用说明书V1.1.pdf** 和 **JQ6500语音模块使用说明书V1.4.pdf**:这些是关于jq6500语音模块的使用指南,可能包含了模块的硬件连接方法、应用电路设计和实际应用案例。 4. **JQ6500固件.rar**...

    JQ8400-FN/JQ8400-FL语音芯片/模块、应用电路及程序

    本篇将深入探讨JQ8400-FN和JQ8400-FL这两款语音芯片及其模块的特点、应用电路以及编程方法。 1. **JQ8400-FN和JQ8400-FL芯片概述** JQ8400系列是专为语音合成和播放而设计的高性能芯片,具有集成度高、音质优良、...

    JQ ScrollTo 的使用方法

    **JQ ScrollTo 使用方法详解** 在Web开发中,页面滚动效果经常被用来提升用户体验,尤其是在长页面设计中。jQuery的ScrollTo插件提供了一种简单而强大的方式来实现这样的动画滚动效果。本文将深入探讨JQ ScrollTo的...

    jq二维码,使用jq_code直接前端生成二维码

    在IT行业中,前端开发经常需要处理各种数据展示和交互,其中二维码作为一种信息传递的便捷方式,被广泛应用。...通过深入了解`jq_code`的使用方法和特性,开发者能够更好地满足项目的二维码需求,提升产品的用户体验。

    JQ8900语音模块资料包.zip

    注意事项部分则提醒开发者在使用过程中需要注意的潜在问题和解决方法,避免因操作不当导致的故障。 综上所述,JQ8900语音模块与STM32的结合,为我们构建各种语音应用提供了强大的平台。通过深入理解并熟练运用相关...

    jq 网页转pdf格式

    `jq` 是一个轻量级的JavaScript库,它不直接支持将网页转换为PDF,但我们可以结合其他工具和方法来实现这个功能。本文将详细介绍如何使用`jq`与其他相关技术来完成网页到PDF的转换。 首先,`jq`库主要用于处理JSON...

    jq的源码分析

    开发者可以通过`.fn.extend()`方法向jq对象添加新方法,实现自定义功能,这也是jq生态繁荣的关键。 7. **模块化与压缩**:jq源码采用模块化设计,便于维护和扩展。发布时,通过工具进行压缩和合并,减少文件大小,...

    中文网络上最详细的 jq 工具介绍

    在不同的操作系统中,安装`jq`的方法有所不同: - **Linux**: 在Debian或Ubuntu系统中,可以使用`apt-get`命令安装: ``` sudo apt-get install jq ``` - **macOS**: 可以通过Homebrew进行安装: ``` brew ...

    JQ8400说明书

    ### JQ8400-FL 语音模块使用说明书 V1.5 #### 模块特征 ...综上所述,JQ8400-FL 语音模块以其强大的功能、广泛的适用性和简便的操作方法,在众多行业中发挥着重要作用,是开发各类语音播放设备的理想选择。

    jqAPI,简介方便

    在jqAPI中,你可以找到关于jQuery的所有核心函数和方法的详细信息。这些信息包括函数的用途、参数、返回值以及示例代码,为开发者提供了一个全方位的学习和参考平台。通过这个平台,开发者可以快速查找和学习特定的 ...

    JQ8900-16P MP3语音模块芯片音乐模块 串口控制 USB直接拷贝板.rar

    这些工具通常包括驱动程序、固件升级工具以及示例代码,帮助开发者快速理解并掌握JQ8900的使用方法。通过这些工具,用户可以测试模块的性能,调试串口通信,以及验证USB拷贝功能的正确性。 五、应用实例与设计要点 ...

    JQ 删除节点

    除了这些基本方法,jQuery还提供了一些辅助功能,如`empty()`。`empty()`方法用于清除元素的所有子节点,但不会删除元素本身。这对于清空容器元素而保留容器结构的情况很有用。 在实际开发中,合理地使用`remove()`...

    jq重置select下拉列表.docx

    jq提供了多种方法来重置select下拉列表,以下是一些常用的方法: 1. 使用 val() 方法 ``` $('#c-cerate_type').val(''); ``` 这将清空select下拉列表的当前选中的选项。 2. 使用 val() 方法和 trigger() 方法 ``` ...

    jq的相关知识及一些使用方法5

    jq的相关知识及一些使用方法5

    jq的相关知识及一些使用方法4

    jq的相关知识及一些使用方法4

    jq的相关知识及一些使用方法3

    jq的相关知识及一些使用方法3

    jq的相关知识及一些使用方法2

    jq的相关知识及一些使用方法2

    jq的相关知识及一些使用方法1

    jq的相关知识及一些使用方法1

Global site tag (gtag.js) - Google Analytics