使用 jQuery 向上遍历

字数321 大约花费1分钟

使用parent(),parents()和closest()表示向上遍历,其中parent()返回直接父节点,最多一个,parents()返回所有的祖先节点,结果可以有多个,函数可以加过滤条件。closest指包括自己和所有祖先节点中,满足条件的最近的节点,结果最多一个,该函数一般会加参数,不加参数时结果为自己。

jQuery 判断和处理页面元素的可见性

字数197 大约花费1分钟

jQuery使用”hidden”和”visible”过滤器来判断页面元素是否可见,判断方式和css有些不同。jQuery是根据页面元素是否占用了空间来判断,而不是仅根据页面自身的属性。如果父元素是隐藏的,那么子元素也被认为是隐藏的,因为在页面中子元素是看不到,并且不占用空间的。

jQuery 对象集按 DOM 元素的顺序排序

字数149 大约花费1分钟

jQuery 对象集是按 DOM 元素的顺序排序的,请看以下例子。

1
2
3
4
5
<div id="testOrder">
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
</div>
1
alert($('h3, h2, h1').get(0).nodeName);

虽然选择器的顺序是按照 h3,h2,h1,但此时 alert 的内容是 h1。因为 $(‘h3, h2, h1’)是按照 DOM 顺序排序的。
您可以在 这里 查看和调试代码。

谈谈 IT的文章均为原创或翻译(翻译会注明外文来源),转载请以链接形式标明本文地址: http://tantanit.com/jquery-dui-xiang-ji-an-dom-yuan-su-de-shun-xu-pai-xu/

谈谈IT

欢迎关注官方微信公众号获取最新原创文章

浅谈变量对 jQuery 对象集的引用

字数476 大约花费2分钟
1
2
3
4
5
<div id="testOrder">
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
</div>
1
2
3
4
5
6
7
8
var hs=$("#testOrder").children();
document.getElementsByTagName('h1')[0].innerHTML="newh1";
alert($(hs).text());
$("#testOrder").append("<h4>h4</h4>");
$("h3").remove();
alert($(hs).text());
hs=$("#testOrder").children();
alert($(hs).text());

使用变量 hs 代表 testOrder 的子节点对应的 jQuery 对象集,在赋值时,包含 h1,h2,h3 三个节点。

修改 DOM 节点内容

1
document.getElementsByTagName('h1')[0].innerHTML="newh1";

jQuery 对象链详解

字数968 大约花费4分钟

jQuery 函数通过返回 jQuery 对象集,可以继续使用 jQuery 函数,这样就形成了一个链条。
需要注意的是,有些方法会改变对象集,此时想要返回到上一个对象集,要用 end()方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<table>
<tr>
<td>As You Like It</td>
<td>Comedy</td>
<td></td>
</tr>
<tr>
<td>All's Well that Ends Well</td>
<td>Comedy</td>
<td>1601</td>
</tr>
<tr>
<td>Hamlet</td>
<td>Tragedy</td>
<td>1604</td>
</tr>
<tr>
<td>Macbeth</td>
<td>Tragedy</td>
<td>1606</td>
</tr>
<tr>
<td>Romeo and Juliet</td>
<td>Tragedy</td>
<td>1595</td>
</tr>
<tr>
<td>Henry IV, Part I</td>
<td>History</td>
<td>1596</td>
</tr>
<tr>
<td>Henry V</td>
<td>History</td>
<td>1599</td>
</tr>
</table>
1
2
3
4
5
6
7
$('td:contains(Henry)') // Find every cell containing "Henry"
.parent() // Select its parent
.find('td:eq(1)') // Find the 2nd descendant cell
.addClass('highlight') // Add the "highlight" class
.end() // Return to the parent of the cell containing "Henry"
.find('td:eq(2)') // Find the 3rd descendant cell
.addClass('highlight'); // Add the "highlight" class

在这个例子中

1
2
$('td:contains(Henry)') // Find every cell containing "Henry"
.parent()

表示包含了文本 Henry 的列,所在的 tr,也就是包含了文本 Henry 的行。

1
2
3
4
$('td:contains(Henry)') // Find every cell containing "Henry"
.parent() // Select its parent
.find('td:eq(1)') // Find the 2nd descendant cell
.addClass('highlight') // Add the "highlight" class

将 jQuery 对象转为普通 DOM 元素

字数231 大约花费1分钟

使用 get 方法可以将 jQuery 对象转为普通 DOM 元素。
get()表示获取 Jquery 对象组对应的 DOM 元素集。get(0)表示取 Jquery 对象组对应的 DOM 元素集的第一个元素。
其中 get(0)这种语法,可以用数组语法代替。以下三行代码效果是一样的。

1
$('a').get(0)


1
$('a')[0]

javascript 的 this 与 jQuery 的 $(this) 的比较

字数345 大约花费1分钟

javascript 的 this 关键字代表当前 DOM 元素,$(this)表示对 this 的引用,也就是对当前 DOM 元素的引用,其实是一回事。将 $(this)转为 DOM 元素后就是 this。也就是说 $(this)[0]===this。将 jQuery 对象转化为对应的 DOM 元素的内容可以参看本站的《将 jQuery 对象转为普通 DOM 元素》

1
2
3
<a id="link1">text1</a>
<a id="link2">text2</a>
<a id="link3">text3</a>

1
2
3
4
5
$('a').mouseenter(
function () {
alert(this.id);
alert($(this).attr('id'));
});

两句代码效果是一样的。

使用 $(this)的好处

如何在 windows 下为 atom 的 git-plus 插件配置 git 路径

字数249 大约花费1分钟

安装了 git-plus 后, 进行 git 操作,会提示

1
2
'git' is not recognized as an internal or external command,
operable program or batch file.

这是因为没有配置 git 路径。

找到 git-plus 的路径配置项

找到 git-plus 的路径配置项

  1. 选择菜单 Packages->Settings View->Manage Packages 进入包管理页面。
  2. 找到 git-plus 插件, 点击 Settings, 可以看到 Git Path 输入框,此时输入框中默认为空,表示默认值“git”。

    配置 git 路径

    配置 git 路径
    在输入框中,输入 git.exe 的路径。比如,输入
    1
    C:\\Program Files (x86)\\Git\\cmd\\git.exe

jQuery 的 text() 方法与 html() 方法比较

字数895 大约花费4分钟

jQuery 中对文本内容有 text()、html()以及 val()方法。对 input 和 textarea 元素,使用 val()方法获取和设置文本内容。对其它元素,可以使用 text 方法获取文本,html 获取节点内的 html 内容。以下主要比较 text 和 html 方法。

使用 text()方法获取文本

将符合条件的所有元素以及它们的子元素的文本内容用空格或换行符拼接起来。这里有四个点:

  • 会对所有符合条件的 jQuery 对象进行处理
  • 会对 jQuery 对象的子对象进行处理
  • 只获取文本内容, 标签会被过滤掉
  • 获取的内容最后是一个拼接起来的字符串
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <div class="demo-container">
    <div class="demo-box">Demonstration Box1</div>
    <ul>
    <li>list item 11</li>
    <li>list <strong>item</strong> 12</li>
    </ul>
    </div>

    <div class="demo-container">
    <div class="demo-box">Demonstration Box2</div>
    <ul>
    <li>list item 21</li>
    <li>list <strong>item</strong> 22</li>
    </ul>
    </div>
1
alert($( "div.demo-container" ).text());

使用 text()方法,将文本进行转义后,作为文本替换节点内容

使用 jQuery 在 DOM 或 window 加载后执行动作

字数444 大约花费2分钟

页面上的 javascript 执行,除了用户主动交互的事件外,都是在 DOM 加载完成或 window 完全加载后执行的(甚至连定时事件也是在此时开始计时)。以下分别分析 jQuery 针对这两种情况的处理。

使用 ready 方法定义在 DOM 被加载后执行的动作

在 DOM 被加载后执行,不必等要页面元素都渲染完。

三种语法

1
2
3
4
5
6
7
8
9
10
// Standard.
jQuery(document).ready(function () { alert('DOM is ready!'); });
// Shortcut, but same thing as above.
jQuery(function () { alert('No really, the DOM is ready!'); });
// Shortcut with fail-safe usage of $. Keep in mind that a reference
// to the jQuery function is passed into the anonymous function.
jQuery(function ($) {
alert('Seriously its ready!');
// Use $() without fear of conflicts.
});

其中

1
jQuery(function () { alert('No really, the DOM is ready!'); });