快速入门Jquery

一、引入Jquery

  1. 下载jquery,复制到项目中
  2. 在需要使用的文件中引入:
    快速入门Jquery

二、jquery选择器

  1. 基本选择器(注:.css为jquery内置的,可以改变css样式)
    快速入门Jquery
  2. 属性选择器(最后一个是获取有 以属性href值为com结尾 的dom节点)
    快速入门Jquery
  3. 其他选择器(第一个是交集(p标签中有c1类的元素),第二个是ul标签中的第一个li)
    快速入门Jquery

三、jquery操作dom

  1. 操作dom节点
    快速入门Jquery

  2. 操作dom属性
    快速入门Jquery

  3. 操作dom节点样式
    快速入门Jquery
    快速入门Jquery

  4. 设置和获取html,文本,值。
    快速入门Jquery
    快速入门Jquery
    获取dom节点内容
    快速入门Jquery
    设置dom节点内容
    快速入门Jquery

  5. jquery遍历节点操作
    (注:纯dom节点没有.html函数只有 innerHTML()函数,只有jquery封装后的才有html()函数。)快速入门Jquery
    快速入门Jquery

  6. jquery操作dom节点css样式
    快速入门Jquery

四、jquery事件操作

  1. 文档加载事件
    快速入门Jquery
  2. 单击双击按钮事件快速入门Jquery
  3. 文本框 获的、失去焦点事件
    快速入门Jquery
  4. div 鼠标移入,移除事件
    快速入门Jquery

五、Jquery动画效果

  1. 隐藏和显示dom
    快速入门Jquery
  2. 淡入淡出dom(第三个是 淡入淡出切换函数)
    快速入门Jquery
  3. dom透明度
    快速入门Jquery
  4. 滑动dom节点
    先将dom节点隐藏(设置CSS属性 display: none;)再使用下面方法
    快速入门Jquery
  5. 移动改变dom节点(第一个是向左移动500px,第二个是移动时将透明度变为0.5,宽高变化,第三个是将变化改为渐变)
    快速入门Jquery
    快速入门Jquery
  6. 停止动画
    快速入门Jquery
  7. jquery callBack回调方法(其他动画也可以,只要在最后参数show加一个回调方法即可)
    快速入门Jquery

六、数据交互(jquery ajax)

  1. load 方法(后两个参数可选)
    快速入门Jquery
    例子:(d1是一个div的id )
    快速入门Jquery

  2. get/post方法
    快速入门Jquery

    例子:

    快速入门Jquery
    (注:function中两个参数,一个是返回的数据,一个是返回的状态)
    快速入门Jquery