zoukankan      html  css  js  c++  java
  • 想要学习jQuery却不知从何开始?本文为你精选5个例子帮你快速成为jQuery大师

    本文阅读对象:WEB前端开发初学者、jQuery初学者、JavaScript初学者

    本文目的:jQuery真正入门、快速入门、快速搞清楚jQuery是什么,同时为你的jQuery大师之路开启第一道门。

    jQuery是什么

    这个问题很重要,因为很多初学者心中想象的jQuery,或者说对jQuery的期望与jQuery的本质/初衷有较大出入,这就导致很多初学者学了相当长一段时间也不知道jQuery可以拿来怎么用,应该在什么地方用。

    笔者对jQuery的理解: jQuery是DOM(文档对象模型)操作的一个JavaScript函数库。这是jQuery最基本的功能,当然,除了这个最基本的功能之外,jQuery还提供了ajax、事件等其他模块的支持,另外,还有jQuery UI,一个基于jQuery基本库专门做UI控件的。

    DOM操作可以简单的理解为动态的修改页面的HTML元素,比如:

    1. 事件绑定,比如按钮的click事件;

    2. 向页面html添加新的html元素,修改html元素(属性值、样式等等),删除html元素;

    于是,只要会使用jQuery进行DOM操作,就可以说你已经学会jQuery了。

    接下来,本文会以5个具有难度阶梯的例子,告诉你应该如何一步一步去学习jQuery,帮助初学者避免在面对学习jQuery时无从下手的尴尬。

    最重要的例子:第一个例子——动态表单

    先看产品原型图:

     

    需求:用户可以动态将一个employee信息加到下方的列表,包含姓名、性别、部门。employee列表中的每一项允许删除,删除之后,编号自动重新计算。

    为什么说这个例子是最重要的例子呢?

    是因为该例子是笔者在学习jQuery的时候,第一个让我有一种“豁然开朗”的感觉的例子。

    所以,当你独立完成该例子的时候,jQuery世界的大门才真正为你敞开。

    例子2:TAB控件练习*2

    简单的显示/隐藏的练习,虽然简单,但是非常实用,因为使用jQuery的过程中有很多时候都在做显示隐藏。

    例子3:选中状态控制

    通过设置/取消 class来控制样式,非常简单,非常实用。

    例子4:下拉列表级联控制

    黑色区域为数据源部分。本例子主要练习jQuery data方法,以及动态控制下拉列表。难度较前2个例子难一点。

    例子5:弹窗控件练习

    写一个控件,通过传入参数弹出一个弹窗。黑色区域代码为调用的示例代码(调用者将会这么调用你的控件)。

    当你可以独立完成这个弹窗控件的时候,你就已经是jQuery中级开发工程师了。

    如何从零开始学习jQuery

    1. 先把jQuery中文参考手册阅读一遍,注意阅读的重点放在选择器、DOM操作,其他知识点全部略过;

    2. 开始写代码,完成本文的第一个例子。

    3. 完成本文的第2至5个例子。

    下一步,你将会学习JavaScript面向对象编程(OOP),你将会感受到JavaScript这门语言的强大之处。

    THE END

  • 相关阅读:
    ios UIWebView截获html并修改便签内容(转载)
    IOS获取系统时间 NSDate
    ios 把毫秒值转换成日期 NSDate
    iOS  如何判断当前网络连接状态  网络是否正常  网络是否可用
    IOS开发 xcode报错之has been modified since the precompiled header was built
    iOS系统下 的手机屏幕尺寸 分辨率 及系统版本 总结
    iOS 切图使用 分辨率 使用 相关总结
    整合最优雅SSM框架:SpringMVC + Spring + MyBatis 基础
    Java面试之PO,VO,TO,QO,BO
    Notes模板说明
  • 原文地址:https://www.cnblogs.com/leotsai/p/jquery-get-started-5-steps.html
Copyright © 2011-2022 走看看