jquery事件 | 易学教程

前端jquery

阅读更多关于前端jquery

jQuery 引入 # 下载链接: https://jquery.com/ # 第一种方法:本地引入 <script src="jquery.js"></script> <script> </script> # 第二种方法:网址引入 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> jq与js jquery方法找到的标签对象称为jquery对象原生js找到的标签对象称之为DOM对象, DOM对象只能调用DOM对象的方法, jquery对象只能用jquery方法, 不能互通 var $obj = jquery对象; var obj = DOM对象; $obj[0] # 通过[索引]的方法从jquery中获取的取对象,全部是DOM对象 dom对象转换为jquery对象 : $(dom对象) -- jquery对象 JQ的基础语法查找标签基本选择器(同css) # id 选择器 $("#id") # 标签选择器 $("tagName") # class选择器 $(".className") # 配合使用 $("div.c1") # 所有元素选择器 $("*") # 组合选择器 $("#id, .className, tagName") 层级选择器(同css) x 和 y

jQuery load 局部刷新

阅读更多关于 jQuery load 局部刷新

用法 jQuery ajax - load() 方法运行环境 jQuery的 load() 方法跟 jQuery AJAX 一样都需要用到服务器端来支持，所以你会发现如果你只是写了静态页面并直接双击运行，浏览器会给你一个 XMLHttpRequest cannot load 的错误，你需要把代码放在服务器上才能运行。深入使用如果单单是使用 load() 方法，你就会发现，在ajax请求中，不能更新地址栏，地址栏上的“前进”和“后退”按钮就失效了,带来了另外一种糟糕的用户体验。解决方案有三种，分别是（详情使用请移步： Ajax保留浏览器历史的解决方案）：使用 window.Onhashchange 事件；使用 jQuery.History.js 第三方插件；使用 jquery.ba-hashchange.js 第三方插件。使用方案由于我需要兼容 ie6 以上的浏览器，加上 jQuery.History.js 不再维护，所以我选择第三种方案来解决以上问题。期间我遇到了以下问题：在jquery 1.9以上版本中，控制台会提示 msie 找不到的问题，原因是 browser 属性已经被移除解决方法：官方建议使用 Modernizr 库在引入 jquery 和 jquery.ba-hashchange.js 代码期间引入以下js代码 jQuery.browser=

day46 jQuery

阅读更多关于 day46 jQuery

day46 jQuery 内容回顾: 1.库和框架的区别库: 小而精: 直接操作DOM, 如css()方法 jquery封装了js中的哪些操作(大量的api=方法) - 事件 - 属性 - DOM - 选择器 - ajax(交互的技术) jQuery的链式编程: jQuery的方法可以实现和js的属性操作一样的功能, 好处在哪, jQuery的方法执行完,给返回了jQuery对象, 还可以接着使用其他方法, 这就是链式编程 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <ul> <li>bajie</li> <li>wukong</li> <li>datang</li> </ul> <script src="jquery.js"></script> <script> var colors = ['red','yellow','blue']; //1.从jquery对象转换为js对象 console.log($('li')[0]); //注意这里, 方式一.加上[下标], 是从jquery对象到js对象的转换 //方式二.JQ对象.get(0) //2.从js对象转换为jquery对象 var item = document

jQuery事件处理: 别再乱用“return false”了

阅读更多关于 jQuery事件处理: 别再乱用“return false”了

可能在你刚开始学习关于jQuery事件处理时，看到的第一个例子就是关于如何阻止浏览器执行默认行为，比如下面这段演示click事件的代码： view plain copy to clipboard print ? $( "a.toggle" ).click( function () { $( "#mydiv" ).toggle(); return false ; // Prevent browser from visiting `#` }); 这个函数使用toggle来显示或者隐藏#mydiv，然后阻止浏览器继续访问href中指定的链接。像上面这样的例子会让用户养成使用“return false”来阻止浏览器执行默认行为的坏习惯，在这篇文章里，我将会讨论关于阻止浏览器执行默认行为的两个非常重要的主题：选择正确的方法： return false还是preventDefault，stopPropagation或者stopImmediatePropagation 选择合适的位置，开始，结束，还是中间某个地方：你应该在事件回调的哪个部分取消浏览器执行默认行为？注意：当我在这篇文章中提到event bubbling（事件冒泡），我想表达的是大部分事件都是先在初始DOM上触发，然后再通过DOM树往上，在每一级父元素上触发，事件不会在兄弟节点或是子节点上冒泡（当事件向下冒泡时

jQuery简介

阅读更多关于 jQuery简介

什么是 jQuery ？ jQuery是一个JavaScript函数库。 jQuery是一个轻量级的"写的少，做的多"的JavaScript库。 jQuery库包含以下功能： HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities jQuery是第三方开发的、执行DOM操作的、极简化的函数库。 jQuery一切都用函数解决。为什么要用jQuery? 1.终极简化 2.屏蔽了大量兼容性问题：只要jQuery让用的，都用没兼容性问题。如何学习一门新技术 1.找官网：是什么 2.看DEMO：快速入门 3.下手册：备查 jQuery下载安装 jQuery-xxx.js 未压缩版　　包括完整的注释，代码格式，见名知意的变量名，体积大，可读性好，学习或开发时使用。 jQuery-xxx-min.js 压缩版　　去掉所有注释、空字符，简化变量名，体积小，可读性差，用于实际网站中。部署： 1.将js部署在服务器本地（可去官网jquery.com下载）　　 < script src = " jquery-1.10.2.min.js " > </ script > 2.利用CDN网络　　网络中的多态服务器，智能判断客户端到某台服务器的网络状态，选择最优服务器下载资源。　

锋利的jQuery -第四章 jQuery中的事件和动画【读书笔记】

阅读更多关于锋利的jQuery -第四章 jQuery中的事件和动画【读书笔记】

#锋利的jQuery #第四章 jQuery中的事件和动画 ##4.1 jQuery中的事件 ###4.1.1 加载DOM 页面加载完毕后，浏览器会通过JavaScript为DOM元素添加事件。常规的JavaScript代码通常使用window.onload方法，而在jQuery中，使用的是$(document).ready()方法。执行时机 windo.onload是网页中的所有元素（包括元素的所有关联文件）完全加载到浏览器后才执行，即JavaScript此时才可以访问网页中的任何元素。而通过jQuery中的$(document).ready()方法注册的事件处理程序，在DOM完全就绪时就可以被调用。此时，网页的所有元素对jQuery而言都是可以访问的，但是，这并不意味着这些元素关联的文件都已经下载完毕。 jQuery代码： $(window).load(funciton(){ //编写代码 }) 等价于JavaScript中的以下代码： window.onload = functions(){ //编写代码 } 多次使用假设网页中有两个函数，JavaScript代码如下： function(){ alert("one"); } function(){ alert("two"); } 当页面加载完毕后，通过如下JavaSript代码分别来调用one函数和two函数：

jQuery 47

阅读更多关于 jQuery 47

目录 jQuery jQuery介绍 jQuery的特性 jQuery对象 jQuery基础语法查找标签基本选择器层级选择器基本筛选器属性选择器表单筛选器筛选器方法操作标签样式操作位置操作尺寸文本操作属性操作文档处理事件常用事件移除事件阻止后续事件执行阻止事件冒泡页面载入事件委托动画效果补充 each .data() jQuery jQuery介绍 jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。 Write less, do more jQuery的特性一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。丰富的DOM选择器。链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。 Ajax操作支持。跨浏览器兼容。插件扩展开发，jQuery有着丰富的第三方的插件。 jQuery对象 jQuery对象是包装DOM对象后产生的,但是jQuery对象不能使用DOM对象的任何方法 var $variable =

前端 jQuery 基础

阅读更多关于前端 jQuery 基础

目录 jQuery介绍优势： jQuery内容： jQuery对象 jQuery基本语法：$(selector).action() jQuery选择器基本选择器 id选择器： $("#id") 标签选择器： $("tagName") class选择器： $(".className") 结合使用： $("div.c1") // 找到有c1 class类的div标签所有元素选择器： $("*") 组合选择器： $("#id, .className, tagName") 层级选择器：基本筛选器：属性选择器：表单筛选器：筛选器方法下一个元素：上一个元素：父亲元素：儿子和兄弟元素：查找筛选补充操作标签样式操作样式类 CSS 位置操作尺寸：文本操作属性操作文档处理添加到指定元素内部的后面添加到指定元素内部的前面添加到指定元素外部的后面添加到指定元素外部的前面移除和清空元素替换克隆事件常用事件事件绑定移除事件阻止后续事件执行阻止事件冒泡页面载入事件委托动画效果 each .each(function(index, Element))： jQuery介绍 1、jQuery是一个轻量级的、兼容多浏览器的JavaScript类库。 2、jQuery使用户能够更方便地处理HTML Document、Events

JQuery：

阅读更多关于 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("

day47 JQeury基础

阅读更多关于 day47 JQeury基础

目录 JQuery JQuery介绍 JQuery优势 JQuery内容 JQuery版本 JQuery对象 JQuery基础语法查找标签基本选择器层级选择器属性选择器基本筛选器表单筛选器筛选器方法操作标签样式标签位置操作尺寸文本操作属性操作文档处理事件常用事件事件绑定移除事件阻止后续事件执行阻止事件冒泡页面载入事件委托 JQuery JQuery介绍 jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“ JQuery优势一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。 Ajax操作支持

订阅 jquery事件