jquery绑定click事件-jquery绑定onchange事件的方法 收藏 0

ios事件混乱+点击事件失效+一些兼容问题解决「坑记」

现象：例如点击文本框，输入文字后，会发现整个网页的点击事件都无法触发，像失效了一样。

根本原因：根本原因是：input聚焦后页面被顶起，然后失焦后页面回位，但是这里只是视觉上回位了，window其实已经被顶上去一定的距离。所以当你再次点击页面时，其实已经就是错位的了，目前只发现部分ios在微信浏览器有这种问题。

解决方案：引用js即可。

现状：物理键返回后，一些失效的信息依然显示在页面上。

为了解决这个办法，最终选择使用pageshow方法。

onpageshow事件在用户浏览网页时触发。

onpageshow事件类似onload事件，onload事件在页面第一次加载时触发，onpageshow事件在每次加载页面时触发。即onload事件在页面从浏览器缓存中读取时不触发。

思路 ：通过点击页面的任意位置都能关闭div，主要是$(document).click事件.

当委托给一个元素添加click事件时，如果事件是委托到 document 或 body 上，并且委托的元素是默认不可点击的(如 div, span 等)，此时 click 事件会失效。

原因：ios不认为div、span元素是可以点击的。

jQuery知识一览

jQuery官网：https://jquery.com/jQuery是一个高效、轻量并且功能丰富的js库。核心在于查询query。jQuery是一个优秀的js函数库，是React/Vue/Angular框架之外中大型项目的首选。jQuery的主旨是write less, do more。

• html元素的选取
• 操作html元素
• css操作
• html事件处理
• 实现js动画效果
• 能够链式调用
• 容易扩展插件
• 封装了ajax

引入jQuery的方式有2种，一种是项目中直接引入jQuery的min.js文件，一种是使用服务器端jQuery文件（使用cdn）脚本标签方式引入。

在官网的：https://jquery.com/download/ 链接下可以下载到完整的代码，放到项目文件的js文件夹下。

在网站：https://www.bootcdn.cn/ 可以获得稳定、快速、免费的cdn加速服务。

• 1.x 版本兼容老版本的IE，文件比较大
• 2.x 版本文件比较小，支持IE8+
• 3.x 版本引入部分新API，提供多个分包的版本，支持IE9+

开发过程中一般使用非min.js文件方便调试，生产环境部署上线时才使用min.js这种压缩文件。

从源码中可以看出，jQuery的整体逻辑可以用以下简单的结构进行描述：

从源码中可以看出，jQuery被定义为一个函数，函数中返回了一个实例对象（看new关键字）。

继续跟踪源码 new jQuery.fn.init( selector, context)，这个函数中调用了makeArray，当然在其他if判断语句中也有返回伪数组对象（比如，定义了length字段，还有[0]的操作），这里拿makeArray作为演示。

查看makeArray函数：

所以这个返回实例对象，是一个伪数组。

从源码中可以看出，将jQuery函数和window.$ 以及window.jQuery绑定赋值，所以使用jQuery和$ 标识符就可以直接使用jQuery。通常在项目中直接使用$标识符，快捷简省。

所以在引入jQuery的项目中：

通常形式为：$(param)

• param为函数：dom加载完成后，执行该回调函数
• param为选择器字符串：查找与该选择器匹配的所有标签，并封装成jQuery对象
• param为dom对象：将该dom对象封装成jQuery对象
• param为标签字符串：创建标签对象并封装成jQuery对象

• jQuery函数返回的是一个伪数组（Object对象），可以使用length和下标。

通过$(param)传入的是selector、element、标签情况下，返回的是包含1个或者多个dom元素对象的伪数组。

直接修改css属性（如果其dom标签存在这个css属性）

清空某标签下的所有dom：

给某标签下添加dom标签：

移除、添加class：

获取dom标签上的属性：

设置标签的属性：

点击：

hover：

监听事件：

post请求：

JavaScript学习笔记（三十二）—jQuery（中）

jQuery

• 昨天讲了 jQuery 的基本选择器筛选器和属性操作
• 今天来说一些 jQuery 别的东西

元素操作

• 创建一个元素

• 内部插入元素

• 外部插入元素

• 替换元素

• 删除元素

• 克隆元素

元素尺寸

• 操作元素的宽和高

• 获取元素的内置宽和高

• 获取元素的外置宽和高

元素位置

• 元素相对页面的位置

• 元素相对于父元素的偏移量

• 获取页面卷去的高度和宽度

元素事件

• 绑定事件的方法

• 移除事件

• 只能执行一次的事件

• 直接触发事件

可以直接使用的常见事件

• 可以直接使用的事件就是可以不利用 on 来绑定，直接就可以使用的事件方法
• click

• dblclick

• scroll

• hover

动画

• show

• hide

• toggle

• animate

• stop

• finish

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com