jQuery简介

jQuery是一个JavaScript库,它的存在极大地简化了JavaScript编程。在您开始学习jQuery之前,您应该对以下知识有基本的了解:

  • HTML
  • CSS
  • JavaScript

什么是jQuery?

jQuery是一个轻量级的“写得少,做得多”的JavaScript库。

jQuery库包含以下功能:

  • HTML 元素选取
  • HTML 元素操作
  • CSS操作
  • HTML 事件函数等等

jQuery入口函数与onload

入口函数:

  $(function(){....})

  $(document).ready(function(){...})

  特点:可以重复执行多次、文档加载完就执行(快)

onload:

  window.onload = function(){...}

  特点:后面的onload会覆盖前面的onload、需要等待页面所有内容加载完再执行

JavaScript与jQuery互换

jQuery -> javaScript

  $(" ")[下标]

  $(" ").get[下标]

javaScript -> jQuery

  $("js对象")

关于显示和隐藏

  • show() 显示
  • hide()隐藏
  • toggle()切换显示与隐藏
  • sliceToggle() 滑动切换显示与隐藏
  • sliceDown()  滑下
  • sliceUp()  滑上
  • fadeToggle()淡入淡出
  • fadeIn()  淡入
  • fadeOut()  淡出
  • fadeTo() 设置透明度
  • fadeIn(speed,fn)
      speed 执行的速度
        normal 400毫秒
        fast 200毫秒
        slow 600毫秒
        毫秒数
      fn 完毕后的回调函数

选择器

  基本
    *全部
    tag标签
    。类
    #id
    ,分组
  层次
    空格 后代
    > 直接子元素
    +相邻
    ~ 后兄弟
  基本过滤
    :first 第一个
    :last 最后一个
    :eq(n) 第n个
    :gt(n) 大于n个
    :lt(n) 小于n个
    :odd 索引下标奇数个
    :even 索引下标偶数个
    :header h标签
    :animated 动画
  内容过滤
    :contans(txt) 包含
    :empty 空
    :has() 有
    :parent 父节点
  可见过滤
    :visilble 显示
    :hidden 隐藏
  表单过滤
    :input  <input>,<textarea>,<select>和<button>
    :text 单行文本框
    :password 密码框元素
    :radio 单选框
    :checkbox 多选框
    :submit 提交按钮
    :images 图像按钮
    :reset 重置按钮
    :button 按钮
    :file 上传域

    :hidden不可见元素

css 设置获取css
  .css(name) 获取节点属性值
  .css(name,value) 设置节点属性值
  .css({name:value,name2:value2}) 设置多个节点属性值
attr 设置获取节点属性
  .attr(name) 获取节点属性值
  .attr(name,value) 设置节点属性值
  .attr({name:value,name2:value2}) 设置多个节点属性值
prop 设置获取节点的属性
  .prop(name) 获取节点属性值
  .prop(name,value) 设置节点属性值
  .prop({name:value,name2:value2}) 设置多个节点属性值
prop和attr区别
  1.attr获取节点的初始属性值
      prop获取节点的动态值
  2.attr设置的属性值在dom节点是可见的
      prop设置的表单属性值在dom节点上不可见

事件
  click() 单击
  ready() 准备完毕
  hover()鼠标移入移除
  chage() 当表单值发生改变
文本与值
  text()设置或获取文本
  html() 设置html
  val() 设置获取表单的值
类的操作
  addClass() 添加类
  removeClass() 移除类
  toggleClass()切换类
  hasClass()检测类

(如果有没写到的欢迎大家补充????,本期就到这了)