`

Jquery入门

 
阅读更多

1. Jquery基本功能

 

    * 访问和操作Dom元素

    * 控制页面样式

    * 对页面事件进行处理

    * 提供大量插件

    * 与ajax技术完美结合

 

2. 小入门

    * $(document).ready(function(){})<==>$(function(){})

       类似于javascript的功能：window.onload=function(){}

    * 事件操作链式书写

       当用户点击Class名为divTitle的元素时，自己增加名称为divCurrColor的样式，同时，接下来的Class名称为divContent的元素显示出来。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery事件的链式写法</title>
    <script language="javascript" type="text/javascript" 
            src="Jscript/jquery.js"></script>
    <style type="text/css">
           .divFrame{width:260px;border:solid 1px #666;font-size:10pt}
           .divTitle{background-color:#eee;padding:5px}
           .divContent{padding:5px;display:none}
           .divCurrColor{ background-color:Red}
    </style>
    <script type="text/javascript">
         $(function(){
          $(".divTitle").click(function(){
            $(this).addClass("divCurrColor").next(".divContent").css("display","block");
          });
         });
    </script>
</head>
<body>
    <div class="divFrame">
         <div class="divTitle">主题</div>
         <div class="divContent">
             <a href="#">链接一</a><br />
             <a href="#">链接二</a><br />
             <a href="#">链接三</a>
         </div>
    </div>
</body>
</html>

    * jquery 访问Dom对象

 

jQuery代码：

var tDiv = $("#divTmp");//获取jQuery对象
var oDiv = $("#divOut");
var cDiv=tDiv.html();//获取jQuery对象中的内容
oDiv.html(cDiv);//设置jQuery对象的内容

对应的javascript代码：

var tDiv = document.getElementById("divTmp");//获取jQuery对象
var oDiv =document.getElementById("divOut");
var cDiv=tDiv.innerHTML;//获取jQuery对象中的内容
oDiv.innerHTML=cDiv;//设置jQuery对象的内容

    $("#text1").val()<==>document.getElementById("text1").value

    $("#divTip").css("display","block").html("test")

    <==>

    document.getElementById("divTip").style.display="block";

    document.getElementById("divTip").innerHTML="test";

 

 

分享到：
| comet pushlet
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics