jQuery学习
关注
分享
扫一扫
文章平均质量分 67
jQuery是一个"写的更少, 但做的更多"的轻量级JavaScript库。
自由与束缚JavaJavaScript
这个作者很懒，什么都没留下…
展开
-
001_jQuery简介
1. jQuery是一个"写的更少, 但做的更多"的轻量级JavaScript库。2. jQuery库包含以下特性:html元素选取 html元素操作 CSS操作 html事件函数 JavaScript特效和动画 html DOM遍历和修改 AJAX Utilities3. 下载jQuery3.1. jQuery官网地址: https://jquery.com3.2. 点击Download jQuery按钮下载最新版的jQuery3.3. 有两个版本的jQuery原创 2020-11-19 09:18:11 · 164 阅读 · 0 评论 -
002_jQuery语法
1. jQuery语法1.1. jQuery语法是为html元素的选取编制的, 可以对元素执行某些操作。1.2. 基础语法是: $(selector).action()1.2.1. 美元符号定义jQuery。1.2.2. 选择符(selector)"查询"和"查找"html元素。1.2.3. jQuery的action()执行对元素的操作。1.3. 示例$(this).hide() // 隐藏当前元素$("p").hide() // 隐藏所有段落$(".test").hid原创 2020-11-19 09:31:09 · 136 阅读 · 0 评论 -
003_隐藏和显示效果
1. hide()方法1.1. 如果被选的元素已被显示, 则隐藏该元素。1.2. 语法:$(selector).hide(speed,callback);1.3. 参数1.4. 如果元素已经是完全不可见, 则该效果不产生任何变化, 除非规定了callback函数。2. show()方法2.1. 如果被选元素已被隐藏, 则显示这些元素。2.2. 语法:$(selector).show(speed,callback);2.3. 参数2.4. 如果元素已经是原创 2020-11-19 09:47:54 · 142 阅读 · 0 评论 -
004_淡入淡出效果
1. jQuery淡入淡出方法1.1. 通过jQuery, 您可以实现元素的淡入淡出效果。1.2. jQuery拥有下面四种fade方法: fadeIn()、fadeOut()、fadeToggle()和fadeTo()。2. fadeIn()方法2.1. fadeIn()方法使用淡入效果来显示被选元素, 假如该元素是隐藏的。2.2. 语法:$(selector).fadeIn(speed,callback);2.3. 参数2.4. 如果元素已经显示, 则该效果不产生任原创 2020-11-19 10:57:43 · 387 阅读 · 0 评论 -
005_滑动效果
1. jQuery滑动方法1.1. 通过jQuery, 您可以在元素上创建滑动效果。1.2. jQuery拥有以下滑动方法: slideDown()、slideUp()和slideToggle()。2. slideDown()方法2.1. slideDown()方法通过使用滑动效果, 显示隐藏的被选元素。2.2. 语法:$(selector).slideDown(speed,callback);2.3. 参数2.4. 如果元素已经是完全可见, 则该效果不产生任何变化,原创 2020-11-19 11:24:34 · 322 阅读 · 0 评论 -
006_动画
1. jQuery animate()方法1.1. animate()方法执行CSS属性集的自定义动画。1.2. 该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的, 这样就可以创建动画效果。1.3. 只有数字值可创建动画(比如: "margin:30px")。字符串值无法创建动画(比如: "background-color:red")。1.4. 语法1:$(selector).animate(styles,speed,easing,callback);原创 2020-11-19 11:36:52 · 111 阅读 · 0 评论 -
007_停止动画或效果
1. jQuery stop()方法 1.1. jQuery stop()方法用于在动画或效果完成前对它们进行停止。1.2. stop()方法适用于所有jQuery效果函数, 包括隐藏显示、淡入淡出、滑动和自定义动画。1.3. 语法$(selector).stop(stopAll,goToEnd);1.4. 可选的stopAll参数规定是否应该清除动画队列。默认是false, 即仅停止活动的动画, 允许任何排入队列的动画向后执行。1.5. 可选的goToEnd参数规定是否立即完成当原创 2020-11-19 11:39:16 · 177 阅读 · 0 评论 -
008_效果和动画的Callback函数
1. Callback函数在当前效果或动画100%完成之后执行。2. jQuery动画的问题2.1. 许多jQuery函数涉及动画。这些函数也许会将speed或duration作为可选参数。2.2. speed或duration参数可以设置许多不同的值, 比如: "slow", "fast", "normal"或毫秒。2.3. 由于JavaScript语句(指令)是按照次序逐一执行的, 动画之后的语句可能会产生错误或页面冲突, 因为动画还没有完成。2.4. 为了避免这个情况, 您可以以参原创 2020-11-19 11:41:14 · 144 阅读 · 0 评论 -
009_jQuery链式编程
1. jQuery方法链接1.1. 有一种名为链接(chaining)的技术, 允许我们在相同的元素上运行多条jQuery命令, 一条接着另一条。1.2. 这样的话, 浏览器就不必多次查找相同的元素。1.3. 如需链接一个动作, 您只需简单地把该动作追加到之前的动作上。1.4. 下面的例子, 把fadeOut()、fadeIn()、slideUp()和slideDown()链接在一起。id为"p1"元素首先会隐藏, 然后会显示, 再然后向上滑动, 最后向下滑动:$("#p1").fad原创 2020-11-19 11:42:47 · 132 阅读 · 0 评论 -
010_jQuery获取和设置内容属性
1. jQuery DOM操作1.1. jQuery拥有可操作html元素和属性的强大方法。1.2. jQuery提供一系列与DOM相关的方法, 这使访问和操作元素和属性变得很容易。1.3. jQuery属性操作方法:1.4. jQuery文档操作方法:2. text()方法2.1. text()方法方法设置或返回被选元素的文本内容。2.2. 返回文本内容2.2.1. 当该方法用于返回一个值时, 它会返回所有匹配元素的组合的文本内容(会删除html标记)。2.2.原创 2020-11-22 21:59:27 · 924 阅读 · 0 评论 -
011_添加元素
1. append()方法1.1. append()方法在被选元素的结尾(仍然在内部)插入指定内容。1.2. 语法$(selector).append(content)1.3. 参数1.4. append()使用函数来附加内容1.4.1. 使用函数在指定元素的结尾插入内容。1.4.2. 语法$(selector).append(function(index,html))1.4.3. 参数1.5. append()添加若干新元素1.5.1. append原创 2020-11-22 22:17:04 · 171 阅读 · 0 评论 -
012_删除元素
1. remove()方法1.1. remove()方法移除被选元素, 包括所有文本和子节点。1.2. 该方法还同时删除被选元素及其子元素的绑定事件。这一点与detach()不同。1.3. 该方法可以返回匹配的元素。1.4. 语法$(selector).remove()1.5. 过滤被删除的元素1.5.1. remove()方法也可接受一个参数, 允许您对被删元素进行过滤。1.5.2. 该参数可以是任何jQuery选择器的语法。1.5.3. 下面的例子删除class="原创 2020-11-22 22:37:19 · 233 阅读 · 0 评论 -
013_替换元素
1. replaceWith()方法1.1. replaceWith()方法用指定的html内容或元素(元素本身和子元素)替换被选元素。1.2. 语法$(selector).replaceWith(content)1.3. 参数1.4. 使用函数来替换元素1.4.1. 使用函数把被选元素替换为新内容。1.4.2. 语法$(selector).replaceWith(function())1.4.3. 参数1.5. 例子1.5.1. 代码<!原创 2020-11-22 22:41:29 · 321 阅读 · 0 评论 -
014_包裹元素
1. wrap()方法1.1. wrap()方法把每个被选元素放置在指定的html内容或元素中。1.2. 语法$(selector).wrap(wrapper)1.3. 参数1.4. 使用函数来包裹元素1.4.1. 使用函数来规定在每个被选元素周围包裹的内容。1.4.2. 语法$(selector).wrap(function())1.4.3. 参数1.5. 例子1.5.1. 代码<!DOCTYPE html><html>原创 2020-11-28 14:37:10 · 285 阅读 · 0 评论 -
015_获取并设置CSS类
1. hasClass()方法1.1. hasClass()方法检查被选元素是否包含指定的class。返回true包含指定的class, 反之不包含。1.2. 语法$(selector).hasClass(class)1.3. 参数1.4. 如果判断多个类是否存在, 请使用空格分隔类名。只有多个类都存在才返回true, 反之返回false。2. addClass()方法2.1. addClass()方法向被选元素添加一个或多个类。2.2. 该方法不会移除已存在的类, 仅原创 2021-01-08 09:40:45 · 238 阅读 · 0 评论 -
016_css()方法
1. css()方法返回或设置匹配的元素的一个或多个样式属性。2. 返回CSS属性值2.1. 返回第一个匹配元素的CSS属性值。2.2. 注释: 当用于返回一个值时, 不支持简写的CSS属性(比如: "background"和"border")。2.3. 语法$(selector).css(name)2.4. 参数3. 设置CSS属性3.1. 设置所有匹配元素的指定CSS属性。3.2. 语法$(selector).css(name,value)3.3. 参原创 2021-01-08 09:41:15 · 761 阅读 · 0 评论 -
017_尺寸
1. jQuery提供多个处理尺寸的重要方法: width()、height()、innerWidth()、innerHeight()、outerWidth()和outerHeight()。2. width()方法2.1. width()方法返回或设置匹配元素的宽度(不包括内边距、边框或外边距)。2.2. 返回宽度2.2.1. 返回以像素计的第一个匹配元素的宽度。2.2.2. 语法$(selector).width()2.3. 设置宽度2.3.1. 设置所有匹配元素的宽度。原创 2021-01-08 09:41:23 · 126 阅读 · 0 评论 -
018_位置和偏移
1. offset()方法1.1. offset()方法返回或设置匹配元素相对于文档的偏移(位置)。1.2. 返回偏移坐标1.2.1. 返回第一个匹配元素的偏移坐标。1.2.2. 该方法返回的对象包含两个整型属性: top和left, 以像素计。此方法只对可见元素有效。1.2.3. 语法$(selector).offset()1.3. 设置偏移坐标1.3.1. 设置所有匹配元素的偏移坐标。1.3.2. 语法$(selector).offset(value)1.原创 2021-01-08 09:41:43 · 630 阅读 · 1 评论 -
019_遍历
1. jQuery遍历, 意为"移动", 用于根据其相对于其他元素的关系来"查找"(或选取)html元素。以某项选择开始, 并沿着这个选择移动, 直到抵达您期望的元素为止。2. 下图展示了一个家族树:2.1. 图解<div>元素是<ul>的父元素, 同时是其中所有元素的祖先。 <ul>元素是<li>元素的父元素, 同时是<div>的子元素 左边的<li>元素是<span>的父元素, <ul>的原创 2021-01-08 09:50:09 · 229 阅读 · 0 评论 -
020_遍历祖先
1. parent()方法1.1. parent()方法获得当前匹配元素集合中每个元素的父元素, 沿DOM树向上遍历单一层级。1.2. parent()方法接受可选的选择器表达式, 与我们向$()函数中传递的参数类型相同。如果应用这个选择器, 则将通过检测元素是否匹配该选择器对元素进行筛选。1.3. 语法$(selector).parent()$(selector).parent(selector)1.4. 参数1.5. 例子1.5.1. 代码<!DOCTYP原创 2021-01-08 10:20:27 · 110 阅读 · 0 评论 -
021_遍历后代
1. children()方法1.1. children()方法返回被选元素的所有直接子元素, 该方法只会向下一级对DOM树进行遍历。1.2. children()方法接受一个选择器表达式作为可选参数, 与我们传递到$()的参数的类型是相同的。如果应用该选择器, 将测试元素是否匹配该表达式, 以此筛选这些元素。1.3. 请注意, 与大多数jQuery方法一样, children()不返回文本节点; 如果需要获得包含文本和注释节点在内的所有子节点, 请使用contents()。1.4. 语法原创 2021-01-08 10:40:41 · 144 阅读 · 1 评论 -
022_遍历同胞
1. siblings()方法1.1. siblings()方法返回被选元素的所有同胞元素(不包含自身)。该方法还可以使用一个可选的参数来过滤对同胞元素的搜索。1.2. 语法$(selector).siblings()$(selector).siblings(selector)1.3. 参数1.4. 例子1.4.1. 代码<!DOCTYPE html><html> <head> <title>siblings()方原创 2021-01-08 11:03:06 · 135 阅读 · 0 评论 -
023_遍历过滤
1. first()方法1.1. first()方法将匹配元素集合缩减为集合中的第一个元素。1.2. 语法$(selector).first()1.3. 例子1.3.1. 代码<!DOCTYPE html><html> <head> <title>first()方法</title> <meta charset="utf-8" /> <script type="text/javascri原创 2021-01-08 11:21:45 · 139 阅读 · 0 评论 -
024_堆栈元素
1. 大多数jQuery的遍历方法会操作一个jQuery对象实例, 并生成一个匹配不同DOM元素集的新对象。当发生这种情况时, 应该会把新的元素集推入维持在对象中的堆栈内。每次成功的筛选方法调用都会把新元素推入堆栈中。2. end()方法2.1. end()方法结束当前链条中的最近的筛选操作, 并将匹配元素集还原为之前的状态。2.2. 语法$(selector).end()2.3. 例子2.3.1. 代码<!DOCTYPE html><html>原创 2021-01-08 23:28:40 · 129 阅读 · 0 评论 -
025_元素集合
1. add()方法1.1. add()方法将元素添加到匹配元素的集合中。1.2. 语法 1$(selector).add(selector)1.3. 语法 2$(selector).add(elements)1.4. 语法 4$(selector).add(jQueryObject)1.5. 例子1.5.1. 代码<!DOCTYPE html><html> <head> <title>add()方法&l原创 2021-01-09 11:12:17 · 357 阅读 · 0 评论 -
026_元素执行函数
1. each()方法1.1. each()方法规定为每个匹配元素规定运行的函数。返回false可用于及早停止循环。1.2. 语法$(selector).each(function(index, element))1.3. 参数1.4. 例子1.4.1. 代码<!DOCTYPE html><html> <head> <title>each()方法</title> <meta charset="u原创 2021-01-09 11:48:04 · 245 阅读 · 0 评论 -
027_jQuery DOM 元素方法
1. get()方法1.1. 语法$(selector).get(index)1.2. 参数1.3. jQuery中的get()函数是取得当前页面中所有匹配的DOM元素集合。这是取得所有匹配元素的一种向后兼容的方式(不同于jQuery对象, 而实际上是元素数组)。如果你想要直接操作DOM 对象而不是jQuery对象, 这个函数非常有用。1.4. 其实get()还有一个用处是可以直接通过下标值访问其下标值对应的dom对象, 还记得get()返回的是一个array<element原创 2021-01-10 00:45:08 · 161 阅读 · 0 评论 -
028_jQuery数据
1. data(name,value)方法1.1. $(selector).data(name,value)方法向元素附加数据。1.2. 语法$(selector).data(name,value)1.3. 参数2. data(object)方法2.1. $(selector).data(object)方法使用带有名称/值对的对象向被选元素添加数据。2.2. 语法$(selector).data(object)3. data(name)方法3.1. $(sel原创 2021-10-07 19:13:27 · 105 阅读 · 0 评论 -
029_jQuery Ajax简介
1. Ajax = Asynchronous JavaScript and XML(异步的JavaScript 和 XML)。2. jQuery提供多个与AJAX有关的方法:原创 2021-01-09 17:49:38 · 88 阅读 · 0 评论 -
030_jQuery Ajax的get方法
1. $.get()方法通过HTTP GET请求从服务器上请求数据。2. $.get()方法请求成功时可调用回调函数。3. 语法:$.get(url,data,function(response,textStatus,jqXHR),dataType)4. 参数5. jqXHR对象5.1. 所有jQuery的AJAX方法返回的是XMLHTTPRequest对象的超类。$.get()方法返回的也是XMLHTTPRequest对象的超类, 实现了约定的接口, 赋予其所有的属性、方法,原创 2021-01-09 17:53:49 · 361 阅读 · 0 评论 -
031_jQuery Ajax的post方法
1. $.post()方法通过HTTP POST请求从服务器载入数据。2. $.post()方法请求成功时可调用回调函数。3. 语法$.post(url,data,funxtion(response, textStatus, jqXHR),dataType)4. 参数5. jqXHR对象5.1. 所有jQuery的AJAX方法返回的是XMLHTTPRequest对象的超类。$.post()方法返回的也是XMLHTTPRequest对象的超类, 实现了约定的接口, 赋予其所有的属原创 2021-01-09 17:57:18 · 628 阅读 · 0 评论 -
032_jQuery Ajax的load方法
1. load()方法通过AJAX请求从服务器加载数据, 并把返回的数据放置到指定的元素中。2. 语法$(selector).load(url,data,function(response,textStatus,jqXHR))3. 参数4. 该方法是最简单的从服务器获取数据的方法。它几乎与$.get(url,data,function(response,textStatus,jqXHR))等价, 不同的是它不是全局函数, 并且它拥有隐式的回调函数。当侦测到成功的响应时(比如: 当sta原创 2021-01-09 18:02:01 · 175 阅读 · 0 评论 -
033_jQuery Ajax的ajax方法
1. $.ajax()方法通过HTTP请求加载远程数据。2. $.ajax()方法是jQuery底层AJAX实现。简单易用的高层实现见$.get, $.post等。3. $.ajax()方法返回其创建的XMLHttpRequest对象的超类。大多数情况下你无需直接操作该函数, 除非你需要操作不常用的选项, 以获得更多的灵活性。4. 语法$.ajax({name:value, name:value, ... })5. 参数6. 所有的选项都可以通过$.ajaxSetup()函数来原创 2021-01-09 18:09:25 · 246 阅读 · 0 评论 -
034_jQuery Ajax的getJSON和getScript方法
1. $.getJSON()方法1.1. 通过HTTP GET请求载入JSON数据。1.2. 语法$.getJSON(url,data,function(response,textStatus,jqXHR))1.3. 参数1.4. 该函数是简写的Ajax函数, 等价于:$.ajax({ url: url, data: data, success: function(response,textStatus,jqXHR){}, dataType: json});2.原创 2021-01-09 18:13:45 · 165 阅读 · 0 评论 -
035_jQuery Ajax的ajaxSetup方法
1. $.ajaxSetup()方法设置全局AJAX默认选项。2. 语法$.ajaxSetup({name:value, name:value, ...})3. $.ajax()方法的参数在$.ajaxSetup()方法中都能设置。可使多个$.ajax()方法公用参数。4. 例子4.1. 新建一个名为jQueryAjaxSetup的WEB工程4.2. 新建test.json{"data": {"code": 1, "info": "success", "msg": "请求原创 2021-01-09 18:25:50 · 869 阅读 · 0 评论 -
036_jQuery Ajax全局回调函数
1. ajaxStart()方法1.1. ajaxStart()方法在AJAX请求发送前执行函数。1.2. 语法$(selector).ajaxStart(function(even))1.3. 参数2. ajaxSend()方法2.1. ajaxSend()方法在AJAX请求开始时执行函数。2.2. 语法$(selector).ajaxSend(function(even,jqXHR,options))2.3. 参数3. ajaxSuccess()方法原创 2021-01-09 18:32:30 · 321 阅读 · 0 评论 -
037_jQuery Ajax序列化
1. param()方法1.1. param()方法创建数组或对象的序列化表示。该序列化值可在进行AJAX请求时在URL查询字符串中使用。1.2. 语法$.param(object, traditional)1.3. 参数1.4. 框架在解析序列化数字的时候能力有限, 所以当传递一些含有对象或嵌套数组的数组作为参数时, 请务必小心!2. serialize()方法2.1. serialize()方法通过序列化表单值, 创建URL编码文本字符串。您可以选择一个或多个表单元素(原创 2021-01-10 00:03:22 · 256 阅读 · 0 评论