JQuery 学习技巧总结

2020-05-22 16:55:52易采站长站整理

$(“#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’]})     
//为索引分别为0,1,2的p元素分别设定不同的字体颜色。


$(“tr”).each(function(i){this.style.backgroundColor=[‘#ccc’,’#fff’][i%2]})     
//实现表格的隔行换色效果


$(“p”).click(function(){.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两个方法
使用扩展的方法(通过“$.方法名”调用):
+”,min=”+$.min(10,20));


7、支持方法的连写
所谓连写,即可以对一个jquery对象连续调用各种不同的方法。
例如:
$(“p”).click(function(){.html())})
.mouseover(function(){})
.each(function(i){this.style.color=[‘#f00′,’#0f0′,’#00f’]});


8、操作元素的样式
主要包括以下几种方式:
$(“#msg”).css(“background”);              //返回元素的背景颜色
$(“#msg”).css(“background”,”#ccc”)       //设定元素背景为灰色
$(“#msg”).height(300); $(“#msg”).width(“200”);       //设定宽高
$(“#msg”).css({ color: “red”, background: “blue” });//以名值对的形式设定样式