Jquery 随便写些知识点

针对jQuery随便写些觉得还挺实用的一些东西,也没系统的去理一番,只是想到哪写到哪,写的不完全也请多见谅。

jQuery和其他javascript库产生$符号冲突了?
$符号想必用jQuery的人都不生疏,$即代表着jQuery函数。然而$符号并不是jQuery私有的一个符号,其他javascript库也可以使用$符号作为他们的主函数。那么,当我们用的其他的库与jQuery库发生$符号冲突时该怎么办呢?
我们用代码来验证下:

  console.log(jQuery === $); //true
  jQuery.noConflict();
  console.log(jQuery === $); //false
  var $jq = jQuery.noConflict();
  console.log(jQuery === $jq); //true

来看看jQuery.noConflict方法的源码:

  jQuery.noConflict = function( deep ) {
      if ( window.$ === jQuery ) {
          window.$ = _$;
      }
      if ( deep && window.jQuery === jQuery ) {
          window.jQuery = _jQuery;
      }
      return jQuery;
  };

看了上面的源码部分,假设我们给jQuery.noConflict()的括号内传了任何有值的参数(非undefined/null/NaN/""空字符串等),那么这时候再去看window.jQuery,他就会变成undefined了。所以给jQuery.noConflict()这个函数传参是指需要深入销毁window下的jQuery函数。

什么是jQuery对象?什么是DOM对象呢?两者又有什么区别呢?
首先,我必须声明下:要分清jQuery对象和DOM对象!要分清jQuery对象和DOM对象!要分清jQuery对象和DOM对象! 重要的事情说三遍,希望这点有引起注意。
DOM对象是通过JavaScript的getElementById或者getElementsByTagName获取的元素对象,它定义了访问HTML文档对象的一套属性、方法和事件。。如:

  var div = document.getElementById("myDiv"); // 获取需要进行操作DOM元素
  div.innerHTML = "Hello World"; // 给这个元素加入内容:Hello World
  div.style.color = "red"; // 给这个DOM元素一个样式--颜色为红色

jQuery对象是用jQuery对DOM对象进行封装后的对象。在这个对象上,我们可以使用jQuery里的方法。比如:

  var $div = $(".container"); // 通过jQuery选择器选中指定的并且封装成jQuery对象的对象
  $div.hide(); // 这个对象执行了hide方法,将选中的DOM元素隐藏

在我们的开发中,我们最好对这两者的命名做一些区别以便于区分,比如:$div 是jQuery对象,div是DOM对象。既然能将DOM对象封装成jQuery对象,那么还能将jQuery对象转换成DOM对象么?答案是ok的。比如:

  var $div = $(".container"); // 我(们)是一个jQuery对象
  var div = $div[0]; // 我是一个DOM对象
  var _$div = $(div); // 哈哈 我变成了jQuery对象了~

至于为什么第一个是我(们)呢?那是因为jQuery选择器针对类返回的是一个集合,而后面取索引为0的对象,那么这时候就是单一的了,所以变成了"我"。
为什么要分清jQuery对象和DOM对象呢?我们分清了这两者,就能分别使用对应的方法了,如果不分清,经常会出现: Uncaught TypeError: someObject.fn is not a function 错误。顺便说下这个错误,就是你对某东西执行fn函数,然而fn方法并不存在someObject的属性上,未分清是jQuery对象和DOM对象就是导致这个错误的原因之一。在一些前端开发群里,对这个错误进行提问的虽然不是很多,但也不会很少...本兽也看了些小伙伴贴出来的代码,还是有一些人是没注意到这两者区别,直接调用对应不上的方法而报错。

一些不常看到有人用,然而确实很实用的选择器使用方法及介绍
平常用的那些就不多做介绍了,想必大家也是玩的很溜了。这里就写些比较少见有使用的吧(返回的一般都是集合,id选取较为特殊,返回的是单个元素的集合,以第一个此id元素为主):
$("*")
选取所有元素。
$("selector+")
选取指定选择条件的元素后的第一个元素,如果选择的元素已经是最后一个了,那么返回的是选择到的对象是木有的~
$("firstSelector:not(secondSelector)")
选取指定的元素并以集合形式返回,并在得到的集合中去除不符合not()括号内选择条件的元素。
$("selector:gt(index)")和$("selector:lt(index)")
选取索引大于index的元素/选择索引小于index的元素。
$("selector:animated")
选取当前正在执行动画的所以元素,在DOM操作进行一些动画的时候很有用。
$("selector:contains(text)")
选取含有文本内容为contains(text)内的text的元素。
$("selector:empty")和$("selector:parent")
选取不包含子元素或者文本的元素/选取含有子元素或者文本的元素。
$("selector:has(selector)")
选取含有选择器所匹配的元素的元素。
$("selector:hidden")和$("selector:visible")
选取所有不可见的元素/选择所有可见的元素。
$("[attribute]")
选取拥有这个属性的元素。
$("[attribute=value]")和$("[attribute!=value]")
选取拥有这个属性并且属性值等于/不等于value的元素。
$("[attribute^=value]")和$("[attribute$=value]")和$("[attribute*=value]")
选取拥有这个属性并且属性值以value开头/以value结尾/包含value的元素。
$("selector:enabled")和$("selector:disabled")和$("selector:checked")和$("selector:selected")
选取所有可用/不可用/被选中(单选框/复选框)/被选中的选项(下拉列表)的元素。
代码:

 <div class="container">
      Hello World
  </div>
  <div class="lowerCase container">
      hello world
  </div>
  <p>
      Hello World
  </p>
  <div class="list">
      <ul>
          <li>1</li>
          <li>2</li>
          <li id="firstLi">3</li>
      </ul>
  </div>
  <div id="hello" style="display:none">
      Hello World
  </div>
  var $all = $("*"); // 这里的返回的集合包括了html标签到li标签甚至script标签的元素对象
  var $next = $("#firstLi+"); // 这里返回的是紧跟在id为firstLi后的那个元素对象,也就是后面一个li
  var $notLowerCase = $(".container:not(.lowerCase)"); // 这里返回的是含有container类而不含有lowerCase类的元素对象集合 就是第一个div
  var $contains = $("div:contains(Hello)"); // 这里返回的集合2个包含元素对象,一个是类是container第一个div,另一个是id是hello的div
  var $hasLowerCase = $("div:has(ul)"); // 这里返回的是含有ul元素的div元素集合
  var $hideden = $("div:hidden"); // 这里返回的是隐藏了的div元素的集合

停止事件冒泡。
什么是事件冒泡?现在假设我们有三个div嵌套着,我们分别给这三个div添加click事件,最内层div点击后打印1,中间层div点击打印2,最外层div点击打印1,那么当我们点击最内层div的时候,会分别执行最内层>中间层>最外层div的click事件,所以将会依次打印1>2>3。有时候我们需要点击最内层,对中间层和最外层的相同事件不执行,那么就需要停止这个依次向上级冒泡的事件了。在jQuery中,我们可以使用:event.stopPropagation()来停止事件冒泡,JavaScript中是:event.cancelBubble = true。这里同时提下,怎么停止默认事件:event.preventDefault(),在JavaScript中是:event.returnValue = false。

jQuery移除事件
$("#myDiv").cilck(function(){
$("#btn").unbind("click"); // 这里移除了原来id为btn的元素上的click事件
});

jQuery停止当前动画
$(".myDiv:animated").stop(false,false); // 停止当前动画,第一个参数是决定是否停止所有的队列动画,第二个参数决定是否立刻完成当前动画。两个都默认false。

不早了,就先写这些吧,后续想写再去整理些...   这些都是平常可以用到的知识

时间: 2024-10-20 05:42:17

Jquery 随便写些知识点的相关文章

jquery随便写些

查找所有div下的p元素.....$("div>p"); 设置页面背景色.........$(document.body).css("background","black"); 隐藏一个表单中所有元素..........$(myForm.elements).hide(); >>>>>>>>>在文档的第一个表单中,查找所有的单选按钮(即:type值为radio的input元素).....$

我想这篇就写些我是如何自学安卓的吧,顺便介绍下我

至今从12月初开始到现在已经快2月 ,原来工作是做石油天气管道敷设的属于中原油田管道局管辖,从实习毕业一直在做,野外风吹日晒有时候晚上还要在野外过夜连夜施工,抢修,心里一直有个梦想一直对编程JAVA C感兴趣 但是因为很多原因而且没有勇气做出改变放弃很稳定并且薪资还不错的工作 有女朋友有房贷的压力下 做出一个改变是需要很大的压力(单亲家庭经济不宽裕如果放弃就只有母上来支撑),然后今年失恋了 就一直浑浑噩噩,也意识到应该给人生做个改变,终于12月开始了我的自学之旅,道现在已经有1个月又21天 52

为了免费拿到微软的年底发布会的门票,只有厚着脸皮再写些 Microsoft Dynamics CRM 2013文章分享了

奔跑中的2015, 为了免费拿到微软的每年年底发布会的门票和IT相关的证书,没有办法,本人大专学历太低,最近本人所以在的城市政府有人才奖厉计划,就因要求本科及以上学历,都跟本人无缘了,所以只有厚着脸皮再写些 Microsoft Dynamics CRM 2013文章分享了,争取能在微软得到证书,肯定自已了. 前几个月在家里找到2012年的一张微软北京技术大会的门票,想想今年应该写点什么技术文章,再免费参加一次会议吧,想想写什么方面的呢,微软的office,server,数据库等专家太多了,写不过

当我在写程序的时候,我究竟在写些什么?

当我写下标题之后,面对着一张白板,发现不知道要写什么.或许我还没准备好这个主题.一个村上春树式的标题,或许是因为我想表达得蓝调一些,那么就还是写一写,就当是怀旧吧. 记得大学时,同学们都在用VC6写C++程序,而我为了标新,用Cygwin下的vim写,后来干脆在自己的JOY BOOK 3000上安装了一个Fedora 5,用着那个被修改成半透明的Console下的vim,感觉很爽的样子.现在想来,如果一个人写C++不用IDE,那不是装X就是傻X. 大学时,我们的专业课没有Java,不过我买了一本

&quot;右肾缺失&quot;患者回应索赔200万:为调解随便写的

5月7日上午,徐州“右肾缺失”事件的刘某某在徐州相关部门的工作人员及其亲属陪同下,已在中国人民解放军东部战区南京总医院作了进一步检查,院方称,检查的报告将在下周出来.对此,“右肾缺失”的刘某某及亲属表示,他们会接受这家医院的检查结果. 日前,安徽宿州男子刘某某在徐州做胸腔手术,出院第二天右肾“失踪”的报道被多家网络媒体转载,引起广泛关注.5日下午,徐州医学院附属医院针对此事件发表声明,称该报道内容严重失实,并附有两张术后CT复查均显示右肾存在.当晚,徐州市卫计委也对此回应:已经成立专门的调查组进

jQuery手写几个常见的滑动下拉菜单 分分秒秒学习JS

一般的企业网站再我们再实际工作中,有些特效,用jQuery来做,显得极其简单,除非一些大的公司,需要封装自己的类. 今天,我们讲解jQuery入门知识,来写几个简单jQuery滑动下拉菜单.感受一下jQuery的简单快速的神奇之处. 学完本章,可以书写最常见的下拉菜单写法. 案例1 效果如图所示: 在书写这个滑动的下拉菜单的时候,我们首先来认识下jQuery里面的滑动方法 :slideToggle() slideToggle(执行时间,运动方式,返回函数) 执行时间: 常用的是 "slow&qu

多谢时间能少写些代码

在现在这个浮躁的时期,再加上敏捷咨询师们念的歪经,他们让人感觉上就像是软件产品是可以在很短的时间内高质量的完成的,这令那些管理者们很兴奋,就像巴甫洛夫的条件反射实验中的狗看到了肉就会流口水那样兴奋.他们使用TDD,快速迭代,不断重构,持续集成直至持续部署的方法在进行软件开发. 软件开发真是这样的吗?难道不需要花时间去思考吗?对此,有些观点在Todd的<"品质在于构建过程"吗?>以及<Bob大叔和Jim Coplien对TDD的论战>中谈到过了.我只想想表达下面的

随便写一点最近开发遇到的问题和解决方法 大部分关于laravel和php

laravel里要想对对象进行自己设计的排序(usort()), 得用匿名方法,  原声php就不用 php里面可以随便写html代码,  比如可以把html直接后缀名改成.php, 然后在任何地方<?php ?> 写php代码   反过来好像不行 php现成的函数有时候并不多, 很多时候需要自己写,  其实写一下也不麻烦, 比如把秒数转化成 时分秒的  这种  多练练反而有好处

Jquery网页加载进度条(随笔,当然要随便写,当日记动态心情写咯)

首先先是吐槽时间... 告诉大家一个好消息,就是有个妹子非常仰慕我的前端技术说要包养我 然后有好多羡慕嫉妒恨的童鞋一定要说,少年你太天真了,那一定是HR 然后我表示她不是HR,本宅的春天貌似要到来了...T_T,25年的单身生涯.终于走到了尽头......然后妹子也是前端...为了保证光辉形象.我必要努力提升技术 然后么今天闲的蛋疼,再看看一帮大牛们的装逼网站,然后无意间看到这一段,只想说大牛们的世界真会玩.... 利用图片上data,还有load 最后在用document.readyState