Jquery入门

最新推荐文章于 2025-06-19 14:35:59 发布

zzqrj

最新推荐文章于 2025-06-19 14:35:59 发布

阅读量105

点赞数

CC 4.0 BY-SA版权

分类专栏： Web基础文章标签： javascript xhtml ViewUI

本文链接：https://blog.csdn.net/zzqrj/article/details/84040757

Web基础专栏收录该内容

34 篇文章

订阅专栏

本文介绍Jquery的基本功能，包括访问和操作DOM元素、控制页面样式、处理页面事件等，并通过实例展示了如何使用Jquery实现元素样式的动态更改及内容显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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";