jquery使用经验小结
1,今天发现jquery获取的dom对象除了jquery对象外,还可以访问原来的对象,只要加一个[]就行了,原来还有这样的功能,之前没仔细研究。
2,用了first-child,nth-child(n),获取元素集合里面的第几个元素。
3,用Jquery访问nodeText节点,通过访问原来的对象,nextSibling访问。访问是nextSibling.nodeValue;
<!DOCTYPEHTML>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>Zephyr'sDocument</title>
<scriptsrc="http://common.cnblogs.com/script/jquery.js"></script>
<styletype="text/css"media="screen">
/*<![CDATA[*/
/*]]>*/
</style>
<scripttype="text/javascript">
$(function(){
vartempBr=$("br");
tempBr.each(function(index,doElem){
doElem.nextSibling.nodeValue=doElem.nextSibling.nodeValue.replace(/\s{6}/g,"");
})})
</script>
</head>
<body>
asdf
<br/>
"asdf"
<br/>
"asdf"
<br/>
"asdf"
</body>
</html>
4.DOM对象和jQuery对象转换
获取DOM对象代码如下:
//获取DOM对象
vardiv1=document.getElementById("div1");
div1.innerHTML="oec2003";
获取jQuery对象代码如下:
//获取jQuery对象
vardiv1=$("#div1");
div1.html("oec2003");
jQuery对象转DOM对象
//因为ajQuery对象是一个数组对象,所以转换为DOM对象时要用索引的形式
var$div1=$("#div1");//jQuery对象
vardiv1=$div1[0];//转换为了DOM对象
vardiv2=$div1.get(0);//和上面一行效果一样
div1.innerHTML="oec2003";
DOM对象转jQuery对象
//DOM对象转jQuery只需用$包装即可
vardiv1=document.getElementById("div1");
var$div1=$(div1);//转换为了jQuery对象
$div1.html("oec2003");
5.解决冲突
有时会有jQuery和其他的库或自己写的一些公共脚本文件一起使用的场景,就有可能会出现$冲突的问题,冲突的解决分两种情况:
1、jQuery库在其他库之后引用,如下所示:
<scripttype="text/javascript"src="Scripts/jquery-1.8.1.min.js"></script> <scripttype="text/javascript"src="Scripts/common.js"></script>
在common.js中有对$重新定义,代码如下:
function$(id){
returndocument.getElementById(id);
}
下面是在jQuery中解决冲突的代码,有四种方式:
//方式1
jQuery.noConflict();//将$控制权移交出去,以前使用$的地方都改用jQuery
jQuery(document).ready(function(){
alert(jQuery("#span1").html());
});
window.onload=function(){
$("span1").innerHTML="oec2003";
}
//方式2
var$j=jQuery.noConflict();//定义快捷方式
$j(document).ready(function(){
alert($j("#span1").html());
});
window.onload=function(){
$("span1").innerHTML="oec2003";
}
//方式3
jQuery.noConflict();//在函数内部继续使用$
jQuery(function($){
alert($("#span1").html());
});
window.onload=function(){
$("span1").innerHTML="oec2003";
}
//方式4
jQuery.noConflict();//在函数内部继续使用$另一种方式
(function($){
$(function(){
alert($("#span1").html());
});
})(jQuery);
window.onload=function(){
$("span1").innerHTML="oec2003";
}
2、jQuery库在其他库之前使用
//如果先引用jQuery脚本,可以不使用noConflict
//jQuery.noConflict();
jQuery(document).ready(function(){
alert(jQuery("#span1").html());
});
window.onload=function(){
$("span1").innerHTML="oec2003";
}
以上所述就是本文给大家分享的全部内容了,希望大家能够喜欢。