文档章节

无题.记录笨笨的自己

miner
 miner
发布于 2016/09/10 10:56
字数 659
阅读 6
收藏 0

        最近为了巩固知识,自己模拟了一个京东的首页,页面已经搭建完成,动态效果想用jquery实现。之前是学过jquery的,由于自己的懒惰,再加上事情比较多,就一直没有用过。我才发现这些个东西只学过一遍其实和没学是一样一样滴。

        昨天写了一段这样的代码

$dot.each(function(index,element){

                                $dot[index].on('mouseover',function(){


                                    $dot.each(function(i,val){

                                        $dot[i].removeClass('selected');

                                    })

                                    this.addClass('selected');
                              })


结果运行时就提示错误 Uncaught TypeError: $(...).on is not a function ;

自己检查了很久就是不知道哪里错了,然后就在论坛上向大神们发起了求助,有一个牛人直接把我的代码改了一下,改成了这样:
 

           $dot.on('mouseover', function() {

            $(this)

              .addClass('selected')

              .siblings()

              .removeClass('selected');

        });

        我试了一下,成功的运行了,然后又去翻了翻资料,才想起来jquery的隐式迭代,也就是,在方法的内部会为匹配到的所有元素进行循环遍历,执行相应的方法;而不用我们再进行循环,简化我们的操作,方便我们调用。 如果获取的是多元素的值,大部分情况下返回的是第一个元素的值。

问题解决是解决了,可是我还是不明白我的代码为什么会出现那样的错误,停了大概一个多小时一个大神说

        恍然大悟,忘了jq对象和dom对象之间的相互转化,$dot是jquery对象,而$dot[index]是dom对象,不能用jquery的方法,所以才会出现那样的错误。

        哎,虽然这一天被这个小问题整的头大,但至少解决了。

此处总结一个知识点: jQuery 对象和 DOM 对象的相互转换

        DOM对象指使用js操作DOM返回的结果

        jQuery 对象此处指的是:使用 jQuery 提供的操作 DOM 的方法返回的结果。 jQuery 拿到 DOM 对象后又对其做了封装,让其具有了 jQuery 方法的 jQuery

        var $btn = $(“#btnShow”); // $btn 就是一个 jQuery 对象

DOM 对象转换成 jQuery 对象:

        var $btn1 = $(btn); // 此时就把 DOM 对象 btn 转换成了 jQuery 对象$btn1

jQuery 对象转换成 DOM 对象:

var btn1 = $btn[0]; // 此时就把 jQuery 对象$btn 转换成了

 

DOM 对象 btn1 (推荐使用此方式)

// 第二种方式

var btn2 = $btn.get(0);// 此时就把 jQuery 对象$btn 转换

成了 DOM 对象 btn2

 

© 著作权归作者所有

miner
粉丝 0
博文 1
码字总数 659
作品 0
北京
程序员
私信 提问
电脑用HDMI外界显示器后,没有声音

本人使用Y450, 总感觉屏幕小, 现有PHILIPS 202E, 但是笨笨VGA坏了(真是悲催啊, 但是我强悍小Y跟我也有4~5个年头了, 可以理解) 所以买了HDMI赚VGA, 接上显示器后显示非常棒, 很爽, 绝对高清....

andy521zhu
2014/06/28
291
0
TeamTalk初学笔记

1、图像处理:采用CxImage图像操作类库,它可以快捷地存取、显示、转换各种图像;(暂时没找到在哪使用了) 一、win-client: 1、解析参数:采用jsoncpp; 示例:登陆msgserver服务时候从con...

pengmx
2015/09/05
1K
0
无题

距离2017结束还剩 39 天 1、尝试过很多,迷茫过良久。 2、世界如此油腻,我竟不愿融入。 3、对人对事,不必太过在意。 4、养成快速调节心态的能力。 5、学会接纳任何不同。 6、人忙起来了,也...

安东尼__Anthony
2017/11/23
0
0
笨笨的我---终于完成了vim下php IDE的配置

笨笨的我---终于完成了vim下php IDE的配置,下面是我的截图,太兴奋了,呵呵

durban
2012/02/15
296
2
如何对待开发团队中那个拖后腿的人?

每个开发团队中总有一个人是最差的,老跟不上整体水平。据我观察,队友们对待这个差生的态度是团队健康状况的重要标志。(注:原文用“贝尔曲线(bell curve)”,也就是“正态分布”来衡量团...

oschina
2014/06/19
8.1K
50

没有更多内容

加载失败,请刷新页面

加载更多

OpenStack 简介和几种安装方式总结

OpenStack :是一个由NASA和Rackspace合作研发并发起的,以Apache许可证授权的自由软件和开放源代码项目。项目目标是提供实施简单、可大规模扩展、丰富、标准统一的云计算管理平台。OpenSta...

小海bug
昨天
5
0
DDD(五)

1、引言 之前学习了解了DDD中实体这一概念,那么接下来需要了解的就是值对象、唯一标识。值对象,值就是数字1、2、3,字符串“1”,“2”,“3”,值时对象的特征,对象是一个事物的具体描述...

MrYuZixian
昨天
6
0
数据库中间件MyCat

什么是MyCat? 查看官网的介绍是这样说的 一个彻底开源的,面向企业应用开发的大数据库集群 支持事务、ACID、可以替代MySQL的加强版数据库 一个可以视为MySQL集群的企业级数据库,用来替代昂贵...

沉浮_
昨天
6
0
解决Mac下VSCode打开zsh乱码

1.乱码问题 iTerm2终端使用Zsh,并且配置Zsh主题,该主题主题需要安装字体来支持箭头效果,在iTerm2中设置这个字体,但是VSCode里这个箭头还是显示乱码。 iTerm2展示如下: VSCode展示如下: 2...

HelloDeveloper
昨天
7
0
常用物流快递单号查询接口种类及对接方法

目前快递查询接口有两种方式可以对接,一是和顺丰、圆通、中通、天天、韵达、德邦这些快递公司一一对接接口,二是和快递鸟这样第三方集成接口一次性对接多家常用快递。第一种耗费时间长,但是...

程序的小猿
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部