jquery事件 | 易学教程

day15 Jquery

阅读更多关于 day15 Jquery

一 jQuery是什么？［1］ jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。［2］ jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE! ［3］它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器［4］ jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。［5］ jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。. 二什么是 jQuery 对象？ jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象。 jQuery 对象是 jQuery 独有的 . 如果一个对象是 jQuery 对象 , 那么它就可以使用 jQuery 里的方法 : $(“#test”).html(); $("#test").html() 意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法这段代码等同于用DOM实现代码： document.getElementById("

jquery html 动态添加元素绑定事件

阅读更多关于 jquery html 动态添加元素绑定事件

由于实际的需要，有时需要往网页中动态的插入HTML内容，并在插入的节点中绑定事件处理函数。我们知道，用Javascript向HTML文档中插入内容，有两种方法，一种是在写HTML代码写入JS，然后插入到文档中；另外一种是通过ajax的方式，从服务器获取数据，然后用js把获取的数据经过处理后插入文档中；两种方法各有特点，本文将分析新插入到文档中的元素的事件绑定问题，并假定新插入的对象不做内联的事件绑定（即不用类似 <a onclick=””>的形式）。所有的示例将会用到jQuery和原生Javascript。情况一: HTML代码存放在JS中,请看以下代码: <body> <p>第1行内容</p> <p>第2行内容</p> <p>第3行内容</p> <script> var appendhtml=document.createElement("p"); appendhtml.innerHTML="这是插入的内容"; document.body.appendChild(appendhtml); var nodep=document.getElementsByTagName("p"); for (var i=0;i<nodep.length;i++){ nodep[i].onclick=function(){ console.log("Click Event!"); } }

jQuery升级踩坑大全

阅读更多关于 jQuery升级踩坑大全

背景　　jQuery想必各个web工程师都再熟悉不过了，不过现如今很多网站还采用了很古老的jQuery版本。其实如果早期版本使用不当，可能会有DOMXSS漏洞，非常建议升级到jQuery 1.9.x或以上版本。前段时间我就主导了这件事情，把公司里我们组负责的项目jQuery版本从1.4.2升级到了jQuery 1.11.3。jQuery官方也为类似升级工作提供了jQuery Migrate插件。　　言归正传。　坑从何处来　　jQuery 1.11.3是1.x时代的最后一个版本（作者更新：2016年1月8日，jQuery 1.12.0上线，jQuery 1.11.3不再是1.x时代最后一个版本了），由于我的部门项目已经有一定年头了，当时还是采用的jQuery 1.4.2，这次升级步子迈得算是比较大。早期时候jQuery的很多写法，在新版本中已经被废弃，亦或者有些不规范的写法，当时版本还能支持，但是现在已经不支持。更糟糕的情况是，新版本还支持，但是功能已经和以前不一样了……这种情况连个错都不会报，需要深入到代码逻辑里面去看。　　jQuery官方推荐了jQuery Migrate 库来解决jQuery升级问题。不过一直采用这个库终究不是长久之计，开发中建议使用jQuery Migrate的开发版，可以在浏览器控制台上打印出来不兼容的地方详细信息

jQuery动态append添加元素后点击事件失效

阅读更多关于 jQuery动态append添加元素后点击事件失效

1. 问题描述：在div中动态添加span元素，之后执行 $(selector).click(function(){var param = $(this).text();}) 无法触发事件。 2. 原因：append中的节点是在整个文档加载完之后开始添加，页面不会为append的元素初始化添加点击事件，故使用这种方式动态添加的节点中的click事件没有生效。 3. 解决方案：事件委托方式解决，将指定的事件绑定在document上，只要append元素符合指定的元素，就会绑定此事件。$(document).on("click","指定的元素",function(){}); 最后实现代码 $(document).on("click", selector, function(){ var param = $(this).text();}) 来源： CSDN 作者：晨光--geeker 链接： https://blog.csdn.net/qq_40436854/article/details/92629306

前端开发工具之jQuery

阅读更多关于前端开发工具之jQuery

jQuery 　　jQuery是一个轻量级的JavaScript第三方库，能够简单方便的进行JavaScript编程。　　jQuery选择器　　　　1，id选择器： $("#id") 　　　　2，标签选择器： $("标签名") 　　　　3，类选择器： $(".类名") 　　　　4，限定选择器： $("div.c1") // 找到有c1类的div标签　　　　5，全局选择器： $("*") // 找到所有　　　　6，多项选择器： $("#id, .类名, 属性名") 　　　　7，层级选择器：x和y可以为任意选择器 $("x y") // x的所有后代y（子子孙孙） $("x > y") // x的所有儿子y（儿子） $("x + y") // 找到所有紧挨在x后面的y $("x ~ y") // x之后所有的兄弟y 　　　　8，属性选择器： $(input [type]) // 找到有type属性的input标签 $(input [type="text"]) // 找到type属性值为text的input标签 $(input [type="text"]) // 找到type属性值不为text的input标签　　　　9，选择器的筛选： :first // 第一个 :last // 最后一个 :eq(index) // 索引等于index的那个元素 :even //

jquery 事件对象属性小结

阅读更多关于 jquery 事件对象属性小结

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 使用事件自然少不了事件对象. 因为不同浏览器之间事件对象的获取, 以及事件对象的属性都有差异, 导致我们很难跨浏览器使用事件对象. jQuery中统一了事件对象, 当绑定事件处理函数时, 会将jQuery格式化后的事件对象作为唯一参数传入: $("#testDiv").bind("click", function(event) { }); 关于event对象的详细说明, 可以参考jQuery官方文档: http://docs.jquery.com/Events/jQuery.Event jQuery事件对象将不同浏览器的差异进行了合并, 比如可以在所有浏览器中通过 event.target 属性来获取事件的触发者(在IE中使用原生的事件对象, 需要访问event.srcElement). 下面是jQuery事件对象可以在扩浏览器支持的属性: 属性名称描述举例 type 事件类型.如果使用一个事件处理函数来处理多个事件, 可以使用此属性获得事件类型,比如click $("a").click(function(event) { alert(event.type); }); target 获取事件触发者DOM对象 $("a[href=http://google.com]").click(function

jquery触发/失去焦点事件

阅读更多关于 jquery触发/失去焦点事件

触发焦点： $("Element").focus() 触发每一个匹配元素获得焦点事件。 $("Element").focus(function) 事件会在获得焦点的时候触发，既可以是鼠标行为，也可以是按tab键导航触发的行为，并且绑定一个处理方法。失去焦点： $("Element").blur() 触发每一个匹配元素失去焦点事件。 $("Element").blur(function) 事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的行为，并且绑定一个处理方法。来源： https://www.cnblogs.com/henuyuxiang/p/6874814.html

jQuery帮助文档

阅读更多关于 jQuery帮助文档

jQuery 库 - 特性基础 jQuery 实例 jQuery 是一个 JavaScript 函数库。下面的例子演示了 jQuery 的 hide jQuery 库包含以下特性：实例 HTML 元素选取 <html> HTML 元素操作 <head> CSS 操作 <script type="text/java HTML 事件函数 <script type="text/javascr JavaScript 特效和动画 $(document).ready(function HTML DOM 遍历和修改 $("button").click(function AJAX $("p").hide(); Utilities }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p <p>This is another paragra <button type="button">Clic </body> </html> jQuery 语法 jQuery 语法是为 HTML 元素的选取编制，可以对元素执行某些操作。基础语法是：$(selector).action() 美元符号定义 jQuery 选择符（selector）“查询”和“查找” HTML 元素 jQuery

2017年-Web前端面试题(HTML至Nodejs)

阅读更多关于 2017年-Web前端面试题(HTML至Nodejs)

【原】2017年-Web前端面试题（HTML → Nodejs）出自作者小矮人Web前端，博文地址： http://www.cnblogs.com/itlkNote/ 文中有少许重复问题！第一阶段 HTML、CSS、HTML5、CSS3 1、XHTML与HTML的有何异同？ 2、介绍一下CSS的盒子模型？弹性盒子模型是什么？ 3、Doctype的作用？标准模式与兼容模式各有什么区别? 4、HTML5 为什么只需要写 <!DOCTYPE HTML>？ 5、行内元素有哪些？块级元素有哪些？空(void)元素有那些？ 6、页面导入样式时，使用link和@import有什么区别？ 7、介绍一下你对浏览器内核的理解？ 8、常见的浏览器内核有哪些？ 9、HTML5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？ 10、简述一下你对HTML语义化的理解？ 11、iframe有那些缺点？ 12、列出display的值，说明他们的作用？position的值， relative和absolute定位原点是？ 13、一个满屏品字布局如何设计? 14、常见兼容性问题？ 15、如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里面试题） 16、列举IE 与其他浏览器不一样的特性？ 17、99%的网站都需要被重构是哪本书上写的？

seajs如何整合jquery

阅读更多关于 seajs如何整合jquery

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 转自：http://www.tuicool.com/articles/bmuaEb 今天早上初尝seajs，发现一个非常蛋疼的事情，使用官方demo中的jquery是没有问题，下载官方最新版jquery 2.1.1发现console.log($)返回null，百思不得其解！只能求助度娘！在GitHub发现了玉伯的说明《直接调用 jQuery 插件等非标准模块的方法》不过这方法在2.3版本貌似已经不行,seajs.modify方法已在这版本移除！ https://github.com/seajs/seajs/issues/286 这里的标准模块指的是AMD和CMD的定义引用玉伯在知乎的详细回答 http://www.zhihu.com/question/20351507/answer/14859415 以下引用玉伯的回复大家会更加深入了解 @lifesinger 昨天折腾得太累了，不好意思。后来还是用 RequireJs 解决问题。另外，我想问问：1. AMD 是不是容易卡死UI？ 2. 为什么采用与 SeaJs同样采用 CMD 规范编写的 NodeJs 模块不能直接调用——我大概观察了下，好像定义格式不太一样，这也是问题啊，既然遵循同样的规范为什么格式又不一样，3.

订阅 jquery事件