以您想要的方式进行EE-使用书签

注意：假设知识 (Note: Assumed Knowledge)

要实现书签，您将需要具有一些基本HTML知识。 但是，如果您无法执行想要执行的操作，请在EE网站上的下面或某个问题中发布您的请求，我或另一位专家将竭尽全力为您编写所需的书签。 It should also be noted that a caveat to this approach is that the JavaScript at some point will change as the site evolves so any bookmarkets mentioned in this article are subject to change :)

书签 (Bookmarklets)

在浏览网页时，书签非常有用且功能不足。 书签是在您正在阅读的页面上运行JavaScript的书签，而您可能知道的书签会将您带到URL。

I recently saw this article by Joe Winograd that got me thinking about what it would mean to Experts and askers on the EE site. After talking with the EE Moderator eenookami who contacted me about expanding on this type of capability, I thought I would express here just what this kind can do for you when on the EE site.

我最近看到Joe Winograd撰写的这篇文章，这使我开始思考对EE网站上的专家和询问者意味着什么。 在与EE主持人eenookami进行了交谈之后，我与eenookami联系了我，以扩展这种功能，之后，我想在此表示EE网站上这种功能可以为您提供的服务。

JavaScript和jQuery (JavaScript & jQuery)

To begin with, the EE site utilises JavaScript to capture and perform actions throughout the site. When you click on a button, perform a search, post a comment etc JavaScript is executed. Essentially any action you perform on the site is controlled via JavaScript. EE utilises the framework jQuery. jQuery is just JavaScript wrapped up nice and neat to make actions easier to implement.  

首先，EE网站利用JavaScript捕获并执行整个网站中的操作。 当您单击按钮时，执行搜索，发表评论等，然后执行JavaScript。 基本上，您在网站上执行的任何操作都是通过JavaScript控制的 。 EE利用jQuery框架。 jQuery只是JavaScript的一种很好的包装，它使操作更容易实现。

For more on JavaScript frameworks, please refer to my article: Javascript Frameworks what are they?

有关JavaScript框架的更多信息，请参阅我的文章： Javascript框架是什么？

那么JavaScript（jQuery）与您之间有什么联系？ (So what's the link between JavaScript (jQuery) and you?)

As I briefly mentioned before, JavaScript is used on the page to control the actions on the site. We all use the site differently and the web developers cannot cater to everyone so leveraging the actions to your advantage is what this article is about. In Joe's instance, he found it frustrating that he couldn't show all the messages in a group discussion thread without clicking the Expand button on each one. He's shown in his article how JavaScript can automate clicking each of the expand buttons (in one click!) by leveraging this bookmarklet. What I'd like to do is show you how to add your own bookmarklet based on the actions you'd like to be able to do more easily.

如前所述，页面上使用JavaScript来控制网站上的操作。 我们对网站的使用方式不同 ，并且Web开发人员无法满足所有人的需求，因此，本文所针对的是利用使您受益的操作。 以乔为例，他感到沮丧的是，如果不单击每个人的“ 小组讨论线程中显示所有消息。 在他的文章中向他展示了JavaScript如何通过利用此书签自动单击每个展开按钮（一次单击！）。 我想做的是向您展示如何根据您希望更轻松地执行的操作添加自己的书签。

计算出元素以使用JavaScript进行控制 (Working out the Element to control with JavaScript)

现在是最困难的部分， exactly what you want to do. In this example I'll work with the example of creating a bookmarklet that takes you right to the comment box and while we're at it, another one to get to the top of the page.

This is based on scrolling the page to a point you're interested in. This is a good reference to start with all the possible properties of an HTML element that you can target and use. Manipulating HTML elements: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement

这是基于将页面https : //developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement

In each example, I'll show you some basic techniques to getting the right elements. The examples are using the Chrome browser so the process of finding the element may be different depending on the browser you are using. In all the examples and to find out the actions and elements needed, you will need to utilise the developer tools that already exist in all the standard browsers (Chrome, Firefox, Opera, IE). The dev tools can be accessed by right clicking anywhere on the webpage and selecting "Inspect Element" from the context menu. The advantage of this approach is it will take you to the element or near region in the HTML you want to control. You can also bring up the tools by pressing either F12, Ctrl+Shift+i or via the browser's menu:

在每个示例中，我将向您展示获取正确元素的一些基本技术。 这些示例使用的是Chrome浏览器，因此根据所使用的浏览器，查找元素的过程可能有所不同。 在所有示例中，并找出所需的操作和元素，您将需要利用所有标准浏览器（Chrome，Firefox，Opera，IE）中已经存在的

示例：转到注释框 (Example: Going right to the comment box)

第一步是识别HTML中的注释框。 右键单击评论框上方的“发布评论”标题，然后从上下文菜单中选择“检查元素”。

All the content of a webpage is stored in the body HTML element. When you scroll a webpage, you're scrolling the body element. What you see on the screen is only what your computer screen (or mobile device) is capable of so it varies. The idea here is to scroll the body element to the top of the comment box. The HTML DOM (Document Object Model) is the hierarchy of the tags within each other. In other words, the screenshot above is a child of the element.

网页的所有内容都存储在

This is important for our action as we are scrolling the body element so we are only interested in the first level of elements within this scope as the element's offsetTop property's value is only relative to its parent. From the screenshot above we need to find the element that is in the first level of child elements of the body element. In this case, it is the element as indicated in the screenshot.

这对于我们的操作很重要，因为我们正在滚动offsetTop属性的值仅相对于其父元素。 从上面的屏幕截图中，我们需要找到位于

To get the top of the element or its location in the page, it's as easy as document.getElementById("caw").offsetTop. To use jQuery to scroll the page we use $("body").scrollTop([value goes here]). Combining the two, it's as simple as:

要获得元素的顶部或其在页面中的位置，就像document.getElementById（“ c aw“）。offse tTop 。 要使用jQuery滚动页面，我们使用$（“ body”）。scrollTop（[value 去这里]） 。 将两者结合起来，很简单：

$("body").scrollTop(document.getElementById("caw").offsetTop)

$（“ body”）。scrollTop（docume nt.getElem entById（“ c aw“）。offse tTop）

That's the Javascript, so following the instructions in Joe's article, you create a bookmark with the following instead of the usual link:

这就是Javascript，因此，按照Joe的文章中的说明，您可以使用以下内容（而非通常的链接）创建一个书签：

javascript:void($("body").scrollTop(document.getElementById("caw").offsetTop));

javascript：void（$（“ body”）。 scrollTop（ 文件 etElementB yId（“ caw”） .offsetTop ））;

And finally to return to the top of the page:

最后返回页面顶部：

javascript:void($("body").scrollTop(0));

javascript：void（$（“ body”）。 scrollTop（ 0））;

示例：仅显示解决方案 (Example: Showing only solutions)

有时，您所希望看到的只是解决方案，而不是在提出问题时提出的其他评论。 以下Javascript将切换显示所有注释或仅显示解决方案（包括在拆分解决方案时提供帮助）。

If you were to go through the same steps as the previous example, right clicking on any solution, you would see that the elements that contain the comments have the assisted and accepted class (as shown below).

如果要执行与上一个示例相同的步骤，请右键单击任何解决方案，您将看到包含注释的元素具有

We can utilise them to hide or show those elements using the toggle function from jQuery:

我们可以利用jQuery中的切换功能利用它们来隐藏或显示这些元素：

javascript:void($('.answer:not(.accepted,.assisted)').toggle())

javascript：void（$（'。answer ：not（.acce pted.assi sted）'）。to ggle（））

Note: This can also been applied to Admin or Author comments.

注意：这也可以应用于管理员或作者注释。

你的想象力 (Your Imagination)

我很好奇，非常乐于帮助创建新的快捷方式（书签），并了解其余人员如何使用该网站。 希望我已经展示了如何使用您的想象力来使用网站并根据您自己的工作方式对其进行调整。

翻译自: https://www.experts-exchange.com/articles/18226/EE-the-way-you-want-with-Bookmarklets.html