jQuery选择器与事件

JQuery

JQuery选择器的分类：

通过css选择器选取元素：

基本选择器：

标签选择器：$("ul")

类选择器 $("class")

id选择器 $("id")

全局选择器 $("*")

并集选择器 $("ID,class,ul")

层次选择器：

后代选择器：$("ul li")

子类选择器： $("ul>li")

相邻选择器： $("h3+p") 拿的是下一个元素

同辈选择器： $("h3~p") 拿的是之后 同辈的所有

所有兄弟选择器： .siblings

属性选择器：

包含某属性 $("a[href]")

包含某属性并且属性值等于绝对值 $("a[href='abc']")

包含某属性并且属性值不等于绝对值 $("a[href!='abc']")

属性值以xx开头 $("a[href^='abc']")

属性值以xx结尾 $("a[href$='abc']")

包含某属性的绝对值 $("a[href*='abc']")

通过过滤选择器选取元素：

基本过滤选择器：

第一个元素 $("ul:first")

大于某索引的元素 $("ul:gt(0)") 前几个不渲染 后几个渲染 大于

小于某索引的元素 $("ul:lt(0)") 前几个人渲染 //小于给定索引值的元素

最后一个元素 $("ul:last")

根据索引选择指定的元素 $("ul:ep(0)")

获取焦点元素 $(":focus")

正在执行动画的元素 $(":animated")

所有的标题元素 $(":header")

所有的奇数元素 $("li:odd")

所有的偶数元素 $("li:even")

不包含执行元素 $("li:not(.aaa)")

可见性过滤选择器：

获取所有不可见的元素 $(":hidden")

获取所有可见的元素 $(":visible")

注意事项：

空格不要随便写：以为空格是后代

JQuery 事件和动画

基础事件 ：
    键盘事件
    鼠标事件
    window窗口事件
    表单事件
复合事件：
    鼠标光标悬停
    鼠标连续点击

鼠标事件：

JQuery JQuery选择器的分类： 通过css选择器选取元素： 基本选择器： 标签选择器：$("ul") 类选择器 $("class") id选择器 $("id") 全局选择器 $("*") 并集选择器 $("ID,class,ul") 层次选择器： 后代选择器：$("ul li") 子类选择器： $("ul>li") 相邻选择器： $("h3+p") 拿的是下一个元素 同辈选择器： $("h3~p") 拿的是之后 同辈的所有 所有兄弟选择器： .siblings 属性选择器： 包含某属性 $("a[href]") 包含某属性并且属性值等于绝对值 $("a[href='abc']") 包含某属性并且属性值不等于绝对值 $("a[href!='abc']") 属性值以xx开头 $("a[href^='abc']") 属性值以xx结尾 $("a[href$='abc']") 包含某属性的绝对值 $("a[href*='abc']") 通过过滤选择器选取元素： 基本过滤选择器： 第一个元素 $("ul:first") 大于某索引的元素 $("ul:gt(0)") 前几个不渲染 后几个渲染 大于 小于某索引的元素 $("ul:lt(0)") 前几个人渲染 //小于给定索引值的元素 最后一个元素 $("ul:last") 根据索引选择指定的元素 $("ul:ep(0)") 获取焦点元素 $(":focus") 正在执行动画的元素 $(":animated") 所有的标题元素 $(":header") 所有的奇数元素 $("li:odd") 所有的偶数元素 $("li:even") 不包含执行元素 $("li:not(.aaa)") 可见性过滤选择器： 获取所有不可见的元素 $(":hidden") 获取所有可见的元素 $(":visible") 注意事项： 空格不要随便写：以为空格是后代 JQuery 事件和动画 基础事件 ：   键盘事件   鼠标事件   window窗口事件   表单事件 复合事件：   鼠标光标悬停   鼠标连续点击 鼠标事件： 方法 描述 执行时机 click() 触发或将函数绑定到指定元素click事件 单机鼠标时 mouseover 触发或将函数绑定到指定元素的mouseover事件 鼠标移过时 mouseout 触发或将函数绑定到指定元素的mouseout事件 鼠标移出时 mouseenter 触发或将函数绑定到指定元素的mouseenter事件 鼠标指针进入时 mouseleave 触发或将函数绑定到指定元素的mouseleave事件 鼠标指针离开时 方法 相同点 不同点 mousever() 鼠标进入备选元素时触发 鼠标在其备选元素的子元素上来回进入时触发mouseover(),不触发mouseenter() mouseenter() mouseout() 鼠标离开备选元素时触发 鼠标在其备选元素的子元素上来回离开时触发mouseout(),不触发mouseleave() mouseleave() 键盘事件 属性 键值码：.keyCode                                                   enter==>13 名称 描述 执行时机 keydown() 触发或将函数绑定到指定元素的keydown事件 键盘按下时 keyup() 触发或将函数绑定到指定元素的keyup事件 键盘抬起时 keypress() 触发或将函数绑定到指定元素的keypress事件 产生可打印字符时 窗口事件 方法： 调整窗口大小时$(window).resize() 属性 浏览器宽度$(window.innterWidth) 浏览器长度$(window.innterHeight)

鼠标事件方法的区别：

方法	相同点	不同点
mousever()	鼠标进入备选元素时触发	鼠标在其备选元素的子元素上来回进入时触发mouseover(),不触发mouseenter()
mouseenter()
mouseout()	鼠标离开备选元素时触发	鼠标在其备选元素的子元素上来回离开时触发mouseout(),不触发mouseleave()
mouseleave()

键盘事件

属性 键值码：.keyCode                                                   enter==>13

名称	描述	执行时机
keydown()	触发或将函数绑定到指定元素的keydown事件	键盘按下时
keyup()	触发或将函数绑定到指定元素的keyup事件	键盘抬起时
keypress()	触发或将函数绑定到指定元素的keypress事件	产生可打印字符时

窗口事件

方法：
    调整窗口大小时$(window).resize()
属性
    浏览器宽度$(window.innterWidth)
    浏览器长度$(window.innterHeight)