jQuery常用基础函数

由于现在各种浏览器越来越多,客户使用的浏览器也是五花八门,大家在开发时自己手工写的JS可能会存在各种兼容性问题,为了节省时间同时能有更人性化的操作体验(列如其中的ui插件就提供了非常多的功能),所以推荐在开发时使用jQuery,根据官方文档上的说明它兼容IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+等浏览器,同时它将一些常用的操作都封装到了框架中,节省写代码时间并不用考虑兼容性。
目前CEMIS中集成的jQuery版本为1.7.2,jQuery UI版本为1.8 jQuery可以用美元符$或jQuery来写,但由于CEMIS中有另一款类库prototype也是使用$,为了避免$对象冲突,所以在cemis中都使用jQuery(注意大小写)。以下是我在开发中常用到的一些功能,分享给大家: jQuery框架

选择器
根据ID匹配一个元素:

jQuery(“#test”); 根据类匹配元素:
1
,
3
jQuery(“.test”); 匹配所有不可见元素:
1
,
2
jQuery("div:hidden");将匹配
1
匹配所有可见元素:
1
,
2
jQuery("div:visible");将匹配
2
匹配给定的属性是某个特定值的元素: ,, jQuery ("input[name=' test2']").attr("checked", true);即能选中第3个复选框 属性 取得一个匹配元素的属性值: jQuery(“#test”).attr(“src”);或jQuery(“img”).attr(“src”); 最后获取的值为1.jpg 为匹配元素设置一个属性值: jQuery(“#test”).arrt(“src”, “1.jpg”); 结果为 为匹配元素设置多个属性值: jQuery("#test").attr({ src: "1.jpg", alt: "测试" }); 结果为”测试” 从匹配元素删除属性: ”测试” jQuery("#test").removeAttr("alt"); 结果为 为每个匹配的元素添加指定的类名:
1
jQuery(“#test”). addClass("myclass"); 结果为
1
从所有匹配的元素中删除全部或者指定的类:
1
jQuery(“#test”). removeClass(“myclass”)或jQuery(“#test”). removeClass(); 结果为
1
取得第一个匹配元素的html内容:
div1
,
div2
jQuery(“#test”).html(); 结果为 div1 设置第一个匹配元素的html内容:
div1
,
div2
jQuery(“#test”).html(“a”); 结果为
a
,
div2
设置所有匹配元素的html内容:
div1
,
div2
jQuery(“div”).html(“aa”); 结果为
aa
,
aa
取得一个或所有匹配元素的文本内容:
div1
,
div2
jQuery(“#test”).text();或jQuery(“div”).text(); 结果为div1或div1div2 设置文本内容与前面的设置html类似,使用text(“xx”)的方式。 获取表单的值和给表单赋值: jQuery(“#test”).val(); 结果为1 jQuery(“#test”).val(“2”); 结果为 文档处理 向匹配的元素内部追加内容:
你好
jQuery(“#test”). append (“张三”); 结果:
你好张三
删除匹配的元素:
你好张三
jQuery(“span”). remove(); 结果:
你好

CSS
访问匹配元素的样式属性:

jQuery(“#test”).css(“color”);

结果:red
为匹配元素设定一个CSS样式:

jQuery(“#test”).css(“color”, “red”); 结果:

为匹配元素设定多个CSS样式:

jQuery(“#test”).css ({ color: "red", background: "blue" }); 结果:

事件
页面载入:
jQuery(function(){ //要执行的代码
})
在每一个匹配的元素上触发某类事件:

1 上面的HTML代码中的JS事件需要option值改变后才触发xx()函数 jQuery(“#test”). trigger("change");就能执行xx()函数 例子:在2011版本中的周转材料内租结算中,当选好往来单位和合同后又重选了往来单位,那么相应的合同也应该随往来单位更新。 其他事件详见jQueryAPI 效果 显示隐藏的匹配元素:
1
jQuery(“#test”).show(); 结果:显示该元素 隐藏显示的元素:
1
jQuery(“#test”).hide(); 结果:隐藏该元素

自己坐沙发,这些基础太实用了!