1. 简介

JQuery能做什么？

  • 访问和操作DOM元素
  • 控制页面样式
  • 对页面事件进行处理
  • 扩展新的jQuery插件
  • 与Ajax技术完美结合

为什么要用 JQuery ？

使用JQuery可以大大的减少JS代码，简化 DOM操作

JQuery对象 与 DOM对象

通过 $( xx ) 获取到的都是 jquery 对象。而通过JS的 getElementBy... 获取到的都是DOM对象。

只有JQuery对象才能使用 JQuery 分装好的方法。

将DOM对象转换为JQuery对象： $( js对象 )

将JQuery对象转化为DOM对象：jq.get( index )

2. 选择器

绝大部分与css选择器相同，但也有细微差别：

属性选择器：

支持 不等于 的语法

$("[attr!='xxx']")

过滤选择器：

$("xx:first")  	//选取第一个元素      注意：与css的first-child 选择每组第一个不同，它只选择一个
$("xx:last")  	//选取最后一个元素
$("xx:even")  	//选取索引为偶数的元素
$("xx:odd") 	//选取索引为奇数的元素 注意：与css的nth-child(index) 不同，这里的索引 从0开始
$("xx:eq(2)") 	//选取第 2 个元素
$("xx:gt(2)")  	//选取索引大于 2 的元素
$("xx:lt(2)")  	//选取索引小于 2 的元素

3. 事件

鼠标事件：click() mouseover()【鼠标进入事件】 mouseout()

键盘事件：keyup() keydown()

表单事件：focus() blur() change()

加载完成事件：$(document).ready(function(){}) 可简写为 $(function(){ . . . })

JQuery中这些函数既可以用于绑定事件，也可以用于触发相应的事件。

$("xxx").click()  // 相当于 点了一下 xxx
$("xxx").click(function(){
    // 为 xxx 绑定 点击事件
    // this 与 event 与使用 DOM绑定事件时 一样。
})

复合事件：

$("xxx").hover(function(){
    // 鼠标进入 触发
},function(){
    // 鼠标移出 触发
});

事件的动态绑定：

$("xxx").on("事件1 事件2",function(){
    // 触发的内容
})

4. 元素的显示和影藏

  • show(speed) 显示
  • hide(speed) 影藏 【右下到左上，逐渐收缩】
  • toggle(speed) 切换 显示 或 影藏
  • slideDown( speed ) 显示
  • slideUp( speed ) 影藏 【从下到上，逐渐收缩】
  • slideToggle(speed) 切换显示状态
  • fadeIn(speed) 淡入效果 改变透明度，逐渐显现出来
  • fadeOut(speed) 淡出效果
  • fadeToggle(speed) 切换显示状态

speed 参数可取值："slow" "fast" 或者 执行时间

JQuery中函数支持连式编程

5. 常用函数

  1. 属性函数
    attr("属性名") // 获取属性值
    attr("属性名"，"属性值") // 设置属性值
    attr({属性1:"值", 属性2:"值"})
  2. val( ) 获取或设置value值
  3. html( ) 获取或设置标签内的 html
  4. text( ) 获取或设置标签内的 文本内容
  5. 样式函数
    css("属性") 获得对应css属性的值
    css("属性", "值") 设置 css 属性值
    css({ ..... }) 键值对，批量设置属性值
  6. width( ) 获取 或 设置 元素的宽度
    height( ) 获取 或 设置 元素的高度
  7. addClass("类名")； // 添加类样式
    removeClass("类名") // 删除类样式
    toggleClass("类名") // 切换，存在该样式就取消，否则添加该样式

6. 节点操作

  1. 创建节点
    $("HTML语句") // 将HTML语句转化为新创建的JQuery对象
  2. 插入节点
    插入子节点

插入同辈节点

JQuery基础_css

  1. 替换节点
$(selector).replaceWith(content)

content可以是 html语句 DOM对象 JQuery对象 用后后边的替换前边的

$(content).replaceAll(selector)

用前边的替换后边的

  1. 复制节点
    A.clone() 复制当前节点 A
  2. 删除节点
    remove() 删除整个节点
    empty() 清空节点内容

7. 节点遍历

  1. 获取父辈节点
    parent() // 获取节点的直接父元素
    parents( [selector] ) // 返回所有父节点，知道body节点。 可以通过传入选择器对结果进行筛选。
  2. 选择同辈节点
    next() // 获取与之紧邻的下一个同辈元素
    prev() // 获取与之紧邻的上一个同辈元素
    siblings( [selector] ) // 匹配节点前后的所有同辈元素，可以通过传入选择器对结果进行筛选。
  3. 选择后代节点
    children( [selector] ) // 返回所有的直接子元素，可以通过传入选择器对结果进行筛选。
    find( selector ) // 返回所有的后辈元素，必须通过选择器进行筛选。

8. 结果集过滤函数

  1. first() // 获取结果集的第一个元素
  2. last() // 获取结果集的洗后一个元素
  3. eq(index) // 获取结果集的第 index个元素，注意：与get(index) 不同，get返回的是DOM对象，eq返回的是JQuery对象
  4. not( selector ) // 排除被选择器选中的元素
  5. A.is("元素名") // 判断 JQuery 对象 A 是不是某种类型的元素。