前端培训-中级阶段(5)- jQuery的概念与基本使用(2019-07-11期)

栏目: jQuery · 发布时间: 5年前

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

前端最基础的就是 HTML+CSS+Javascript 。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂( HTML/CSS/JS ),本着提升技术水平,打牢基础知识的中心思想,我们开课啦( 每周四 )。

前面我们已经基本掌握常规的语法语义,以及基本的使用方法。接下来我们讲深入进去了解其中内在的原理。

也了解 DOM、BOM,但是因为规范是一在变的,有没有什么类库可以方便操作这些呢?进入我们今天的主题 jQuery

jQuery

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

前端培训-中级阶段(5)- jQuery的概念与基本使用(2019-07-11期)

jQuery 简介

jQuery 设计的宗旨是“ write Less,Do More ”,即倡导 写更少的代码,做更多的事情

jQuery 是一个 跨浏览器 (兼容所有常见浏览器,包括IE6)的 工具 库。

提供了 元素选取元素操作CSS操作事件处理动画AJAX 等功能。

jQuery 的特点

  1. 链式操作(很优秀)
  2. 高效、灵活的选择器(id、class、tag、伪元素、attr、层级)
  3. 插件机制
  4. 兼容主浏览器,提供了统一的功能接口

jQuery 插件机制

  1. 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();
  2. 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
  3. jQuery.extend([deep], target, object1, [objectN])
    用一个或多个其他对象来扩展一个对象,返回被扩展的对象。

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

jQuery 选择器

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

jQuery()

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

jQuery(Function)

等价于 $.ready(Function)

DOM载入就绪 执行一个函数回调。可以避免当页面 DOM还没有加载就操作了DOM 。(会报错)

简单地说,这个方法纯粹是对向 window.load 事件注册事件的替代方法。不同的是可以绑定多次( addEventListener 也可以绑定多次)。 ready 如果页面加载完成之后,还会继续调用(load不会)

jQuery(element)

将原生 DOM 转换为 jQuery 封装的 DOM

也可以传入一个 elementArray ,来批量转换一组原生 DOM

jQuery([selector,[context]])

传入一个选择器,并且可以限制范围。返回 一组 匹配的元素。

jQuery(html,[ownerDocument])

据提供的原始 HTML 标记字符串,动态创建由 jQuery 对象包装的 DOM 元素。同时设置一系列的属性、事件等。

也可以用来处理 XML

$.fn.attr()$.fn.prop()$.fn.data()

$.fn.attr()

设置或返回被选元素的 属性值 。比如 href , src , id , class
对应 attribute

$.fn.prop()

设置或返回被选元素的 状态值 。可以理解为原始值、状态。比如 checkeddisabled
对应 properties

$.fn.data()

早期是直接绑定在DOM对象上的。

目前如果浏览器 支持HTML5 ,会在DOM元素上 data-* 读取和存储。

data-* 也可以DOM方法 dataset 来读取或修改。

$.fn.get()$.fn.eq[]

前端培训-中级阶段(5)- jQuery的概念与基本使用(2019-07-11期)

  1. $.fn.get() 等价于 []
  2. get 获取到的是真是的 DOM
  3. eq 获得到的还是jQuery包裹的DOM对象。相应的,还有其他方法可以获取。

    1. 前端培训-中级阶段(5)- jQuery的概念与基本使用(2019-07-11期)

html()text()val()

  1. html() 对应 innerHTML
  2. text() 对应 innerText
  3. val() 对应 value

微信公众号:前端linong

前端培训-中级阶段(5)- jQuery的概念与基本使用(2019-07-11期)


以上所述就是小编给大家介绍的《前端培训-中级阶段(5)- jQuery的概念与基本使用(2019-07-11期)》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

社交天性

社交天性

[美] 马修·利伯曼(Matthew D. Lieberman) / 贾拥民 / 浙江人民出版社 / 2016-6 / 69.90

[内容简介] ● 《社交天性》是社会心理学家马修·利伯曼解读人类“社会脑”的权威之作,它告诉我们为什么在充满合作与竞争的智慧社会中人们喜爱社交又相互连接,个人的社会影响力如何得以发挥,书中处处充满了令人惊喜的洞见。 ● 为什么有的人天生善于社交,而有的人总是充满障碍? 为什么智商越高的人越难相处? 心痛对人的伤害甚至超过头痛? 慈善组织如何激发人们的捐赠行为? ......一起来看看 《社交天性》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

MD5 加密
MD5 加密

MD5 加密工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器