JQuery简介

来源：互联网发布：java编程思想4 pdf 编辑：程序博客网时间：2024/06/11 12:09

前言：

jQuery如今发展成为级JavaScript、CSS、DOM、Ajax于一体的强大框架体系，它的主要主旨是：以更少的代码，实现更多的功能（write less，do more）。

基本功能：

1）访问和操作DOM元素

2）控制页面样式

3）对页面事件的处理

4）大量插件在页面中的运用

5）与Ajax技术的完美结合

注：

开始jQuery之旅之前，要下载并在页面的<head></head>中引入jQuery文件库：

<script language="javascript" type="text/javascript" src="Jscript/jquery-1.8.2.min.js"></script>

程序的代码风格：

1）"$"美元符号的使用

在jQuery程序中，使用最多的可以算得上"$"了，无论是页面元素的选择、功能函数的前缀都必须使用该符号，它算的上是jQuery程序的标志。

例：

$("#tip").html("hello world").show(1000);

2)事件操作链接式书写

在编写页面某元素事件时，jQuery程序可以使用链接的方式编写该元素的所有事件。

例子：

当页面首次加载时，被包含的内容<div>标记是不可见的，当用户单击主题<div>标记时，改变吱声的背景色，并将内容<div>标记显示出来。

代码实现：

<!DOCTYPE html><html>    <head>        <title>jQuery事件链式写法</title>        <script src="jquery.js" type="text/javascript"></script>        <meta charset="UTF-8">        <meta name="viewport" content="width=device-width, initial-scale=1.0">        <style type="text/css">            .iframe{border: solid 1px #888;font-size:13px;}            .title{padding:6px;background-color: #EEE;}            .content{padding:8px 0px;font-size: 12px;text-align: center;display:none;}            .curcol{background-color: #CCC}        </style>        <script type="text/javascript">            $(function(){                $(".content").html("您好！欢迎来到jQuery的精彩世界。");                $(".title").click(function(){                   $(this).addClass("curcol").next(".content").css("display","block");                });            });        </script>    </head>    <body>        <div class="iframe">            <div class="title">标题</div>            <div class="content"></div>        </div>    </body></html>

效果：

代码分析：

当用户单击Class名称为“title”的元素时，自身增加名称"curcol"的样式；同时，将接下来的Class名称为“content”元素显示出来。两个功能的实现通过“.”符号链接在一起。

0 0