JQuery

JQuery是掉JavaScript的封装，用于简化js代码

JQuery语法

• $(选择器).action()
• $(document).ready();//action()
• $(document).ready();//DOM节点加载后（不需要节点的内容加载完毕）

常用语法

• css("属性","属性值");//设置元素的css属性值
• addClass("类名");//给元素增加类名
• next();//该元素其后紧邻的同辈元素
• html();//获取元素的html内容

JQuery选择器

jquery的选择器和css类似，

• 标签选择器
  • 直接使用html标签名作为选择器 $("p")表示选择页面中所有的

    标签

• 类选择器
  • 使用标签的class属性值为选择器，$(".btn")表示选择页面中class值为btn的元素
• id选择器
  • 使用元素的id值作为选择器，$("#title")表示选取页面中id为title的元素
• 还有并集选择器（逗号隔开）、交集选择器（标签.类名或标签#id名）、全局选择器（*）、后代选择器（空格隔开）、子选择器（用大于号隔开）、相邻元素选择器（用加号隔开）。
• 属性选择器
  • 按照属性名选择元素
    • $("[href]") 表示选择所有设置href属性的元素
  • 按照属性值来选择元素
    • $("[href='#']") 表示选择href属性值为#的所有元素
    • $("[href!='#']") 表示选择href属性值不等于#的所有元素
    • $("[href^='en']")表示算则href属性值以en开头的所有元素
    • $("[href$='.jpg']")表示算则href属性值以.jpg开头的所有元素
    • $("[href*='text']")表示算则href属性值含有text的所有元素
  • 满足多个符合条件的属性
    • $("li[id][title='要点']") 表示选择具有id属性，并且title属性值为“要点”的li元素
• 过滤选择器
  • 使用：表示在冒号前面的选择器中筛选出符合冒号后特征的元素
  • :first 表示选择第一个元素
  • :last 最后一个
  • :even 索引为偶数 从0开始
  • :odd 索引为奇数
  • :eq(num)索引等于num
  • :gt(num) 索引大于num
  • :lt(num) 索引小于num
  • :not(selector)选择不匹配selector选择器的元素
  • :header 选择标题元素
  • :focus 获取焦点的元素
  • :visible 选择所有可见的元素
  • :hidden 选择所有隐藏的元素
• 表单元素选择器
  • :表单元素
    • :input 选择表单中所有的表单元素
    • :radio选择表单中的单选按钮
    • 其他的表单元素都可以选择

JQuery的事件

• 鼠标事件
  • click 单击
    • 触发事件
      • $("xxx").click(); 表示触发xxx元素的单击事件
    • 定义单击事件
      • $("xxx").click(function(){}); 表示定义单击事件，如果xxx元素被单击，则执行function函数
  • 以下的事件都有触发事件和定义事件
  • dblclick 双击
    • $("xxx").dblclick(function(){});定义双击事件
    • 注意：双击事件触发时，一定会引起单击时间的触发（2次），所以在同一个元素同时定义单击和双击事件时，单击时间不要使用alert等弹出模态框的语句，因为这个的话就会产生中断，而不会触发双击
  • mouseenter 鼠标移入
    • $("xxx").mouseenter(funtion(){});定义鼠标移入事件
  • mouseleave 鼠标移出
  • mouseover 鼠标移入
  • mouseout 鼠标移出
  • mouseenter/mouseleave事件与mouseover/mouseout事件
    • 相同点：都是鼠标移入/移除某个元素范围内的事件
    • 不同点：mouseenter/mouseleave之间则该元素的移入移出事件，mouseover/mouseout检测本元素及其子元素的移入移出事件
  • hover 鼠标悬停
    • 组合事件，详单与mouseover与mouseout的组合
    • $("xxx").hover(function(){},function(){});第一个function是鼠标移入时的响应函数，第二个是鼠标移出时的响应函数。
• 键盘事件
  • keydown 键按下事件（键盘上的所有按钮都能触发此事件）
  • keyup 键弹起事件
  • keypress 键按下事件（只检测可打印的按键，如alt、ctrl、tab等按键检测不到）
• 表单事件
  • focus 获取焦点事件
  • blur 失去焦点事件
• JQuery动画
  • 常用动画包括元素的显示和隐藏，切换状态，淡入淡出，滑动效果
  • 显示和隐藏
    • show() 显示元素
      • 传入参数可以为数值，表示多少毫秒，也可以传入slow、normal、fast，也可以不传
    • hide() 隐藏元素
      • 传入参数同show()
    • toggle() 切换元素的可见状态
      • 传入参数同show()
  • 淡入和淡出
    • fadeIn() 淡入
      • 传入参数同show()
    • fadeO ut() 淡出
      • 传入参数同show()
  • 滑动效果
    • slideDown() 滑动显示
      • 传入参数同show()
    • slideUp() 滑动隐藏
      • 传入参数同show()
• JQuery操作Dom
  • JQuery设置css样式 name和value都要用双引号引起来
    • css(name,value) 设置元素的单个样式属性，name是设置的属性名，value是设置的属性值
    • css({name:value,name:value}) 设置过个样式属性，过个样式外面使用{}，每个样式以name:value的形式表示，过个属性之间使用逗号隔开
    • addClass(className) 给元素添加名为className的属性，可以添加多个，多个之间使用空格隔开
    • removeClass(className) 删除名为className的属性，可以添加多个，多个之间使用空格隔开
    • toggleClass(className) 切换元素的className的属性，如果有，则删除，如果没有，则添加
  • JQuery操作元素的内容
    • html()操作元素的html内容
      • html()返回第一个匹配元素的html内容
      • html(content) 将content设置为所有匹配元素的html内容，及设置为子标签
    • text() 操作元素的文本内容
      • text() 返回所有匹配元素的文本内容
      • text(content) 将content设置为所有匹配元素的文本内容
    • val() 操作元素的value属性
      • val() 返回元素的value值
      • val(value)设置元素的value值
  • JQuery节点操作
    • 创建节点
      • $(element)
      • $(html代码)
    • 插入节点
      • 插入子节点
        • $(A).append(B) 表示将B插入到A的最后一个子节点
        • $(A).appendTo(B) 表示将A插入到B的最后一个子节点
        • $(A).prepend(B) 表示将B插入到A的第一个子节点
        • $(A).prependTo(B) 表示将A插入到B的第一个子节点
      • 插入同辈节点
        • $(A).after(B) 表示将B插入到A之后
        • $(A).insertAfter(B) 表示将A插入到B的后面
        • $(A).before(B) 表示B插入到A之前
        • $(A).insertBefore(B) 表示将A插入到B之前
    • 替换节点
      • $(A).replaceWith(B) 使用节点B替换节点A
      • $(A).replaceAll(B) 使用节点A替换节点B
    • 复制节点
      • clone() 仅复制节点内容
      • clone(true) 负直节点内容及其响应事件
    • 删除节点
      • remove() 删除整个节点
      • detach() 删除整个节点，但保留元素的事件绑定等
      • empty() 清空节点内容
    • 操作节点的属性
      • attr() 获取或者设置节点的属性
        • attr(name) 获取name对应的属性值
        • attr({name1:value1,name2:value2})
      • remove(name) 删除name对应的属性 
    • 遍历子元素
      • .children() 获取所有的子元素
    • 遍历同辈元素
      • next() 后面一个同辈元素
      • prev() 前面一个同辈元素
      • siblings() 匹配元素前面和后面所有的同辈元素
    • 遍历父辈元素
      • parent() 该元素的父辈元素
      • parents() 该元素的所有祖先元素