由于现在各种浏览器越来越多,客户使用的浏览器也是五花八门,大家在开发时自己手工写的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匹配一个元素:
1
,3
jQuery(“.test”); 匹配所有不可见元素:
1
,2
jQuery("div:hidden");将匹配1
匹配所有可见元素:
1
,2
jQuery("div:visible");将匹配2
匹配给定的属性是某个特定值的元素:
,, jQuery ("input[name=' test2']").attr("checked", true);即能选中第3个复选框
属性
取得一个匹配元素的属性值:
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
访问匹配元素的样式属性:
结果:red
为匹配元素设定一个CSS样式:
为匹配元素设定多个CSS样式:
jQuery(“#test”).css ({ color: "red", background: "blue" }); 结果:事件
页面载入:
jQuery(function(){ //要执行的代码
})
在每一个匹配的元素上触发某类事件:
1
jQuery(“#test”).show(); 结果:显示该元素 隐藏显示的元素:
1
jQuery(“#test”).hide(); 结果:隐藏该元素