首页 > 代码库 > 步步为营-56-JQuery基础
步步为营-56-JQuery基础
jQuery本质还是封装好的js,只不过代码更简洁,而做的更好
使用JQuery选择器会返回一个jQuery对象,其本质是dom数组,jQuery对象可以调用JQuery方法.
1 基本选择器
1.1 id选择器
jquery ==> $(‘#btnShow‘);
js ==> document.getElementById(‘btnShow‘);
1.2 标签选择器
jquery ==> $(‘img‘);
js ==> document.getElementsByTagName(‘img‘);
1.3 类选择器
js ==> document.getElementsByClassName(‘test‘);
2 属性
2.1 prop 表示HTML原有的属性
2.2 attr 表示扩展属性(较常用)
2.3 属性
2.3.1 设置属性
$(‘a‘).attr(‘href‘,‘http://www.baidu.com‘);
2.3.2 移除属性
$(‘a‘).removeAttr(‘href‘, ‘http://www.baidu.com‘);
2.3.3 获取value属性的值比较特殊
$(‘#btnShow‘).val();
2.3.4 设置value属性的值比较特殊
$(‘#btnShow‘).val(‘张三‘);
3 事件
3.1 方式一 bind(事件类型,处理函数);
3.2 方式二 事件类型(处理函数); 事件类型和DOM中的相同,去掉on前缀.
3.3 绑定点击事件,去掉on,用括号
$(‘#btnShow‘).click(function() {
alert(‘匿名函数做参数‘);
alert(this.value);//this是dom对象,不能调用jQuery方法
});
3.4 卸载事件
unbind();//移除所有事件处理程序
unbind(‘clicke‘);//移除所有事件处理程序
步步为营-56-JQuery基础