• 看jQuery的这几天


    现在在做SPA时,有很多非常好用而且流行的前端框架,比如Vue,React,Angular等,jQuery似乎要逐渐退出前端的舞台了。不得不说,'write less,do more' 这句话吸引了我,还是决定花一些时间来看jQuery。

    主要是三个过程,过程中记录了很多细节内容以及想法,但是比较乱,所以写这篇梳理一下,怕忘了。

    • 先看了一些简单的例子,http://biaoyansu.com/16.x
    • 然后系统的了解了jQuery常用的内容,https://github.com/smyhvae/Web/tree/master/05-jQuery
    • 最后是官方文档和小项目,http://hemin.cn/jq/

    以点来写,篇幅可能会比较长。

    1.jQuery和Js的加载模式不同,

    • Js的入口函数是在所有的文件资源加载完成后,才执行。这些文件资源包括:页面文档、外部的js文件、外部的css文件、图片等。

    • jQuery的入口函数,是在文档加载完成后,就执行。文档加载完成指的是:DOM树加载完成后,就可以操作DOM了,不用等到所有的外部资源都加载完成

    2.入口函数的不同写法和$符号的冲突解决

    3.jQuery对象,一个伪数组,包含Js中的DOM对象,可以通过each方法遍历,下图是打印的一个jQuery对象

     

    4.选择器和.css()设置样式,其中参数可以传一个对象

    5.操作样式,

    • 实现公告栏的收起、展开, 注意判断条件:if ( board.is (':visible' ))  
    • 闪动广告牌的制作,设置要改变的样式,通过hasClass判断,addClass和removeClass切换样式
    • 选择器的细节,子代和后代,注意对选择权和筛选区分一下,文档中是两个模块

    6.操作DOM,

    • 下拉菜单,stop(false,false)的使用
    • 选择水果,从左栏移动到右栏(option:selected)
    • 教务系统侧栏,实现思路,显示一个,隐藏其余同等级的元素(切换显示的这种要考虑到用<ul>来做、类似的还有选项卡)
    • 文档中过滤、查找中的各种选择方法(parent、siblings、eq)多尝试
    • $(this)的理解,谁触发事件,this就是谁

    7.添加事件,

    • 事件有两种添加方法,直接写事件名更快捷,也易于拼写检查,on的方法可以用更多默认之外的事件
    • 阻止默认事件(表单提交时的默认行为)和事件冒泡(由里向外传递,用return false来禁止)
    • 事件的命名空间 (click.z click.x click.c 只区分添加者,对显示没有影响)
    • 事件委托,可对动态生成的要素进行选择和操作
    • 解绑事件 off(),可传入参数个数 0、1、2

    8.ajax

    • 五步发送一个ajax请求、注意旧版IE的兼容(ie默认请求同一url会返回同一结果,在url后加time或者随机数来保证是不同请求)
    • jQuery和原生Js实现ajax的区别,根据jQuery的效果对Js进行改进
    • 根据Github用户名请求介绍信息、
    • Chrome开发者工具Network的使用,查看请求,禁用缓存,提取图片,预览数据(通过左下角{ }进行格式化)
    • 微博模拟项目,创建一条微博的方法和把微博添加到页面二者分离,通过参数传入输入内容,调用函数生成时间
    • opacity和rgba的区别,后者不会对子代添加透明效果

    9.快捷键: 快速注释   /   xx.log   /   w0 h0   /  取色器  /  按shift右键可在此文件夹下打开CMD,Git Bash也一样

    10.一些想法:

    • 先各部分主要内容,再完善各部分次要内容
    • 写一个元素,布局一次
    • 思考细节,逐步完善
    • 敲命令和点鼠标一回事

    11.最后,有不懂的就查文档吧,也要注意一下一部分已经在新版中弃用的方法 

    一年过去了,感觉什么也看了,可惜什么也忘了。看了一篇以前收藏的利用chrome调试的文章,发现里面的方法技巧我都已经在平时的练习中基本掌握了,这总算是一件欣慰的事了。

  • 相关阅读:
    MacOS Catalina 10.15安装教程,启动U盘制作及安装方法
    苹果macOS Catalina 10.15 正式版推送了,要不要升级,需要注意什么?
    Sublime Text Mac如何进行按键绑定?
    Mac软件应用程序打开出现意外退出、崩溃解决办法
    使用VScode Mac版编译配置C/C++程序完整图文教程
    pycharm pro 2019 mac重构技巧?
    一体化数据库管理Navicat Premium for Mac的命令提示代码
    jsonp理解
    linux系统命令大全
    java学习笔记之分层增删改查
  • 原文地址:https://www.cnblogs.com/sleeping-dog/p/9578552.html
Copyright © 2020-2023  润新知