jQuery笔记——DOM操作在 JavaScript 中，DOM 不但内容庞⼤繁杂，⽽且我们开发的过程中需要考虑更多的兼容性、扩展性。
在 jQuery 中，已经将最常⽤的 DOM 操作⽅法进⾏了有效封装，并且不需要考虑浏览器的兼容性对元素内容的获取和修改可以使⽤ html()和 text()⽅法获取内部的数据。
html()⽅法可以获取或设置 html 内容，text()可以获取或设置⽂本内容$('#box').html(); //获取 html 内容$('#box').text(); //获取⽂本内容，会⾃动清理 html 标签$('#box').html('<em>jQuery</em>'); //设置 html 内容$('#box').text('<em>jQuery</em>'); //设置⽂本内容，会⾃动转义 html 标签注意：当我们使⽤ html()或 text()设置元素⾥的内容时，会清空原来的数据。
⽽我们期望能够追加数据的话，需要先获取原本的数据$('#box').html($('#box').html() + '<em>jQuery</em>'); //追加数据如果元素是表单的话，jQuery 提供了 val()⽅法进⾏获取或设置内部的⽂本数据$('input').val(); //获取表单内容$('input').val('jQuery'); //设置表单内容元素属性操作jQuery 可以对元素本⾝的属性进⾏操作，包括获取属性的属性值、设置属性的属性值，并且可以删除掉属性$('div').attr('title'); //获取属性的属性值$('div').attr('title', 'Hello jQuery'); //设置属性及属性值$('div').attr('title', function () { //通过匿名函数返回属性值return 'Hello jQuery';});$('div').attr('title', function (index, value) { //可以接受两个参数return value + (index+1) + '，Hello jQuery';});注意：attr()⽅法⾥的 function() {}，可以不传参数。
分别获取文本和HTML：
一个jQuery对象可以包含0个或任意个DOM对象，它的方法实际上会作用在对应的每个DOM节点上。
在上面的例子中试试：
所以jQuery对象的另一个好处是我们可以执行一个操作，作用在对应的一组DOM节点上。
即使选择器没有返回任何DOM
节点，调用jQuery对象的方法仍然不会报错：
注意，隐藏DOM节点并未改变DOM树的结构，它只影响DOM节点的显示。
这和删除DOM节点是不同的。
获取DOM信息
利用jQuery对象的若干方法，我们直接可以获取DOM的高宽等信息，而无需针对不同浏览器编写特定代码：
等价于：。
jquery所有选择器，dom操作常⽤⽅法⼀、基础选择器1，id选择器 $("#my_id") 根据id获取jquery对象；2，元素选择器（element选择器、标签选择器） $("button") 根据元素名获取对象，可能为数组;3，class选择器 $(“.class”) 根据class类选择对象，可能为数组;4，*号选择器 $(“*”) 选择页⾯全部元素;5，逗号选择器（多项选择器） $(“sele1,sele2,seleN”)，如$(".red,.green")、$(".red,div")选择不同类型的对象，⽤逗号隔开;6，空格选择器（层次选择器，⽗⼦孙选择器） $("ance desc")，如$("div span")，选择div下的所有span，空格隔开;7,>号选择器（⽗⼦选择器） $(“parent > child”) 如$(“parent > child”)，获取的是<div>“家庭中”全部“⼦辈”<span>元素，⽤>号隔开，只选择临辈⼦元素;8,+号选择器（临近选择器），如$("p + label")选择器，获取<p>元素最近邻的下⼀个label元素;9,~号选择器（同辈后边相邻所有选择器）如$("p~label")，选择p后所有同级label;⼆、过滤性选择器1，:first过滤选择器如$(“li:first”)，选择第⼀个li2，:eq(index)过滤选择器，如 $("li:eq(2)")，选择第3个li3，:contains(text)过滤选择器，如$("li:contains('jQuery')")，选择内容包括jQuery的li4，:has(selector)过滤选择器，如$("li:has('p')")，选择获取包含p标签的li5，:hidden过滤选择器，如$("input:hidden")，选择所有隐藏的input元素6，:visible过滤选择器，如$("li:visible")，选择所有可见的li，和:hidden相反7，[attribute=value]属性选择器，获取属性名属性值都匹配的元素，如$("li[title='蔬菜']")8，[attribute!=value]属性选择器，获取不包含属性名，或者与属性名和属性值不相同的全部元素，如$("li[title!='蔬菜']")9，[attribute*=value]属性选择器，获取属性值中包含指定内容的全部元素，其中[]是专⽤于属性选择器的括号符，如$("li[title*='果']")，title中有“果”字的li10，:first-child⼦元素过滤选择器，获取每个⽗元素中返回的⾸个⼦元素，它是⼀个集合，注意和:first的区别三、表单选择器1，:input表单选择器，获取表单全部元素，如$("#frmTest :input")，获取id为frmTest表单的所有元素2，:text表单⽂本选择器，获取表单中全部单⾏的⽂本输⼊框元素，如$("#frmTest :text")，获取id为frmTest表单的所有单⾏⽂本3，:password表单密码选择器，获取表单中全部的密码输⼊⽂本框元素，如$("#frmTest :password")4，:radio单选按钮选择器5，:checkbox复选框选择器6，:submit提交按钮选择器7，:button表单按钮选择器8，:checked选中状态选择器，⽤于单复选框9，:selected选中状态选择器，⽤于下拉列表四，操作DOM的常⽤⽅法1，.attr("属性名","属性值") 设置标签属性2，.html()、.text(),text只获取⽂本，html获取节点的所有内容，包括⼦节点3，.addClass(样式类列表，空格隔开)、.css("样式名","样式值"),设置样式4，使⽤removeAttr(name)和removeClass(class)分别可以实现移除元素的属性和样式的功能，前者⽅法中参数表⽰移除属性名，后者⽅法中参数则表⽰移除的样式名5，使⽤append()⽅法向元素内追加内容，$("body").append($html),追加jquery对象6，$(content).appendTo(selector)，顺序和append相反7，使⽤before()和after()在元素前后插⼊内容8，$(selector).clone()复制元素9，replaceWith()和replaceAll()⽅法都可以⽤于替换元素或元素中的内容，但它们调⽤时，内容和被替换元素所在的位置不同，分别为如下所⽰：$(selector).replaceWith(content)和$(content).replaceAll(selector)。
jQueryDOM操作DOM操作的分类：DOM CORE（核心）、HTML-DOM和CSS-DOM1. DOM CoreDOM Core并不专属于javascript，任何一种支持DOM的程序设计语言都可以使用它。
它的用途并非仅限于处理网页，也可以用来处理任何一种使用标记语言编写出来的文档，如XML.Javascript中的getElementById(),getElementByTagName(),getAttribute()和setAttribute()方法，都是dom core的组成部分。
2. HTML_DOM使用HTML_DOM来获取表单对象的方法Document.forms使用HTML_DOM来获取某元素的src属性的方法Element.src3. CSS_DOMCSS_DOM是针对CSS的操作。
在javascript中，CSS-DOM技术的主要作用是获取和设置style对象的各个属性。
通过改变style对象的各种属性，可以使网页呈现出各种不同的效果。
Element.style.color = “red”;jQuery作为javascript库，继承并发扬了javascript对DOM对象的操作的特性，使开发人员能方便的操作DOM对象。
元素的操作可以按下列来分类：查找、创建、插入、删除、复制、包裹、属性操作、查找：利用上面的jQuery选择器创建：主要包括创建元素节点和创建文本节点、创建属性节点。
（1）创建元素节点 $(html)Var aa=$("<li></li>");（2）创建文本节点 Var aa=$("<li>你好</li>");（3）创建属性节点 Var aa=$("<li title='bbb'>你好</li>");插入：光动态的创建节点没上面用处，还要能够将创建的动态插入。
