前端中级阶段学习（4） -jQuery的概念与基本使用

最新推荐文章于 2020-11-05 22:53:49 发布

前端发发

最新推荐文章于 2020-11-05 22:53:49 发布

阅读量178

点赞数

分类专栏：框架 css 科技 web前端程序员 JavaScript HTML 资讯编程 jQuery vue 文章标签：程序员编程 web前端资讯 jQuery

本文链接：https://blog.csdn.net/toutiaoqiand/article/details/93915162

版权

框架同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

css

11 篇文章 0 订阅

订阅专栏

科技

11 篇文章 0 订阅

订阅专栏

前面我们已经基本掌握常规的语法语义，以及基本的使用方法。接下来我们讲深入进去了解其中内在的原理。
也了解 DOM、BOM，但是因为规范是一在变的，有没有什么类库可以方便操作这些呢？进入我们今天的主题jQuery

jQuery

这东西出来很久了，一般来说都用过。提供一个速查地址

jQuery 简介

jQuery 设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。
jQuery 是一个跨浏览器（兼容所有常见浏览器，包括IE6）的工具库。
提供了元素选取、元素操作、CSS操作、事件处理、动画、AJAX等功能。

jQuery 的特点

链式操作（很优秀）
高效、灵活的选择器（id、class、tag、伪元素、attr、层级）
插件机制
兼容主浏览器，提供了统一的功能接口

jQuery 插件机制

jQuery.fn.extend(object) 对应 $('div'). 的操作。

jQuery.fn.extend({
  check: function() {
    return this.each(function() { this.checked = true; });
  },
  uncheck: function() {
    return this.each(function() { this.checked = false; });
  }
});
$("input[type=checkbox]").check();
$("input[type=radio]").uncheck();

jQuery.extend(object) 对应 $. 的操作。

jQuery.extend({
  min: function(a, b) { return a < b ? a : b; },
  max: function(a, b) { return a > b ? a : b; }
});
jQuery.min(2,3); // => 2
jQuery.max(4,5); // => 5

jQuery.extend([deep], target, object1, [objectN])
用一个或多个其他对象来扩展一个对象，返回被扩展的对象。

如果不指定target，则给jQuery命名空间本身进行扩展。这有助于插件作者为jQuery增加新方法。 **如果第一个参数设置为true，则jQuery返回一个深层次的副本，递归地复制找到的任何对象。否则的话，副本会与原对象共享结构。**未定义的属性将不会被复制，然而从对象的原型继承的属性将会被复制。

jQuery 选择器

基本
#id 、 element 、 .class 、 * 、 selector1,selector2,selectorN
层级
ancestor descendant 、 parent > child 、 prev + next 、prev ~ siblings
基本筛选器
:first、:not(selector)、:even、:odd、:eq(index)、:gt(index)、:lang1.9+、:last、:lt(index)、:header、:animated、:focus、:root1.9+、:target1.9+
内容
:contains(text)、:empty、:has(selector)、:parent
可见性
:hidden、:visible
属性
[attribute]、[attribute=value]、[attribute!=value]、[attribute^=value]、[attribute$=value]、[attribute*=value]、[attrSel1][attrSel2][attrSelN]
子元素
:first-child、:first-of-type1.9+、:last-child、:last-of-type1.9+、:nth-child、:nth-last-child()1.9+、:nth-last-of-type()1.9+、:nth-of-type()1.9+、:only-child、:only-of-type1.9+、
表单
:input、:text、:password、:radio、:checkbox、:submit、:image、:reset、:button、:file
表单对象属性
:enabled、:disabled、:checked、:selected
混淆选择器
$.escapeSelector(selector)3.0+
这个方法通常被用在类选择器或者ID选择器中包含一些CSS特殊字符的时候，这个方法基本上与CSS中CSS.escape()方法类似，唯一的区别是jquery中的这个方法支持所有浏览器。

jQuery()

核心函数，我认为这是很优秀的一个点。小小的$函数，包含了我们想要的大多数功能。

jQuery(Function)

等价于$.ready(Function)
当DOM载入就绪执行一个函数回调。可以避免当页面DOM还没有加载就操作了DOM。（会报错）
简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。不同的是可以绑定多次（addEventListener也可以绑定多次）。ready如果页面加载完成之后，还会继续调用（load不会）