我最近从我的博客中移除了 jQuery，并发现自己不断地在谷歌上搜索一些模式。...为了节省大家的时间，我编写了这个实用的参考指南，列出了一些最常见的 jQuery 模式及其在 JavaScript 中的等价物。我们将涵盖如何从这些概念和函数迁移到纯 JavaScript。...(".box").forEach(box => { box.style.display = "none" }); 在一个元素内找到另一个元素 一个常见的 jQuery 模式是使用 .find() 选择一个元素内的另一个元素...".button").textContent = "新文本"; document.querySelector(".button").textContent; // 返回 "新文本" 要创建一个新元素并将其添加到另一个元素中...(element); 综合起来，下面是如何创建一个 div 元素，更新其文本和类名，并将其添加到 DOM 中的示例： // 创建一个 div 元素 var element = document.createElement
过滤 eq(index|-index):获取指定索引的元素.如果是正数,索引从0开始;若是负数,倒着数从1开始. first():第一个 last():最后一个 hasClass(...)...("background-color","#ff0"); }); first():第一个 // 第一个div元素" id="b2"/> $(...="button" value=" 选择最后一个可见的div元素" id="b3"/> $("#b3").click(function(){ //$("div:visible").last().css(...当显示成功后触发fn hide() 隐藏 toggle(speed [,fn]) 切换,如果隐藏就显示，如果显示就隐藏。...")); } //div变化 function showDiv(){ //把第一个div滑出完成之后将其淡入到最后一个 $("div").first().slideUp(100,function(){
（在jquery 里面只有一个对象 jQuery == $） 7:出色的浏览器兼容性 8:链式操作方式($("#ddd").addClass().removeClass()) 9:隐式迭代 (显示迭代...：完善的文档 JQuery加载 从 http://jquery.com/ 下载后，复制到项目（路径：WebContent/js）中，然后在页面生命： 1 然后调用attr()） 3：文本节点 (先找到元素节点然后调用text()) 节点的创建： 元素节点的创建，属性节点，文本节点 jQuery 当中的事件 通常会把 jQuery 代码放到 ...event.result 包含由被指定事件触发的事件处理器返回的最后一个值。 event.target 触发该事件的 DOM 元素。...() 逐渐改变被选元素的不透明度，从可见到隐藏 fadeTo() 把被选元素逐渐改变至给定的不透明度 hide() 隐藏被选的元素 queue() 显示被选元素的排队函数 show() 显示被选的元素
例子 $("#div1").find("p").hide().end().hide() 第一个hide()是对于p标签的 然后用end()结束对p标签的引用而返回到#div1标签 所以第二个hide(...show( speed, [callback] ) 以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。 hide( ) 隐藏所有的匹配元素。...slideDown( speed, [callback] ) 通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。...的标签元素的所有的属于同一个父元素的div标签 基本过滤选择器 $("tr:first") 匹配第一个选择的元素 $("tr:last") 匹配最后一个选择的元素 $("input:not(:checked...匹配所有不为空的元素(含有文本的元素也算) $("div:hidden") 匹配所有隐藏的元素，也包括表单的隐藏域 $("div:visible") 匹配所有可见的元素 属性过滤选择器 $("div[
改变元素的宽和高（带动画效果） show(speed)：显示 hide(speed)：隐藏 toggle(speed) 等价于 show + hide：显示的隐藏，隐藏的显示 可选的 speed 参数规定隐藏...$("div").fadeTo(1000,0.5); }); 链 链是允许在同一个元素上在一条语句中运行多个 jQuery 方法，可以把动作/方法链接在一起..."); // 获得 div 中的内容（包含标签信息） alert($("div").html()); // 获得 div 中的内容（不包含标签信息，只包含文本内容...li，并插入到最后一个 li 的后面 $("li:first").clone().insertAfter("li:last"); /* 删除节点 */...").find().text(); alert(x); }); 元素的过滤 first() 过滤第一个元素 last() 过滤最后一个元素 eq(index)
函数接受CSS选择符作为参数，充当一个工厂，返回包含页面中对应元素的jQuery对象。...jQuery 事件方法语法 在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。 页面中指定一个点击事件： $("p").click(); 下一步是定义什么时间触发事件。...当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter，); 当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。...显示被隐藏的元素，并隐藏已显示的元素： //点击button隐藏p标签，再次点击显示 $("button").click(function(){ $("p").toggle(); }); 淡入和淡出...这意味着如果您在彼此之后编写多个 animate() 调用， jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。
show(speed, [callback]) 以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。 hide() 隐藏所有的匹配元素。...slideUp(speed, [callback]) 通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地 触发一个回调函数。...(”#prev ~div”) 同胞选择器，选择prev的所有同胞节点 基本过滤选择器 $(”tr: first”) 匹配第一个选择的元素 $(”tr: last”) 匹配最后一个选择的元素 $(”input...selector的所有元素 $(”td: parent”) 匹配所有不为空的元素(含有文本的元素也算) $(”div: hidden”) 匹配所有隐藏的元素，也包括表单的隐藏域 $(”div: visible...可以有多个参数（合并多项并返回） $.map(array, fn)：数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中，并返回生成的新数组。
选择器 功能描述 示例 :first 获取指定选择器中的第一个元素 $("li :first")获取第1个元素 :last 获取指定选择器中的最后一个元素 $("li :last")获取最后1个...计数从最后一个元素开始到第一个 :nth-of-type(index/even/odd/公式)) 选择同属于一个父元素之下，并且标签名相同的子元素中的第n个子元素 :first-of-type 选择所有相同的元素名称的第一个子元素.../odd/公式) 选择所有它们的父级元素的第n个子元素，计数从最后一个元素到第一个 带有“of-type” 与未带有“of-type”项的选择器有一定的区别。...语法 说明 html() 获取第一个匹配元素的HTML内容 html(content) 设置第一个匹配元素的HTML内容 text() 获取所有匹配元素包含的文本内容组合起来的文本 text(content...为了实现这种效果，将第一张图片连接到最后一张图片的后面，然后等这张图片向左移动直到完全显示之后，立即将焦点图的left值设为0，就切换到第1张图片了。
“h1,div,p”) 所有 、div> 和 元素 :first $(“p:first”) 第一个 元素 :last $(“p:last”) 最后一个 元素 :even...:first-of-type选择同一元素名称的兄弟中的第一个元素。 :last-child选择同父代的最后一个子代元素。 :last-of-type选择同一元素名称的兄弟中的最后一个元素。...() 移除下一个排队函数，然后执行函数 fadeIn() 逐渐改变被选元素的不透明度，从隐藏到可见 fadeOut() 逐渐改变被选元素的不透明度，从可见到隐藏 fadeTo() 把被选元素逐渐改变至给定的不透明度...fadeToggle() 在 fadeIn() 和 fadeOut() 方法之间进行切换 finish() 对被选元素停止、移除并完成所有排队动画 hide() 隐藏被选元素 queue() 显示被选元素的排队函数... 这是段落的一些文本。
元素，返回包含所有的 DOM 元素的 jQuery 对象param 是 DOM 元素：将 DOM 元素对象包装成 jQuery 对象返回(this)param 是标签字符串： 创建标签 DOM 元素对象并包装为..., value) 设置一个样式 css(多个样式对) 设置多个样式 代码示例： 取得第一个段落的 color 样式属性的值。...jQuery 对象内部的元素中找出部分匹配的元素, 并封装成新的 jQuery 对象返回 方法 描述 first() 获取第一个元素 last() 获取最后个元素 eq(index) 获取第 N 个元素...方法 描述 children(selector) 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。...1.基本动画 方法 描述 show() 将隐藏的元素显示 hide() 将可见的元素隐藏 toggle() 可见就隐藏，不可见就显示 以上的动画都可以添加参数： ① 第一个参数就是显示 执行的时间，以毫秒为单位
/scr jQuery语法 jQuery 语法是通过选取 HTML 元素, 并对选取的元素执⾏某些操作 基础语法： $(selector).action() $() 是⼀个函数, 它是 jQuery...语法 描述 $(“*”) 选取所有元素 $(this) 选取当前 HTML 元素 $(“p”) 所有 元素 $(“p:first”) 选取第一个 元素 $(“p:last”) 最后一个 元素 $(...$(“p.intro”) 选取 class 为 intro 的 元素 $(“ul li:first”) 选取第一个 元素的第一个 元素 $(“:input”)...error: function(error) { console.log("请求失败", error); } }); // 使用GET方法从指定URL加载数据，并在成功时将其显示在...#elementId 元素中 fadeIn() / fadeOut(): 处理淡入淡出效果，常用于显示或隐藏内容。
给程序员看的，有良好的缩进和注释。体积大一些 2. jquery-xxx.min.js：生产版本。程序中使用，没有缩进。体积小一些。...//的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色为红色" id="b7"/> $...首元素选择器 * 语法： :first 获得选择的元素中的第一个元素 2. 尾元素选择器 * 语法： :last 获得选择的元素中的最后一个元素 3....* swing:动画执行时效果是：先慢，中间快，最后又慢 * linear：动画执行时速度是匀速的 3.fn:在动画完成时执行的函数，每一个元素执行一次。...分析发现JQuery的显示和隐藏动画效果其实就是控制display 3.
③：基本过滤选择器 :first 选取第一个元素 $("tr:first") :last 选取最后一个元素 $("tr:last") :not(selector) 去除所有与给定选择器匹配的元素 $("...在动画完成时执行的函数 div> ④：内容过滤选择器 内容选择器是对子元素和文本内容的操作 :contains(text) 选取包含text文本内容的元素 $("div:contains...² 设置含有文本内容 ”传智播客” 的 div 的字体颜色为红色 ² 设置没有子元素的div元素 文本内容 ”这是一个空DIV“ ² 设置包含p元素 的 div 背景色为黄色 ² 设置所有含有子元素的...： ² 为表单中所有隐藏域 添加 class属性，值为itcast ² 设置table所有 可见 tr 背景色 黄色 ² 设置table所有 隐藏tr 字体颜色为红色，显示出来 ，并输出tr中文本值 <...区别 eq :first-child 选取第一个子元素 :last-child 选取最后一个子元素 :only-child 选取唯一子元素，它的父元素只有它这一个子元素 练习7： ² 选择id属性mytable
:回调函数名 $(selector).toggle(speed,callback); // 隐藏显示的元素，显示隐藏的元素；speed :"slow"、"fast" 或毫秒 ms 数值， callback...,callback); //以下拉的效果显示被隐藏的元素，以上拉的效果隐藏显示的元素 $(selector).animate(styles,options); //动画元素 2.元素内容的获取 div> div> div> var elements = $(selector).remove([filter]); //移除满足条件的元素和其子元素，并返回之...，这个移除是让 此元素和子节点从 DOM对象结构上移除，并将其保存于jQuery对象内。...="intro" 且 class="demo" 的元素 :first $("p:first") 第一个 元素 :last $("p:last") 最后一个 元素 :even $("
IE8 及以下版本不支持 文件较小，执行效率更高 3.x 完全不再支持 IE8 及以下版本 提供了一些新的 API 提供不包含 AJAX / 动画 API 的版本 # 1.4 jQuery 引入方式...jQuery 核心对象：即执行 jQuery 核心函数返回的对象，jQuery 对象内部包含的是 dom 元素对象的伪数组 (可能只有一个元素)，jQuery 对象拥有很多有用的属性和方法，让程序员能方便的操作...注意：如果存在（不存在）就删除（添加）一个样式类 需求描述：当单击按钮的时候，隐藏 div，再次单击按钮的时候，显示 div .hide { width: 100px; height...需求描述：创建一个显示 div，然后隐藏该元素 .box { width: 200px; height: 200px; background: coral; display...需求描述：创建一个隐藏 div，然后显示该元素 .box { width: 200px; height: 200px; background: coral; display
第一个选项是简单地链接到另一个页面，这可以与用户的响应关联。...在 jQuery Mobile 中，页眉的默认用法是作为固定在 Web 页面顶部的页面标题；在大部分情况下，页脚是 Web 页面中的最后一个元素，并且包括版权信息、其他超链接等内容。...> div> navbar 还有另一个很好的特性，您可以在每个按钮内包括自定义图标。... div> 默认情况下，块将页眉文本显示为一个带 + 图标的按钮。...只需要将一个定位点元素添加到列表项，添加一个用作缩略图的图片，然后添加您希望在它旁边显示的副本。jQuery Mobile 就会处理剩下的工作（见 清单 10）。 清单 10.
DOM相关内容在jQuery框架中基本实现了全覆盖,所以只需要掌握jQuery框架的使用方式即可 ###jQuery框架 这是一个通过js语言所写的框架,对原生js语言进行封装,作用:提高开发效率...匹配第一个div $(“div:last”) 匹配最后一个div $(“div:eq(n)”) 匹配下标为n的div 从0开始 $(“div:lt(n)”) 匹配下标小于n的div $(“div:gt...contains(‘xxx’)”) 匹配包含xxx文本的div 可见选择器 $(“div:visible”) 匹配所有显示的div $(“div:hidden”) 匹配所有隐藏的div 显示隐藏相关方法...() 所有兄弟 .siblings() 父元素 .parent() 子元素们 .children() 过滤选择器 第一个 div:first 最后一个 div:last 第n个 div:eq(n) 小于...empty 非空元素 div:parent 包含文本的元素 div:contains(xxx) 可见选择器 所有可见元素 div:visible 所有不可见 div:hidden 相关方法: 显示.show
•-index：一个整数，指示元素的位置，从集合中的最后一个元素开始倒数。...(1算起) first()，获取第一个元素 last()，获取最后个元素 hasClass(class)，检查当前的元素是否含有某个特定的类，如果有，则返回true。...，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤； 3，前者返回0或1个元素，后者可能包含0个，1个，或者多个元素。...件对象的一些属性在程序中使用事件对象非常简单,只需要为函数添加一个参 数....跨域：在一个服务器上，去访问另一个服务器 jQuery如何实现跨域请求？使用JSONP形式实现跨域。 javascript如果调用另一个域程序，不能执行当前域js函数。
HTML5 元素和 CSS 属性满足一些新特性: BS设计目标是移动设备优先然后才是桌面设备； BS全局显示、排版和链接 响应式布局以及图像响应式 BS支持跨浏览器一致性:使用了 Normalize.css...这是一个示例文本。这是一个示例文本。这是一个示例文本。这是一个示例文本。 WeiyiGeek. 列表在BS中支持有序列表、无序列表和定义列表。....form-control-static #在一个水平表单内的表单标签后放置纯文本时 .help-block #灰色显示表单帮助文本标签 #验证状态 .has-warning、 .has-error...嵌套: 您可以在一个按钮组内嵌套另一个按钮组，即，在一个 .btn-group 内嵌套另一个 .btn-group 。....text-danger #"#text-danger" 类的文本样式 .text-hide #将页面元素所包含的文本内容替换为背景图（文本隐藏） #背景颜色，文本是个链接鼠标移动到文本上会变暗
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
