Jquery 随便写些知识点

2022-11-07 07:38:54

针对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对象就是导致这个错误的原因之一。在一些前端开发群里，对这个错误进行提问的虽然不是很多，但也不会很少...本兽也看了些小伙伴贴出来的代码，还是有一些人是没注意到这两者区别，直接调用对应不上的方法而报错。

一些不常看到有人用，然而确实很实用的选择器使用方法及介绍
平常用的那些就不多做介绍了，想必大家也是玩的很溜了。这里就写些比较少见有使用的吧(返回的是一个包含符合选择条件的元素集合对象)：
$("*")
选取所有元素。
$("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中是：window.event.cancelBubble = true。这里同时提下，怎么停止默认事件：event.preventDefault(),在JavaScript中是：window.event.returnValue = false。

jQuery绑定事件和移除绑定事件

旧版本的.bind()：

　$("#myDiv").bind("click",function(){

  　　console.log("Hello World"); // 这里给id为myDiv的对象绑定一个click事件，点击这个DOM元素将会在控制台打印“Hello World”

　});

旧版本的.unbind()：

  $("#myDiv").cilck(function(){

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

　});

自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。

格式：$(selector).on(event,childSelector,data,function,map)

  $("#btn").on("click",function(){

      console.log(123);

  });

.on可通过selector和childSelector进行页面内后期动态加载的数据的事件绑定

自 jQuery 版本 1.7 起，off() 方法是 unbind()、die() 和 undelegate() 方法的新的替代品。

格式：$(selector).off(event,selector,function(eventObj),map)

  $("#myDiv").cilck(function(){

  　　$("#btn").off("click"); // 这里移除了原来id为btn的元素上的click事件

  });

jQuery停止当前动画

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

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

码农公寓

相关文章