资讯专栏INFORMATION COLUMN

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

church / 2828人阅读

摘要:前端最基础的就是。前面我们已经基本掌握常规的语法语义,以及基本的使用方法。等价于当载入就绪执行一个函数回调。返回一组匹配的元素。据提供的原始标记字符串,动态创建由对象包装的元素。同时设置一系列的属性事件等。

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

前面我们已经基本掌握常规的语法语义,以及基本的使用方法。接下来我们讲深入进去了解其中内在的原理。
也了解 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 选择器

基本
#idelement.class*selector1,selector2,selectorN

层级
ancestor descendantparent > childprev + nextprev ~ 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不会)

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[]

$.fn.get()等价于[]

get获取到的是真是的DOM

eq获得到的还是jQuery包裹的DOM对象。相应的,还有其他方法可以获取。

html()text()val()

html()对应innerHTML

text()对应innerText

val()对应value

微信公众号:前端linong

初级阶段文章目录

前端培训-初级阶段(17) - 数据存储(cookie、session、stroage)

前端培训-初级阶段(13) - 正则表达式

前端培训-初级阶段(13) - 类、模块、继承

前端培训-初级阶段(13) - ECMAScript (内置对象、函数)

前端培训-初级阶段(13) - ECMAScript (语法、变量、值、类型、运算符、语句)

前端培训-初级阶段(13、18)

前端培训-初级阶段(9 -12)

前端培训-初级阶段(5 - 8)

前端培训-初级阶段(1 - 4)

中级阶段文章目录

前端培训-中级阶段(2) - 事件(event) 事件冒泡、捕获 - (2019-06-20期)

前端培训-中级阶段(3) - DOM 文档对象模型(2019-06-27期)

前端培训-中级阶段(4)- BOM 浏览器对象模型(2019-07-04期)

资料

前端培训目录、前端培训规划、前端培训计划

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/54093.html

相关文章

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

    摘要:前端最基础的就是。前面我们已经基本掌握常规的语法语义,以及基本的使用方法。等价于当载入就绪执行一个函数回调。返回一组匹配的元素。据提供的原始标记字符串,动态创建由对象包装的元素。同时设置一系列的属性事件等。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提...

    HmyBmny 评论0 收藏0
  • 前端培训-中级阶段11、12)- 跨域请求原理以及实现(2019-08-22

    摘要:上节我们讲了同源策略,这节我们讲讲如何跨域。当这些从的脚本执行出错,因为违背了同源策略为了保证用户信息不被泄露,错误信息不会显示出来,取而代之只会返回一个。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每...

    binaryTree 评论0 收藏0
  • 前端培训-中级阶段(6)- jQuery事件绑定链式操作及原理(2019-07-25

    摘要:前端最基础的就是。帮助从旧的事件方法转换,和。方法移除用绑定的事件处理程序。特定的事件处理程序可以被移除元素上提供事件名称,命名空间,处理函数。用于过滤器的触发事件的选择器元素的后代。事件触发模拟触发原生使用触发。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS)...

    Airy 评论0 收藏0
  • 前端培训-中级阶段(6)- jQuery事件绑定链式操作及原理(2019-07-25

    摘要:前端最基础的就是。帮助从旧的事件方法转换,和。方法移除用绑定的事件处理程序。特定的事件处理程序可以被移除元素上提供事件名称,命名空间,处理函数。用于过滤器的触发事件的选择器元素的后代。事件触发模拟触发原生使用触发。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS)...

    sutaking 评论0 收藏0

发表评论

0条评论

church

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<