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. 常用函数
- 属性函数
attr("属性名") // 获取属性值
attr("属性名"，"属性值") // 设置属性值
attr({属性1:"值", 属性2:"值"}) - val( ) 获取或设置value值
- html( ) 获取或设置标签内的 html
- text( ) 获取或设置标签内的 文本内容
- 样式函数
css("属性") 获得对应css属性的值
css("属性", "值") 设置 css 属性值
css({ ..... }) 键值对，批量设置属性值 - width( ) 获取 或 设置 元素的宽度
height( ) 获取 或 设置 元素的高度 - addClass("类名")； // 添加类样式
removeClass("类名") // 删除类样式
toggleClass("类名") // 切换，存在该样式就取消，否则添加该样式
6. 节点操作
- 创建节点
$("HTML语句") // 将HTML语句转化为新创建的JQuery对象 - 插入节点
插入子节点
插入同辈节点
- 替换节点
$(selector).replaceWith(content)content可以是 html语句 DOM对象 JQuery对象 用后后边的替换前边的
$(content).replaceAll(selector)用前边的替换后边的
- 复制节点
A.clone() 复制当前节点 A - 删除节点
remove() 删除整个节点
empty() 清空节点内容
7. 节点遍历
- 获取父辈节点
parent() // 获取节点的直接父元素
parents( [selector] ) // 返回所有父节点，知道body节点。 可以通过传入选择器对结果进行筛选。 - 选择同辈节点
next() // 获取与之紧邻的下一个同辈元素
prev() // 获取与之紧邻的上一个同辈元素
siblings( [selector] ) // 匹配节点前后的所有同辈元素，可以通过传入选择器对结果进行筛选。 - 选择后代节点
children( [selector] ) // 返回所有的直接子元素，可以通过传入选择器对结果进行筛选。
find( selector ) // 返回所有的后辈元素，必须通过选择器进行筛选。
8. 结果集过滤函数
- first() // 获取结果集的第一个元素
- last() // 获取结果集的洗后一个元素
- eq(index) // 获取结果集的第 index个元素，注意：与get(index) 不同，get返回的是DOM对象，eq返回的是JQuery对象
- not( selector ) // 排除被选择器选中的元素
- A.is("元素名") // 判断 JQuery 对象 A 是不是某种类型的元素。