您的位置：首页 > Web前端 > JQuery

锋力jquery-1.认识jquery

2011-07-29 16:17 274 查看
1.3.2 编写简单的代码----导航栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1-3_2
</title>
<style type="text/css">
#menu {
width:300px;
}
.has_children{
background : #555;
color :#fff;
cursor:pointer;
}
.highlight{
color : #fff;
background : green;
}
div{
padding:0;
}
div a{
background : #888;
display : none;
float:left;
width:300px;
}
</style>
<!-- 引入 jQuery -->
<script src="../jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
//等待dom元素加载完毕.
$(document).ready(function(){
$(".has_children").click(function(){
$(this).addClass("highlight")//为当前元素增加hightlight类
.children("a").show().end()  //将子节点的<a>元素显示出来并
//重新定位到上次操作的元素
.siblings().removeClass("highlight")//获取元素的兄弟元素，并去掉它们hithlight类
.children("a").hide(); //将兄第元素下的<a>元素隐藏
});
});
</script>
</head>
<body>
<div id="menu">
<div class="has_children">
<span>第1章-认识jQuery</span>
<a>1.1-JavaScript和JavaScript库</a>
<a>1.2-加入jQuery</a>
<a>1.3-编写简单jQuery代码</a>
<a>1.4-jQuery对象和DOM对象</a>
<a>1.5-解决jQuery和其它库的冲突</a>
<a>1.6-jQuery开发工具和插件</a>
<a>1.7-小结</a>
</div>
<div class="has_children">
<span>第2章-jQuery选择器</span>
<a>2.1-jQuery选择器是什么</a>
<a>2.2-jQuery选择器的优势</a>
<a>2.3-jQuery选择器</a>
<a>2.4-应用jQuery改写示例</a>
<a>2.5-选择器中的一些注意事项</a>
<a>2.6-案例研究——类似淘宝网品牌列表的效果</a>
<a>2.7-还有其它选择器么？</a>
<a>2.8-小结</a>
</div>
<div class="has_children">
<span>第3章-jQuery中的DOM操作</span>
<a>3.1-DOM操作的分类</a>
<a>3.2-jQuery中的DOM操作</a>
<a>3.3-案例研究——某网站超链接和图片提示效果</a>
<a>3.4-小结</a>
</div>
</div>
</body>
</html>


1.4 jQuery对象和DOM对象


1.4.1 DOM对象和jQuery对象简介


1.DOM对象


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>
</head>
<body>
<h3>例子</h3>
<p title="选择你最喜欢的水果.">你最喜欢的水果是</p>
<ul>
<li>苹果</li>
<li>橘子</li>
<li>菠萝</li>
</ul>
</body>
</html>


可以把上面的HTML结构描述为一棵DOM树


 


 


 


 



在这棵DOM树中，<h3>、<p>、<ul>能及<ul>的3个<li>子结点都是是dom元素结点，可以通过javascript中的getElementsByTagName或者getElementById来获取元素节点。像这样得到的DOM元素就是DOM对象。dom对象可以使用javascript中的方法，示例如下

var domObj= document.getElementById("id");//获得DOM对象
var ObjHTHML= domObj.innerHtml;  //使用javascript中的方法-innerHTML



2.jQuery对象


jQuery对象是通过jQUERY包装DOM对象后产生的对象。


JQUERY对象是JQuery独有的。如果一个对象是jQuery对象。那么就可以使用jQuery里的方法。例如：


$(“#foo”).html();//获得id为foo的元素内的html代码.html()是jQuery里的方法


                   这段代码等同于

document.getElemmentById("foo").innerHTML;



             在JQuery对象中无法使用DOM对角的任何方法

 



1.4.2 JQuery对象和DOM对象的相互转换




   如果获取的对象JQuery对象，那么在变量前面加上$,例如：


var $varibale= jQuery对象;


   如果获取是DOM对象，则定义如下[code]var varible=DOM对象;


1.jQuery对象转成DOM对象


jQuery对象不能使用DOM中的方法，但如果对JQuery对象所提供的


方法不熟悉，或者JQuery没有封装想要的方法，不得不使用DOM对象


的时候,有以下两种处理方法.


[index]和get(index)


1. jquery对象是一个数组对象，可以通过[index]的方法得到相应的DOM对象


var $cr=$("#cr");      //JQuery对象
var cr =$cr[0];   //DOM对象
alert(cr.checked)     //检测这个checkbox是否被选中了


2.是jquery本身提供的，通过get(index)方法得到相应的DOM对象。


var $cr=$("#cr");  //JQUERY对象
var cr=$cr.get(0);//DOM对象
alert(cr.checked)     //检测这个checkbox是否被选中了




1.4.3 实例研究


下面举个例子，来加深对jQuery对象和DOM对象的理解


某个注册页面，用户必须选中页面下方的”同意并接受注册协议复选框，否则不能提交”。


 









<input type="checkbox" id="cr"/><label for="cr">我已经阅读了上面制度.</label>


然后编写javaScript部分.通过$(“#cr”)获取复选框元素，然后通过判断复选框是否选中，来执行下一步操作。


//等待dom元素加载完毕.
$(document).ready(function(){
var $cr = $("#cr");  //jQuery对象
$cr.click(function(){
if($cr.is(":checked")){ //jQuery方式判断
alert("感谢你的支持!你可以继续操作！");
}
})
});
1.5解决jQuery和其它库的冲突。


     


 


 


 


 


 


 


 


 


 


 


 

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航