jquery特性
消除浏览器差异,简洁的操作DOM的语法$('#'),轻松实现动画,修改css等操作。
var jq= jQuery.noConflict() //可以修改$标识。
juqery核心
选择器 id tag class attribute
按属性查找: var a = $('[items="A B"]'); // 当属性中有空格或特殊标识符,需要用”“号隔开。
前缀查找:$('[class^="icon-"]') 后缀查找:$('[name$=with]')
组合查找:$('input[name=email]') 多项选择器:$('p.red,p.green')
>标识符仅用于直属父子关系的层级选择中:$('div ul li>span')
过滤器
新增nth-child(与数组下标index不同,起点从1开始)
odd:奇数下标 偶数位 even:偶数下标 奇数位
针对表单的特殊选择器
:input
:file / input[type=file]
:radio :checkbox 单复选框 :checked 选择当前勾上的单复选框
:focus 选择当前输入焦点元素
:enable :disable 选择能和不能输入
:visible :hidden 选择可见和隐藏元素
常见接口方法
$(xxx).find(接收任意选择器为参数)
$(xxx).parent(参数可选) //从当前节点的上层查找
$(xxx).next(参数可选) //同层下一个兄弟节点
$(xxx).prev(参数可选) //同层上一个兄弟节点
$(xxx)/filter(接受任意选择器为参数) //return true 拿到符合条件的节点
fist() last() slice(index,index) 返回一个新DOM对象
操作DOM节点
修改Text和Html
text()和html()分别获取文本和html
修改css
使用css默认的类似"background-color"或js规定的驼峰命名法"backgroundColor"都可以设置css的属性名称
修改class属性
$(xxx).hasClass(xxx) $(xxx).addClass(xxx) //通过addClass可以创建css样式 $(xxx).removeClass(xxx)
显示或隐藏DOM
$(xxx).show() $(xxx).hide()
操作DOM节点属性
attr("属性名","属性值") removeAttr("属性名")
prop()与attr() 但在处理隐式属性如checked时不同,前者返回"checked",后者返回"true"
selected属性处理时最好用is(':selected')
表单元素统一使用val()处理对应的value属性,统一了取值和赋值操作
添加DOM
除了html() //过于暴力 还可以用父节点.append()和父节点prepend()
同级节点使用before() //代替js中的insertBefore() after() //代替js中的insertAfter()
删除节点
父节点.remove() 没有参数的情况下一次删除多个子节点
事件处理
var a = $('#test-link'); a.on('click', function (){});
on方法用来绑定事件,需要传入事件名称和相应的处理函数
鼠标事件
click dblclick mouseenter mouseleave mousemove hover
键盘事件
keydown keyup keypress
其他事件
focus blur change submit
ready仅用于加载document对象
$(document).ready(function(){ //$(function(){ });
//将初始化代码放在ready事件中,以确保DOM已完成初始化
});
事件参数
$(function(){
$('#testMouseMoveDiv').mousemove(function(e){
$('#testMouseMoveSpan').text('pageX = '+ e.pageX +', pageY = '+ e.pageY);
});
});
事件传入Event对象作为参数
取消绑定
off('event',function) 实现,需要注意,以下写法无效:
// 绑定事件:a.click(function(){alert('hello!');});// 解除绑定:a.off('click',function(){alert('hello!');});
两个匿名函数对应不同的对象,无法移除已绑定的第一个参数
正确用法:off('click') 或调用无参数函数xxx.off()