1、非类属性
id rel title属性，jQuery提供了 attr（）和removeAttr（）。 ——.attr({rel:'external'}); .attr({ rel:'external',title:'learn more at wikipedia')}//多项和css一样 中间用“，”分隔。
关于 值回调 —— 例子：
id: function(index, oldValue){ return ' wikilink- '+ index ; }
每次出发值回调，都会给他传入两个参数。第一个是一个整数（index），表示迭代次数（第几次执行从0开始），我们再次利用第一个只为第一个链接生成的id是wikilink-0
为第二个链接生成的id是wikilink-1，一次类推。代码中没有用到第二个参数（oldValue），这个参数中保存的是修改之前的属性值。
① 我们利用了值回调“上下文”。就想在事件处理程序中一样，在值回调函数中，this关键字指向每次调用回调时正在操作的那个DOM元素。再次我们把这个元素封装为jQuery对象，
这样就可通过.text（）方法来去的连接的文档内容。附加：我在下边代码中加入了CSS（）属性 将文字颜色修改为黄色，因为我想着重提示词条。尝试中 将.css().text()成功了 而当.css()在后面时整个语句失效。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script src="jquery-3.2.1.min.js"></script> <title></title> </head> <body> <p>123456789<a> this this </a></p> </body> <script> $('p>a').attr({ rel:'external', id:function(index,oldValue){ return 'wikilink-'+index; }, title:function(){ return 'learn to about'+$(this).css('color','yellow').text()+'at wikipedia.'; } }) </script> </html>
如果有幸访问我的文章，希望你着重看下边这一块，因为我觉得思路比知识点要重要。
2、DOM元素属性
HTML属性与DOM属性有一点区别。HTML属性是指页面标记中放在引号中的值，而DOM属性则是指通过JavaScript能够存取的值。 （几乎任何浏览器F12键，elements 所谓的开发人员工具）
大多数情况下，HTML属性与对应的DOM属性的作用是一样的，jQuery可以帮我们处理名字不一致的问题。可是，有时候我们的确需要留意着两种属性的差异。某些DOM属性，例如nodeName、nodeType、selectedIndex和childNodes，在HTML中没有对应的属性，因此通过.attr（）方法就没办法操作他们。
数据类型差异，比如HTML中的checked属性是一个字符串，而DOM中的checked属性则是一个布尔值。对于布尔指数型，最后是测试DOM属性而不是HTML属性，以确保跨浏览器的行为一致。
在jQuery中，可以通过.prop（）方法取得和设置DOM属性：
//取得checked属性的当前值
var currentlyChecked = $('.my-checkedbox').prop('checked');
//设置checked属性的值
$('.my-checkedbox').prop('checked',false);
.prop()方法与attr方法没什么不同，比如热门都可以一次性接受一个包含多个值的对象，也支持值的回调函数。
3、表单控件
文本输入框的value属性在DOM中的属性叫defaultValue，DOM中就没有value属性。而选项列表select元素呢，其选项的值在DOM中通常是通过selectedIndex属性，或者通过其他选项元素的selected属性来取得。
由于存在这些差异，再去的和设置表单控件的值时，最好不要使用.attr()方法，而对于选项列表呢，最好连.prop()方法也不要使用。
.val()方法：
//获取输入框当前值
var inputValue = $('#my-input').val();
//取得选项列表的当前值
var selectValue=$('#my-select').val();
//设置单选列表值
$('#my-select').val('value3');
//设置多选项列表的值
$('#my-mulit-select').val(['value1','value2']);
与.attr（）和.prop（）一样，.val()方法也可以接受一个函数作为其setter参数。
4、DOM树操作
.innerAfter()和.innerBefore()是在指定的元素外部插入新内容。
.prependTo()在现有元素内部、之前添加内容。
.appendTo()在现有元素内部、之后添加内容。
插嘴：sapn 为行内盒子。
①：包装元素
.wrapALL()和.wrap()（例子中用于包装脚注，用ol有序列表）、.each（jQuery）和.forEach（JavaScript）不得不说<sup></sup>和<sub></sub>
在移动原文之前插入脚注标号，不然无法找到原位置。
②：反向插入方法
$('<p>HEllo</p>').appendTo('#container'); 和 $('#container').append('<p>Hello</p>') 效果一样
作用为方便jQuery连缀。值得研究。节省空间。
var str='a'+'b'+'c'; 与 var str=['a','b','c'].join(''); 效果一样，当需要组合元素较多时，推荐使用第二种方法。
这里需要注意一点，在前一种方法中加法需要在（）内计算。而后一种方法中，数组的每个元素会分别执行，因此不需要保存在（）内。
6、复制元素
.clone()方法。这个方法能够创建任何匹配的元素集合的副本一边将来使用。（复制完需插入）
默认情况下不会复制匹配元素活其后代元素中绑定的事件。不过，可以为这个方法传递一个布尔值参数，将这个参数设置为true，就可以连同事件一起复制，及.clone（true）。
.html()方法。这个方法中不传递参数的情况下回返回这个匹配元素的HTML标记。而传入参数内容就会被替换掉。传入的HTML必须是有效的，而且需要对特殊字符进行转译。
‘&helip；’省略号。 .end()方法重新返回上一层。（在连缀中很好用）
.text()方法。可以取得匹配元素的内容，或者用心字符串替换匹配元素的内容。但是与.html（）不同的是，.text（）始终会取得或设置春文本内容。使其html标签都被忽略。类似于.text($('p').text())即为获取被选中内容的纯文本。
最后归类总结
（1）要在HTML中创建新元素，使用$()函数。
（2）要在每个匹配的元素中插入新的元素，使用：
.append()
.appendTo()
.prepend()
.prependTo()
（3）要在每个匹配的元素相邻的位置上插入新的元素，使用
.after()
.insertAfter()
.before()
.insertBefore()
（4）要在每个匹配的元素外部插入新的元素，使用
.wrap()
.wrapAll()
.wrapInner()
（5）要用新的元素或者文本替换每个匹配的元素，使用
.html()
.text()
.replaceAll()
.replaceWith()
（6）要移除每个匹配的元素中的元素，使用
.empty()
（7）要从文档中移除每个匹配的元素及其后代元素，但不实际删除他们，使用：
.remove()
.detach()
小知识点：
nodeName：
nodeName 属性指定节点的节点名称。
如果节点是元素节点，则 nodeName 属性返回标签名。
入股节点是属性节点，则 nodeName 属性返回属性的名称。
对于其他节点类型，nodeName 属性返回不同节点类型的不同名称。
nodeType：
nodeType 属性返回以数字值返回指定节点的节点类型。
如果节点是元素节点，则 nodeType 属性将返回 1。
如果节点是属性节点，则 nodeType 属性将返回 2。
Node Types
文档、元素、属性以及 HTML 或 XML 文档的其他方面拥有不同的节点类型。
存在 12 种不同的节点类型，其中可能会有不同节点类型的子节点：
| 节点类型 | 描述 | 子节点 | |
|---|---|---|---|
| 1 | Element | 代表元素 | Element, Text, Comment, ProcessingInstruction, CDATASection, EntityReference |
| 2 | Attr | 代表属性 | Text, EntityReference |
| 3 | Text | 代表元素或属性中的文本内容。 | None |
| 4 | CDATASection | 代表文档中的 CDATA 部分（不会由解析器解析的文本）。 | None |
| 5 | EntityReference | 代表实体引用。 | Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference |
| 6 | Entity | 代表实体。 | Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference |
| 7 | ProcessingInstruction | 代表处理指令。 | None |
| 8 | Comment | 代表注释。 | None |
| 9 | Document | 代表整个文档（DOM 树的根节点）。 | Element, ProcessingInstruction, Comment, DocumentType |
| 10 | DocumentType | 向为文档定义的实体提供接口 | None |
| 11 | DocumentFragment | 代表轻量级的 Document 对象，能够容纳文档的某个部分 | Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference |
| 12 | Notation | 代表 DTD 中声明的符号。 | None |
节点类型 - 返回值
对于每种节点类型，nodeName 和 nodeValue 属性的返回值：
| 节点类型 | nodeName 返回 | nodeValue 返回 | |
|---|---|---|---|
| 1 | Element | 元素名 | null |
| 2 | Attr | 属性名称 | 属性值 |
| 3 | Text | #text | 节点的内容 |
| 4 | CDATASection | #cdata-section | 节点的内容 |
| 5 | EntityReference | 实体引用名称 | null |
| 6 | Entity | 实体名称 | null |
| 7 | ProcessingInstruction | target | 节点的内容 |
| 8 | Comment | #comment | 注释文本 |
| 9 | Document | #document | null |
| 10 | DocumentType | 文档类型名称 | null |
| 11 | DocumentFragment | #document 片段 | null |
| 12 | Notation | 符号名称 | null |
NodeTypes - Named Constants
| NodeType | Named Constant |
| 1 | ELEMENT_NODE |
| 2 | ATTRIBUTE_NODE |
| 3 | TEXT_NODE |
| 4 | CDATA_SECTION_NODE |
| 5 | ENTITY_REFERENCE_NODE |
| 6 | ENTITY_NODE |
| 7 | PROCESSING_INSTRUCTION_NODE |
| 8 | COMMENT_NODE |
| 9 | DOCUMENT_NODE |
| 10 | DOCUMENT_TYPE_NODE |
| 11 | DOCUMENT_FRAGMENT_NODE |
| 12 | NOTATION_NODE |
selectedIndex：
selectedIndex 属性可设置或返回下拉列表中被选选项的索引号。
注释：若允许多重选择，则仅会返回第一个被选选项的索引号。
语法
selectObject.selectedIndex=number
childNodes：
定义和用法
childNodes 属性返回节点的子节点集合，以 NodeList 对象。
提示：您可以使用 length 属性来确定子节点的数量，然后您就能够遍历所有的子节点并提取您需要的信息。
关于parent（）和parents（）
实例
查找每个段落的带有 "selected" 类的父元素：
$("p").parent(".selected")
定义和用法
parent() 获得当前匹配元素集合中每个元素的父元素，使用选择器进行筛选是可选的。
.parent(selector)
| 参数 | 描述 |
|---|---|
| selector | 字符串值，包含用于匹配元素的选择器表达式。 |
详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象，.parent() 方法允许我们在 DOM 树中搜索这些元素的父元素，并用匹配元素构造一个新的 jQuery 对象。.parents() 和 .parent() 方法类似，不同的是后者沿 DOM 树向上遍历单一层级。
该方法接受可选的选择器表达式，与我们向 $() 函数中传递的参数类型相同。如果应用这个选择器，则将通过检测元素是否匹配该选择器对元素进行筛选。
请思考这个带有基本的嵌套列表的页面：
<ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
如果我们从项目 A 开始，则可找到其父元素：
$('li.item-a').parent().css('background-color', 'red');
此次调用的结果是，为 level-2 列表设置红色背景。由于我们未应用选择器表达式，父元素很自然地成为了对象的一部分。如果已应用选择器，则会在包含元素之前，检测元素是否匹配选择器。