imooc jQuery学习笔记
jQuery对象和DOM对象
什么是DOM对象和DOM元素：
JS对象提供了多个内建对象，比如String、Array等。
对象----带有属性和方法的特殊数据类型。
DOM对象----通过传统的方法（原生JS）获得的对象，DOM对象就是一个单独的DOM元素。
DOM元素----HTML元素
首先明确：二者是不一样的
举个例子：
<p id=”hello”></p>
假如我们要获取页面上id为hello的p元素，然后给这个文本节点增加一段字符：world，并且上色
普通处理，原生JS处理：
var p =document.getElementsById(‘hello’);
p.innerHTML=’world’;
p.style.color=’red’;
通过原生DOM模型提供的方法获取的DOM元素就是一个DOM元素，再通过innerHTML和style属性处理文本和颜色
jQuery处理：
var $p=$(‘#hello’);
$p.html(‘world’).css(‘color’,’red’);
通过$(“#hello”)方法会得到一个$p的jQuery对象，$p是一个数组对象。这个对象里面包含DOM对象信息，然后封装了很多操作方法，调用自己的方法html和css，得到和原生js一致的处理效果。
jQuery对象是对DOM对象的封装，在获取DOM对象的基础上增加了很多对象的方法。
通过这样的比较可以看出：
1.通过jQuery方法包装后的对象，是一个类数组对象。它与DOM对象完全不同，唯一相似的是它们都能操作DOM。
2.通过jQuery处理DOM的操作，可以让开发者更专注业务逻辑的开发，而不需要我们具体知道哪个DOM节点有那些方法，也不需要关心不同浏览器的兼容性问题，我们通过jQuery提供的API进行开发，代码也会更加精短。
很多场景中，jQuery和DOM能够相互转换，jQuery是一个类数组对象，而DOM对象就是一个单一的DOM元素
怎么把jQuery对象转换为DOM对象？
利用数组下标方式读取到jQuery的DOM对象
HTML：
<div>元素一</div> <div>元素二</div> <div>元素三</div>
JS:
var $div = $('div') //jQuery对象
var div = $div[0] //转化成DOM对象
div.style.color = 'red' //操作dom对象的属性
用jQuery找到了所有的div元素（3个），因为JQuery对象也是一个数组结构，可以通过数组下标索引找到第一个div元素，通过返回的div对象，调用它的style属性找到第一个div元素的颜色。
通过jQuery自带的get方法
jQuery对象自身提供一个get方法（.get(n)相当于返回数组第n个值）允许我们直接访问jQuery对象中相关的DOM节点，get方法中提供一个元素的索引：
var $div=$(‘div’) //jQuery对象
var div=$div.get(0) //通过get方法转换成DOM对象
div.style.color=’red’ //操作DOM对象的属性
DOM对象转换为jquery对象
如果传递给$(DOM)函数的参数是一个DOM对象，jquery方法会把这个DOM对象给包装成一个新的jquery对象
通过$(DOM)方法就可以将普通的DOM对象转换为jquery对象
<div>元素1</div>
<div>元素2</div>
<div>元素3</div>
var div = document.getElementsByTagName('div'); //dom对象
var $div = $(div); //jQuery对象
var $first = $div.first(); //找到第一个div元素
$first.css('color', 'red'); //给第一个元素设置颜色
通过getElementsByTagName获取到所有div节点的元素，结果是一个DOM合集对象，不过这个对象是一个数组合集，然后通过$(DOM)方法转化为jquery对象，通过调用jquery对象中的first和css方法查找第一个元素并且改变其颜色
jquery中的选择器
id选择器
用来查找ID，即元素的id属性
描述：$("#id)
jquery内部使用js函数document.getElementById来处理ID的获取。
id是唯一的，每个id值在一个页面中只能使用一次。如果多个元素分配了相同的id，将至匹配该id选择集合的第一个DOM元素。但是这种行为不应该出现，有超过一个元素的页面使用相同的id是无效的
类选择器
通过class样式类名来获取节点
描述 ：$(".class")
类选择器相比较于id选择器来说，效率会相对低一些，但是优势是可以多选
jquery内部使用js函数document.getElementsByClassName来实现
元素选择器
根据给定（html）标记名称选择所有元素
描述：$("element")
可以使用原生函数getElementsByTagName
比如通过getElementsByTagName方法得到页面所有的<div>元素：
var divs=document.getElementsByTagName('div');
divs是DOM合集对象，通过循环给每一个合集中的<div>元素赋予新的border样式
当然也可以使用$(DOM)获取元素后，直接通过css方法赋予样式
全选择器
在css中经常会看到下面的样式：
* {padding:0;margin:0;}
通配符*意味着给所有元素设置默认的边距。在jquery也可以类似操作
描述：$("*")
可以使用getElementsByTagName，传递进*就可以
不难发现，id、class、tag都可以通过原生的方法获取到对应的节点，但是我们还需要考虑一个兼容性的问题，我这里顺便提及一下，比如:
- IE会将注释节点实现为元素，所以在IE中调用getElementsByTagName里面会包含注释节点，这个通常是不应该的
- getElementById的参数在IE8及较低的版本不区分大小写
- IE7及较低的版本中，表单元素中，如果表单A的name属性名用了另一个元素B的ID名并且A在B之前，那么getElementById会选中A
- IE8及较低的版本，浏览器不支持getElementsByClassName
层选择器
处理文档中所有节点之间的关系
与层级选择器的区别
1.层级选择器都有一个参考节点
2.后代选择器包含子选择器选择的内容
3.一般兄弟选择器包含相邻选择的内容
4.相邻兄弟选择器和一般兄弟选择器所选择的元素必须在同一父元素下
基本筛选选择器
jquery提供了更快捷的筛选器获得所需的DOM元素
注意事项：
- :eq(), :lt(), :gt(), :even, :odd 用来筛选他们前面的匹配表达式的集合元素，根据之前匹配的元素在进一步筛选，注意jQuery合集都是从0开始索引
- gt是一个段落筛选，从指定索引的下一个开始，gt(1) 实际从2开始
内容筛选选择器
基本筛选选择器针对的都是元素DOM节点，如果我们要通过内容来过滤，jq也提供了一组内容筛选选择器，当然其规则也会体现在它所包含的子元素或者文本内容上
注意事项：
- :contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素
- 如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。
- :parent与:empty是相反的，两者所涉及的子元素，包括文本节点
可见性筛选选择器
元素有显示状态和隐藏状态，jq根据元素的状态拓展了可见性筛选选择器:visible和:hidden
描述：
$(":visible"） ： 选择所以显示的元素
$(":hidden") ： 选择所以隐藏元素
:hidden选择器不仅仅包含样式是display="none"的元素，还包含隐藏表单、visibility等等
我们有几种方式可以隐藏一个元素：
- CSS display的值是none。
- type="hidden"的表单元素。
- 宽度和高度都显式设置为0。
- 一个祖先元素是隐藏的，该元素是不会在页面上显示
- CSS visibility的值是hidden
- CSS opacity的指是0
如果元素中占据文档中一定的空间，元素被认为是可见的。
可见元素的宽度或高度是大于0的。
元素的vilibility:hidden或opacity:0被认为是可见的，因为他们仍然占用空间布局
不在文档中的元素是被认为是不可见的，如果他们被插入到文档中，jq没有办法知道他们是否可见，因为元素可见性依赖于适用的样式
属性筛选选择器
属性选择器让你可以基于属性来定位一个元素。可以只指定该元素的某个属性，这样所有使用该属性而不管它的值，这个元素都被定位，也可以更加明确并定位在这些属性上使用特定值的元素，这就是属性选择器展示它威力的地方
在这么多选择器中[attr="value"]和[attr*="value"]是最实用的
第一个可以帮助我们定位不同类型的元素，特别是表单form元素的操作，比如input[type="text"],input[type="checkbox"]等
[attr*="value"]能在网站中帮助我们匹配不同类型的文件
子元素筛选选择器
不常用，规则比其他选择器要稍微复杂
注意事项：
- :first只匹配一个单独的元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)
- :last 只匹配一个单独的元素， :last-child 选择器可以匹配多个元素：即，为每个父级元素匹配最后一个子元素
- 如果子元素只有一个的话，:first-child与:last-child是同一个
- :only-child匹配某个元素是父元素中唯一的子元素，就是说当前子元素是父元素中唯一的元素，则匹配
- jQuery实现:nth-child(n)是严格来自CSS规范，所以n值是“索引”，也就是说，从1开始计数，:nth-child(index)从1开始的，而eq(index)是从0开始的
- nth-child(n) 与 :nth-last-child(n) 的区别前者是从前往后计算，后者从后往前计算
表单元素选择器
无论是提交还是传递数据，表单元素在动态交互页面的作用是非常重要的。jq中专门假如表单选择器，从而能极其方便地获得到某个类型的表单元素
除了input筛选选择器，几乎每个表单类别筛选器都对应一个input元素的type值，大部分表单类别筛选器可以使用属性筛选器替换。比如$(":password")==$('[type=password]')
对象属性筛选选择器
除了表单元素选择器之外，表单对象属性筛选选择器也是专门针对表单元素的选择器，可以附加在其他选择器后面，主要功能是对所选择的表单元素进行筛选
注意事项：
- 选择器适用于复选框和单选框，对于下拉框元素, 使用 :selected 选择器
- 在某些浏览器中，选择器:checked可能会错误选取到<option>元素，所以保险起见换用选择器input:checked，确保只会选取<input>元素
特殊选择器this
this是js关键字，表示当前的上下文对象，简单说就是方法/属性的所有者
下面的例子中，mooc是一个对象，拥有name属性和getname方法，在getname中this指向了所属对象mooc
var mooc={
name:"NAME",
getname:function(){
//this就是mooc对象
return this.name;
}
}
mooc.getname(); //NAME
js中的this是动态的，也就是说这个上下文对象是可以被动态修改的（通过call，apply方法）
同样在DOM中this就是指向了这个html元素对象，因为this就是DOM元素本身的一个引用
比如给页面一个P元素绑定一个事件:
p.addEventListener('click',function(){
//this === p
//以下两者的修改都是等价的
this.style.color = "red";
p.style.color = "red";
},false);
通过addEventListener绑定的事件回调中，this指向的是当前的dom对象，所以再次修改这样对象的样式，只需要通过this获取引用即可
this.style.color="red"
但是这样的操作还是不方便，这里就要涉及一大堆的样式兼容，如果通过jq处理就会简单很多了，我们只要把this加工成jq对象
$('p').click(function(){
//把p元素转化成jQuery的对象
var $this= $(this)
$this.css('color','red')
})
通过把$()方法传入当前的对象的引用this，把这个this加工成jq对象，我们就可以用jq提供的快捷方式直接处理样式了
总结：
this，表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性和方法。
$(this)，代表的上下文对象是一个jq的上下文对象，可以调用jq的方法和属性值
练习上出现的一些内容：
$('#menu_con div.tag dd>p:first-child')说明-----
ID名为menu_con的元素下的，类名为tag 的div下的，dd元素下的第一层后代的p元素
获得这些p元素之后，如果这些元素是作为他自己父元素的第一个子元素，就被筛选出来
前面还提到了div.tag，为什么要用到这个呢？
div.tag就是等同于tag，div.tag意思是div中的class
扫一扫
1984
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
