jQuery
关注
分享
扫一扫
瘦毛毛
...瘦...
展开
-
jQuery - 使用要点 - $ vs $()
$ vs $()$( "h1" ).remove();大多数jQuery方法都在jQuery对象上调用；这些方法据说是 $.fn 命名空间的一部分，或者是 "jQuery原型"，称作：jQuery对象方法。还有一部分方法在选择对象上不起作用，据说这些方法是 jQuery 命名空间的一部分，称作：核心jQuery方法。jQuery选择对象上被呼叫的方法在 $.fn 命名空间中，并且该方...原创 2018-12-27 22:38:38 · 168 阅读 · 0 评论 -
jQuery - 事件 - 事件助手
jQuery 提供一些与事件相关的辅助函数，来节省按键点击。示例为：.hover().hover() 该方法允许传入一个或者两个处理程式来执行，执行条件是在元素上触发 mouseenter 和 mouseleave 事件。若传入一个处理程式，两个事件都会执行该处理程式；如传入两个，mouseenter 会执行第一个处理程式，mouseleave 会执行第二个处理程式。注意：在 jQuery...原创 2018-12-29 11:50:14 · 126 阅读 · 0 评论 -
jQuery - 基本使用
jQuery基础jQuery库下载地址：链接注意：jQuery库通过window对象的两个属性来暴露自己的方法和属性，它们分别是：jQuery 和 $ ($ 是 jQuery属性的别称)<!doctype html><html><head> <meta charset="utf-8"> <title>j...原创 2018-12-26 00:04:03 · 82 阅读 · 0 评论 -
jQuery - Plugins
jQuery 插件是用于扩展 jQuery 原型对象的新方法。通过扩展原型对象，可以使所有 jQuery 对象继承新加入的方法。如上所述，无论何时调用 jQuery() 都会创建一个新的 jQuery 对象，并且继承所有 jQuery 的方法。Finding & Evaluating PluginsjQuery 最有名的一方面是它广泛的插件生态系统。jQuery 插件质量参差不齐，...原创 2019-01-25 16:17:15 · 378 阅读 · 0 评论 -
jQuery - 处理事件
jQuery 通过 .on() 方法，来将事件处理函数绑定在元素上。简单事件绑定// When any <p> tag is clicked, we expect to see '<p> was clicked' in the console.$( "p" ).on( "click", function() { console.log( "<p&g...原创 2019-01-21 11:00:44 · 173 阅读 · 1 评论 -
jQuery - 事件处理函数内部
每一个事件处理函数，都会接收一个事件对象参数，该对象包含许多属性和方法。事件对象最常用的功能是，通过 .preventDefault() 方法来阻止元素的默认动作。pageX pageY 事件触发时，鼠标基于页面左上角的位置。type 事件的类型which 被按下的按钮或者按键data 事件绑定时被传入的数据target 启动事件的 DOM 元素preventDefault...原创 2019-01-21 11:16:13 · 196 阅读 · 0 评论 -
jQuery - Performance
Append Outside of Loops触动 DOM 会带来成本消耗。若要向 DOM 中添加大量元素，应当一次性添加所有元素，而不是一次添加一个元素。示例：$.each( myArray, function( i, item ) { var newListItem = "<li>" + item + "</li>"; $( "#b...原创 2019-01-25 17:25:11 · 152 阅读 · 0 评论 -
jQuery - 理解事件代理
事件代理允许将单个的时间监听器，附加到父元素上，该事件会被所有该父元素的匹配的后代元素触发，无论该后代元素是当前存在的，或者是后续添加的。示例：<html><body><div id="container"> <ul id="list"> <li><a href="ht原创 2019-01-21 11:50:40 · 1434 阅读 · 0 评论 -
jQuery - 触发事件处理函数
jQuery 通过 .trigger() 方法来触发元素的事件处理函数，而不用点击该元素。什么样的事件处理函数可以被 trigger()jQuery 事件处理系统，是处于本地浏览器事件之上的一层。因为 jQuery 在事件处理函数加入时会储存该函数的参考，所以当使用 .on("click", function(){......}) 添加事件处理函数，就可以使用 jQuery 的 .trig...原创 2019-01-21 15:08:28 · 856 阅读 · 0 评论 -
jQuery - 自定义事件
<div class="room" id="kitchen"> <div class="lightbulb on"></div> <div class="switch"></div> <div class="switch"&原创 2019-01-21 15:29:21 · 209 阅读 · 0 评论 -
jQuery - Effects
完整文档：Effects documentation on api.jquery.com简介显示隐藏内容jQuery 通过 .show() .hide() 来立即显示或者隐藏内容// Instantaneously hide all paragraphs$( "p" ).hide(); // Instantaneously show all divs that have t...原创 2019-01-21 16:49:15 · 211 阅读 · 0 评论 -
jQuery - Ajax
传统的网页需要通过重新加载来更新它的内容。此种方式非常的低效，服务器不得不重构整个页面，之后再发送所有的 HTML CSS JavaScript 到用户端。2003年之后，大部分主流浏览器，通过 XMLHttpRequest(XHR) 对象来解决这个问题，允许浏览器同服务器进行通信，而无需重新加载页面。XMLHttpRequest 对象是 Ajax(Asynchronous JavaScrip...原创 2019-01-22 23:05:47 · 186 阅读 · 0 评论 -
jQuery - 事件 - 概述 + 基础知识
jQuery 提供简单的方法来将事件处理函数绑定在被选择者上。当事件被触发，提供的函数会被执行。在该函数中，this 是指启动事件的 DOM 元素。详细文档：Events Documentation事件处理函数可以接收事件对象，此对象可用于确定事件的性质，并且可以用来阻止事件的默认行为。详细文档：Event Object DocumentationjQuery 事件基础知识设置 DOM...原创 2018-12-29 11:37:19 · 138 阅读 · 0 评论 -
jQuery - 使用要点 - 使用中的高频问题
如何使用 class 或者 ID 选择元素？由于在文档中 ID 是唯一的，使用此种方式会选中0个或者1个元素。$( "#myDivId" );class 的方式会选中 class 名称为 "myCssClass" 的元素，因为多个元素可以有相同的 class 名称，所以这种方式会选中多个元素。$( ".myCssClass" );一个 jQuery 对象包含被选中的元素，并...原创 2018-12-28 17:36:19 · 112 阅读 · 0 评论 -
jQuery - 使用要点 - .index()函数
.index() 是 jQuery 对象集的方法，用以搜索 jQuery 对象中给定的元素。无参数 .index()<ul> <div></div> <li id="foo1">foo</li> <li id="bar1">bar</li>原创 2018-12-28 16:38:46 · 680 阅读 · 0 评论 -
jQuery - 使用要点 - $(document).ready()
$(document).ready()包含在 $(document).ready() 中的代码，只有在页面文档对象模型(Document Object Model(DOM))准备好执行 JavaScript 代码后，才会被执行一次。包含在 $(window).on("load", function(){......}) 中的代码，只有在整理页面(包含：image & iframe，...原创 2018-12-27 22:40:51 · 562 阅读 · 0 评论 -
jQuery - 使用要点 - 避免同其他JavaScript库的冲突
避免同其他JavaScript库的冲突默认情况下，jQuery使用$符号作为jQuery的简写形式；若同时使用的其他JavaScript库中，使用$变量，此时就会痛jQuery发生冲突。避免冲突的方式：将jQuery置于无冲突模式使用另外的变量，代替$别名。<!-- Putting jQuery into no-conflict mode. --><scrip...原创 2018-12-27 22:55:09 · 120 阅读 · 0 评论 -
jQuery - 使用要点 - Attributes
Attributes.attr() 方法设置：$( "a" ).attr( "href", "allMyHrefsAreTheSameNow.html" ); $( "a" ).attr({ title: "all titles are the same too!", href: "somethingNew.html"});取得：// 返回文档原创 2018-12-27 22:57:04 · 238 阅读 · 0 评论 -
jQuery - 使用要点 - 选择元素
选择文档元素jQuery支持大多数CSS3选择器，以及一些非标准选择器。完整的选择器参考通过ID$( "#myId" ); // ID在每个页面是唯一的通过Class Name$( ".myClass" );通过Attribute$( "input[name='first_name']" );通过混合使用CSS选择器$( "#contents ul.pe...原创 2018-12-27 22:59:19 · 123 阅读 · 0 评论 -
jQuery - 使用要点 - 同被选择元素一起工作
同被选择元素一起工作取得值、设置值：一些jQuery的方法可以同时被用于分配和设定被选择者的一些值。这些方法在呼叫时，若传入参数值，那么其会设定被选择者的值；若未传入参数值，那么其会取得被选择集中的第一个被选择者的值。Setters会影响所有被选择元素的值，而Getters只会返回选择集中第一个被选择者的值。例外的是：.text()方法会取得元素的所有值。// <h1>jQu...原创 2018-12-27 23:03:58 · 115 阅读 · 0 评论 -
jQuery - 使用要点 - 操纵元素
操纵元素完整文档：Manipulation Documentation.html() - 取得和设置HTML内容 .text() - 取得和设置文字内容；HTML会被剥离 .attr() - 取得或设置提供的属性值 .width() - 取得或设置选区中第一个元素的宽度(以像素为单位，整数值) .height() - 取得或设置选区中第一个元素的高度(以像素为单位，整数值) .p...原创 2018-12-27 23:10:51 · 157 阅读 · 0 评论 -
jQuery - 使用要点 - jQuery对象
jQuery对象DOM & DOM Elements文档对象模型(Document Object Model)是HTML文档的代理。最高层级的DOM元素，可以被想做网页块。jQuery对象兼容性：var target = document.getElementById( "target" ); target.innerHTML = "<td>Hello...原创 2018-12-27 23:14:40 · 143 阅读 · 0 评论 -
jQuery - 使用要点 - 跨越元素
跨越元素完整文档：Traversal Documentation<div class="grandparent"> <div class="parent"> <div class="child"> <span class="subchild"></原创 2018-12-27 23:18:16 · 176 阅读 · 0 评论 -
jQuery - 使用要点 - CSS, Styling, & Dimensions
CSS, Styling, & Dimensions取得CSS属性：// 驼峰模式 fontSize 等同连字符连接形式 font-size$( "h1" ).css( "fontSize" ); // 返回如： "19px" 的字符串 $( "h1" ).css( "font-size" );设置CSS属性：$( "h1" ).css( &quo原创 2018-12-27 23:20:39 · 128 阅读 · 0 评论 -
jQuery - 使用要点 - 数据方法
Data Methods (数据方法)// 储存和检索元素相关的数据$( "#myDiv" ).data( "keyName", { foo: "bar" } ); $( "#myDiv" ).data( "keyName" ); // 返回值为：{ foo: "bar" }建立元素之间的关系：// 使用.data()方法储存元素之间的关系 $( "#my原创 2018-12-28 08:54:13 · 118 阅读 · 0 评论 -
jQuery - 使用要点 - 功能方法
Utility Methods (功能方法)jQuery 在 $ 命名空间中提供许多功能性的方法。完整文档：Utility Documentation$.trim() 移除起始和结尾的空白$.trim( " lots of extra whitespace " );// 返回值为："lots of extra whitespace"，去掉了起始和结尾的空白字符$.e...原创 2018-12-28 11:05:29 · 128 阅读 · 0 评论 -
jQuery - 使用要点 - 迭代jQuery和非jQuery对象
jQuery 提供命为 $.each() 的对象迭代器，以及命为 .each() 的集合迭代器，它们之间不可以互换。此外，还有一些命为 $.map() 和 .map() 的方法，可以简化一些常见的迭代用例。$.each() 是类迭代器函数，用以循环整个普通对象、数组、类似数组的对象集。普通对象通过其命名属性迭代，而数组和类似数组的对象集通过其索引进行迭代。$.each() 实际上是传统的 fo...原创 2018-12-28 15:22:08 · 186 阅读 · 0 评论 -
jQuery - 事件介绍
DOM Events监听事件的方式糟糕的事件监听方式，以下方式使得代码难以维护。<button onclick="alert('Hello')">Say hello</button><!--糟糕的事件监听方式-->优秀的事件监听方式，使代码的维护更加方便。<button id="helloBtn">Say hello<原创 2019-01-21 10:33:17 · 149 阅读 · 0 评论