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:对象序列化

 

 

 

 

 

 

转载于:https://www.cnblogs.com/charleszhang1988/archive/2013/04/07/2990921.html