专栏首页微光点亮星辰锋利的jQuery第二期

锋利的jQuery第二期

时隔几天,小朱又和大家见面了,带领大家继续我们的jQuery之旅,上次说到如果jQuery框架与prototype框架同时引用需要处理好控制权的问题,对于这个不常见的问题,小朱就和大家说说jQuery的快捷自定义方式,学会之后处理各种冲突问题就容易多了。操作很简单,只是一个赋值语句,例如:var j = jQuery.noConflict();这样我们就可以把"j."当作"jQuery."来使用,而把有冲突的

那么接下来开始我们的第一发,jQuery选择器,因为是基础内容,所以举一些例子就跳过了,大家有什么问题可以进行留言。对元素进行事件绑定的方式主要通过标签属性,on+事件="xxx"方式以及jQuery/js的"元素.事件"的方式。其中第一种方式会通过事件触发一个已经定义的function,看如下的例子:

通过第一种方式为该p标签元素绑定了点击事件,触发后将popup一个窗口。另外一种方式就是通过事件绑定,这样可以根据选择器来指定符合条件的一个或多个元素来进行绑定,看下面一个例子:

熟悉了两种方式的基本操作以后我们来着重讲一下选择器的各种用法,在这里要说明一下,jQuery获取网页中不存在的元素也不会报错,这就避免了需要手动验证的麻烦,但是同时也可能会让你找不到错。。。当然,在某些情况下也会报出cannot read property of undefind的错误,这个时候你就要逐段去检查元素或者属性的获取是否存在问题。

第二发,jQuery层次选择器,对于最基本的类似于css选取元素的控制器规则就不再赘述,例如通过#获取id属性为xxx的元素,通过.获取class属性为xxx的元素,以及标签选择器等等。我们来看如下的例子:

如图为我们例子的初始画面,下面我们将通过选择器来改变div的背景色,上次的文章中我们已经说过>在选择器中所起的作用,下面我们就来看一下效果,使用$("body div").css("background","#bbffaa");该选择器将改变如下元素:

即body标签下的所有div元素,只要包含在内的都将被选择,如果使用$("body > div").css("background","#bbffaa");选择器将改变如下元素:

即body下的子div元素,也可理解为其下的第一级符合的元素。好了,今天就讲这么多,如果你刚刚开始看,去翻翻上一期依然可以跟上,对于前端开发人员这些是比较easy的,但是细节的东西要慢慢积累起来。

接下来由其他管理为大家献上精彩内容,咱们隔日再见。

本文分享自微信公众号 - 微光点亮星辰(SandTower),作者:朱晏辰

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-09-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 锋利的jQuery第三期

    经过了前两期的基础铺垫,相信大家对jQuery也有了一定的了解,那么以后的几期将逐个介绍jQuery中的常见用法。

    聚沙成塔
  • 锋利的jQuery第一期

    中秋将至,小编先在这里祝大家中秋快乐!公众号在假期期间停更几天,让几位管理好好休息,假期回来火力全开!

    聚沙成塔
  • equals方法的理解

    通常在面试中会被问到equals方法和==的区别,以及有没有重写过equals方法,以及重写equals方法的约定是什么? 下面简单的介绍一下我的理解: 首...

    聚沙成塔
  • 前端入门3-CSS基础声明正文-CSS基础

    作为一个前端小白,入门跟着这四个来源学习,感谢作者的分享,在其基础上,通过自己的理解,梳理出的知识点,或许有遗漏,或许有些理解是错误的,如有发现,欢迎指点下。

    请叫我大苏
  • CSS入门5-选择器

    (注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

    love丁酥酥
  • 解决CSS垂直居中的几种方法(基于绝对定位,基于视口单位,Flexbox方法)

          在CSS中对元素进行水平居中是非常简单的:如果它是一个行内元素,就对它的父元素应用 text-align: center ;如果它是一个块级元素,就...

    李文杨
  • 【前端数据结构】基本数据结构及特点

    数据元素相互之间存在的一种和多种特定的关系集合 包括二个部分组成逻辑结构,存储结构。

    ConardLi
  • 子元素margin-top转移到父元素

    如果子元素设置了margin-top/bottom,且父元素没有触发hasLayout,那么子元素的margin就可能转移到父元素。具体表现如下图(父元素虽然设...

    gojam
  • 通过人脸活体检测技术的应用,避免实名认证环节中人脸识别被攻击的风险

    人脸识别作为一项成熟的生物识别技术,目前已广泛应用于金融、公安、社会服务、电子商务等领域。然而人脸很容易用视频或照片等进行复制,人脸活体检测是人脸识别能否有效应...

    AI人工智能
  • PAT 1008 Elevator (20分) 状态迭代更新+加减法

    The highest building in our city has only one elevator. A request list is made u...

    vivi

扫码关注云+社区

领取腾讯云代金券