一、JQuery是什么
document.getElementById("info").value="Hello World";使用 JQuery获取DOM文本操作如下：
$("#info").val("Hello World");通过上面对比可以看出JQuery的优势之一可以使代码更加简练，使开发人员更加专注于逻辑本身
二、JQuery能做什么
三、DOM是什么
上述提到了DOM元素，不了解，查阅总结如下：
DOM 全称是 Document Object Model，是文档对象模型。
通过DOM元素，可以方便的操作HTML中的节点，比如获取节点的内容，添加某些元素，删除某些元素。
也就是说，DOM元素和HTML息息相关，它将HTML中的一个个标签封装成DOM元素，以便于JavaScript进行操作。
<html>
<body>
<div id="info">
<p>Test</p>
</div>
<script>
window.onload = function(){
document.getElementById("info").innerHTML="success";
}
</script>
</body>
</html>
其中document.getElementById("info")就是将id为info的标签封装成为一个DOM元素，接下来便可以方便的操作这个DOM对象，例如修改它的文本内容等等。
四、JQuery与DOM之间的关系
JQuery对象与DOM对象之间有什么区别？
先了解什么是JQuery对象：
JQuery对象就是用JQuery包装DOM之后产生的对象。JQuery对象是JQuery独有的，可以使用JQueryd的各种方法$("#test").html();
意思是指：获取ID为test的元素内的html代码 其中html()是JQuery里的方法
这段代码的作用等同于用DOM实现代码：
|
1
|
document.getElementById("id").innerHTML;
|
虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法。
还需要注意一点的是：
用#id作为选择器获取得的是jQuery对象，document.getElementById("id")得到的DOM对象，这两者并不等价。
另外，JQuery对象与DOM对象之间可以互相转换。
JQuery对象 -> DOM对象
两种转换方式将一个JQuery对象转换成DOM对象：[index]和.get(index);
-
jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。
var v1=$("#test");//JQuery对象 var v2=$v1[0];//DOM对象
通过.get(index)方法，得到相应的DOM对象。
2.DOM对象-->JQuery对象var v1=$("test");//JQuery对象 var v2=v1.get(0);//DOM对象
对于已经是一个DOM对象 只需要用$()把DOM对象包装起来，就可以获得一个JQuery对象了。如：
$(document.getElementById("test")) var v1=document.getElementById("test");//DOM对象 var v2=$(v1);//JQuery对象
DOM对象转换为JQuery对象之后就可以使用JQuery的方法了。
需要再次强调注意的是：DOM对象才能使用DOM中的方法，jQuery对象是不可以用DOM中的方法。
五、JQuery中的“$”有什么作用
这个问题解决之后，还有一个疑问：我们经常在JQuery看见$('div')、$('#id')、$('.class')等类似的代码。那么其中的"$"究竟有什么作用呢？
$其实就是jQuery的别称。是jQuery提供的一个函数，用来将DOM元素、选择器包装成jQuery对象。
var v1=$("#id"); var v2=jQuery("#id");以上两者相同
var jq=jQuery.onConflict(); var v1=jq("#id")//等同于var v1=$("#id");
this的相关问题
this指代的是什么
这个应该是比较好理解的，this就是指代当前操作的DOM对象。
在jQuery中，this可以用于单个对象，也可以用于多个对象。
$("btn").click(function(){ alert(this.innerHeight);//单个对象，this指代当前id为btn的DOM对象 }) $("div").each(function(index){ alert(this.innerHTML);//多个对象 this指代当前循环中索引为index的DOM对象 })
jQuery中的this和$(this)有什么区别
$("div").each(function(index){ alert($(this));//[object object] jQuery对象 alert(this);//[object HTMLDivElement] DOM对象 })可以观察到，this指代的是DOM对象，$(this)指代的是包装当前DOM对象的jQuery对象。
jQuery选择器
上一节也分析到，jQuery的最大贡献之一就是方便的获取DOM元素，并对DOM元素进行操作。
先看几个简单的例子：
$('div');//选择所有标签为div的DOM元素 $('#info');//选择id为info的DOM元素 $('div>p');//选择所有div标签下的子集标签为p的DOM元素 $('input[placeholder*="info"]');//获取所有input标签中，属性placeholder值中包含info字段的DOM元素 $('p:odd');//获取所有标签为p的元素压入栈中,选择其中索引值为奇数的DOM元素可以看到，有多种选择方式让你获取你所需要的对象，这些先作为一个引子，让我们对jQuery的选择器有一个大致上的印象。现在以开发者的角度来思考：如何选择需要的DOM元素。
2. 既然可以获取指定id的元素，那么理所应当的，也可以获取指定class的元素。$|('#info');//获取id为info的元素
$('.class');//获取class为info元素3. 有时会遇到一系列具有相同className的元素，而这些元素之间没有办法互相区分彼此。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div class="info">0</div> <div class="info">1</div> <div class="info">2</div> <div class="info">3</div> <div class="info">4</div> <div class="info">5</div> <script> /*获取class为info的一系列元素中的第一个元素的值，即为0*/ $('.info:first').val(); /*获取这一系列元素中的最后一个*/ $('.info:last').val(); /*获取任意一个:获取class为info的一系列元素中索引为2的元素值，即2（索引从0开始）*/ $('.info:eq(2)').val(); /*获取calss为info的一系列元素中索引大于1的对象，即2,3,4*/ $('.info:gt(1)'); /*获取calss为info的一系列元素中索引小于2的对象，即0,1*/ $('.info:lt(2)'); /*获取class为info的一系列元素中索引为奇数（1,3）的对象，即为1,3*/ $('.info:odd'); /*获取class为info的一系列元素中索引为偶数（0,2,4）的对象，即0,2,4*/ $('.info:even'); </script> </body> </html>4. 比如现在有一系列链接元素，但是它们并没有唯一id标识，也没有className区分，各个元素之间仅有href是不一致的，该如何选择需要的元素呢？<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Test</title> </head> <body> <div> <a>0</a> <a href="/info">1</a> <a href="/infomation">2</a> <a href="/test">3</a> </div> <script> /*选择带有href属性的a标签元素*/ $('a[href]');//选择带有href属性的a标签，即为1,2,3 /*选择属性值为info的a标签元素*/ $('a[href="info"]');//选择href属性为info的a标签，即为1 /*选择href属性值以info开头的a标签元素*/ $('a[hret^=info]');//选择带有href属性值以info开头的a的标签，即1,2 /*选择href属性值以tion结尾的a标签元素*/ $('a[href$=tion]');//选择带有href属性值以tion结尾的a的标签,即2 /*选择href属性值中有fo字段的a标签元素*/ $('a[href*="fo"]');//选择带有href属性值中包含fo的a标签，即1,2 /*选择href属性值中不包含info的a标签元素*/ $('a[href!="info"]');//选择带有href属性值中不包含info的a标签，即3 </script> </body> </html>5. 还有会遇到一些情况，要求我们根据DOM元素的内容来选择合适的元素。$('div:contains("info")');//选择div标签中内容包含info字段的元素6. 现在我们已经通过指定id、class或是指定索引值、属性值来确定元素，让我们换个角度，有没有可能从元素之间的关系来确定元素呢？
先统一名称：
同级元素：即当前元素处于同一层级。
<div> /*当前两个标签为p的元素处于同一层级，属于同级元素*/ <p>0</p> <p>1</p> </div>父级元素：即当前元素的直属上层元素。
祖先元素：即当前元素的所有上层元素。
子级元素：即当前元素的直属子层元素。
后代元素：即当前元素的所有子层元素。
<div id='ancestor'> <div id='father'> // 标签为p的元素的父级元素是id为father的元素，祖先元素为id为father和ancestor的元素 <p><span>0</span></p> // id为father的元素的子级元素是标签为p的元素，后代元素为标签p与span的元素 <p>1</p> </div> </div><form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="firstletter" />
<input name="secondletter" />
</fieldset> <input name="none" /> </form>选择标签为form的所有子级input元素：
$('form>input'); // 选择标签为from的元素下的所有标签为input的子级元素，即name=“name”，name=“none”的元素
选择标签为form的所有的后代input元素：
$('form input'); // 选择标签为from的元素下的所有标签为input的后代元素，即name=“name”，name=“none”，name=“firstletter”，name=“secondletter”的元素
也可以选择符合条件的同级元素（同级元素中的第一个）：
$('label+input'); // 选择标签为label的同级元素中，标签为input的元素中的第一个，即name=“name”，name=“firstletter”的元素
也可以选择所有符合条件的同级元素：
$('label~input'); // 选择标签为label的同级元素中，所有标签为input的元素，即name=“name”，name=“firstletter”，name=“secondletter”，name=“none”的元素
选择后代元素中包含选定元素的元素：
<div> <p><span>Hello</span></p> </div> <div>Hello again!</div>
$('div:has(span)') // 选择所有后代元素中包含span元素的div元素
225
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
