jQuery技术

网站制作jQuery常用的一些功能,网站教程网站制作jQuery常用的一

字号+ 作者:H5之家 来源:H5之家 2015-11-18 11:25 我要评论( )

元素的内容。有如下两种办法: $(”div”).eq(2).html(); //调用jquery目标的办法 $(”div”).get(2).innerHTML; //调用dom的办法特点 4、同一函数完成set和get jQuery中的许多办法都是如此,首要包含如下几个: $(” #msg”).html(); //回来id为msg的元素节

元素的内容。有如下两种办法:

$(”div”).eq(2).html(); //调用jquery目标的办法

$(”div”).get(2).innerHTML; //调用dom的办法特点

4、同一函数完成set和get

jQuery中的许多办法都是如此,首要包含如下几个:

$(” #msg”).html(); //回来id为msg的元素节点的html内容。

$(” #msg”).html(”new content”);

//将“new content” 作为html串写入id为msg的元素节点内容中,页面显现粗体的new content

$(” #msg”).text(); //回来id为msg的元素节点的文本内容。

$(” #msg”).text(”new content”);

//将“new content” 作为通常文本串写入id为msg的元素节点内容中,页面显现new content

$(” #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事情。与$(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

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评
"