jQuery基础应用

1.jQuery  www.jquery.com
(1)jQuery的特点
利用选择器查找要操作的节点,将找到的节点
封装成一个jQuery对象，通过调用jQuery对象
提供的方法或者属性来实现对底层被封装的节点
的操作。
这样做的好处:
1)兼容性更好。
2)代码更简洁。
(2)编程步骤   (hello.html)
step1,利用选择器查找要操作的节点。
step2,调用jQuery对象的方法或者属性。
(3)jQuery对象与dom对象的转换 (hello.html)
1)dom对象 ---> jQuery对象
$(dom对象);
2)jQuery对象 --->dom对象
$obj.get(0)或者$obj.get()[0]
2.选择器   selector 
   (1)基本选择器  (s1.html)
    1) #id
    2) class
    3) element
    4) selector1,selector2,selector3...
    5) *
   (2)层次选择器 (s2.html)
    1)selector1 selector2  查找所有后代(满足selector2)
    2)selector1>selector2  只查找子节点(满足selector2)
    3)selector1+selector2  下一个兄弟(满足selector2)
    4)selector1~selector2  下面所有兄弟(满足selector2)
   (3)过滤选择器
    1)基本过滤  (s3.html)
    :first
    :last
    :eq(index)
    :gt(index) 
    :lt(index)
    :not(selector)
    :odd
    :even
    2)内容过滤 (s4.html)
    :contains(text)
    :empty 没有子节点或者文本
    :parent 有子节点或者文本
    :has(selector) 
    3)可见性过滤 (s5.html)
    :hidden
    :visible
    4)属性过滤 (s6.html)
    [attribute]
    [attribute=value]
    [attribute!=value]
    5)子元素过滤 (s7.html)
    nth-child(index/even/odd)。
    注：下标从1开始。
    6)表单属性过滤(s8.html)
    :enable  可用
    :disable　禁用
    :checked  
    :selected 
   (4)表单选择器
    :input
    :text
    :password
    :radio
    :checkbox
    :submit
    :reset
    :image
    :button
    :file

(6)拷贝  (d6.html)

 1)clone()

 2)clone(true)：会将事件处理代码一块复制。

(7)样式 (d7.html)

 1)css() 直接设置样式

 2)addClass()和removeClass() 追加和删除样式

 3)hasClass() 判断有没有该样式，有返回true,否则

      返回false。

 4)toggleClass() 样式的切换。

 5)attr()  

(8)遍历  (d8.html)

 1)children()/children(selector)  子节点

 2)siblings()/siblings(selector) 其它兄弟节点

 3)parent() 父节点

 4)next()/next(selector) 下一个兄弟

 5)prev()/prev(selector)上一个兄弟

 6)find(selector) 查找后代

 

1.事件处理 event

 (1)如何绑订事件处理代码 (e1.html)

  1)正式写法

   $obj.bind(事件类型,事件处理函数);

  比如:

   $obj.bind('click',f1);

  2)简写形式

   $obj.click(f1);

 (2)如何获得事件对象 (e2.html)

  只需要给事件处理函数传递一个参数(名称无所谓),

  比如

   $obj.click(function(e){

   

   });

   注: e是jQuery对底层事件对象的一个封装。

 (3)事件对象的作用

  1)通过事件对象找到事件源 (e3.html)

   e.target

   注：返回值是一个dom对象。

  2)获得鼠标点击的坐标 (e3.html)

   e.pageX

   e.pageY

  3)取消事件冒泡

 (4)事件冒泡  (e4.html)

  1)什么是事件冒泡  

   子节点产生的事件会依次向上抛给相应的父

  节点。

  2)如何取消

   e.stopPropagation();

 (5)合成事件 (e5.html,e6.html)

  1)hover(f1,f2): 模拟光标悬停事件(进入调用f1,

      移开调用f2)。

  2)toggle(f1,f2,f3...):模拟连续点击事件。

 (6)模拟操作 (e7.html)

  1)正式写法

   $obj.trigger(事件类型);

  比如:

   $obj.trigger('click');

  2)简写形式

   $obj.click();

   

2.动画 animate

 (1)show()和hide()   (a1.html)

  1)作用：通过同时改变元素的宽度和高度来实现

  显示和隐藏。

  2)用法:

   $obj.show(执行速度,[回调函数]);

   注：

    执行速度: 毫秒或"slow","fast","normal"

    回调函数:整个动画完成之后，会调用

       回调函数。

 (2)slideDown()和slideUp()  (a1.html)

  1)作用：

    通过改变元素的高度来实现显示和隐藏。

  2)用法:同上。

 (3)fadeIn() 淡入　和fadeOut()  淡出(a2.html)

  1)作用：

    通过改变元素的不透明度(opacity)来实现显示

   和隐藏。

  2)用法:同上。

 (4)animate()

  1)用法

   $obj.animate({},执行速度,[回调函数]);

   注:

    {}：描述动画完成之后元素的样式。

    执行速度: 只能用毫秒数。

    回调函数：同上。

3.类数组的操作 array

 (1)类数组： a1.html

  jQuery对象包含的那些dom对象。

 (2)常用的方法和属性

  1)length属性：dom对象的个数。

  2)方法:

   each(fn): 用来遍历dom对象，其中fn是一个

     函数，用来处理被遍历的那个dom对象。

     fn中，可以传递一个变量(比如i),该变量

     表示正在被遍历的那个dom对象的下标，

     this表示正在被遍历的那个dom对象。

   eq(index):将下标等于index的dom对象取出来，

      然后封装成一个jQuery对象。

   get(index):将下标等于index的dom对象取出。

   index(obj/$obj):获得该节点在原来的类数组中的

      下标。

   get():