首页

JavaScript语法、语句、关键字保留字、变量

前端达人

第三章 基本概念

3.1 语法

3.1.1 区分大小写

  1. 变量名test和Test完全不同

3.1.2 标识符:变量、函数、属性的名字,或者函数的参数

  1. 命名规则
    • 第一个字符必须是一个字母、下划线、或者美元符号$
    • 其他字符可以是字母、下划线、美元符号、数字
  2. 采用驼峰大小写格式:第一个字母小写,剩下每个单词首字母大写。
    • for example:myName、herAge。
    • 驼峰式命名虽不是强制要求,但可以视为一种最佳实践。

3.1.3 注释

包括单行注释和块级注释。

  1. 单行注释:以两个斜杠开头。如下所示:
// alert(“HelloWorld!”) 
  • 1
  1. 块级注释:以一个斜杠和一个星号(/*)开头,以一个星号和一个斜杠结尾。如下所示:
/*
这是一个
多行的
块级注释
*/ 
  • 1
  • 2
  • 3
  • 4
  • 5

3.1.4 严格模式

  1. 定义:为JavaScript定义的一种不同的解析与执行模型。
  2. 使用方法:
    • 在整个脚本中启用严格模式,可以在顶部添加代码“use strict”;
    • 也可以在函数内部的上方包含这条编译指示。
  3. 使用效果:严格模式下,ECMAScript3中的一些不确定行为会得到处理,而且对某些不安全的操作也会抛出错误。严格模式下,js的执行效果会有很大不同。

3.1.5 语句

  • ECMAScript中的语句以一个分号结尾,但非必需。
  • 若省略分号,则由解析器确定语句的结尾。
  • 建议不要省略分号,因为写上解析器就不必要再花时间推测应该在哪里插入分号了。

3.2 关键字和保留字

ECMA-262描述了一组具有特定用途的关键字和一组不能用做标识符的保留字。

  1. 关键字:可以用于表示控制语句的开始或结束、或用于执行特定操作等。
  2. 保留字:保留字虽然在这门语言中还没有特定的用途,但他们有可能在将来被用作关键字。

3.3 变量

  • ECMAScript的变量是松散类型,即可以用来保存任何类型的数据。
  • 定义变量时要用var操作符,后跟变量名,例如var message,当然了,也可以直接在定义的时候对变量做一个初始化,例如var message = ‘hi’ ;
  • 这段的意思是变量message中保存了一个字符串“hi”。像这样初始化变量并不会把它标记为字符串类型,初始化的过程就只是给变量赋了一个值。
  • 因此,划重点,可以在修改变量的同时修改值的类型。例如:
var message = ‘hi’ ;
message = 100 ;   //有效,但不推荐
//这个例子代表变量message一开始保存了一个字符串“hi”,然后该值又被一个数字值100取代了。 
  • 1
  • 2
  • 3
  • 有一点需要注意,用var操作符定义的变量将成为该变量的作用域中的局部变量。也就是说如果在函数中使用var定义一个变量,那么这个变量在函数退出后就会被销毁。例如:
function test(){
    var  message = ‘hi’ ; //局部变量
} ;
test();
alert(message); //错误

//为什么是错误?
//这里,变量message是在函数里用var定义的,当函数被调用时,就会创建该变量并为其赋值。而在此之后,这个变量会立即被销毁。所以在执行alerat()那行代码的时候message已经被销毁了,因此报错。 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

那么,该怎么解决呢?

  • 在函数内部省略掉var操作符,就可以创建一个全局变量,例子:
function test(){
    message = ‘hi’ ; //局部变量
} ;
test();
alert(message); // hi
//在函数内部不用var会创建全局变量。
//但我们并不提倡这种做法,因为局部作用域中定义的全局变量很难去维护。
//所以我们应该选择在开始就定义好所有的变量。

前端架构演进及主流UI

前端达人

文章目录



    前端三要素

    HTML(结构):超文本标记语言(Hyper Text Markup Language),决定网页的结构和内容
    CSS(表现):层叠样式表(Cascading Style Sheets),设定网页的表现样式
    JavaScript(行为):是一种弱类型脚本语言,其源代码不需经过编译,而是由浏览器解释运行, 用于控制网页的行为
    HTML 称为超文本标记语言,是一种标识性的语言。它通过一系列标签组合,组成一个个不同结构的页面!关于html标签的学习可以去菜鸟教程学习,此处不再赘述!

    CSS层叠样式表 也是一门标记语言,并不是编程语言,因此不可以自定义变量,不可以引用等,换句话说
    就是不具备任何语法支持,它主要缺陷如下:

    语法不够强大,比如无法嵌套书写,导致模块化开发中需要书写很多重复的选择器;
    没有变量和合理的样式复用机制,使得逻辑上相关的属性值必须以字面量的形式重复输出,导致难 以维护;
    这就导致了我们在工作中无端增加了许多工作量。为了解决这个问题,前端开发人员会使用一种称之为 【CSS 预处理器】 的工具,提供 CSS 缺失的样式层复用机制、减少冗余代码,提高样式代码的可维护 性。大大提高了前端在样式上的开发效率。

    什么是CSS 预处理器呢?

    CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的 特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行 CSS 的编码工作。转化成通俗易 懂的话来说就是“用一种专门的编程语言,进行 Web 页面样式设计,再通过编译器转化为正常的 CSS 文 件,以供项目使用”。

    常用的 CSS 预处理器有哪些?

    SASS:基于 Ruby,通过服务端处理,功能强大。解析效率高。需要学习 Ruby 语言,上手难度高于 LESS。
    LESS:基于 NodeJS,通过客户端处理,使用简单。功能比 SASS 简单,解析效率也低于 SASS,但在实际开发中足够了,所以我们后台人员如果需要的话,建议使用 LESS。
    JavaScript 一门弱类型脚本语言,其源代码在发往客户端运行之前不需经过编译,而是将文本格式的字 符代码发送给浏览器由浏览器解释运行。

    Native 原生 JS 开发
    原生 JS 开发,也就是让我们按照 【ECMAScript】 标准的开发方式,简称是 ES,特点是所有浏览器都支持。

    ES 标准已发布如下版本:

    ES3
    ES4(内部,未正式发布)
    ES5(全浏览器支持)
    ES6(常用,当前主流版本:webpack打包成为ES5支持!)
    ES7
    ES8
    ES9(草案阶段)
    从 ES6 开始每年发布一个版本,以年份作为名称,区别就是逐步增加新特性。

    TypeScript 微软的标准
    TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集,而且本质上向这 个语言添加了可选的静态类型和基于类的面向对象编程。由安德斯·海尔斯伯格(C#、Delphi、 TypeScript 之父;.NET 创立者)主导。

    JavaScript 框架

    1.jQuery库

    大家最熟知的 JavaScript库,优点是简化了 DOM 操作,缺点是 DOM 操作太频繁,影响前端性能;在 前端眼里使用它仅仅是为了兼容 IE6、7、8;

    2.Angular库

    Google 收购的前端框架,由一群 Java 程序员开发,其特点是将后台的 MVC 模式搬到了前端并增加了模 块化开发的理念,与微软合作,采用 TypeScript 语法开发;对后台程序员友好,对前端程序员不太友 好;最大的缺点是版本迭代不合理(如:1代 -> 2代,除了名字,基本就是两个东西;已推出了 Angular6)

    3.React

    Facebook 出品,一款高性能的 JS 前端框架;特点是提出了新概念 【虚拟 DOM】 用于减少真实 DOM 操作,在内存中模拟 DOM 操作,有效的提升了前端渲染效率;缺点是使用复杂,因为需要额外学习一 门 【JSX】 语言;

    4.Vue

    一款渐进式 JavaScript 框架,所谓渐进式就是逐步实现新特性的意思,如实现模块化开发、路由、状态 管理等新特性。

    其特点是综合了 Angular(模块化) 和 React(虚拟 DOM) 的优点;

    5.Axios

    前端通信框架;因为 Vue 的边界很明确,就是为了处理 DOM,所以并不具备通信能力,此时就需要额 外使用一个通信框架与服务器交互;当然也可以直接选择使用 jQuery 提供的 A JAX 通信功能;

    JavaScript 构建工具

    Babel:JS 编译工具,主要用于浏览器不支持的 ES 新特性,比如用于编译 TypeScript
    WebPack:模块打包器,主要作用是打包、压缩、合并及按序加载

    NodeJs


    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,说白了就是运行在服务端的JavaScript;

    前端人员为了方便开发也需要掌握一定的后端技术,但我们 Java 后台人员知道后台知识体系极其庞大复 杂,所以为了方便前端人员开发后台应用,就出现了 NodeJS 这样的技术。NodeJS 的作者已经声称放弃 NodeJS(说是架构做的不好再加上笨重的node_modules,可能让作者不爽了吧),开始开发全新架构的 什么是Deno?跟Node.js有何区别?

    既然是后台技术,那肯定也需要框架和项目管理工具,NodeJS 框架及项目管理工具如下:

    Express: NodeJS 框架
    Koa: Express 简化版
    NPM: 项目综合管理工具,类似于 Maven
    YARN: NPM 的替代方案,类似于 Maven 和 Gradle 的关系

    常用UI框架


    Ant-Design:阿里巴巴出品,基于 React 的 UI 框架
    ElementUI、MintUi、iview、ic、:饿了么出品,基于 Vue 的 UI 框架
    Bootstrap:Twitter 推出的一个用于前端开发的开源工具包
    AmazeUI:又叫“妹子 UI”,一款 HTML5 跨屏前端框架
    Layui:轻量级框架(Layer)
    Ant-Design

    ant.design是基于react开发的一个解放ui和前端的工具,它提供了一致的设计方便我们快速开发和减少不必要的设计与代码,很多实用react框架的开发者都已经在使用ant.design了,且其在github上的star数也早已上万,足见其火热程度。

    ant.design的目的也在于提高用户、开发者等多方的体验与幸福感。

    ant.design设计很精妙,vue的iview就是模仿ant.design来实现的

    官网地址:https://ant.design/index-cn
    github地址:https://github.com/ant-design/ant-design/
    ElementUi

    ElementUi是饿了么前端开源维护的VueUI组件库,组件齐全基本涵盖后台所需的所有组件,文档讲解详细,例子也很丰富。主要用于开发PC端的页面,是一个质量比较高的VueUI组件库!

    官网地址:http://element-cn.eleme.io/#/zh-CN
    github地址:https://github.com/ElementUI/element-starter
    vue-element-admin:https://github.com/PanJiaChen/vue-element-admin
    MintUi

    MintUi是由饿了么前端团队推出的一个基于 Vue.js的移动端组件库,组件比较单一,功能简单易上手!

    官网地址:https://mint-ui.github.io/#!/zh-cn
    github地址:https://github.com/ElemeFE/mint-ui
    iview

    iview 是一个强大的基于 Vue 的 UI 库,有很多实用的基础组件比 elementui 的组件更丰富,主要服务于 PC 界面的中后台产品。使用单文件的 Vue 组件化开发模式 基于 npm + webpack + babel 开发,支持 ES2015 高质量、功能丰富 友好的 API ,自由灵活地使用空间。

    官网地址:https://www.iviewui.com/
    github地址:https://github.com/TalkingData/iview-weapp
    iview-admin: https://github.com/iview/iview-admin
    备注:属于前端主流框架,选型时可考虑使用,主要特点是移动端支持较多

    ICE

    飞冰是阿里巴巴团队基于 React/Angular/Vue 的中后台应用解决方案,在阿里巴巴内部,已经有 270 多 个来自几乎所有 BU 的项目在使用。飞冰包含了一条从设计端到开发端的完整链路,帮助用户快速搭建 属于自己的中后台应用。

    官网地址:https://alibaba.github.io/ice
    github地址 :https://github.com/alibaba/ice
    备注:主要组件还是以 React 为主,对 Vue 的支持还不太完善, 目前尚处于观望阶段

    VantUI

    Vant UI 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组 件。通过 Vant,可以快速搭建出风格统一的页面,提升开发效率。

    官网地址: https://youzan.github.io/vant/#/zh-CN/intro
    github地址: https://github.com/youzan/vant
    AtUi

    at-ui是一款基于Vue 2.x的前端UI组件库,主要用于快速开发PC网站产品。 它提供了一套npm + webpack + babel 前端开发工作流程,CSS样式独立,即使采用不同的框架实现都能保持统一的 UI风格。

    官网地址:https://at-ui.github.io/at-ui/#/zh
    github地址: https://github.com/at-ui/at-ui
    CubeUI
    cube-ui 是滴滴团队开发的基于 Vue.js 实现的精致移动端组件库。支持按需引入和后编译,轻量灵活; 扩展性强,可以方便地基于现有组件实现二次开发.

    官网地址:https://didi.github.io/cube-ui/#/zh-CN
    github地址:https://github.com/didi/cube-ui/
    Flutter

    Flutter 是谷歌的移动端 UI 框架,可在极短的时间内构建 Android 和 iOS 上高质量的原生级应用。 Flutter 可与现有代码一起工作, 它被世界各地的开发者和组织使用, 并且 Flutter 是免费和开源的。

    官网地址:https://flutter.dev/docs
    github地址:https://github.com/flutter/flutter
    备注:Google 出品,主要特点是快速构建原生 APP 应用程序,如做混合应用该框架为必选框架

    Ionic

    Ionic 既是一个 CSS 框架也是一个 Javascript UI 库,Ionic 是目前最有潜力的一款 HTML5 手机应用开发 框架。通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用。它使用 JavaScript MVVM 框架和 AngularJS/Vue 来增强应用。提供数据的双向绑定,使用它成为 Web 和移动 开发者的共同选择。

    官网地址:https://ionicframework.com/
    github地址:https://github.com/ionic-team/ionic
    mpvue

    mpvue 是美团开发的一个使用 Vue.js 开发小程序的前端框架,目前支持 微信小程序、百度智能小程 序,头条小程序 和 支付宝小程序。 框架基于 Vue.js,修改了的运行时框架 runtime 和代码编译器 compiler 实现,使其可运行在小程序环境中,从而为小程序开发引入了 Vue.js 开发体验。

    官网地址:http://mpvue.com/
    github地址:https://github.com/Meituan-Dianping/mpvue
    备注:完备的 Vue 开发体验,并且支持多平台的小程序开发,推荐使用

    WeUi

    WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序 量身设计,令用户的使用感知更加统一。包含 button、cell、dialog、toast、article、icon 等各式元 素。

    官网地址:https://weui.io/
    github地址:https://github.com/weui/weui.git

    前后端分离的演进

    为了降低开发的复杂度,以后端为出发点,比如:Struts、SpringMVC 等框架的使用,就是后端的 MVC 时代;

    以 SpringMVC 流程为例:


    1.发起请求到前端控制器(DispatcherServlet)
    2.前端控制器请求HandlerMapping查找 Handler (可以根据xml配置、注解进行查找)
    3.处理器映射器HandlerMapping向前端控制器返回Handler,HandlerMapping会把请求映射为HandlerExecutionChain对象(包含一个Handler处理器(页面控制器)对象,多个HandlerInterceptor拦截器对象),通过这种策略模式,很容易添加新的映射策略
    4.前端控制器调用处理器适配器去执行Handler
    5.处理器适配器HandlerAdapter将会根据适配的结果去执行Handler
    6.Handler执行完成给适配器返回ModelAndView
    7.处理器适配器向前端控制器返回ModelAndView (ModelAndView是springmvc框架的一个底层对象,包括 Model和view)
    8.前端控制器请求视图解析器去进行视图解析 (根据逻辑视图名解析成真正的视图(jsp)),通过这种策略很容易更换其他视图技术,只需要更改视图解析器即可
    9.视图解析器向前端控制器返回View
    10.前端控制器进行视图渲染 (视图渲染将模型数据(在ModelAndView对象中)填充到request域)
    11.前端控制器向用户响应结果
    优点:

    MVC 是一个非常好的协作模式,能够有效降低代码的耦合度,从架构上能够让开发者明白代码应该写在 哪里。为了让 View 更纯粹,还可以使用 Thymeleaf、Freemarker 等模板引擎,使模板里无法写入 Java 代码,让前后端分工更加清晰。单体应用!

    缺点:

    前端开发重度依赖开发环境,开发效率低,这种架构下,前后端协作有两种模式:

    1、第一种是前端写 DEMO,写好后,让后端去套模板。好处是 DEMO 可以本地开发,很。不足是 还需要后端套模板,有可能套错,套完后还需要前端确定,来回沟通调整的成本比较大;

    2、另一种协作模式是前端负责浏览器端的所有开发和服务器端的 View 层模板开发。好处是 UI 相关的 代码都是前端去写就好,后端不用太关注,不足就是前端开发重度绑定后端环境,环境成为影响前端开 发效率的重要因素。

    前后端职责纠缠不清:模板引擎功能强大,依旧可以通过拿到的上下文变量来实现各种业务逻辑。但这样只要前端弱势一点,往往就会被后端要求在模板层写出不少业务代码。还有一个很大的灰色地带是,页面路由等功能本应该是前端最关注的,但却是由后端来实现。

    ajax 的时代

    时间回到 2005 年 AJAX (Asynchronous JavaScript And XML,异步 JavaScript 和 XML,老技术新 用法) 被正式提出并开始使用 CDN 作为静态资源存储,于是出现了 JavaScript 王者归来(在这之前 JS 都是用来在网页上贴狗皮膏药广告的)的 SPA(Single Page Application)单页面应用时代。
    优点:
    这种模式下,前后端的分工非常清晰,前后端的关键协作点是 A JAX 接口。看起来是如此美妙,但回过 头来看看的话,这与 JSP 时代区别不大。复杂度从服务端的 JSP 里移到了浏览器的 JavaScript,浏览器 端变得很复杂。类似 Spring MVC,这个时代开始出现浏览器端的分层架构:

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fP8yZYUq-1587440620216)()]
    缺点:

    前后端接口的约定: 如果后端的接口一塌糊涂,如果后端的业务模型不够稳定,那么前端开发会很 痛苦;不少团队也有类似尝试,通过接口规则、接口平台等方式来做。有了和后端一起沉淀的 接口 规则,还可以用来模拟数据,使得前后端可以在约定接口后实现并行开发。
    前端开发的复杂度控制: SPA 应用大多以功能交互型为主,JavaScript 代码过十万行很正常。大量 JS 代码的组织,与 View 层的绑定等,都不是容易的事情
    前端为主的 MV* 时代

    此处的 MV* 模式如下:

    MVC(同步通信为主):Model、View、Controller
    MVP(异步通信为主):Model、View、Presenter
    MVVM(异步通信为主):Model、View、ViewModel
    为了降低前端开发复杂度,涌现了大量的前端框架,比如: AngularJS 、 React 、Vue.js 、 EmberJS 等,这些框架总的原则是先按类型分层,比如 Templates、Controllers、Models,然后再在层内做切分,




    优点:

    前后端职责很清晰: 前端工作在浏览器端,后端工作在服务端。清晰的分工,可以让开发并行,测 试数据的模拟不难,前端可以本地开发。后端则可以专注于业务逻辑的处理,输出 RESTful等接 口。
    前端开发的复杂度可控: 前端代码很重,但合理的分层,让前端代码能各司其职。这一块蛮有意思 的,简单如模板特性的选择,就有很多很多讲究。并非越强大越好,限制什么,留下哪些自由,代 码应该如何组织,所有这一切设计,得花一本书的厚度去说明。
    -部署相对独立: 可以快速改进产品体验
    缺点:

    代码不能复用。比如后端依旧需要对数据做各种校验,校验逻辑无法复用浏览器端的代码。如果可 以复用,那么后端的数据校验可以相对简单化。
    全异步,对 SEO 不利。往往还需要服务端做同步渲染的降级方案。 性能并非最佳,特别是移动互联网环境下。
    SPA 不能满足所有需求,依旧存在大量多页面应用。URL Design 需要后端配合,前端无法完全掌控。
    NodeJS 带来的全栈时代

    前端为主的 MV* 模式解决了很多很多问题,但如上所述,依旧存在不少不足之处。随着 NodeJS 的兴 起,JavaScript 开始有能力运行在服务端。这意味着可以有一种新的研发模式:
    ————————————————
    版权声明:本文为CSDN博主「叁有三分之一」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/iME_cho/article/details/105654633


前端 之 jQuery

seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

文章目录
jQuery
jQuery的安装:
jQuery 语法
选择器
基本选择器:
层级选择器
基本筛选器
样式操作
表单筛选器
遍历方法
jQuery链式操作
jQuery 事件
$(document).ready()
click()
dblclick()
mouseenter()
mouseleave()
mousedown()
mouseup()
hover()
focus()
blur()
input()
取消标签默认的事件
事件冒泡
事件委托
jQuery自带的动画效果
jQuery
jQuery的字面意思其实就是JavaScript和查询(Query),即用于辅助开发JavaScript的库。jQuery 极大地简化了 JavaScript 编程,jQuery使用户可以更加方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,而且方便地为网站提供AJAX交互。

实例找到div标签并给div标签设置为红色

原生js操作
var d1Ele = document.getElementById('d1');
d1Ele.style.color = 'red';
jQuery操作
$('#d1').css('color','blue');
1
2
3
4
5
jQuery的安装:
您可以从网页中添加 jQuery

1、从官网http://jquery.com/download/下载 jQuery 库

里面分为:Production version(用于实际的网站中,已被精简和压缩)和Development version(用于测试和开发,未压缩,是可读的代码),一般使用Production version压缩版本的。

2、从 CDN 中载入 jQuery, 如从 Google 或 百度 中加载 jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
或者
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
或者
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.slim.js"></script>
1
2
3
4
5
一定要先导入后使用

jQuery 语法
jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。

$(selector).action()
1
美元符号定义 jQuery
选择符(selector)“查询"和"查找” HTML 元素
jQuery 的 action() 执行对元素的操作
选择器
jQuery 选择器可以对 HTML 元素组或单个元素进行操作。 jQuery 选择器基于元素的 id、类、类型、属性、属性值等查找HTML 元素。它基于已经存在的 CSS 选择器外,还有一些自定义的选择器。

基本选择器:
ID选择器、类名选择器、标签选择器、组合选择器

选择器 实例 选取
* $("*") 所有元素
#id $("#d1") id=“d1” 的元素
.class $(".name") class=“name” 的所有元素
.class , .class $(".name,.password") class 为 “name” 或 “password” 的所有元素
*element $(“span”) 所有 <span> 元素
el1,el2,el3 $(“h1,div,p”) 所有 <h1>、<div> 和 <p> 元素
提出注意点,原生DOM查找和jQuery查找出来的结果区别DOM对象与jQuery对象
DOM对象与jQuery对象互相转换
$('#d1')[0]
var d1Ele = document.getElementById('d1');
$(d1Ele)
1
2
3
4
层级选择器
选择器 实例 选取
parent > child $(“div > p”) <div> 元素的直接子元素的所有 <p> 元素
parent descendant $(“div p”) <div> 元素的后代的所有 <p> 元素
element + next $(“div + p”) 每个 <div> 元素相邻的下一个 <p> 元素
element ~ siblings $(“div ~ p”) <div> 元素同级的所有 <p> 元素
基本筛选器
选择器 实例 选取
:first $(“p:first”) 第一个 <p> 元素
:last $(“p:last”) 最后一个 <p> 元素
:even $(“tr:even”) 所有偶数 <tr> 元素
:odd $(“tr:odd”) 所有奇数 <tr> 元素
:gt(nu) $(“ul li:gt(3)”) 列举 index 大于 3 的元素
:lt(nu) $(“ul li:lt(3)”) 列举 index 小于 3 的元素
:eq(nu) $(“ul li:eq(3)”) 列举 index 等于 3 的元素
:not(selector) $(“input:not(:empty)”) 所有不为空的输入元素
:has(element) $(“div:has(a)”) 返回拥有一个或多个元素在其内的所有元素
/用ul标签举例
$('#ul>li:first')
$('#u1>li:last')
$('#ul>li:eq(3)')
$('#ul>li:even')
$('#ul>li:odd')
$('#ul>li:gt(3)')
$('#ul>li:lt(3)')
$('#u1>li:not(.c1)')

最后一个has的玩法需要写个三个div:一个空div、一个儿子有a标签、一个儿子没有a,孙子有a标签
$('div:has(a)')
输出:
k.fn.init(3) [div, div#d2, div#d3, prevObject: k.fn.init(1)]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
样式操作
方法 描述
addClass() 向被选元素添加一个或多个类名
after() 在被选元素后插入内容
append() 在被选元素的结尾插入内容
appendTo() 在被选元素的结尾插入 HTML 元素
attr() 设置或返回被选元素的属性/值
before() 在被选元素前插入内容
clone() 生成被选元素的副本
css() 为被选元素设置或返回一个或多个样式属性
detach() 移除被选元素(保留数据和事件)
empty() 从被选元素移除所有子节点和内容
hasClass() 检查被选元素是否包含指定的 class 名称
height() 设置或返回被选元素的高度
html() 设置或返回被选元素的内容
innerHeight() 返回元素的高度(包含 padding,不包含 border)
innerWidth() 返回元素的宽度(包含 padding,不包含 border)
insertAfter() 在被选元素后插入 HTML 元素
insertBefore() 在被选元素前插入 HTML 元素
offset() 设置或返回被选元素的偏移坐标(相对于文档)
offsetParent() 返回第一个定位的祖先元素
outerHeight() 返回元素的高度(包含 padding 和 border)
outerWidth() 返回元素的宽度(包含 padding 和 border)
position() 返回元素的位置(相对于父元素)
prepend() 在被选元素的开头插入内容
prependTo() 在被选元素的开头插入 HTML 元素
prop() 设置或返回被选元素的属性/值
remove() 移除被选元素(包含数据和事件)
removeAttr() 从被选元素移除一个或多个属性
removeClass() 从被选元素移除一个或多个类
removeProp() 移除通过 prop() 方法设置的属性
replaceAll() 把被选元素替换为新的 HTML 元素
replaceWith() 把被选元素替换为新的内容
scrollLeft() 设置或返回被选元素的水平滚动条位置
scrollTop() 设置或返回被选元素的垂直滚动条位置
text() 设置或返回被选元素的文本内容
toggleClass() 在被选元素中添加/移除一个或多个类之间切换
unwrap() 移除被选元素的父元素
val() 设置或返回被选元素的属性值(针对表单元素)
width() 设置或返回被选元素的宽度
常用实例:

三级菜单展示

$(this).next().removeClass('hide').parent().siblings().find('.items').addClass('hide')
1
直接操作css属性

// 两个参数设置属性
$('#p1').css('font-size','24px')
// 一个参数获取属性
$('#p1').css('font-size')

// 一次设置多个属性
$('#p1').css({"border":"1px solid black","color":"blue"})
1
2
3
4
5
6
7
位置操作

// 不加参数获取位置参数
$(".c3").offset()
// 加参数设置位置参数
$(".c3").offset({top:284,left:400})

// position只能获取值,不能设置值

// scrollTop获取当前滚动条偏移量
$('window').scrollTop();
$('window').scrollTop(0);  // 设置滚动条偏移量
1
2
3
4
5
6
7
8
9
10
文本操作

text() html() 不加参数获取值,加参数设置值
val() 不加参数获取值,加参数设置值
1
2
属性操作

// 获取文本属性
$('#d1').attr('s1')  // 获取属性值
$('#d1').attr('s1','haha')  // 设置属性值
$('#d1').attr({'num':50,'taidi':'gay'})  // 设置多个属性
$('#d1').removeAttr('taidi')  // 删除一个属性

// 获取check与radio标签的checked属性
$('#i1').prop('checked')
$('#i1').prop('checked',true)
1
2
3
4
5
6
7
8
9
文档处理

// 标签内部尾部追加元素
$('#d1').append(pEle)
$pEle.appendTo($('#d1'))

// 标签内部头部添加元素
$('#d1').prepend(pEle)
$pEle.prependTo($('#d1'))

// 标签外部下面添加元素
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面

// 标签外部上面添加元素
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

// 替换标签
replaceWith()  // 什么被什么替换
replaceAll()  // 拿什么替换什么

// 克隆事例
<button id="b2">屠龙宝刀,点击就送</button>
// clone方法加参数true,克隆标签并且克隆标签带的事件
  $("#b2").on("click", function () {
    $(this).clone(true).insertAfter(this);  // true参数
  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
表单筛选器
选择器 实例 选取
:input $(":input") 所有 input 元素
:text $(":text") 所有带有 type=“text” 的 input 元素
:password $(":password") 所有带有 type=“password” 的 input 元素
:checkbox $(":checkbox") 所有带有 type=“checkbox” 的 input 元素
:submit $(":submit") 所有带有 type=“submit” 的 input 元素
:reset $(":reset") 所有带有 type=“reset” 的 input 元素
:button $(":button") 所有带有 type=“button” 的 input 元素
:image $(":image") 所有带有 type=“image” 的 input 元素
:file $(":file") 所有带有 type=“file” 的 input 元素
:enabled $(":enabled") 所有启用的 input 元素
:disabled $(":disabled") 所有禁用的 input 元素
:selected $(":selected") 所有选定的 input 元素
:checked $(":checked") 所有选中的 input 元素
// 针对表单内的标签
$('input[type="text"]')
// 简化写法
$(':text')

// 找到所有被选中的checkbox
$(':checkbox')  // 注意select框中默认selected标签也会被找到
$('input:checkbox')
1
2
3
4
5
6
7
8
遍历方法
方法 描述
add() 把元素添加到匹配元素的集合中
children() 返回被选元素的所有直接子元素
closest() 返回被选元素的第一个祖先元素
contents() 返回被选元素的所有直接子元素(包含文本和注释节点)
each() 为每个匹配元素执行函数
filter() 把匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素
find() 返回被选元素的后代元素
first() 返回被选元素的第一个元素
is() 根据选择器/元素/jQuery 对象检查匹配元素集合,如果存在至少一个匹配元素,则返回 true
last() 返回被选元素的最后一个元素
next() 返回被选元素的后一个同级元素
nextAll() 返回被选元素之后的所有同级元素
nextUntil() 返回介于两个给定参数之间的每个元素之后的所有同级元素
not() 从匹配元素集合中移除元素
offsetParent() 返回第一个定位的父元素
parent() 返回被选元素的直接父元素
parents() 返回被选元素的所有祖先元素
parentsUntil() 返回介于两个给定参数之间的所有祖先元素
prev() 返回被选元素的前一个同级元素
prevAll() 返回被选元素之前的所有同级元素
prevUntil() 返回介于两个给定参数之间的每个元素之前的所有同级元素
siblings() 返回被选元素的所有同级元素 Returns all sibling elements of the selected element
slice() 把匹配元素集合缩减为指定范围的子集
each() 方法为每个匹配元素规定要运行的函数。
$.each(array,function(index){
  console.log(array[index])
})
$.each(array,function(){
  console.log(this);
})
// 支持简写
$divEles.each(function(){
  console.log(this)  // 标签对象
})
1
2
3
4
5
6
7
8
9
10
11
jQuery链式操作
python代码诠释链式调用,其实就是在调用方法之后讲对象再次返回

<div>
<p>p1</p>
<p>p2</p>
</div>
$('div>p').first().addclass('c1').next().addclass('c2');
1
2
3
4
5
jQuery 事件
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

$(document).ready()
$(document).ready() 方法允许我们在文档完全加载完后执行函数。为了防止网页还没加载完,js代码就已经执行,通常利用下面两种方式来书写js代码。

$(document).ready(function(){
// 在这里写你的JS代码...
})

网页最后
$(function(){
// 在这里写你的代码
})
1
2
3
4
5
6
7
8
click()
click() 方法是当按钮点击事件被触发时会调用一个函数。

在下面的实例中,当点击事件在某个<p> 元素上触发时,隐藏当前的 <p> 元素:

$("p").click(function(){ 
  $(this).hide(); 
});
1
2
3
dblclick()
当双击元素时,会发生 dblclick 事件。

$("p").dblclick(function(){ 
  $(this).hide(); 
});
1
2
3
mouseenter()
当鼠标指针穿过元素时,会发生 mouseenter 事件。

$("#p1").mouseenter(function(){ 
  alert("鼠标经过了!"); 
});
1
2
3
mouseleave()
当鼠标指针离开元素时,会发生 mouseleave 事件。

$("#p1").mouseleave(function(){ 
  alert("鼠标离开了!"); 
});
1
2
3
mousedown()
当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。

$("#p1").mousedown(function(){ 
  alert("鼠标按下!"); 
});
1
2
3
mouseup()
当在元素上松开鼠标按钮时,会发生 mouseup 事件。

ouseup(function(){ 
  alert("鼠标松开!"); 
});
1
2
3
hover()
hover()方法用于模拟光标悬停事件。当鼠标移动到元素上时,会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时,会触发指定的第二个函数(mouseleave)。

$("#p1").hover(function(){ 
  alert("你的光标悬停!"); 
  }, 
  function(){ 
  alert("你的光标已经离开!"); 
});
1
2
3
4
5
6
focus()
当元素获得焦点时,发生 focus 事件。

$("input").focus(function(){ 
  $(this).css("background-color","#eee"); 
});
1
2
3
blur()
当元素失去焦点时,发生 blur 事件。

$("input").blur(function(){ 
  $(this).css("background-color","#eee"); 
});
1
2
3
input()
input实时监听,输入内容时发生 input 事件

 $('#i1').on('input',function () {
        console.log($(this).val())
    });
1
2
3
取消标签默认的事件
利用preventDefault()
$('input').click(function (e) {
        alert(123);
        e.preventDefault();  
    });
直接返回false
$('input').click(function (e) {
        alert(123);
        return false;
    });
  
1
2
3
4
5
6
7
8
9
10
11
事件冒泡
iv>p>span  // 三者均绑定点击事件
$("span").click(function (e) {
        alert("span");
        e.stopPropagation();  // 阻止事件冒泡
    });
1
2
3
4
5
事件委托
<button>按钮</button>
<script src="jQuery-3.3.1.js"></script>
<script>
    $('body').on('click','button',function () {
        alert(123)
    })
</script>
1
2
3
4
5
6
7
jQuery自带的动画效果
下面的表格列出了用于创建动画效果的 jQuery 方法。

方法 描述
delay() 对被选元素的所有排队函数(仍未运行)设置延迟
dequeue() 移除下一个排队函数,然后执行函数
fadeIn() 逐渐改变被选元素的不透明度,从隐藏到可见
fadeOut() 逐渐改变被选元素的不透明度,从可见到隐藏
fadeTo() 把被选元素逐渐改变至给定的不透明度
fadeToggle() 在 fadeIn() 和 fadeOut() 方法之间进行切换
finish() 对被选元素停止、移除并完成所有排队动画
hide() 隐藏被选元素
queue() 显示被选元素的排队函数
show() 显示被选元素
slideDown() 通过调整高度来滑动显示被选元素
slideToggle() slideUp() 和 slideDown() 方法之间的切换
slideUp() 通过调整高度来滑动隐藏被选元素
stop() 停止被选元素上当前正在运行的动画
toggle() hide() 和 show() 方法之间的切换
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 平面设计服务

太及时了!视觉设计师怎样让前端100%实现设计效果?

周周

编者按:今天的好文,总结了两位设计师的工作经验,内容干货不用多加描述,同为设计师,这个问题的答案,你一定想知道(附神器唷) >>>

酸梅干超人:首先,作为一个设计师,尤其是UI设计师,请跟我一起大声念:必须掌握前端切图流程!!

这可能意味着你得学会HTML+CSS,或者要长时间和IOS或者安卓开发人员交流他们是怎么把图片和文字排进屏幕内的。别老是抱怨你是设计怎么能去学码农的东西,设计人员对这些看似高深的源码有本能的畏惧和厌恶。无论你所在的公司在项目人员配置上如何贴心到位,但如果你自己没有掌握这些知识点,就不要妄想最后实现环节上能顺利收尾,因为你从出发点开始和程序员的认知就不对称,这些不对称是矛盾和偏差的根源。

让我们来举举例子:

30+有吸引力的jQuery插件 可应用到你的WEB站点

蓝蓝

很多公司是缺少前端人员,前端的工作都邮设计师来完成,但设计师们对前端的熟悉程度一般般,想做出一些好的,就必须去找源代码了,今天我们整理出30+有吸引力的jQuery插件,这些都是比较新鲜的代码,有的效果很不错,有的却很实用,喜欢的可以尝试应用到你的网站上,让你的WEB站点更生动一些吧!

魔法滚动,在演示页滑动鼠标中键试试,很有趣哦。

前端神器 Firebug 2.0 新特性一览

蓝蓝

如果你从事Web前端方面的开发工作,那么对Firebug一定不会陌生,这是Firefox浏览器的一款插件,集HTML查看和编辑、Javascript控制台、网络状况监视器于一体,给Web开发者带来了极大的便利,堪称Web前端开发神器。 

版本Firebug 2.0即将发布,下面就来看看这个大版本中有哪些改进。

1.  基于新的Firefox调试引擎(JSD2 



2.  新的UI,以匹配Firefox 29版本中引入的Australis主题 


3.  Script面板支持语法高亮





4.  允许检查和修改JavaScript函数的返回值
 





5.  Console面板和Script面板新增了Pretty Print(源码美化输出)功能
 





6.  新增了Export as JSON to Clipboard功能,允许导出当前页面中所有的cookies到剪贴板中。
 



瀑布流布局的开发实践

360图片搜索的美女秀场

瀑布流的布局方式展现的内容通常是扁平化、琐碎的东西。首先吸引人的应该是图片,并且图片是那种参差不齐的,如果瀑布流中文字过多,会给人很杂乱的感觉,所以瀑布流更适合单纯的图片浏览。

前不久360公司上线的项目–360图片搜索的美女秀场频道,就用到了瀑布流的布局方式,这种纯粹的看美女图片的页面用瀑布流还是挺合适的。

页面构建的审图与细节

蓝蓝

作为专业的页面构建工程师,除了在专业技能上有很高的要求以外,还需要具有一定的对设计图的审稿能力。审图,并非是意味着追求跟PSD一模一样,甚至耗费大量时间截屏跟PSD去“对像素”。在我的理解中,审图是通过对UI设计稿的分析,充分理解UI设计师的意图,再结合UE的交互状态,从中做到真正的“还原设计稿”。

事例一:有取有舍,方是领悟

比如,在这样一张设计稿中

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档