Jquery 经典总结：十二个常用要领
发布时间：2018-08-16 14:36:13 所属栏目：业界 来源：站长网
导读：1、关于页面元素的引用 通过jquery的$()引用元素包罗通过id、class、元素名以及元素的层级相关及dom可能xpath前提等要领，且返回的工具为jquery工具（荟萃工具），不能直接挪用dom界说的要领。 2、 jQuery 工具与dom工具的转换 只有jquery工具才气行使jquer
|
1、关于页面元素的引用 通过jquery的$()引用元素包罗通过id、class、元素名以及元素的层级相关及dom可能xpath前提等要领，且返回的工具为jquery工具（荟萃工具），不能直接挪用dom界说的要领。 2、jQuery工具与dom工具的转换 只有jquery工具才气行使jquery界说的要领。留意dom工具和jquery工具是有区此外，挪用要领时要留意操纵的是dom工具照旧jquery工具。 平凡的dom工具一样平常可以通过$()转换成jquery工具。 如：$(document.getElementById("msg"))则为jquery工具，可以行使jquery的要领。 因为jquery工具自己是一个荟萃。以是假如jquery工具要转换为dom工具则必需取出个中的某一项，一样平常可通过索引取出。 如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]这些都是dom工具，可以行使dom中的要领，但不能再行使Jquery的要领。 以下几种写法都是正确的： $("#msg").html(); $("#msg")[0].innerHTML; $("#msg").eq(0)[0].innerHTML; $("#msg").get(0).innerHTML; 3、怎样获取jQuery荟萃的某一项 对付获取的元素荟萃，获取个中的某一项（通过索引指定）可以行使eq或get(n)要领可能索引号获取，要留意，eq返回的是jquery工具，而get(n)和索引返回的是dom元素工具。对付jquery工具只能行使jquery的要领，而dom工具只能行使dom的要领，如要获取第三个<div>元素的内容。有如下两种要领： $("div").eq(2).html(); //挪用jquery工具的要领 $("div").get(2).innerHTML; //挪用dom的要领属性 4、统一函数实现set和get Jquery中的许多要领都是云云，首要包罗如下几个： $("#msg").html(); //返回id为msg的元素节点的html内容。 $("#msg").html("<b>new content</b>"); //将“<b>new content</b>” 作为html串写入id为msg的元素节点内容中,页面表现粗体的new content $("#msg").text(); //返回id为msg的元素节点的文本内容。 $("#msg").text("<b>new content</b>"); //将“<b>new content</b>” 作为平凡文本串写入id为msg的元素节点内容中,页面表现<b>new content</b> $("#msg").height(); //返回id为msg的元素的高度 $("#msg").height("300"); //将id为msg的元素的高度设为300 $("#msg").width(); //返回id为msg的元素的宽度 $("#msg").width("300"); //将id为msg的元素的宽度设为300 $("input").val("); //返回表单输入框的value值 $("input").val("test"); //将表单输入框的value值设为test $("#msg").click(); //触发id为msg的元素的单击变乱 $("#msg").click(fn); //为id为msg的元素单击变乱添加函数 同样blur,focus,select,submit变乱都可以有着两种挪用要领 5、荟萃处理赏罚成果 对付jquery返回的荟萃内容无需我们本身轮回遍历并对每个工具别离做处理赏罚，jquery已经为我们提供的很利便的要领举办荟萃的处理赏罚。 包罗两种情势： $("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][i]}) //为索引别离为0，1，2的p元素别离设定差异的字体颜色。 $("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]}) //实现表格的隔行换色结果 $("p").click(function(){alert($(this).html())}) //为每个p元素增进了click变乱，单击某个p元素则弹出其内容 6、扩展我们必要的成果 $.extend({ min: function(a, b){return a < b?a:b; }, max: function(a, b){return a > b?a:b; } }); //为jquery扩展了min,max两个要领 行使扩展的要领（通过“$.要领名”挪用）： alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20)); 7、支持要领的连写 所谓连写，即可以对一个jquery工具持续挪用各类差异的要领。 譬喻： $("p").click(function(){alert($(this).html())}) .mouseover(function(){alert('mouse over event')}) .each(function(i){this.style.color=['#f00','#0f0','#00f'][i]}); 8、操纵元素的样式 首要包罗以下几种方法： $("#msg").css("background"); //返回元素的配景颜色 $("#msg").css("background","#ccc") //设定元素配景为灰色 $("#msg").height(300); $("#msg").width("200"); //设定宽高 $("#msg").css({ color: "red", background: "blue" });//以名值对的情势设定样式 $("#msg").addClass("select"); //为元素增进名称为select的class $("#msg").removeClass("select"); //删除元素名称为select的class $("#msg").toggleClass("select"); //假如存在（不存在）就删除（添加）名称为select的class 9、完美的变乱处理赏罚成果 Jquery已经为我们提供了各类变乱处理赏罚要领，我们无需在html元素上直接写变乱，而可以直接为通过jquery获取的工具添加变乱。 如： $("#msg").click(function(){alert("good")}) //为元素添加了单击变乱 $("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][i]}) //为三个差异的p元素单击变乱别离设定差异的处理赏罚 jQuery中几个自界说的变乱： （1）hover(fn1,fn2)：一个仿照悬停变乱（鼠标移动到一个工具上面及移出这个工具）的要领。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。 //当鼠标放在表格的某行上时将class置为over，分开时置为out。 $("tr").hover(function(){ $(this).addClass("over"); }, function(){ $(this).addClass("out"); }); （2）ready(fn):当DOM载入停当可以查询及哄骗时绑定一个要执行的函数。 $(document).ready(function(){alert("Load Success")}) //页面加载完毕提醒“Load Success”,差异于onload变乱，onload必要页面内容加载完毕（图片等），而ready只要页面html代码下载完毕即触发。与$(fn)等价 （3）toggle(evenFn,oddFn): 每次点击时切换要挪用的函数。假如点击了一个匹配的元素，则触发指定的第一个函数，当再次点击统一元素时，则触发指定的第二个函数。随后的每次点击都一再对这两个函数的轮替挪用。 //每次点击时轮换添加和删除名为selected的class。 $("p").toggle(function(){ $(this).addClass("selected"); },function(){ $(this).removeClass("selected"); }); （4）trigger(eventtype): 在每一个匹配的元素上触发某类变乱。 譬喻： $("p").trigger("click"); //触发全部p元素的click变乱 （5）bind(eventtype,fn)，unbind(eventtype): 变乱的绑定与反绑定 从每一个匹配的元素中（添加）删除绑定的变乱。 譬喻： $("p").bind("click", function(){alert($(this).text());}); //为每个p元素添加单击变乱 $("p").unbind(); //删除全部p元素上的全部变乱 $("p").unbind("click") //删除全部p元素上的单击变乱 10、几个适用殊效成果 个中toggle()和slidetoggle()要领提供了状态切换成果。 如toggle()要领包罗了hide()和show()要领。 slideToggle()要领包罗了slideDown()和slideUp要领。 11、几个有效的jQuery要领 $.browser.赏识器范例：检测赏识器范例。有用参数：safari, opera, msie, mozilla。如检测是否ie：$.browser.isie，是ie赏识器则返回true。 $.each(obj, fn)：通用的迭代函数。可用于近似地迭代工具和数组（取代轮回）。 如 $.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); }); 等价于： var tempArr=[0,1,2]; for(var i=0;i<tempArr.length;i++){ alert("Item #"+i+": "+tempArr[i]); } 也可以处理赏罚json数据，如 $.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " + n ); }); 功效为： Name:name, Value:John Name:lang, Value:JS $.extend(target,prop1,propN)：用一个或多个其他工具来扩展一个工具，返回这个被扩展的工具。这是jquery实现的担任方法。 如： $.extend(settings, options); //归并settings和options，并将归并功效返回settings中，相等于options担任setting并将担任功效生涯在setting中。 var settings = $.extend({}, defaults, options); //归并defaults和options，并将归并功效返回到setting中而不包围default内容。 可以有多个参数（归并多项并返回） $.map(array, fn)：数组映射。把一个数组中的项目(处理赏罚转换后)生涯到到另一个新数组中，并返回天生的新数组。 如： var tempArr=$.map( [0,1,2], function(i){ return i + 4; }); tempArr内容为：[4,5,6] var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; }); tempArr内容为：[2,3] $.merge(arr1,arr2):归并两个数组并删除个中一再的项目。 如：$.merge( [0,1,2], [2,3,4] ) //返回[0,1,2,3,4] $.trim(str)：删除字符串两头的空缺字符。 如：$.trim(" hello, how are you? "); //返回"hello,how are you? " 12、办理自界说要领或其他类库与jQuery的斗嘴 许多时辰我们本身界说了$(id)要领来获取一个元素，可能其他的一些js类库如prototype也都界说了$要领，假犹如时把这些内容放在一路就会引起变量要领界说斗嘴，Jquery对此专门提供了要领用于办理此题目。 行使jquery中的jQuery.noConflict();要领即可把变量$的节制权让渡给第一个实现它的谁人库或之前自界说的$要领。之后应用Jquery的时辰只要将全部的$换成jQuery即可，如原本引用工具要领$("#msg")改为jQuery("#msg")。 如： jQuery.noConflict(); // 开始行使jQuery jQuery("div p").hide(); // 行使其他库的 $() $("content").style.display = 'none'; （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐
热点阅读