JQuery 知识概要及案例

• 基础

  • 是一个经典js的库，实现了Js对象和函数的封装
  • jquery理念：write less ,do more
  • 做什么？
    • 更容易获取节点对象
    • 更容易操作节点样式
    • 更方便使用事件
    • 更好的使用ajax(jsp)
  • jquery 可以做的事情，javascript都可以做
  • jquery 开发效率高，js运行效率高
  • jquery的优势
    • 很好封装dom对象
    • 支持链式操作
    • 支持隐式迭代
  • 怎么使用？
    • jquery-3.6.0.min.js 84k 生产版
    • jquery-3.6.0.js 281k 开发版
    • 语法规范
      • $(选择器/dom/一段html字符串).函数（）
      • $()工厂函数：产生一个squery对象
      • Js 和Jquery可以互相转换的
        • js-----query $( js 对象)
        • query------js jQuery对象[0] 或者jQuery对象.get(0)
    • 操作元素的内容
      • 双标签
        • 获取双标签的内容 html()
        • 设置双标签的内容 html(html内容)
        • text() 获取文本----不管标签
        • text(text内容) 设置内容-----不管标签，把标签也当成文本
      • 单标签
        • 获取内容 val()
        • 设置内容 val(value)
    • 操作样式
      • 获取 css("样式名)
      • 设置 css("样式名"，"样式值")
      • 设置 css("样式名"，"样式值"). css("样式名"，"样式值")

        

      • addClass("hide")
      • removeClass("hide")移除类标签
      • hsaClass("hide")是否含有
      • toggleClass("hide")交换 有hide就会删除,没有就会创建
      • toogle()方法 在现实和隐藏之间替换
      • 显示show() 隐藏hide()
    • 操作属性
      • 获取 attr(属性名) prop（属性名）获取动态变化的属性
      • 设置 attr(属性名，属性值) prop（属性名 属性值）

        

      • prop 针对type chencked 勾选框 checked属性 :checkbox 选中所有checked的勾选框
        • 勾选时返回true
        • 没有选中返回false

• 选择器

• 

• DOM属性

  • 创建元素
    • $("html")

      

      

• 添加元素
  • 往后添加

    

  • 往前添加

    

  • 后面插入

    

    

    • A.after(B) 在A后面添加B
    • A.insertAfter(B) 把A插入到B的后面
    • 往前面插入
    • A.before(B) 在A的前面添加B
    • A.insertBefore(B) 把A插入到B的前面
• 删除元素 不支持 父元素.remove(子元素)

  

• 访问元素
  • 1、选择器 $(选择器)
  • 2、关系
    • //子元素 父元素.append(子元素) 往末尾添加

      

    • 父元素 有且只有一个

      

    • parents () 祖先元素
    • next() 后面的兄弟
    • prev () 前面的兄弟元素
    • siblings() 除自己以外的所有兄弟
  • 3、index
    • $("p").index($p)索引$p元素 在所有p元素的位置
    • $(选择器).index(A元素) A元素在选择器中所占的索引位置

      

    • 如上，表示当前所选标签在所有h3标签中的位置
  • 4、遍历
    • $(选择器).each(function(){})

      

      • element 是指当前选中的对象，后面调用可用$(element)
      • index是指当前对象的索引，下标
    • 获取当前元素位置

• 事件

• 绑定事件
  • $("").bind("事件类型"，[data],function())，对动态添加的元素所绑定的事件无效，可以用on/live方法

    

    • $("").click(function(){ })
    • event.target 事件源
  • 可以设置多个处理程序

    

  • $("").unbind("事件类型") 移除事件
  • $("").unbind() 移除所有事件
• 事件类型
  • 鼠标事件
    • click
    • moouseover 鼠标移动上的时候 mouseenter
    • mouseout鼠标移出的时候
    • hover 鼠标悬浮 复合事件

      

  • 键盘事件
    • keydown
    • keyup
    • keypress
  • 窗口事件
    • js---window onload:页面加载完成时触发
    • jQuery read（） 页面加载完成时触发
      • 简化：$(function(){ })

        

• find() 方法
  • 获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。

• 动画

• 

   只举例了动画的常用属性，其他按需要可自行搜索。