第二天接触jQuery

还是先谈一谈选择器吧.选择器是基础,首先是了解,其后是熟练,虽然枯燥,但却必不可少.

---

 1.层级选择器

        HTML文档中所有的节点之间都有这样或者那样的关系.我们可以把节点之间的关系用传统的家谱来比喻,那么节点与节点之间就有父子,兄弟,祖孙等关系了.

         我们用(子元素) (后代元素) (兄弟元素) (相邻元素)来表示.

  过一个列表，对比层级选择器的区别

2.表单元选择器

注意事项：

除了input筛选选择器，几乎每个表单类别筛选器都对应一个input元素的type值。大部分表单类别筛选器可以使用属性筛选器替换。比如 $(':password') == $('[type=password]')

3.特殊选择器this

首先我们先来区分一下$(this)和this的区别.

this是JavaScript中的关键字,指的是当前上下文的对象,简单的说就是方法/属性的所有者.

var charNanme = {

                       name = "哈喽";

                         getName :function(){

                                   //this,就是charName;

                                             return this.name;

}

}

  charName.getName();

其中在JavaScript中this是动态的,也就是说这个上下文对象都是可以被动态改变的(可以通过call,apply等方法).

同样DOM中this就是指向了这个HTML元素对象,因为this就是DOM元素本身的一个引用.

p.addEventListener('click',function(){

                //this === p

                //以下两者的修改都是等价的

                 this.style.color = "red";

                 p.style.color = "red";

},false);

通过addEventListener绑定的事件回调中，this指向的是当前的dom对象，所以再次修改这个对象的样式，只需要通过this获取到引用即可

但是这样的操作其实还是很不方便的，这里面就要涉及一大堆的样式兼容，如果通过jQuery处理就会简单多了，我们只需要把this加工成jQuery对象

换成jQuery的做法：

$('p').click(function(){

      //把p元素转化成jQuery的对象

             var $this= $(this)

             $this.css('color','red')

})

通过把$()方法传入当前的元素对象的引用this，把这个this加工成jQuery对象，我们就可以用jQuery提供的快捷方法直接处理样式了

总体：

this，表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性和方法。

$(this),代表的上下文对象是一个jquery的上下文对象，可以调用jQuery的方法和属性值。