|
猛火网(LieHuo.Net)教程 jQuery是继prototype之后又一个优越的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的工作，jQuery是一个快速的，简捷的javaScript库，行使户能更利便地处理赏罚HTML documents、events、实现动画结果，而且利便地为网站提供AJAX交互。本日猛火网给各人总结了十二则能力，但愿对您有所辅佐！
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
（编辑：湖南网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
