jquery基础2
- 属性操作
attr():可以设置和获取某个元素的属性值,有两种用法:$("xx").attr("attr","value|fn.."),基于json的数据格式$("xx").attr({"attr":"value","xx":"xx"})
可以使用$("xx").removeAttr("attr")来移除属性
data:jquery1.4后新增使用data("xx","xx")可以隐式的为某个标签元素设置属性值
通过使用表头的title属性将表格组装成一个个的对象。
addClass():添加样式,removeClass():移除样式,hasClass(""):判断是否有样式.实现鼠标移动的样式的添加和删除:$("xx").mouseover(function(){$(this).addClass("xx");}).mouseout(function(){$(this).removeClass("xx");}),toggleClass()实现add和remove的功能
样式:.css()方法实现为元素添加样式,还有一些方法如:height(),width()可实现常用的样式的操作。
- 节点操作
html()获取文本和标签,text()只获取文本内容不获取标签内容
detach():从包裝集删除
empty():清除元素
使用$("xx").before("xx").remove()可模拟出节点替换的效果replaceWith()返回原有包裝集
- 表单操作
为input的checkbox赋值:$("input(name='checkbox')).val(["xx","xx"])val里面只能传入数组
赋值:为checkbox,radio,select设置值.val()方法
checkbox全选功能:$("#all").click(funciton(){//为全选按钮添加点击事件
if($(this).prop("checked"){//判断全选按钮是否被选中
$("input[type='checkbox'].prop('checked',true);//如果被选中则设置所有的checkbox选中状态
}esle{
$("input[type='checkbox'].prop('checked',false);//否则取消全选状态
}
});
checkbox的反选功能:$("reverse").click(function(){
var isChecked = $("input[type='chcekbox']:not("#all):checked)");//获取选中的选项
var notChecked = $("input[type='checkboc']:not("#all):not(checked)");//获取未选中的选项
isChecked.prop("checked",false);//选中的选项设置为未选中
notChecked.prop("checked",true);//未选中的设置为选中状态
})
- 事件
事件:event?event:window.event,事件源:event.target?event.target:event.srcElement,DOM0阻止事件冒泡event.stopPropagation(),IE通过event.cancelBubble =true;
bind():$("xx").bind("event",function(event){
event.stopPropagation()//阻止事件冒泡
event.preventDefault()
})
one():只会执行一次
bind():可通过在中间加空格来绑定多个事件.bind()事件没有办法为新增的元素添加绑定事件,使用live()可解决这个问题,事件委托机制
live():live方法的开销大,closest():查找最近的元素,live()方法的第二个参数可指定执行的上下文
delegate():事件委派
jquery1.8后使用on()来替代bind,live,delegate,$("xx").on("event",function(event){})-->bind(),$("xx").on("event","xx", function(event){})-->delegate()
鼠标事件:
mouseover(),mouseout(),mouserenter(),mouseleave(),hover()
动画效果:animate()
jquery解决冲突问题:在jquery中$符号是jQuery对象的别名引用,然而在其他的js框架中有时也是习惯使用$符号来引用对象,此时就会带来冲突问题,因此在jquery中提供的一个方法来关闭$符号的引用,即:jQuery.noConflict();当调用这个方法后,$就不再是jQuery对象的引用了,只能用jQuery来引用jquery对象。把jQuery.noConflict()方法的返回对象赋值给一个变量,此后这个变量就可取代$符合来引用jQuery对象了,如:var $j = jQuery.noConflict(); $j("xx")等价于jQuery("xx").
- 工具集
browser:用于判断浏览器类型(safari,msie,firefox,opera), alert($.browser.msie);
extend:实现值的复制,extend(object1,object2),会将object2的值复制到object1中返回新的值,object1变为新的值,extend(vo,o1,o2)o2复制到o1,把新的值赋值给vo并返回vo,o1值不变
grep:过滤函数var num = $.grep([1,2,3,4],function(n,i){//n代表元素,i代表索引值
return n%2==0;
}) //num为一个数组[2,4]
var istr = $.grep($("table tr"),function(n,i){
return $(n).find("td").is(":contains('xx')");//返回td中包含xx值的tr
})
inArray:用于判断某个元素是否在某个数组中,$.inArray(1,[1,2,3])如果存在则返回元素所在的小标值(从0开始)否则返回-1。
map,merge
param:对象序列化