jquery事件

JQuery

由 淺唱寂寞╮ 提交于 2020-02-14 17:47:30
jQuery简介 jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 jQuery的使用方式 jQuery 库是一个 JavaScript 文件，可以使用 HTML 的 <script> 标签引用它： 1.可以选择在 <head></head> 内引用 < head > < script src = "js/jquery-1.12.2.js" > < / script > < / head > 2.也可以直接在 <body></body> 内引用 < body > < script src = "js/jquery-1.12.2.js" > < / script > < / body > jQuery选择器 jQuery选择器基于元素的id、类、类型、属性、属性值等查找，允许对HTML元素组或单个元素进行操作。 jQuery所有的选择器都以美元符号开头： $() 。 jQuery选择器-基本选择器 元素选择器 $ ( function ( )

Web前端面试题

由 馋奶兔 提交于 2020-02-14 01:05:32
1、jQuery 插件实现方式，分别介绍？ jQuery.fn.extend 封装直接在$下面的方法，就是根下面， 扩展 jQuery 元素集来提供新的方法（通常用来制作插件）。 . e x t e n d 用 来 在 j Q u e r y 命 名 空 间 上 增 加 新 函 数 。 用 一 个 或 多 个 其 他 对 象 来 扩 展 一 个 对 象 ， 返 回 被 扩 展 的 对 象 批 量 的 方 法 用 f n ， 静 态 的 用 .extend 用来在 jQuery 命名空间上增加新函数。用一个或多个其他对象来扩展 一个对象，返回被扩展的对象 批量的方法用fn，静态的用 . e x t e n d 用 来 在 j Q u e r y 命 名 空 间 上 增 加 新 函 数 。 用 一 个 或 多 个 其 他 对 象 来 扩 展 一 个 对 象 ， 返 回 被 扩 展 的 对 象 批 量 的 方 法 用 f n ， 静 态 的 用 .extend（），不建议用扩展到根下面。 2、bind 和 live 的区别? live 方法其实是 bind 方法的变种，其基本功能就同 bind 方法的功能是一样的， 都是为一个元素绑定某个事件，但是 bind 方法只能给当前存在的元素绑定事件，对于 事后采用 JS 等方式新生成的元素无效，而 live 方法则正好弥补了 bind

jQuery开发者眼中的AngularJS

由 一曲冷凌霜 提交于 2020-02-13 10:46:04
文章来源：http://blog.jobbole.com/76265/ AngualrJS是一个很贴心的web应用框架。它有很不错的官方文档和示例；经过在现实环境中的测试 著名的TodoMVC project ，它在海量的框架中脱颖而出；而且网上到处都是很不错演示或者展示。但是对于一个没有接触过和AngularJS相似的框架而且还是几乎都在使用像jQuery这样的JavaScript类库的开发者来讲，要从jQuery的思想转变成AngularJS的思想是有点困难的。至少对于我来说是这样的，所以我想要分享一些学习笔记希望帮到一些开发者。 Ng不是一个库(library) 要理解AngularJS，第一件要做得事情就是要明白这是一个根本上就和jQuery不一样的工具。jQuery是一个库而AngularJS是一个框架。使用库是指，你的代码决定什么时候从库中调用一个特定的方法；使用框架则是，你实现了一些回调方法，到了特定的时候框架会去调用这些方法。 当你思考下在runtime的时候会发生什么以后你就可以理解这个不同点了。jQuery在与runtime的时候会发生什么？大部分情况下，什么时候都不会发生。jQuery代码的执行是作为触发了DOM事件上绑定的jQuery方法的响应。 在加载的时候，Angular会将你的DOM树和JavaScript转向一个angular app

jQuery(三)

由 删除回忆录丶 提交于 2020-02-11 14:44:13
1. jQuery特殊属性操作 1.1. val方法 val方法用于设置和获取表单元素的值，例如input、textarea的值 //设置值 $("#name").val(“张三”); //获取值 $("#name").val(); 【案例：京东搜索.html】 1.2. html方法与text方法 html方法相当于innerHTML text方法相当于innerText //设置内容 $(“div”).html(“<span>这是一段内容</span>”); //获取内容 $(“div”).html() //设置内容 $(“div”).text(“<span>这是一段内容</span>”); //获取内容 $(“div”).text() 区别：html方法会识别html标签，text方法会那内容直接当成字符串，并不会识别html标签。 1.3. width方法与height方法 设置或者获取高度 //带参数表示设置高度 $(“img”).height(200); //不带参数获取高度 $(“img”).height(); 获取网页的可视区宽高 //获取可视区宽度 $(window).width(); //获取可视区高度 $(window).height(); 1.4. scrollTop与scrollLeft 设置或者获取高度 //获取页面被卷曲的高度 $(window)

jQuery的简单应用——表单校验

由 五迷三道 提交于 2020-02-10 14:13:08
先上代码： <!DOCTYPE html> < html lang = " en " > < head > < meta charset = " UTF-8 " > < title > 表单校验 </ title > < script src = " js/jquery-3.4.1.slim.min.js " type = " text/javascript " > </ script > < script type = " text/javascript " > //绑定事件，第一个$相当于onload $ ( function ( ) { //非空校验,因为要多处使用，所以写一个方法 function isNull ( jquery ) { var str = jquery . val ( ) ; if ( str == null || str == "" || str . length == 0 ) { var megs = $ ( "<span></span>" ) megs . html ( jquery . name + "属性不能为空" ) ; megs . css ( "color" , "red" ) ; jquery . after ( megs ) ; return false ; } return true ; } //长度校验 function

jQuery学习-w3cschool-(1)jQuery 教程

由 自作多情 提交于 2020-02-10 00:33:13
一、jQuery 简介 (1) 使用 Google 的 CDN引入jQuery库： <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs /jquery/1.4.0/jquery.min.js"></script> </head> (2) 使用 Microsoft 的 CDN引入jQuery库： <head> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery /jquery-1.4.min.js"></script> </head> (3) jQuery 库包含以下特性：    HTML 元素选取    HTML 元素操作    CSS 操作    HTML 事件函数    JavaScript 特效和动画    HTML DOM 遍历和修改    AJAX    Utilities 二、jQuery 语法 (1)基础语法： jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。 基础语法是： $(selector).action() $定义 jQuery 选择符（selector） “查询”和“查找” HTML 元素 jQuery 的 action()

SpringMVC: Ajax技术

由 ￣綄美尐妖づ 提交于 2020-02-09 23:26:06
SpringMVC：Ajax技术 简介 AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。 在 2005 年，Google 通过其 Google Suggest 使 AJAX 变得流行起来。Google Suggest能够自动帮你完成搜索单词。 Google Suggest 使用 AJAX 创造出动态性极强的 web 界面：当您在谷歌的搜索框输入关键字时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。 就和国内百度的搜索框一样： 传统的网页(即不用ajax技术的网页)，想要更新内容或者提交一个表单，都需要重新加载整个网页。 使用ajax技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新。 使用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。 伪造Ajax 我们可以使用前端的一个标签来伪造一个ajax的样子。 iframe标签 新建一个module ： sspringmvc-06-ajax ， 导入web支持！ 编写一个 ajax-frame.html

JavaScript(jQuery)中的事件委托

由 非 Y 不嫁゛ 提交于 2020-02-09 15:31:27
一：什么是事件委托？ 事件委托是利用事件冒泡，只指定一个事件处理程序来管理某一类型的所有事件。 二：为什么要用事件委托？ 1.在JavaScript中添加到页面上的事件处理程序的个数直接关系到页面的整体运行性能。为什么呢？因为，每个事件处理函数都是对象，对象会占用内存，内存中的对象越多，性能就越差。此外，必须事先指定所有的事件处理程序而导致的DOM访问次数，会延迟整个页面的交互就绪时间。 2.对有很多个数据的表格以及很长的列表逐个添加事件，简直就是噩梦。所以事件委托，能极大地提高页面的运行性能，减少开发人员的工作量。 三：JavaScript中的例子 我们以下面的HTML代码为例，用事件委托的方式实现当鼠标单击某个li元素的时候，li元素的背景变成红色。 1 <ul id = "lists"> 2 <li>列表1</li> 3 <li>列表2</li> 4 <li>列表3</li> 5 <li>列表4</li> 6 <li>列表5</li> 7 <li>列表6</li> 8 </ul> 下面是JavaScript代码： 1 var lists = document.getElementById("lists"); 2 3 lists.addEventListener("click",function(event){ 4 5 var target = event.target; 6

JavaScript(jQuery)中的事件委托

由 一世执手 提交于 2020-02-09 15:27:46
一：什么是事件委托？ 事件委托是利用事件冒泡，只指定一个事件处理程序来管理某一类型的所有事件。 二：为什么要用事件委托？ 1.在JavaScript中添加到页面上的事件处理程序的个数直接关系到页面的整体运行性能。为什么呢？因为，每个事件处理函数都是对象，对象会占用内存，内存中的对象越多，性能就越差。此外，必须事先指定所有的事件处理程序而导致的DOM访问次数，会延迟整个页面的交互就绪时间。 2.对有很多个数据的表格以及很长的列表逐个添加事件，简直就是噩梦。所以事件委托，能极大地提高页面的运行性能，减少开发人员的工作量。 三：JavaScript中的例子 我们以下面的HTML代码为例，用事件委托的方式实现当鼠标单击某个li元素的时候，li元素的背景变成红色。 1 <ul id = "lists"> 2 <li>列表1</li> 3 <li>列表2</li> 4 <li>列表3</li> 5 <li>列表4</li> 6 <li>列表5</li> 7 <li>列表6</li> 8 </ul> 下面是JavaScript代码： 1 var lists = document.getElementById("lists"); 2 3 lists.addEventListener("click",function(event){ 4 5 var target = event.target; 6

浅析jQuery源码

由 ▼魔方 西西 提交于 2020-02-09 14:21:07
title: 浅析jQuery源码 date: 2017-08-14 categories: jQuery tags: [jQuery,js] --- jQuery 整体架构图 jQuery的主要点： 关于jQuery的整体分析 对于源码的分析：很重要的一点是，摒弃面向过程的思维方式，不要刻意去追求从上至下每一句都要在一开始弄明白。很有可能一开始你在一个奇怪的方法或者变量处卡壳了，很想知道这个方法或变量的作用，然而可能它要到几千行处才被调用到。如果去追求这种逐字逐句弄清楚的方式，很有可能在碰壁几次之后阅读的积极性大受打击 关于模块之间，最可能发生的就是变脸冲突，因此，代码要求高内聚、低耦合，尽量暴露少的变量给外界，或者进行检查。 ES5中使用立即执行匿名函数作为模块 jQuery中最基本有selector event animate等模块 亮点1jQuery每次调用不用new jQuery.fn.init.prototype = jQuery.fn = jQuery.prototype = $ ; new jQuery.fn.init() 相当于 new $() ; $() 返回的是 new jQuery.fn.init()和 new $()是相同的，所以我们可以无 new 实例化 jQuery 对象。 在JavaScript中函数是没有重载的概念 但是却可以实现类似重载的最终效果
订阅 jquery事件