element按钮默认选中_el-button autofocus_进击的小白兔vl的博客

相关文章推荐
呐喊的小蝌蚪 · 解决VS ...· 2 月前 ·
高大的柿子 · <C语言>打印（输）出系统时间-----ti ...· 2 月前 ·
纯真的沙滩裤 · Pyqt 滚动条的小demo_pyqt ...· 6 月前 ·
体贴的可乐 · Go 语言入门实践笔记 | 青训营 - 掘金· 1 年前 ·
礼貌的小马驹 · 常见错误码及排查方法_数据传输-阿里云帮助中心· 1 年前 ·
需求：第一个按钮默认选中，点击其他按钮则变成选中状态
查看全部为默认选中，点击只看A/B时，其余按钮变成未选中状态，开始想用autofocus属性，发现只有第一次有效，页面刷新时就会失去焦点。于是换了一种方式，通过改plain属性的方式，实现选中效果
在这里插入图片描述
 <el-button
              type="primary"
              size="mini"
              @click="reset"//点击事件，
              :plain= "select"//控制是否朴素按钮
              >查看全部</el-button
            <el-button
              type="primary"
              size="mini"  
              @click="selsectB"
               :plain= "selectB"
              >只看B</el-button
            <el-button
              type="primary"
              size="mini"
               :plain= "selectA"
              @click="selsectA"
              >只看A</el-button
data里定义
      select:false,
      selectA:true,
      selectB:true,
方法里定义
search() {
      this.init(1);//页面刷新
    selsectB() {
      this.queryForm.suggestChange = "B";
      this.init(1);
      this.select=true
      this.selectB=false
      this.selectA=true
    selsectA() {
      this.queryForm.suggestChange = "A";
      this.init(1);
      this.select=true
      this.selectA=false
      this.selectB=true
                    需求：第一个按钮默认选中，点击其他按钮则变成选中状态查看全部为默认选中，点击只看A/B时，其余按钮变成未选中状态，开始想用autofocus属性，发现只有第一次有效，页面刷新时就会失去焦点。于是换了一种方式，通过改plain属性的方式，实现选中效果 &lt;el-button              type="primary"              size="mini"              @click="reset"//点击事件，              :plain= "
				jQuery1.2 API 中文版折叠展开折叠全部展开全部  英文说明 核心jQuery 核心函数
jQuery(expression,[context])
jQuery(expression,[context])
这个函数接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元素。 
jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都构建于这个函数之上，或者说都是在以某种方式使用这个函数。这个函数最基本的用法就是向它传递一个表达式（通常由 CSS 选择器组成），然后根据这个表达式来查找所有匹配的元素。
默认情况下, 如果没有指定context参数，$()将在当前的 HTML 文档中查找 DOM 元素；如果指定了 context 参数，如一个 DOM 元素集或 jQuery 对象，那就会在这个 context 中查找。
参考 Selectors 获取更多用于 expression 参数的 CSS 语法的信息。
--------------------------------------------------------------------------------
This function accepts a string containing a CSS selector which is then used to match a set of elements. 
The core functionality of jQuery centers around this function. Everything in jQuery is based upon this, or uses this in some way. The most basic use of this function is to pass in an expression (usually consisting of CSS), which then finds all matching elements. 
By default, if no context is specified, $() looks for DOM elements within the context of the current HTML document. If you do specify a context, such as a DOM element or jQuery object, the expression will be matched against the contents of that context. 
See Selectors for the allowed CSS syntax for expressions.
jQuery
expression (String) : 用来查找的字符串
context (Element, jQuery) : (可选) 作为待查找的 DOM 元素集、文档或 jQuery 对象。
找到所有 p 元素，并且这些元素都必须是 div 元素的子元素。 
HTML 代码:
<p>one</p> <div><p>two</p></div> <p>three</p> 
jQuery 代码:
$("div > p"); 
[ <p>two</p> ] 
--------------------------------------------------------------------------------
在文档的第一个表单中，查找所有的单选按钮(即: type 值为 radio 的 input 元素)。 
jQuery 代码:
$("input:radio", document.forms[0]); 
--------------------------------------------------------------------------------
在一个由 AJAX 返回的 XML 文档中，查找所有的 div 元素。 
jQuery 代码:
$("div", xml.responseXML); 
jQuery(html)jQuery(html)
根据提供的原始 HTML 标记字符串，动态创建由 jQuery 对象包装的 DOM 元素。 
你可以传递一个手写的 HTML 字符串，或者由某些模板引擎或插件创建的字符串，也可以是通过 AJAX 加载过来的字符串。但是在你创建 input 元素的时会有限制，可以参考第二个示例。当然这个字符串可以包含斜杠 (比如一个图像地址)，还有反斜杠。当你创建单个元素时，请使用闭合标签或 XHTML 格式。例如，创建一个 span ，可以用 $("<span/>") 或 $("<span></span>") ，但不推荐 $("<span>") 
--------------------------------------------------------------------------------
Create DOM elements on-the-fly from the provided String of raw HTML. 
You can pass in plain HTML Strings written by hand, create them using some template engine or plugin, or load them via AJAX. There are limitations when creating input elements, see the second example. Also when passing strings that may include slashes (such as an image path), escape the slashes. When creating single elements use the closing tag or XHTML format. For example, to create a span use $("<span/>") or $("<span></span>") instead of without the closing slash/tag. 
jQuery
html (String) : 用于动态创建DOM元素的HTML标记字符串
动态创建一个 div 元素（以及其中的所有内容），并将它追加到 body 元素中。在这个函数的内部，是通过临时创建一个元素，并将这个元素的 innerHTML 属性设置为给定的标记字符串，来实现标记到 DOM 元素转换的。所以，这个函数既有灵活性，也有局限性。 
jQuery 代码:
$("<div><p>Hello</p></div>").appendTo("body"); 
--------------------------------------------------------------------------------
创建一个 <input> 元素必须同时设定 type 属性。因为微软规定 <input> 元素的 type 只能写一次。
jQuery 代码:
// 在 IE 中无效:
$("<input>").attr("type", "checkbox");
// 在 IE 中有效:
$("<input type='checkbox'>");
jQuery(elements)jQuery(elements)
将一个或多个DOM元素转化为jQuery对象。
这个函数也可以接收XML文档和Window对象（虽然它们不是DOM元素）作为有效的参数。
--------------------------------------------------------------------------------
Wrap jQuery functionality around a single or multiple DOM Element(s).
This function also accepts XML Documents and Window objects as valid arguments (even though they are not DOM Elements).
jQuery
elements (Element, Array<Element>) : 用于封装成jQuery对象的DOM元素
设置页面背景色。 
jQuery 代码:
$(document.body).css( "background", "black" ); 
--------------------------------------------------------------------------------
隐藏一个表单中所有元素。 
jQuery 代码:
$(myForm.elements).hide() jQuery(callback)jQuery(callback)
$(document).ready()的简写。
允许你绑定一个在DOM文档载入完成后执行的函数。这个函数的作用如同$(document).ready()一样，只不过用这个函数时，需要把页面中所有需要在 DOM 加载完成时执行的$()操作符都包装到其中来。从技术上来说，这个函数是可链接的－－但真正以这种方式链接的情况并不多。
你可以在一个页面中使用任意多个$(document).ready事件。
参考 ready(Function) 获取更多 ready 事件的信息。
--------------------------------------------------------------------------------
A shorthand for $(document).ready().
Allows you to bind a function to be executed when the DOM document has finished loading. This function behaves just like $(document).ready(), in that it should be used to wrap other $() operations on your page that depend on the DOM being ready to be operated on. While this function is, technically, chainable - there really isn't much use for chaining against it. 
You can have as many $(document).ready events on your page as you like. 
See ready(Function) for details about the ready event.
jQuery
callback (Function) : 当DOM加载完成后要执行的函数
当DOM加载完成后，执行其中的函数。 
jQuery 代码:
$(function(){
// Document is ready
--------------------------------------------------------------------------------
Uses both the shortcut for $(document).ready() and the argument to write failsafe jQuery code using the $ alias, without relying on the global alias. 
jQuery 代码:
jQuery(function($) {
// Your code using failsafe $ alias here...
}); jQuery 对象访问
each(callback)each(callback)
以每一个匹配的元素作为上下文来执行一个函数。
意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。 
而且，在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整形）。 
返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。
--------------------------------------------------------------------------------
Execute a function within the context of every matched element.
This means that every time the passed-in function is executed (which is once for every element matched) the 'this' keyword points to the specific DOM element. 
Additionally, the function, when executed, is passed a single argument representing the position of the element in the matched set (integer, zero-index). 
Returning 'false' from within the each function completely stops the loop through all of the elements (this is like using a 'break' with a normal loop). Returning 'true' from within the loop skips to the next iteration (this is like using a 'continue' with a normal loop).
jQuery
callback (Function) : 对于每个匹配的元素所要执行的函数
迭代两个图像，并设置它们的 src 属性。注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。 
HTML 代码:
<img/><img/> 
jQuery 代码:
$("img").each(function(i){
   this.src = "test" + i + ".jpg";
[ <img src="test0.jpg" />, <img src="test1.jpg" /> ] 
--------------------------------------------------------------------------------
如果你想得到 jQuery对象，可以使用 $(this) 函数。 
jQuery 代码:
$("img").each(function(){
  $(this).toggleClass("example");
--------------------------------------------------------------------------------
你可以使用 'return' 来提前跳出 each() 循环。 
HTML 代码:
<button>Change colors</button>
<span></span> 
<div></div> 
<div></div>
<div></div> 
<div></div>
<div id="stop">Stop here</div> 
<div></div>
<div></div>
<div></div>
jQuery 代码:
$("button").click(function () { 
	$("div").each(function (index, domEle) { 
	  // domEle == this 
	  $(domEle).css("backgroundColor", "yellow");  
	  if ($(this).is("#stop")) { 
		  $("span").text("Stopped at div index #" + index); 
		  return false; 
});size()size()
jQuery 对象中元素的个数。
这个函数的返回值与 jQuery 对象的'length' 属性一致。
--------------------------------------------------------------------------------
The number of elements in the jQuery object.
This returns the same number as the 'length' property of the jQuery object.
Number
计算文档中所有图片数量 
HTML 代码:
<img src="test1.jpg"/> <img src="test2.jpg"/>
jQuery 代码:
$("img").size(); 
2 lengthlength
jQuery 对象中元素的个数。
当前匹配的元素个数。 size 将返回相同的值。
--------------------------------------------------------------------------------
The number of elements in the jQuery object.
The number of elements currently matched. The size function will return the same value.
Number
计算文档中所有图片数量 
HTML 代码:
<img src="test1.jpg"/> <img src="test2.jpg"/>
jQuery 代码:
$("img").length; 
2 get()get()
取得所有匹配的 DOM 元素集合。
这是取得所有匹配元素的一种向后兼容的方式（不同于jQuery对象，而实际上是元素数组）。 
如果你想要直接操作 DOM 对象而不是 jQuery 对象，这个函数非常有用。
--------------------------------------------------------------------------------
Access all matched DOM elements.
This serves as a backwards-compatible way of accessing all matched elements (other than the jQuery object itself, which is, in fact, an array of elements). It is useful if you need to operate on the DOM elements themselves instead of using built-in jQuery functions.
Array<Element>
选择文档中所有图像作为元素数组，并用数组内建的 reverse 方法将数组反向。 
HTML 代码:
<img src="test1.jpg"/> <img src="test2.jpg"/> 
jQuery 代码:
$("img").get().reverse(); 
[ <img src="test2.jpg"/> <img src="test1.jpg"/> ] get(index)get(index)
取得其中一个匹配的元素。 num表示取得第几个匹配的元素。
这能够让你选择一个实际的DOM 元素并且对他直接操作，而不是通过 jQuery 函数。$(this).get(0)与$(this)[0]等价。
--------------------------------------------------------------------------------
Access a single matched DOM element at a specified index in the matched set.
This allows you to extract the actual DOM element and operate on it directly without necessarily using jQuery functionality on it. This function called as $(this).get(0) is the equivalent of using square bracket notation on the jQuery object itself like $(this)[0].
Element
index (Number) :取得第 index 个位置上的元素
HTML 代码:
<img src="test1.jpg"/> <img src="test2.jpg"/> 
jQuery 代码:
$("img").get(0); 
[ <img src="test1.jpg"/> ] index(subject)index(subject)
搜索与参数表示的对象匹配的元素，并返回相应元素的索引值值。
如果找到了匹配的元素，从0开始返回；如果没有找到匹配的元素，返回-1。
--------------------------------------------------------------------------------
Searches every matched element for the object and returns the index of the element, if found, starting with zero.
Returns -1 if the object wasn't found.
Number
subject (Element) : 要搜索的对象
返回ID值为foobar的元素的索引值值。 
HTML 代码:
<div id="foobar"><b></b><span id="foo"></span></div> 
jQuery 代码:
$("*").index($('#foobar')[0]) 
5 插件机制
jQuery.fn.extend(object)jQuery.fn.extend(object)
扩展 jQuery 元素集来提供新的方法（通常用来制作插件）。
查看这里Plugins/Authoring可以获取更多信息。
--------------------------------------------------------------------------------
Extends the jQuery element set to provide new methods (used to make a typical jQuery plugin).
Can be used to add functions into the to add plugin methods (plugins).
jQuery
object (Object) :用来扩充 jQuery 对象。 
增加两个插件方法。 
jQuery 代码:
jQuery.fn.extend({
  check: function() {
    return this.each(function() { this.checked = true; });
  uncheck: function() {
    return this.each(function() { this.checked = false; });
$("input[@type=checkbox]").check();
$("input[@type=radio]").uncheck(); jQuery.extend(object)jQuery.extend(object)
扩展jQuery对象本身。
用来在jQuery命名空间上增加新函数。 查看 'jQuery.fn.extend' 获取更多添加插件的信息。
--------------------------------------------------------------------------------
Extends the jQuery object itself.
Can be used to add functions into the jQuery namespace. See 'jQuery.fn.extend' for more information on using this method to add Plugins.
jQuery
object (Object) : 用以扩展 jQuery 对象
在jQuery命名空间上增加两个函数。 
jQuery 代码:
jQuery.extend({
  min: function(a, b) { return a < b ? a : b; },
  max: function(a, b) { return a > b ? a : b; }
jQuery.min(2,3); // => 2
jQuery.max(4,5); // => 5 多库共存
jQuery.noConflict()jQuery.noConflict()
运行这个函数将变量$的控制权让渡给第一个实现它的那个库。
这有助于确保jQuery不会与其他库的$对象发生冲突。在运行这个函数后，就只能使用jQuery变量访问jQuery对象。例如，在要用到$("div p")的地方，就必须换成jQuery("div p")。 
--------------------------------------------------------------------------------
Run this function to give control of the $ variable back to whichever library first implemented it.
This helps to make sure that jQuery doesn't conflict with the $ object of other libraries. By using this function, you will only be able to access jQuery using the 'jQuery' variable. For example, where you used to do $("div p"), you now must do jQuery("div p").
jQuery
将$引用的对象映射回原始的对象。 
jQuery 代码:
jQuery.noConflict();
// 使用 jQuery
jQuery("div p").hide();
// 使用其他库的 $()
$("content").style.display = 'none'; 
--------------------------------------------------------------------------------
恢复使用别名$，然后创建并执行一个函数，在这个函数的作用域中仍然将$作为jQuery的别名来使用。在这个函数中，原来的$对象是无效的。这个函数对于大多数不依赖于其他库的插件都十分有效。 
jQuery 代码:
jQuery.noConflict();
(function($) { 
  $(function() {
    // 使用 $ 作为 jQuery 别名的代码
})(jQuery);
// 其他用 $ 作为别名的库的代码 
--------------------------------------------------------------------------------
创建一个新的别名用以在接下来的库中使用jQuery对象。 
jQuery 代码:
var j = jQuery.noConflict();
// 基于 jQuery 的代码
j("div p").hide();
// 基于其他库的 $() 代码
$("content").style.display = 'none'; jQuery.noConflict(extreme)jQuery.noConflict(extreme)
将$和jQuery的控制权都交还给原来的库。用之前请考虑清楚!
这是相对于简单的 noConflict 方法更极端的版本，因为这将完全重新定义jQuery。这通常用于一种极端的情况，比如你想要将jQuery嵌入一个高度冲突的环境。注意:调用此方法后极有可能导致插件失效。
--------------------------------------------------------------------------------
Revert control of both the $ and jQuery variables to their original owners. Use with discretion.
This is a more-extreme version of the simple noConflict method, as this one will completely undo what jQuery has introduced. This is to be used in an extreme case where you'd like to embed jQuery into a high-conflict environment. NOTE: It's very likely that plugins won't work after this particular method has been called.
jQuery
extreme (Boolean) : 传入 true 来允许彻底将jQuery变量还原
完全将 jQuery 移到一个新的命名空间。 
jQuery 代码:
var dom = {};
dom.query = jQuery.noConflict(true); 
// 新 jQuery 的代码
dom.query("div p").hide();
// 另一个库 $() 的代码
$("content").style.display = 'none';
// 另一个版本 jQuery 的代码
jQuery("div > p").hide(); 选择器基本
#id#id
根据给定的ID匹配一个元素。
--------------------------------------------------------------------------------
Matches a single element with the given id attribute.
Element
id (String) : 用于搜索的，通过元素的 id 属性中给定的值
查找 ID 为"myDiv"的元素。 
HTML 代码:
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div> 
jQuery 代码:
$("#myDiv"); 
[ <div id="myDiv">id="myDiv"</div> ] elementelement
根据给定的元素名匹配所有元素
--------------------------------------------------------------------------------
Matches all elements with the given name.
Array<Element>
element (String) : 一个用于搜索的元素。指向 DOM 节点的标签名。
查找一个 DIV 元素。 
HTML 代码:
<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span> 
jQuery 代码:
$("div"); 
[ <div>DIV1</div>, <div>DIV2</div> ] .class.class
根据给定的类匹配元素。
--------------------------------------------------------------------------------
Matches all elements with the given class.
Array<Element>
class (String) : 一个用以搜索的类。一个元素可以有多个类，只要有一个符合就能被匹配到。
查找所有类是 "myClass" 的元素. 
HTML 代码:
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span> 
jQuery 代码:
$(".myClass"); 
[ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ] **
匹配所有元素
多用于结合上下文来搜索。
--------------------------------------------------------------------------------
Matches all elements.
Most useful when combined with a context to search in.
Array<Element>
找到每一个元素 
HTML 代码:
<div>DIV</div>
<span>SPAN</span>
<p>P</p> 
jQuery 代码:
$("*") 
[ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ] selector1,selector2,selectorNselector1,selector2,selectorN
将每一个选择器匹配到的元素合并后一起返回。
你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。
--------------------------------------------------------------------------------
Matches the combined results of all the specified selectors.
You can specify any number of selectors to combine into a single result.
Array<Element>
selector1 (Selector) : 一个有效的选择器
selector2 (Selector) : 另一个有效的选择器
selectorN (Selector) : (可选) 任意多个有效选择器
找到匹配任意一个类的元素。 
HTML 代码:
<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p> 
jQuery 代码:
$("div,span,p.myClass") 
[ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ] 层级
ancestor descendantancestor descendant
在给定的祖先元素下匹配所有的后代元素
--------------------------------------------------------------------------------
Matches all descendant elements specified by descendant of elements specified by ancestor.
Array<Element>
ancestor (Selector) : 任何有效选择器
descendant (Selector) : 用以匹配元素的选择器，并且它是第一个选择器的后代元素
找到表单中所有的 input 元素 
HTML 代码:
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" /> 
jQuery 代码:
$("form input") 
[ <input name="name" />, <input name="newsletter" /> ] parent > childparent > child
在给定的父元素下匹配所有的子元素
--------------------------------------------------------------------------------
Matches all child elements specified by child of elements specified by parent.
Array<Element>
parent (Selector) : 任何有效选择器
child (Selector) : 用以匹配元素的选择器，并且它是第一个选择器的子元素
匹配表单中所有的子级input元素。 
HTML 代码:
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" /> 
jQuery 代码:
$("form > input") 
[ <input name="name" /> ] prev + nextprev + next
匹配所有紧接在 prev 元素后的 next 元素
--------------------------------------------------------------------------------
Matches all next elements specified by next that are next to elements specified by prev.
Array<Element>
prev (Selector) : 任何有效选择器
next (Selector) :一个有效选择器并且紧接着第一个选择器
匹配所有跟在 label 后面的 input 元素 
HTML 代码:
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" /> 
jQuery 代码:
$("label + input") 
[ <input name="name" />, <input name="newsletter" /> ] prev ~ siblingsprev ~ siblings
匹配 prev 元素之后的所有 siblings 元素
--------------------------------------------------------------------------------
Matches all sibling elements after the "prev" element that match the filtering "siblings" selector.
Array<Element>
prev (Selector) : 任何有效选择器
siblings (Selector) : 一个选择器，并且它作为第一个选择器的同辈
找到所有与表单同辈的 input 元素 
HTML 代码:
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" /> 
jQuery 代码:
$("form ~ input") 
[ <input name="none" /> ] 简单
:first:first
匹配找到的第一个元素
--------------------------------------------------------------------------------
Matches the first selected element.
Element
查找表格的第一行 
HTML 代码:
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table> 
jQuery 代码:
$("tr:first") 
[ <tr><td>Header 1</td></tr> ] :last:last
匹配找到的最后一个元素
--------------------------------------------------------------------------------
Matches the last selected element.
Element
查找表格的最后一行 
HTML 代码:
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table> 
jQuery 代码:
$("tr:last") 
[ <tr><td>Value 2</td></tr> ] :not(selector):not(selector)
去除所有与给定选择器匹配的元素
--------------------------------------------------------------------------------
Removes all elements matching the given selector.
Array<Element>
selector (Selector) : 用于筛选的选择器
查找所有未选中的 input 元素 
HTML 代码:
<input name="apple" />
<input name="flower" checked="checked" /> 
jQuery 代码:
$("input:not(:checked)") 
[ <input name="apple" /> ] :even:even
匹配所有索引值为偶数的元素，从 0 开始计数
--------------------------------------------------------------------------------
Matches even elements, zero-indexed.
Array<Element>
查找表格的1、3、5...行（即索引值0、2、4...） 
HTML 代码:
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table> 
jQuery 代码:
$("tr:even") 
[ <tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr> ] :odd:odd
匹配所有索引值为奇数的元素，从 0 开始计数
--------------------------------------------------------------------------------
Matches odd elements, zero-indexed.
Array<Element>
查找表格的2、4、6行（即索引值1、3、5...） 
HTML 代码:
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table> 
jQuery 代码:
$("tr:odd") 
[ <tr><td>Value 1</td></tr> ] :eq(index):eq(index)
匹配一个给定索引值的元素
--------------------------------------------------------------------------------
Matches a single element by its index.
Element
index (Number) : 从 0 开始计数
查找第二行 
HTML 代码:
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table> 
jQuery 代码:
$("tr:eq(1)") 
[ <tr><td>Value 1</td></tr> ] :gt(index):gt(index)
匹配所有大于给定索引值的元素
--------------------------------------------------------------------------------
Matches all elements with an index above the given one.
Array<Element>
index (Number) : 从 0 开始计数
查找第二第三行，即索引值是1和2，也就是比0大 
HTML 代码:
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table> 
jQuery 代码:
$("tr:gt(0)") 
[ <tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr> ] :lt(index):lt(index)
匹配所有小于给定索引值的元素
--------------------------------------------------------------------------------
Matches all elements with an index below the given one.
Array<Element>
index (Number) : 从 0 开始计数
查找第一第二行，即索引值是0和1，也就是比2小 
HTML 代码:
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table> 
jQuery 代码:
$("tr:lt(2)") 
[ <tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr> ] :header:header
匹配如 h1, h2, h3之类的标题元素
--------------------------------------------------------------------------------
Matches all elements that are headers, like h1, h2, h3 and so on.
Array<Element>
给页面内所有标题加上背景色 
HTML 代码:
<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p> 
jQuery 代码:
$(":header").css("background", "#EEE"); 
[ <h1 style="background:#EEE;">Header 1</h1>, <h2 style="background:#EEE;">Header 2</h2> ] :animated:animated
匹配所有没有在执行动画效果中的元素
--------------------------------------------------------------------------------
Matches all elements that are currently being animated.
Array<Element>
只有对不在执行动画效果的元素执行一个动画特效 
HTML 代码:
<button id="run">Run</button><div></div> 
jQuery 代码:
$("#run").click(function(){
  $("div:not(:animated)").animate({ left: "+20" }, 1000);
}); 内容
:contains(text):contains(text)
匹配包含给定文本的元素
--------------------------------------------------------------------------------
Matches elements which contain the given text.
Array<Element>
text (String) : 一个用以查找的字符串
查找所有包含 "John" 的 div 元素 
HTML 代码:
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn 
jQuery 代码:
$("div:contains('John')") 
[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ] :empty:empty
匹配所有不包含子元素或者文本的空元素
--------------------------------------------------------------------------------
Matches all elements that are empty, be it elements or text.
Array<Element>
查找所有不包含子元素或者文本的空元素 
HTML 代码:
<table>
  <tr><td>Value 1</td><td></td></tr>
  <tr><td>Value 2</td><td></td></tr>
</table> 
jQuery 代码:
$("td:empty") 
[ <td></td>, <td></td> ] :has(selector):has(selector)
匹配含有选择器所匹配的元素的元素
--------------------------------------------------------------------------------
Matches elements which contain at least one element that matches the specified selector.
Array<Element>
selector (Selector) : 一个用于筛选的选择器
给所有包含 p 元素的 div 元素添加一个 text 类 
HTML 代码:
<div><p>Hello</p></div>
<div>Hello again!</div> 
jQuery 代码:
$("div:has(p)").addClass("test"); 
[ <div class="test"><p>Hello</p></div> ] :parent:parent
匹配含有子元素或者文本的元素
--------------------------------------------------------------------------------
Matches all elements that are parents - they have child elements, including text.
Array<Element>
查找所有含有子元素或者文本的 td 元素 
HTML 代码:
<table>
  <tr><td>Value 1</td><td></td></tr>
  <tr><td>Value 2</td><td></td></tr>
</table> 
jQuery 代码:
$("td:parent") 
[ <td>Value 1</td>, <td>Value 1</td> ] 可见性
:hidden:hidden
匹配所有的不可见元素，input 元素的 type 属性为 "hidden" 的话也会被匹配到
--------------------------------------------------------------------------------
Matches all elements that are hidden, or input elements of type "hidden".
Array<Element>
查找所有不可见的 tr 元素 
HTML 代码:
<table>
  <tr style=""><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table> 
jQuery 代码:
$("tr:hidden") 
[ <tr style=""><td>Value 1</td></tr> ] :visible:visible
匹配所有的可见元素
--------------------------------------------------------------------------------
Matches all elements that are visible.
Array<Element>
查找所有可见的 tr 元素 
HTML 代码:
<table>
  <tr style=""><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table> 
jQuery 代码:
$("tr:visible") 
[ <tr><td>Value 2</td></tr> ] 属性
[attribute][attribute]
匹配包含给定属性的元素
--------------------------------------------------------------------------------
Matches elements that have the specified attribute.
Array<Element>
attribute (String) : 属性名
查找所有含有 id 属性的 div 元素 
HTML 代码:
  <p>Hello!</p>
<div id="test2"></div> 
jQuery 代码:
$("div[id]") 
[ <div id="test2"></div> ] [attribute=value][attribute=value]
匹配给定的属性是某个特定值的元素
--------------------------------------------------------------------------------
Matches elements that have the specified attribute with a certain value.
Array<Element>
attribute (String) : 属性名
value (String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时，用以避免冲突。
查找所有 name 属性是 newsletter 的 input 元素 
HTML 代码:
'<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" /> 
jQuery 代码:
$("input[name='newsletter']").attr("checked", true); 
[ <input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />, <input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" /> ] [attribute!=value][attribute!=value]
匹配给定的属性是不包含某个特定值的元素
--------------------------------------------------------------------------------
Matches elements that don't have the specified attribute with a certain value.
Array<Element>
attribute (String) : 属性名
value (String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时，用以避免冲突。
查找所有 name 属性不是 newsletter 的 input 元素 
HTML 代码:
'<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" /> 
jQuery 代码:
$("input[name!='newsletter']").attr("checked", true); 
[ <input type="checkbox" name="accept" value="Evil Plans" checked="true" /> ] [attribute^=value][attribute^=value]
匹配给定的属性是以某些值开始的元素
--------------------------------------------------------------------------------
Matches elements that have the specified attribute and it starts with a certain value.
Array<Element>
attribute (String) : 属性名
value ( String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时，用以避免冲突。
查找所有 name 以 'news' 开始的 input 元素 
HTML 代码:
<input name="newsletter" />
<input name="milkman" />
<input name="newsboy" /> 
jQuery 代码:
$("input[name^='news']") 
[ <input name="newsletter" />, <input name="newsboy" /> ] [attribute$=value][attribute$=value]
匹配给定的属性是以某些值结尾的元素
--------------------------------------------------------------------------------
Matches elements that have the specified attribute and it ends with a certain value.
Array<Element>
attribute (String) : 属性名
value (String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时，用以避免冲突。
查找所有 name 以 'letter' 结尾的 input 元素 
HTML 代码:
<input name="newsletter" />
<input name="milkman" />
<input name="jobletter" /> 
jQuery 代码:
$("input[name$='letter']") 
[ <input name="newsletter" />, <input name="jobletter" /> ] [attribute*=value][attribute*=value]
匹配给定的属性是以包含某些值的元素
--------------------------------------------------------------------------------
Matches elements that have the specified attribute and it contains a certain value.
Array<Element>
attribute (String) : 属性名
value (String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时，用以避免冲突。
查找所有 name 包含 'man' 的 input 元素 
HTML 代码:
<input name="man-news" />
<input name="milkman" />
<input name="letterman2" />
<input name="newmilk" /> 
jQuery 代码:
$("input[name*='man']") 
[ <input name="man-news" />, <input name="milkman" />, <input name="letterman2" /> ] [selector1][selector2][selectorN][selector1][selector2][selectorN]
复合属性选择器，需要同时满足多个条件时使用。
--------------------------------------------------------------------------------
Matches elements that have the specified attribute and it contains a certain value.
Array<Element>
selector1 (Selector) : 属性选择器
selector2 (Selector) : 另一个属性选择器，用以进一步缩小范围
selectorN (Selector) : 任意多个属性选择器
找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的 
HTML 代码:
<input id="man-news" name="man-news" />
<input name="milkman" />
<input id="letterman" name="new-letterman" />
<input name="newmilk" /> 
jQuery 代码:
$("input[id][name$='man']") 
[ <input id="letterman" name="new-letterman" /> ] 子元素
:nth-child(index/even/odd/equation):nth-child(index/even/odd/equation)
匹配其父元素下的第N个子或奇偶元素
':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！ 
可以使用:
nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(2)
:nth-child(3n+1)
:nth-child(3n+2)
--------------------------------------------------------------------------------
Matches the nth-child of its parent.
While ':eq(index)' matches only a single element, this matches more then one: One for each parent. The specified index is one-indexed, in contrast to :eq() which starst at zero.
Array<Element>
index (Number) : 要匹配元素的序号，从1开始
在每个 ul 查找第 2 个li 
HTML 代码:
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
jQuery 代码:
$("ul li:nth-child(2)") 
[ <li>Karl</li>,   <li>Tane</li> ] :first-child:first-child
匹配第一个子元素
':first' 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素
--------------------------------------------------------------------------------
Matches the first child of its parent.
While ':first' matches only a single element, this matches more then one: One for each parent.
Array<Element>
在每个 ul 中查找第一个 li 
HTML 代码:
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
jQuery 代码:
$("ul li:first-child") 
[ <li>John</li>, <li>Glen</li> ] :last-child:last-child
匹配最后一个子元素
':last'只匹配一个元素，而此选择符将为每个父元素匹配一个子元素
--------------------------------------------------------------------------------
Matches the last child of its parent.
While ':last' matches only a single element, this matches more then one: One for each parent.
Array<Element>
在每个 ul 中查找最后一个 li 
HTML 代码:
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
jQuery 代码:
$("ul li:last-child") 
[ <li>Brandon</li>, <li>Ralph</li> ] :only-child:only-child
如果某个元素是父元素中唯一的子元素，那将会被匹配
如果父元素中含有其他元素，那将不会被匹配。
--------------------------------------------------------------------------------
Matches the only child of its parent.
If the parent has other child elements, nothing is matched.
Array<Element>
在 ul 中查找是唯一子元素的 li 
HTML 代码:
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
  <li>Glen</li> 
jQuery 代码:
$("ul li:only-child") 
[ <li>Glen</li> ] 表单
:input:input
匹配所有 input, textarea, select 和 button 元素
--------------------------------------------------------------------------------
Matches all input, textarea, select and button elements.
Array<Element>
查找所有的input元素 
HTML 代码:
  <input type="text" />
  <input type="checkbox" />
  <input type="radio" />
  <input type="image" />
  <input type="file" />
  <input type="submit" />
  <input type="reset" />
  <input type="password" />
  <input type="button" />
  <select><option/></select>
  <textarea></textarea>
  <button></button>
</form> 
jQuery 代码:
$(":input") 
[ <input type="text" />, <input type="checkbox" />, <input type="radio" />, <input type="image" />, <input type="file" />, <input type="submit" />, <input type="reset" />, <input type="password" />, <input type="button" /> ] :text:text
匹配所有的单行文本框
--------------------------------------------------------------------------------
Matches all input elements of type text.
Array<Element>
查找所有文本框 
HTML 代码:
  <input type="text" />
  <input type="checkbox" />
  <input type="radio" />
  <input type="image" />
  <input type="file" />
  <input type="submit" />
  <input type="reset" />
  <input type="password" />
  <input type="button" />
  <select><option/></select>
  <textarea></textarea>
  <button></button>
</form> 
jQuery 代码:
$(":text") 
[ <input type="text" /> ] :password:password
匹配所有密码框
--------------------------------------------------------------------------------
Matches all input elements of type password.
Array<Element>
查找所有密码框 
HTML 代码:
  <input type="text" />
  <input type="checkbox" />
  <input type="radio" />
  <input type="image" />
  <input type="file" />
  <input type="submit" />
  <input type="reset" />
  <input type="password" />
  <input type="button" />
  <select><option/></select>
  <textarea></textarea>
  <button></button>
</form> 
jQuery 代码:
$(":password") 
[ <input type="password" /> ] :radio:radio
匹配所有单选按钮
--------------------------------------------------------------------------------
Matches all input elements of type radio.
Array<Element>
查找所有单选按钮 
HTML 代码:
  <input type="text" />
  <input type="checkbox" />
  <input type="radio" />
  <input type="image" />
  <input type="file" />
  <input type="submit" />
  <input type="reset" />
  <input type="password" />
  <input type="button" />
  <select><option/></select>
  <textarea></textarea>
  <button></button>
</form> 
jQuery 代码:
$(":radio") 
[ <input type="radio" /> ] :checkbox:checkbox
匹配所有复选框
--------------------------------------------------------------------------------
Matches all input elements of type checkbox.
Array<Element>
查找所有复选框 
HTML 代码:
  <input type="text" />
  <input type="checkbox" />
  <input type="radio" />
  <input type="image" />
  <input type="file" />
  <input type="submit" />
  <input type="reset" />
  <input type="password" />
  <input type="button" />
  <select><option/></select>
  <textarea></textarea>
  <button></button>
</form> 
jQuery 代码:
$(":checkbox") 
[ <input type="checkbox" /> ] :submit:submit
匹配所有提交按钮
--------------------------------------------------------------------------------
Matches all input elements of type submit.
Array<Element>
查找所有提交按钮 
HTML 代码:
  <input type="text" />
  <input type="checkbox" />
  <input type="radio" />
  <input type="image" />
  <input type="file" />
  <input type="submit" />
  <input type="reset" />
  <input type="password" />
  <input type="button" />
  <select><option/></select>
  <textarea></textarea>
  <button></button>
</form> 
jQuery 代码:
$(":submit") 
[ <input type="submit" /> ] :image:image
匹配所有图像域
--------------------------------------------------------------------------------
Matches all input elements of type image.
Array<Element>
匹配所有图像域 
HTML 代码:
  <input type="text" />
  <input type="checkbox" />
  <input type="radio" />
  <input type="image" />
  <input type="file" />
  <input type="submit" />
  <input type="reset" />
  <input type="password" />
  <input type="button" />
  <select><option/></select>
  <textarea></textarea>
  <button></button>
</form> 
jQuery 代码:
$(":image") 
[ <input type="image" /> ] :reset:reset
匹配所有重置按钮
--------------------------------------------------------------------------------
Matches all input elements of type reset.
Array<Element>
查找所有重置按钮 
HTML 代码:
  <input type="text" />
  <input type="checkbox" />
  <input type="radio" />
  <input type="image" />
  <input type="file" />
  <input type="submit" />
  <input type="reset" />
  <input type="password" />
  <input type="button" />
  <select><option/></select>
  <textarea></textarea>
  <button></button>
</form> 
jQuery 代码:
$(":reset") 
[ <input type="reset" /> ] :button:button
匹配所有按钮
--------------------------------------------------------------------------------
Matches all input elements of type button.
Array<Element>
查找所有按钮. 
HTML 代码:
  <input type="text" />
  <input type="checkbox" />
  <input type="radio" />
  <input type="image" />
  <input type="file" />
  <input type="submit" />
  <input type="reset" />
  <input type="password" />
  <input type="button" />
  <select><option/></select>
  <textarea></textarea>
  <button></button>
</form> 
jQuery 代码:
$(":button") 
[ <input type="button" />,<button></button> ] :file:file
匹配所有文件域
--------------------------------------------------------------------------------
Matches all input elements of type file.
Array<Element>
查找所有文件域 
HTML 代码:
  <input type="text" />
  <input type="checkbox" />
  <input type="radio" />
  <input type="image" />
  <input type="file" />
  <input type="submit" />
  <input type="reset" />
  <input type="password" />
  <input type="button" />
  <select><option/></select>
  <textarea></textarea>
  <button></button>
</form> 
jQuery 代码:
$(":file") 
[ <input type="file" /> ] :hidden:hidden
匹配所有不可见元素，或者type为hidden的元素
--------------------------------------------------------------------------------
Matches all elements that are hidden, or input elements of type "hidden".
Array<Element>
查找隐藏的 tr 
HTML 代码:
<table>
  <tr style=""><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table> 
jQuery 代码:
$("tr:hidden") 
[ <tr style=""><td>Value 1</td></tr> ] 
--------------------------------------------------------------------------------
匹配type为hidden的元素 
HTML 代码:
  <input type="text" name="email" />
  <input type="hidden" name="id" />
</form> 
jQuery 代码:
$("input:hidden") 
[ <input type="hidden" name="id" /> ] 表单对象属性
:enabled:enabled
匹配所有可用元素
--------------------------------------------------------------------------------
Matches all elements that are enabled.
Array<Element>
查找所有可用的input元素 
HTML 代码:
  <input name="email" disabled="disabled" />
  <input name="id" />
</form> 
jQuery 代码:
$("input:enabled") 
[ <input name="id" /> ] :disabled:disabled
匹配所有不可用元素
--------------------------------------------------------------------------------
Matches all elements that are disabled.
Array<Element>
查找所有不可用的input元素 
HTML 代码:
  <input name="email" disabled="disabled" />
  <input name="id" />
</form> 
jQuery 代码:
$("input:disabled") 
[ <input name="email" disabled="disabled" /> ] :checked:checked
匹配所有选中的复选框元素
--------------------------------------------------------------------------------
Matches all elements that are checked.
Array<Element>
查找所有选中的复选框元素 
HTML 代码:
  <input type="checkbox" name="newsletter" checked="checked" value="Daily" />
  <input type="checkbox" name="newsletter" value="Weekly" />
  <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
</form> 
jQuery 代码:
$("input:checked") 
[ <input type="checkbox" name="newsletter" checked="checked" value="Daily" />, <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> ] :selected:selected
匹配所有选中的选项元素
--------------------------------------------------------------------------------
Matches all elements that are selected.
Array<Element>
查找所有选中的选项元素 
HTML 代码:
<select>
  <option value="1">Flowers</option>
  <option value="2" selected="selected">Gardens</option>
  <option value="3">Trees</option>
</select> 
jQuery 代码:
$("select option:selected") 
[ <option value="2" selected="selected">Gardens</option> ] 
--------------------------------------------------------------------------------
Finds all option elements that are selected. 
HTML 代码:
<select multiple="multiple">
  <option value="1">Flowers</option>
  <option value="2" selected="selected">Gardens</option>
  <option value="3" selected="selected">Trees</option>
</select> 
jQuery 代码:
$("select option:selected") 
[ <option value="2" selected="selected">Gardens</option>, <option value="3" selected="selected">Trees</option> ] 属性属性
attr(name)attr(name)
取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined 。
--------------------------------------------------------------------------------
Access a property on the first matched element. This method makes it easy to retrieve a property value from the first matched element. If the element does not have an attribute with such a name, undefined is returned.
Object
name (String) : 属性名称
返回文档中第一个图像的src属性值。 
HTML 代码:
<img src="test.jpg"/> 
jQuery 代码:
$("img").attr("src"); 
test.jpg attr(properties)attr(properties)
将一个“名/值”形式的对象设置为所有匹配元素的属性。
这是一种在所有匹配元素中批量设置很多属性的最佳方式。 注意，如果你要设置对象的class属性，你必须使用'className' 作为属性名。或者你可以直接使用.addClass( class ) 和 .removeClass( class ).
--------------------------------------------------------------------------------
Set a key/value object as properties to all matched elements.
This serves as the best way to set a large number of properties on all matched elements. Note that you must use 'className' as key if you want to set the class-Attribute. Or use .addClass( class ) or .removeClass( class ).
jQuery
properties (Map) : 作为属性的“名/值对”对象
为所有图像设置src和alt属性。 
HTML 代码:
jQuery 代码:
$("img").attr({ src: "test.jpg", alt: "Test Image" }); 
[ <img src= "test.jpg"  alt:="Test Image" /> ] 
--------------------------------------------------------------------------------
attr(key,value)attr(key,value)
为所有匹配的元素设置一个属性值。
--------------------------------------------------------------------------------
Set a single property to a value, on all matched elements.
jQuery
key (String) : 属性名称
value (Object) : 属性值
为所有图像设置src属性。 
HTML 代码:
jQuery 代码:
$("img").attr("src","test.jpg"); 
[ <img src= "test.jpg" /> , <img src= "test.jpg" /> ] attr(key,fn)attr(key,fn)
为所有匹配的元素设置一个计算的属性值。
不提供值，而是提供一个函数，由这个函数计算的值作为属性值。
--------------------------------------------------------------------------------
Set a single property to a computed value, on all matched elements.
Instead of supplying a string value as described 'above', a function is provided that computes the value.
jQuery
key (String) : 属性名称
fn (Function) : 返回值的函数 范围:当前元素, 参数: 当前元素的索引值
把src属性的值设置为title属性的值。 
HTML 代码:
<img src="test.jpg"/> 
jQuery 代码:
$("img").attr("title", function() { return this.src }); 
<img src="test.jpg" title="test.jpg" /> removeAttr(name)removeAttr(name)
从每一个匹配的元素中删除一个属性
--------------------------------------------------------------------------------
Remove an attribute from each of the matched elements.
jQuery
name (String) : 要删除的属性名
将文档中图像的src属性删除 
HTML 代码:
<img src="test.jpg"/> 
jQuery 代码:
$("img").removeAttr("src"); 
[ <img /> ] 类
addClass(class)addClass(class)
为每个匹配的元素添加指定的类名。
--------------------------------------------------------------------------------
Adds the specified class(es) to each of the set of matched elements.
jQuery
class (String) : 一个或多个要添加到元素中的CSS类名，请用空格分开
为匹配的元素加上 'selected' 类 
HTML 代码:
<p>Hello</p> 
jQuery 代码:
$("p").addClass("selected"); 
[ <p class="selected">Hello</p> ] 
--------------------------------------------------------------------------------
为匹配的元素加上 selected highlight 类 
HTML 代码:
<p>Hello</p> 
jQuery 代码:
$("p").addClass("selected highlight"); 
[ <p class="selected highlight">Hello</p> ] removeClass(class)removeClass(class)
从所有匹配的元素中删除全部或者指定的类。
--------------------------------------------------------------------------------
Removes all or the specified class(es) from the set of matched elements.
jQuery
class (String) : (可选) 一个或多个要删除的CSS类名，请用空格分开
从匹配的元素中删除 'selected' 类 
HTML 代码:
<p class="selected first">Hello</p> 
jQuery 代码:
$("p").removeClass("selected"); 
[ <p>Hello</p> ] 
--------------------------------------------------------------------------------
删除匹配元素的所有类 
HTML 代码:
<p class="selected first">Hello</p> 
jQuery 代码:
$("p").removeClass(); 
[ <p>Hello</p> ] toggleClass(class)toggleClass(class)
如果存在（不存在）就删除（添加）一个类。
--------------------------------------------------------------------------------
Adds the specified class if it is not present, removes the specified class if it is present.
jQuery
class (String) :CSS类名
为匹配的元素切换 'selected' 类 
HTML 代码:
<p>Hello</p><p class="selected">Hello Again</p> 
jQuery 代码:
$("p").toggleClass("selected"); 
[ <p class="selected">Hello</p>, <p>Hello Again</p> ] Html代码
html()html()
取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
--------------------------------------------------------------------------------
Get the html contents of the first matched element. This property is not available on XML documents (although it will work for XHTML documents).
String
HTML 代码:
<div><p>Hello</p></div> 
jQuery 代码:
$("div").html(); 
Hello html(val)html(val)
设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
--------------------------------------------------------------------------------
Set the html contents of every matched element. This property is not available on XML documents (although it will work for XHTML documents).
jQuery
val (String) : 用于设定HTML内容的值
HTML 代码:
<div></div> 
jQuery 代码:
$("div").html("<p>Hello Again</p>"); 
[ <div><p>Hello Again</p></div> ] 文本
text()text()
取得所有匹配元素的内容。
结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
--------------------------------------------------------------------------------
Get the text contents of all matched elements.
The result is a string that contains the combined text contents of all matched elements. This method works on both HTML and XML documents.
String
HTML 代码:
<p><b>Test</b> Paragraph.</p><p>Paraparagraph</p> 
jQuery 代码:
$("p").text(); 
Test Paragraph.Paraparagraph text(val)text(val)
设置所有匹配元素的文本内容
与 html() 类似, 但将编码 HTML (将 "<" 和 ">" 替换成相应的HTML实体).
--------------------------------------------------------------------------------
Set the text contents of all matched elements.
Similar to html(), but escapes HTML (replace "<" and ">" with their HTML entities).
jQuery
val (String) : 用于设置元素内容的文本
HTML 代码:
<p>Test Paragraph.</p> 
jQuery 代码:
$("p").text("<b>Some</b> new text."); 
[ <p><b>Some</b> new text.</p> ] 值
val()val()
获得第一个匹配元素的当前值。
在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选，将返回一个数组，其包含所选的值。
--------------------------------------------------------------------------------
Get the content of the value attribute of the first matched element.
In jQuery 1.2, a value is now returned for all elements, including selects. For multiple selects an array of values is returned. 
String,Array
获得单个select的值和多选select的值。 
HTML 代码:
<p></p><br/>
<select id="single">
  <option>Single</option>
  <option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
  <option selected="selected">Multiple</option>
  <option>Multiple2</option>
  <option selected="selected">Multiple3</option>
</select> 
jQuery 代码:
$("p").append(
  "<b>Single:</b> "   + $("#single").val() +
  " <b>Multiple:</b> " + $("#multiple").val().join(", ")
[ <p><b>Single:</b>Single<b>Multiple:</b>Multiple, Multiple3</p>] 
--------------------------------------------------------------------------------
获取文本框中的值 
HTML 代码:
<input type="text" value="some text"/> 
jQuery 代码:
$("input").val(); 
some text val(val)val(val)
设置每一个匹配元素的值。
在 jQuery 1.2, 这也可以为select元件赋值
--------------------------------------------------------------------------------
Set the value attribute of every matched element.
In jQuery 1.2, this is also able to set the value of select elements, but selecting the appropriate options.
jQuery
val (String) : 要设置的值。
设定文本框的值 
HTML 代码:
<input type="text"/> 
jQuery 代码:
$("input").val("hello world!"); val(val)val(val)
check,select,radio等都能使用为之赋值
jQuery
val (Array<String>) : 用于 check/select 的值
设定一个select和一个多选的select的值 
HTML 代码:
<select id="single">
  <option>Single</option>
  <option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
  <option selected="selected">Multiple</option>
  <option>Multiple2</option>
  <option selected="selected">Multiple3</option>
</select><br/>
<input type="checkbox" value="check1"/> check1
<input type="checkbox" value="check2"/> check2
<input type="radio" value="radio1"/> radio1
<input type="radio" value="radio2"/> radio2 
jQuery 代码:
$("#single").val("Single2");
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check2", "radio1"]);
eq(index)eq(index)
获取第N个元素
这个元素的位置是从0算起。
--------------------------------------------------------------------------------
Reduce the set of matched elements to a single element.
The position of the element in the set of matched elements starts at 0 and goes to length - 1.
jQuery
index (Integer) :元素在jQuery对象中的索引
获取匹配的第二个元素 
HTML 代码:
<p> This is just a test.</p> <p> So is this</p> 
jQuery 代码:
$("p").eq(1) 
[ <p> So is this</p> ] hasClass(class)hasClass(class)
检查当前的元素是否含有某个特定的类，如果有，则返回true。
这其实就是 is("." + class)。
--------------------------------------------------------------------------------
Checks the current selection against a class and returns true, if at least one element of the selection has the given class.
This is an alternative to is("." + class).
Boolean
class (String) : 用于匹配的类名
给包含有某个类的元素进行一个动画。 
HTML 代码:
<div class="protected"></div><div></div> 
jQuery 代码:
$("div").click(function(){
  if ( $(this).hasClass("protected") )
    $(this)
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: 0 });
}); filter(expr)filter(expr)
筛选出与指定表达式匹配的元素集合。
这个方法用于缩小匹配的范围。用逗号分隔多个表达式
--------------------------------------------------------------------------------
Removes all elements from the set of matched elements that do not match the specified expression(s).
This method is used to narrow down the results of a search. Provide a comma-separated list of expressions to apply multiple filters at once.
jQuery
expr (Expression) : 表达式
保留带有select类的元素 
HTML 代码:
<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p> 
jQuery 代码:
$("p").filter(".selected") 
[ <p class="selected">And Again</p> ] 
--------------------------------------------------------------------------------
保留第一个以及带有select类的元素 
HTML 代码:
<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p> 
jQuery 代码:
$("p").filter(".selected, :first") 
[ <p>Hello</p>, <p class="selected">And Again</p> ] filter(fn)filter(fn)
筛选出与指定函数返回值匹配的元素集合
这个函数内部将对每个对象计算一次 (正如 '$.each'). 如果调用的函数返回false则这个元素被删除，否则就会保留。
--------------------------------------------------------------------------------
Removes all elements from the set of matched elements that does not match the specified function.
The function is called with a context equal to the current element (just like '$.each'). If the function returns false, then the element is removed - anything else and the element is kept.
jQuery
fn (Function) : 传递进filter的函数
保留子元素中不含有ol的元素。 
HTML 代码:
<p><ol><li>Hello</li></ol></p><p>How are you?</p> 
jQuery 代码:
$("p").filter(function(index) {
  return $("ol", this).length == 0;
[ <p>How are you?</p> ] is(expr)is(expr)
用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。
如果没有元素符合，或者表达式无效，都返回'false'. 'filter' 内部实际也是在调用这个函数，所以，filter()函数原有的规则在这里也适用。
--------------------------------------------------------------------------------
Checks the current selection against an expression and returns true, if at least one element of the selection fits the given expression.
If no element fits, or the expression is not valid, then the response will be 'false'. 'filter' is used internally, therefore all rules that apply there apply here, as well.
Boolean
expr (String) :用于筛选的表达式
由于input元素的父元素是一个表单元素，所以返回true。 
HTML 代码:
<form><input type="checkbox" /></form> 
jQuery 代码:
$("input[type='checkbox']").parent().is("form") 
true map(callback)map(callback)
将一组元素转换成其他数组（不论是否是元素数组）
你可以用这个函数来建立一个列表，不论是值、属性还是CSS样式，或者其他特别形式。这都可以用'$.map()'来方便的建立。
--------------------------------------------------------------------------------
Translate a set of elements into another set of values (which may, or may not, be elements).
You could use this to build lists of values, attributes, css values - or even perform special, custom, selector transformations. This is provided as a convenience method for using '$.map()'.
jQuery
callback (Function) : 给每个元素执行的函数
把form中的每




    

&lt;el-button type="success" plain size="mini" autofocus="true" @click="countCollum('countele')"&gt;充电电量&lt;/el-button&gt;
&lt;el-button type="success" plain size="mini" @clic
				vue 不使用el-tab而是使用el-button实现点击按钮 按钮是选中状态列表内容进行切换
例子如下：
注意第一个el-button有id 意即这个button是默认选中的
<div class="zls-page-title">
   <el-button
     type="primary"
     plain
     id="zls-button-active"
     @click="checkByDocAuthority('all')"
给<el></el>标签加上这个属性
<el class=el-menu-vertical open=handleOpen close=handleClose theme=dark default-openeds=openeds>
openeds需要在data里面定义一下
openeds是一个数组（当前打开的sub-menu的 key 数组）
data () {
 retur
				方法有很多		JS-CSS 如果有用elementUI或者其他UI等等等,还有内置的方法!但有一个简单且万能的办法
<el-button ID="areaButton" autofocus  @click="areaMethod">行政区</el-button>
满足需求:默认选中行政区按钮,点击月份按钮,行政区按钮失去焦点!
UI内嵌方法
这种办法不能满足需求,所以才一直想办法,找到上述万能办法
需求:默认选中行政区按钮,点击月份按钮,行政区按钮失去焦点
实际:默认选中
// main.js
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
demo功能概览
  默认没有全选，搜索时支持全选与取消全选，
  将选择的数据添加到已选中，已选删除时改变当前搜索列表的状态与全选按钮的状态
  全选时全部追加到已选，取消全选时从已选中删除当前搜索的列表
1、搜索时展示相应的数据
document 对象
--------------------------------------------------------------------------------
代表给定浏览器窗口中的 HTML 文档。
下面的表格列出了 document 对象引出的成员。请单击左侧的标签来选择你想要查看的成员类型。
SHOW: 
 属性 描述 
activeElement 获取当父 document 拥有焦点时获得焦点的对象。 
alinkColor 设置或获取元素中所有激活链接的颜色。 
bgColor 不赞成。设置或获取表明对象后面的背景颜色的值。 
charset 设置或获取用于解码对象的字符集。 
cookie 设置或获取 cookie 的字符串值。 
defaultCharset 从当前的区域语言中获取默认字符集。 
designMode 设置或获取表明文档是否可被编辑的值。 
dir 设置或获取表明对象的阅读顺序的值。 
doctype 获取与当前文档关联的文档类型声明。 
documentElement 获取对文档根结点的引用。 
domain 设置或获取文档的安全域名。 
expando 设置或获取表明是否可对象内创建任意变量的值。 
fgColor 设置或获取文档的前景(文本)颜色。 
fileCreatedDate 获取文件创建的日期。 
fileModifiedDate 获取文件上次修改的日期。 
fileSize 获取文件大小。 
implementation 获取当前文档的 implementation 对象。 
lastModified 获取页面上次修改的日期，若页面提供的话。 
linkColor 设置或获取对象文档链接的颜色。 
parentWindow 获取容器对象所在窗口的引用。 
protocol 设置或获取 URL 的协议部分。 
readyState 获取表明对象当前状态的值。 
referrer 获取将用户引入当前页面的位置 URL。 
uniqueID 获取为对象自动生成的唯一标识符。 
URL 设置或获取当前文档的 URL。 
URLUnencoded 获取文档的 URL，去除所有字符编码。 
vlinkColor 设置或获取用户已访问过的链接颜色。 
XMLDocument 获取对由对象引出的的 XML 文档对象模型(DOM)的引用。 
XSLDocument 获取对 XSL 文档的顶层结点的引用。 
all 返回对象所包含的元素集合的引用。 
anchors 获取所有带有 name 和/或 id 属性的 a 对象的集合。此集合中的对象以 HTML 源顺序排列。 
applets 获取文档中所有 applet 对象的集合。 
childNodes 获取作为指定对象直接后代的 HTML 元素和 TextNode 对象的集合。 
embeds 获取文档中所有 embed 对象的集合。 
forms 获取以源顺序排列的文档中所有 form 对象的集合。 
frames 获取给定文档定义或与给定窗口关联的文档定义的所有 window 对象的集合。 
images 获取以源顺序排列的文档中所有 img 对象的集合。 
links 获取文档中所有指定了 HREF 属性的 a 对象和所有 area 对象的集合。 
namespaces 获取 namespace 对象的集合。 
scripts 获取文档中所有 script 对象的集合。 
styleSheets 获取代表与文档中每个 link 或 style 对象的实例相对应的样式表的 styleSheet 对象的集合。 
事件 描述 
onactivate 当对象设置为活动元素时触发。 
onbeforeactivate 对象要被设置为当前元素前立即触发。 
onbeforecut 当选中区从文档中删除之前在源对象触发。 
onbeforedeactivate 在 activeElement 从当前对象变为父文档其它对象之前立即触发。 
onbeforeeditfocus 在包含于可编辑元素内的对象进入用户界面激活状态前或可编辑容器变成控件选中区前触发。 
onbeforepaste 在选中区从系统剪贴板粘贴到文档前在目标对象上触发。 
onclick 在用户用鼠标左键单击对象时触发。 
oncontextmenu 在用户使用鼠标右键单击客户区打开上下文菜单时触发。 
oncontrolselect 当用户将要对该对象制作一个控件选中区时触发。 
oncut 当对象或选中区从文档中删除并添加到系统剪贴板上时在源元素上触发。 
ondblclick 当用户双击对象时触发。 
ondeactivate 当 activeElement 从当前对象变为父文档其它对象时触发。 
ondrag 当进行拖曳操作时在源对象上持续触发。 
ondragend 当用户在拖曳操作结束后释放鼠标时在源对象上触发。 
ondragenter 当用户拖曳对象到一个合法拖曳目标时在目标元素上触发。 
ondragleave 当用户在拖曳操作过程中将鼠标移出合法拖曳目标时在目标对象上触发。 
ondragover 当用户拖曳对象划过合法拖曳目标时持续在目标元素上触发。 
ondragstart 当用户开始拖曳文本选中区或选中对象时在源对象上触发。 
ondrop 当鼠标按钮在拖曳操作过程中释放时在目标对象上触发。 
onfocusin 当元素将要被设置为焦点之前触发。 
onfocusout 在移动焦点到其它元素之后立即触发于当前拥有焦点的元素上触发。 
onhelp 当用户在浏览器为当前窗口时按 F1 键时触发。 
onkeydown 当用户按下键盘按键时触发。 
onkeypress 当用户按下字面键时触发。 
onkeyup 当用户释放键盘按键时触发。 
onmousedown 当用户用任何鼠标按钮单击对象时触发。 
onmousemove 当用户将鼠标划过对象时触发。 
onmouseout 当用户将鼠标指针移出对象边界时触发。 
onmouseover 当用户将鼠标指针移动到对象内时触发。 
onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。 
onmousewheel 当鼠标滚轮按钮旋转时触发。 
onmove 当对象移动时触发。 
onmoveend 当对象停止移动时触发。 
onmovestart 当对象开始移动时触发。 
onpaste 当用户粘贴数据以便从系统剪贴板向文档传送数据时在目标对象上触发。 
onpropertychange 当在对象上发生对象上发生属性更改时触发。 
onreadystatechange 当对象状态变更时触发。 
onresizeend 当用户更改完控件选中区中对象的尺寸时触发。 
onresizestart 当用户开始更改控件选中区中对象的尺寸时触发。 
onselectionchange 当文档的选中状态改变时触发。 
onstop 当用户单击停止按钮或离开 Web 页面时触发。 
方法 描述 
attachEvent 将指定函数绑定到事件，以便每当该事件在对象上触发时都调用该函数。 
clear 目前尚未支持。 
close 关闭输出流并强制将数据发送到显示。 
createAttribute 以指定名称创建 attribute 对象。 
createComment 以指定数据创建 comment 对象。 
createDocumentFragment 创建一个新文档。 
createElement 为指定标签创建一个元素的实例。 
createEventObject 生成当使用 fireEvent 方法时用于传递事件相关信息的 event 对象。 
createStyleSheet 为文档创建样式表。 
createTextNode 从指定值中创建文本字符串。 
detachEvent 从事件中取消指定函数的绑定，这样当事件触发时函数就不会收到通知了。 
elementFromPoint 返回指定 x 和 y 坐标的元素。 
execCommand 在当前文档、当前选中区或给定范围上执行命令。 
focus 使得元素得到焦点并执行由 onfocus 事件指定的代码。 
getElementById 获取对 ID 标签属性为指定值的第一个对象的引用。 
getElementsByName 根据 NAME 标签属性的值获取对象的集合。 
getElementsByTagName 获取基于指定元素名称的对象集合。 
hasFocus 获取表明对象目前是否拥有焦点的值。 
mergeAttributes 复制所有读/写标签属性到指定元素。 
open 此方法以两种方式工作。该方法打开一个文档用于收集 write 和 writeln 方法的输出。在这种情况下，只使用前两个参数 url 和 name。若指定了附加参数，此方法将打开一个窗口，这与 window 对象的 window.open 方法相同。 
queryCommandEnabled 返回表明指定命令是否可于给定文档当前状态下使用 execCommand 命令成功执行的 Boolean 值。 
queryCommandIndeterm 返回表明指定命令是否处于模糊状态的 Boolean 值。 
queryCommandState 返回表明命令当前状态的 Boolean 值。 
queryCommandSupported 返回表明当前命令是否在当前区域上支持的 Boolean 值。 
queryCommandValue 返回文档、范围或当前选中区对于给定命令的当前值。 
recalc 重新计算当前文档中的全部动态属性。 
releaseCapture 释放当前文档中对象的鼠标捕捉。 
setActive 设置对象为当前对象而不将对象置为焦点。 
write 在指定窗口的文档中写入一个或多个 HTML 表达式。 
writeln 在指定窗口的文档中写入一个或多个 HTML 表达式，后面追加一个换行符。 
元素 对象 描述 
BODY body 指定文档主体的开始和结束。 
 implementation 包含了关于对象支持的模块信息。 
 location 包含关于当前 URL 的信息。 
 selection 代表了当前激活选中区，即高亮文本块，和/或文当中用户可执行某些操作的其它元素。 
TITLE title 包含文档的标题。 
样式属性 描述 
compatMode 设置或获取表明此对象是否应用标准兼容模式的值。 
此对象在 Microsoft® Internet Explorer 3.0 的脚本中可用。
使用 document 对象可以对 HTML 文档进行检查、修改或添加内容，并处理该文档内部的事件。在 Web 页面上，document 对象可通过 window 对象的 document 属性引用，或者直接引用。
document 对象在主文档的任意时间均可用，但是对于目前正在轻便动态 HTML(DHTML) 行为中使用的 HTML 组件(HTC)来说却不可用。这是因为轻便的行为仅当在 HTC 文件中不使用 document 对象时才可被定义。结果将使得轻便的行为比常规行为运行更加快速和有效率。但是，轻便的 DHTML 行为可以与常规的 DHTML 行为一样的方法访问主文档的 document 对象。
ondocumentready 事件将通知 DHTML 行为包含该行为的主 Web 页面的 document 对象可用。只要 ondocumentready 被触发，行为就可以开始处理主 document 属性。
行为中的脚本可以在 HTC 或主文档中引用 document 对象。如果要在 HTC 文件中编码脚本，应使用 element.document 来引用主文档的 document 对象。
下面的例子使用了 document 对象检查文档标题并在消息框中显示该标题(如果非空)。
if (document.title!="")
alert("标题为 " + document.title)
下面的例子演示了在浏览器的状态栏上显示鼠标当前位置的事件句柄函数，所得位置相对于文档的左上角。
SHOWExample
<HEAD><TITLE>报告鼠标移动</TITLE>
<SCRIPT LANGUAGE="JScript">
function reportMove()
window.status = "X=" + window.event.x + " Y=" + window.event.y;
</SCRIPT>
<BODY onmousemove="reportMove()">
<H1>欢迎!</H1>
</BODY>
</HTML>
没有应用于此对象的公共标准。
[ 对象名称 ] 
平台 版本 
Win32:  
Unix:  
Win16:  
WinCE:  
版本数据当鼠标指向链接或链接获得焦点时在此列出。 
 CUSTOM, window 
将鼠标光标移动到应用到清单中的元素即可显示关于列出平台的可用信息。
在用户使用过程中提出一键导入的功能，需求如下:点击导入按钮显示提示框，然后是单选框以及上传按钮。pc端常使用element-ui组件，但是这个项目是vue1的老项目，并且没有element-ui组件。所以需要自己动手实现单选功能和上传功能。
radio 属性及方法
name： 用于定义同一类型的 radio 同一 name 的 radio 只能选中一个(单选实现)
  id： 用于和 label 标签关联起来 实现点击 label 标签内的元素也能选中 radio
  value：单选按钮的值，选中某个单选按钮相当于拿到 value 值 tip：用于识别组中的哪个单选按钮被选中。
如上图所示，如果使用el-button,加颜色是可以通过设置type属性的值，加图标就设置icon属性的值。
现在产品给了一个需求，就是自定义的很多种类别，不同的类别的按钮显示不同的颜色和图标。如下图所示：
为了方便开发，目前的解决方案是：添加一个自定义全局指令，同时在element-ui源码中，加入对应的组件。开发人员在开发时只要在type中添加不同的类的值，就能添加上颜色和图标。
1、在element-ui的button源码中加了自定义指令otherRender，以及一个局部组件vRender
2、局部组件vRender的写法：
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router fro
				<el-button-group >
                  <el-button type="primary" :plain='currSelect1' size="mini" @click="changeTag(1)">图表信息</el-button>
                  <el-button type="primary" :plain='currSelect2' size="mini" @click="change...