＜jQery-获取元素方式＞

最新推荐文章于 2022-08-05 14:37:52 发布
最新推荐文章于 2022-08-05 14:37:52 发布
阅读量100 收藏
点赞数
分类专栏： jQuery基础 JavaScipt基础 文章标签： javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45540964/article/details/110913296
版权

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div class="demo" id="app">
		<div class="nav">
			
		</div>
	</div>
	<script src="./jquery-1.12.3/jquery-1.12.3.js">
		//不能再引入文件的标签内书写
		//在其后面书写
	</script>
	<script type="text/javascript">
		//通过$方法获取div
		//创建jQuery对象,jQuery对象只能使用jQuery方法不能使用js
		//js对象不能使用jQuery方法,只能使用js
		var dv1=$("div");
		//二次筛选div
		var dv1=$("div").eq(1);//jq对象
						//btns[0].innerHTML; js对象
						//btns.eq(0) jQ对象
		var dv2=$("#app");
		var dv3=$(".demo");
		//组合形式
		var dv4=$("div.nav");
		//jQuery对象转换成js对象
		dv1[0].innerHTML='heslay';
	</script>
</body>
</html>
好先生·
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery系列教程1-选择器全解
全栈工程师开发手册（原创）https://github.com/tencentmusic/cube-studio
08-05 4913
//$被宏定位为jQuery。$("#foo')等价于jQuery("#foo")，$.ajax等价于jQuery.ajax //jQuery.noConflict(); //不再使用$代表jQuery，则$可以在其他js插件中代表其他的变量了 //var $j = jQuery.noConflict(); //使用$j代表jQuery //===========================
$在js里的用法：获取元素
weixin_40945354的博客
08-24 2087
document.getElementById("ID名")来获取元素，只用$('ID名')即可 这个符号是代表 document.getElementByIdx()这个函数 这个函数是获取指定网页元素的函数 在不用JQUERY的情况，一般自己也会自定义一个$函数。这也能行？！ 即： function $(Nid){ return document.getElementById(Nid); } $(“div p”); // (1) $(“div.container”); // (2) 　　 $(“di
$获取多个元素
九亿宅男的梦的博客
05-30 395
$('#A1,#A3,#A4,#A8').addClass('lanjian')
原生JS与jQuery中获取元素的方法
weixin_43968372的博客
08-14 153
https://www.jianshu.com/p/a635720d0aa4
JQuery元素选择
weixin_33981932的博客
02-07 140
1.基本元素选择器 $(“p”) //选取&lt;p&gt;元素 $(“p.info”) //选取所有class=”info”的&lt;p&gt;元素 $(“p#demo”) //选取id=”demo”的第一个&lt;p&gt;元素   分层选择器：使用这种选择器时，需要传入多个值，并用空格或大于号分隔。例如： $(“div...
jquery中获取元素的几种方式小结
01-21
1 从集合中通过指定的序号获取元素 html： 代码如下: <div> <p>0</p> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> </div> JS 代码如下: [removed] jQuery(function(){ $(“p”).eq(2).css(...
Jquery实现获取子元素的方法分析
10-16
首先，`children()`方法是jQuery提供的一种获取元素直接子级的方法。它接受一个可选的选择器作为参数，用于筛选匹配的子元素。例如，如果我们有一个`<ul>`元素，我们可以通过`$("ul").children("li")`来获取所有的...
jQuery如何获取动态添加的元素
10-22
主要介绍了jQuery如何获取动态添加的元素的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
jQuery实现获取h1-h6标题元素值的方法
10-20
主要介绍了jQuery实现获取h1-h6标题元素值的方法,涉及$(":header")选择器操作h1-h6元素及事件响应相关技巧,需要的朋友可以参考下
1. JS 和 Jquery 获取元素对象 `$()`
集电极
08-05 689
JS 和 Jquery 获取元素对象 `$()`
JQuery获取元素
weixin_58526727的博客
07-21 2798
jQuery jQuery 是一个高效、精简并且功能丰 富的 JavaScript 工具库 由John Resig 在 2006 年 1 月，jQuery 正式发布 query 本身是选择的意思，主要对 JavaScript 中的选择元素的方法进行了大量的优化。 版本发展 1.X：兼容 IE6/7/8，是工作中最常使用的，学习 1.12 版本。 2.X：不兼容 IE6/7/8，多用于 jQuery 官方调整 bug 使用。工作中不使用。 3.X：不兼容 IE6/7/8，只能在高版本浏览器中使用，是现在
jquery获取元素四种方式。
0bug0warning的博客
10-09 1万+
jquery获取元素四种方式。 当你成功引入jquery插件之后，就可以用jquery的语法来获取html元素。 js获取只有document.getElementById或者通过名称来获取。 而jquery获取元素方式比较多。 通过id获取，jquery的语法更为简练$("#id").event; 通过class获取，$(.“css”).event() 通过属性html标签获取，$(“p”)....
Jq获取元素内容的三种方式
菜鸟逆袭之路
08-08 4160
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"
JavaScript中几种常见的获取元素的方式
热门推荐
秦哥的博客
09-15 2万+
目录 0.码仙励志 1.根据id获取元素 document.getElementById("id属性的值"); 2.根据标签名字获取元素 document.getElementsByTagName("标签的名字"); 3.根据name属性的值获取元素 document.getElementsByName("name属性的值"); 4.根据类样式的名字获取元素  document....
jQuery获取元素内容
天高任鸟飞
07-23 5467
html()方法 返回或设置被选元素的内容 如果，没有参数，返回被选元素的内容 如果，有参数，设置被选元素的内容 // 返回元素 var text=$(‘.divClass’).html(); // 设置元素 var a='&lt;a&gt;我是a标签&lt;/a&gt;'; div.html(a); text()方法 返回或设置被选元素的文本内容 如果，没有参数，返回被选...
jQuery获取元素
emool的博客
12-18 7503
简单总结一下获取元素的一些方法， 可以通过jq选择器获取可以通过关系节点获取. 1.基本选择器 符号 说明 $(‘#demo’) 选择 id 为 demo 的元素 $(‘.demo’) 选择 class 为 demo 的所有元素 $(‘div’) 选择所有 div 标签元...
Jquery如何获取当前元素的id？
qq_39429962的博客
10-12 6830
 使用函数：$("").attr(); $(".style").attr("id"); //代表获取class为style1的元素的id  
jquery获取当前元素的某个元素的值
LINYONGBIN
06-18 5784
今天遇到个问题，就是要获取点击元素的子元素的值，一直搞不出来 后台尝试好久，发现用$(this).find(".Idd").text()就可以获取到子元素的值，其中Idd是子标签的class名 ...
js、jq获取元素的各种方法
wjw233333的博客
09-26 2894
引言 查找元素是前端中用的非常多的方法，工作中做项目的话也会经常用到，下面就总结归纳一下js以及jq的查找元素的方法吧。 正文 一. js获取元素方法归纳 1. 通过id获取 document.getElementById('id') //根据id获取 2. 通过name获取 document.getElementByName('name') // 通过...
修改代码使鼠标移入哪一栏显示对应图片<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> table{ margin: 100px auto; } td{ text-align: center; } </style> </head> <body> <table border="1" width="310px" cellspacing="0" align="center" > <tr> <td>女靴</td> <td rowspan="9"><img src="../images/女靴.jpg"></td> <td>女包</td> </tr> <tr> <td>雪地靴</td> <td>男包</td> </tr> <tr> <td>冬裙</td> <td>登山鞋</td> </tr> <tr> <td>呢大衣</td> <td>皮带</td> </tr> <tr> <td>毛衣</td> <td>围巾</td> </tr> <tr> <td>棉服</td> <td>皮衣</td> </tr> <tr> <td>女裤</td> <td>男毛衣</td> </tr> <tr> <td>羽绒服</td> <td>男棉服</td> </tr> <tr> <td>牛仔裤</td> <td>男靴</td> </tr> </table> <script src="../jquery-3.7.0.js"></script> <script type="text/javascript"> $(function(){ $("tr td")mouseenter(function(){ $("img").prop("src","../images/女靴.jpg") }) }) </script> </body> </html>
最新发布
06-09
下面是修改后的代码，可以实现鼠标移入哪一栏显示对应图片： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> table{ margin: 100px auto; } td{ text-align: center; } </style> </head> <body> <table border="1" width="310px" cellspacing="0" align="center" > <tr> <td>女靴</td> <td rowspan="9"><img id="product-img" src="../images/女靴.jpg"></td> <td>女包</td> </tr> <tr> <td>雪地靴</td> <td>男包</td> </tr> <tr> <td>冬裙</td> <td>登山鞋</td> </tr> <tr> <td>呢大衣</td> <td>皮带</td> </tr> <tr> <td>毛衣</td> <td>围巾</td> </tr> <tr> <td>棉服</td> <td>皮衣</td> </tr> <tr> <td>女裤</td> <td>男毛衣</td> </tr> <tr> <td>羽绒服</td> <td>男棉服</td> </tr> <tr> <td>牛仔裤</td> <td>男靴</td> </tr> </table> <script src="../jquery-3.7.0.js"></script> <script type="text/javascript"> $(function(){ $("td").mouseenter(function(){ var index = $(this).index(); var imgSrc = "../images/" + $("tr:first-child td").eq(index).text() + ".jpg"; $("#product-img").prop("src", imgSrc); }); }); </script> </body> </html> ``` 具体来说，修改了以下部分： 1. 在 `<img>` 元素上添加了一个 `id` 属性，方便在 JavaScript 中引用该元素。 2. 在 JavaScript 代码中，使用了 `$("td").mouseenter()` 选择器来选择所有 `<td>` 元素，并在鼠标移入时绑定事件处理函数。 3. 在事件处理函数中，通过 `$(this).index()` 方法获取当前鼠标所在的列号，然后使用 `$("tr:first-child td").eq(index).text()` 获取该列第一行的文本内容（即商品名称），再拼接出对应的图片路径。 4. 最后，将图片路径赋值给 `<img>` 元素的 `src` 属性，从而显示对应图片。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值