一。区别
- attr()prop()is();attr()返回是属性值,prop(),is()返回的是布尔值;<input type="checkbox" checked="checked"/>,attr("checked")=>checked;prop("checked")=>true;is("checked")=>true;具有true和false两个属性,如checked,selected,disabled使用prop(),其他自定义属性用attr()
二。选择器
- 基本选择器
- $("div")元素选择器
- $("#id")id选择器
- $(".class")class选择器
- $("#id,div,.class")组合选择器
- 层次选择器
- $("#id>.class")子元素选择器
- $("#id .class")后代元素选择器
- $("#id+.class")紧邻下一个元素选择器
- $("#id ~ div")兄弟元素选择器
- 过滤选择器(重点)
- $("li:first")选择第一个li元素
- $("li:last")选择最后一个li元素
- $("li:odd")选择下标为奇数的li
- $("li:even")选择下标为偶数的li
- $("li:eq(2)")选择下标为2的li
- $("li:not(#id)")选择除了id="id"之外的所有li元素
- $("li:gt(2)")选择下标大于2的li
- $("li:lt(2)")选择下标小于2的li
- 内容过滤选择器:
- $("div:contains(John)")选择所有div中含有John文本的元素
- $("td:empty")选择所有的为空的td元素的数组
- $("div:has(p)")选择所有含有p标签的div元素
- $("td:parent")选择所有的以td为父节点的元素数组
- 可视化过滤选择器:
- $("div:hidden")选择所有的被hidden的div元素
- $("div:visible")选择所有的可视化的div元素
- 属性过滤选择器:
- $("div[id]")选择所有含有id属性的div元素
- $("input[name='name']")选择name属性为name的input元素
- $("input[name^='news']")开头
- $("input[name$='news']")结尾
- $("input[name*='man']")选择所有的name为man的input元素
- 子元素过滤选择器:
- $("ul li:nth-child(2)"),$("ul li:nth-child(odd)")
- $("div span:first-child")
- $("div span:last-child")
- $("div button:only-child")
- 表单元素选择器:
- $(":input")所有的表单元素
- $(":text")所有的单行文本框
- $(":password")所有的密码框
- $(":radio")所有的单选按钮
- $(":checkbox")所有的复选框
- $(":hidden")所有类型为hidden的input元素或表单的隐藏域
- $(":reset")所有的重置按钮
- $(":file")所有的文件域
- 表单元素过滤器:
- $(":enabled")
- $(":disabled")
- $(":checked")
- $("select option:selected")选择所有的select的子元素中被selected的元素
三。jQuery事件:
- 鼠标事件:
- click
- dblclick
- mouseenter鼠标指针划过元素
- mouseleave鼠标离开元素
- mousedown鼠标划过元素并且按下鼠标按键
- mouseup在元素上松开鼠标按钮,触发
- hover鼠标悬停事件,是mouseenter和mouseleave的混合
- 键盘事件:
- keydown键按下的过程
- keyup键被松开
- keypress键被按下
- 表单事件:
- submit提交表单时,会发生submit事件,该事件只适用于<form>元素
- change当表单元素的值改变时
- focus
- blur
- .on(),.off()
jQuery效果:
- 基本:
- show()
- hide()
- toggle()
- 滑动:
- slideUp()
- slideDown()
- slideToggle()
- 淡入淡出:
- fadeIn(speed,callback)
- fadeOut(speed,callback)speed为fast,slow,3000等数值
- fadeTo(speed,opacity,callback)加透明度(值介于0-1之间)
- fadeToggle(speed,callback)切换,如果元素已经淡出,则fadeToggle()会向元素添加淡入效果
- 自定义:
- animate({params},speed,callback)
- stop()停止动画或者其他效果
- delay()
- finish()
四。jQuery设置或者捕获内容:
- text()所选元素的文本内容
- html()设置或者返回所选表单的内容
- val()表单字段的值
五。jQuery添加或者删除元素:
- 添加元素:
- append()在被选元素结尾插入内容
- prepend()开头
- after()在被选元素之后插入内容
- before()之前
- 删除元素:
- remove()删除被选元素(及其子元素)
- empty()删除被选元素的子元素
六。jQuery操作css类:
- addClass()
- removeClass()
- toggleClass()
七。jQuery操作css方法:
- css();
八。jQuery的一些问题:
- jQuery库中的$()是什么?
$()函数是jQuery()函数的别称,可以被允许调用定义在jQuery对象上的多个不同方法。
- $(this)和this关键字在jQuery中有何不同?
$(this)返回一个jQuery对象,可以对它调用多个jQuery方法,比如text(),val();this代表当前元素,是js的关键词,表示上下文当前的DOM元素,不能对它调用jQuery方法。