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

简介: 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。前面我们已经基本掌握常规的语法语义,以及基本的使用方法。接下来我们讲深入进去了解其中内在的原理。也了解 DOM、BOM,但是因为规范是一在变的,有没有什么类库可以方便操作这些呢?进入我们今天的主题jQuery

jQuery



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


bVbulBX.webp.jpg


jQuery 简介


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


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


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


jQuery 的特点


  1. 链式操作(很优秀)


  1. 高效、灵活的选择器(id、class、tag、伪元素、attr、层级)


  1. 插件机制


  1. 兼容主浏览器,提供了统一的功能接口


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


  1. jQuery.extend([deep], target, object1, [objectN])

用一个或多个其他对象来扩展一个对象,返回被扩展的对象。如果不指定target,则给jQuery命名空间本身进行扩展。这有助于插件作者为jQuery增加新方法。


如果第一个参数设置为true,则jQuery返回一个深层次的副本,递归地复制找到的任何对象。否则的话,副本会与原对象共享结构。 未定义的属性将不会被复制,然而从对象的原型继承的属性将会被复制。


jQuery 选择器


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


  1. 层级
    ancestor descendantparent > childprev + nextprev ~ siblings


  1. 基本筛选器
    :first:not(selector):even:odd:eq(index):gt(index):lang1.9+、:last:lt(index):header:animated:focus:root1.9+、:target1.9+


  1. 内容
    :contains(text):empty:has(selector):parent


  1. 可见性
    :hidden:visible


  1. 属性
    [attribute][attribute=value][attribute!=value][attribute^=value][attribute$=value][attribute*=value][attrSel1][attrSel2][attrSelN]


  1. 子元素
    :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+、


  1. 表单
    :input:text:password:radio:checkbox:submit:image:reset:button:file


  1. 表单对象属性
    :enabled:disabled:checked:selected


  1. 混淆选择器
    $.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(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[]



bVbunC7.webp.jpg


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


  1. get获取到的是真是的DOM


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

25.png


html()text()val()


  1. html()对应innerHTML


  1. text()对应innerText


  1. val()对应value
相关文章
|
1月前
|
存储 前端开发 JavaScript
前端状态管理:Vuex 核心概念与实战
Vuex 是 Vue.js 应用程序的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。本教程将深入讲解 Vuex 的核心概念,如 State、Getter、Mutation 和 Action,并通过实战案例帮助开发者掌握在项目中有效使用 Vuex 的技巧。
|
2月前
|
自然语言处理 前端开发 JavaScript
深入理解前端中的 “this” 指针:从基础概念到复杂应用
本文全面解析前端开发中“this”指针的运用,从基本概念入手,逐步探讨其在不同场景下的表现与应用技巧,帮助开发者深入理解并灵活掌握“this”的使用。
|
2月前
|
前端开发 开发者
本文将深入探讨 BEM 的概念、原理以及其在前端开发中的应用
BEM(Block-Element-Modifier)是一种前端开发中的命名规范和架构方法,旨在提高代码的可维护性和复用性。通过将界面拆分为独立的模块,BEM 提供了一套清晰的命名规则,增强了代码的结构化和模块化设计,促进了团队协作。本文深入探讨了 BEM 的概念、原理及其在前端开发中的应用,分析了其优势与局限性,为开发者提供了宝贵的参考。
67 8
|
2月前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
108 1
|
2月前
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
42 3
|
3月前
|
存储 前端开发 JavaScript
前端必备知识:闭包的概念、作用与应用
前端必备知识:闭包的概念、作用与应用
39 1
|
4月前
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
34 2
|
3月前
|
前端开发 JavaScript 程序员
【从前端入门到全栈】Node.js 之核心概念
【从前端入门到全栈】Node.js 之核心概念
|
3月前
|
前端开发 JavaScript Shell
深入解析前端构建利器:webpack核心概念与基本功能全览
深入解析前端构建利器:webpack核心概念与基本功能全览—
41 0
|
3月前
|
JavaScript 前端开发 API
【前端基础篇】JavaScript之jQuery介绍
【前端基础篇】JavaScript之jQuery介绍
195 0