JQ 一些常用的方法

最新推荐文章于 2022-07-17 17:13:46 发布
最新推荐文章于 2022-07-17 17:13:46 发布
阅读量111 收藏
点赞数
分类专栏： 境-JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_17658/article/details/82675765
版权 
<!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>

 效果图：

 
 

 

 

 

 

 

 

 

 

iteye_17658
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery常见方法汇总
林中明月间丶
03-10 2759
语法：父元素jQuery对象.append(新创建的jQuery对象)语法：新创建jQuery对象.appendTo(‘父元素选择器’/父元素jQuery对象)
JQuery最全常用方法指南
最新发布
2401_84092508的博客
04-07 397
外链图片转存中…(img-5GRAKPQK-1712458089178)][外链图片转存中…(img-3oRnEN0Q-1712458089178)]
十分钟玩转 jQuery、实例大全
07-25 275
一、简介 定义 　　jQuery创始人是美国John Resig，是优秀的Javascript框架； 　　jQuery是一个轻量级、快速简洁的javaScript库。源码戳这 jQuery对象 　　jQuery产生的对象时jQuery独有的，只能自己调用 书写规则 　　支持链式操作； 　　在变量前加"$"符号（var $variable = jQuery对...
JQ 常用方法
boonyaxnn的博客
04-22 2254
一、 1、length/size 描述：获取jq对象内元素的数量； 语法：jq对象.length 【属性】 jq对象.size()【方法】 eg： console.log($('.box').length); console.log($('p').size()); 2、jq提供的伪类 选择器:first ...
JQ 常用的jQuery方法
06-10
jQuery提供了一系列方便的DOM操作方法： 1. `$(selector).html()` 设置或获取元素的HTML内容。 2. `$(selector).text()` 设置或获取元素的文本内容。 3. `$(selector).append()` 在匹配元素的末尾添加内容。 4. `$...
jquery不常用方法汇总
12-02
在jQuery库中，尽管一些方法并不像`$()`、`.click()`或`.show()`那样频繁使用，但它们在特定场景下却能发挥重要作用。本文将聚焦于jQuery中的一个不常用但实用的方法——`.find()`，并探讨其在实际开发中的应用。 `...
jquery 常用操作方法
12-01
操作下拉列表 添加选项列表 $(this).get(0).options.add(new Option(text,value)); 清空列表 $(this).get(0).options.length=0; 删除指定索引的选项 $(this).get(0).remove(index); 设定需要选中项的值 $(this).get...
jq6500语音芯片
01-06
3. **JQ650-28P语音模块使用说明书V1.1.pdf** 和 **JQ6500语音模块使用说明书V1.4.pdf**：这些是关于jq6500语音模块的使用指南，可能包含了模块的硬件连接方法、应用电路设计和实际应用案例。 4. **JQ6500固件.rar**...
jQuery——常用方法
qq_63654439的博客
03-06 2733
$的作用 1、$其实就是一个函数名，是jQuery的所缩写 2、$可以作为选择器，获取DOM对象对应的jQuery对象 3、$可以将一个DOM对象，转换成一个jQuery对象 4、事件中的this，指向DOM对象，所以需要使用$（this）做转换 5、什么时候使用jQuery，什么时候使用 js？其实本质上jQuery就是js，只是我们可以使用一些现成的方法而已 jQuery常用方法 1、index()；获取元素索引 2、text()；获取和设置文本节点 3、css()；获取和设置样式
jQuery常用方法
weixin_63896561的博客
07-17 1085
jQuery常用方法
JQUERY 常用方法大全
weixin_30340775的博客
09-26 589
Dom： Attribute： $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img").attr({src:"test.jpg",alt:"test Image"}); 给某个元素添加属性/值，参数是map $("img").attr("src","test.jpg"); 给某个元素添加属性/值 $("img").attr("title", ...
JQ常用方法总汇
weixin_43845328的博客
05-29 578
jQuery单词本 特点 jquery中不用考虑兼容 jquery有强大的选择器机制 优质的隐式迭代 无所不能的链式编程 选择器 语法 选择元素 $("#id名") id选择器 $(".类名") 类名选择器 $("标签名") 标签选择器 $("[name='username']") 属性选择器 $("li:first-child") 第一个标签 $("li:last-child") 最后一个标签 $("li:nth-child(数字)") 第几个标签，从1开始计数
JQ常用方法
Argent_
08-13 159
参考：https://www.jb51.net/article/86080.htm 参考：https://www.jianshu.com/p/479348aa61bf?from=groupmessage 参考：https://www.jianshu.com/p/e4e59a31d949 参考：https://blog.csdn.net/h13783313210/article/details/79...
jquery 常用方法总结
二東的专栏[人就是需要不断的激发自己]
08-30 895
今天整理一些jquery的用法，希望能够在工作中帮助到大家 jQuery顶级对象 缩写$    window.jQuery   window.$   第一部分，找对象   其本选择器       $("#id")       $(".class")       $("input")       复合选择器 $("#id,.class,input")   层次选择器
jq的常用方法
lwg910919an的博客
03-11 825
1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。 2.对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jquery对象，而get(n)和索引返回的是dom元素对
js & jq 的常用方法
Eaphy's Blog
01-15 788
JavaScript：document.getElementById(id).innerHTML="新的HTML"; //改变 HTML 内容 document.getElementById(id).attribute="新属性值"; //改变 HTML 属性document.getElementById("intro"); //通过id查找 HTML 元素 document.
JQ插件写法 扩展JQ方法
weixin_30612769的博客
07-11 139
目录： 1.基本JQ扩展插件js的格式 2.对JQ选中元素的方法的扩展，调用类似于$("selector").myMethod(),这里的myMethod是自己扩展的方法，与.click()同理 3.对JQ自身的方法扩展，调用类似于$.ajax(); 一、基本JQ扩展插件的格式 一个扩展插件的格式一般是： (function($){.........})(jQuery); ...
jq切换方法
06-02
在 jq 中，可以使用 `toggle()` 方法来切换元素的可见性，也可以使用 `show()` 和 `hide()` 方法来分别显示和隐藏元素。 例如，如果有一个按钮 `#toggle-btn` 和一个元素 `#toggle-elem`，可以使用以下代码来切换...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值