`

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

 

 

分享到:
评论

相关推荐

    jQuery入门jQuery入门

    ### jQuery入门知识点详解 #### 一、jQuery简介与特点 **1.1 jQuery定义与背景** - **定义**: jQuery是一款轻量级的JavaScript类库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等多种操作。 - **背景**: ...

    jQuery 入门经典教程

    **jQuery 入门经典教程** jQuery 是一个广泛应用于前端开发的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。这个经典教程将带你深入理解jQuery的核心概念,帮助你快速上手并...

    jquery 入门帮助.pdf

    ### jQuery入门精要 #### 一、jQuery概览与崛起 **标题与描述解析:** "jquery 入门帮助.pdf"这一标题明确指向了对jQuery初学者的指导资料,而描述“对于了解ajax并初识jq的人很有帮助”则暗示了内容会涵盖jQuery...

    jquery入门(一)

    本篇将作为jQuery入门的起点,带领初学者逐步理解并掌握这个强大的工具。 ### 1. jQuery 的安装与引入 在开始学习jQuery之前,首先需要在项目中引入jQuery库。最常见的方式是通过CDN(内容分发网络)链接,这样...

    jQuery 入门到精通

    一、jQuery入门 1. 引入jQuery库:在HTML文件中,可以通过在`&lt;head&gt;`标签内添加`&lt;script&gt;`标签来引入jQuery库,通常从CDN(内容分发网络)获取,如`https://code.jquery.com/jquery-latest.min.js`。 2. jQuery...

    jQuery入门

    ### jQuery入门知识点详解 #### 一、jQuery简介 ##### 1-1 感性认识 **1-1-1 名称来历** - **名称解释**:“jQuery”是“JavaScript Query”的缩写,其中“Query”意为“查询”,表示jQuery提供了一种更便捷的...

    jQuery入门手册1.3.2

    **jQuery入门手册1.3.2** jQuery是一个广泛使用的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。这个“jQuery入门手册1.3.2”是针对初学者的指导性资料,旨在帮助读者快速...

    jQuery入门到精通

    jQuery入门到精通,前端开发技术,前端javaScript

    jquery 入门demo

    《jQuery入门Demo详解》 jQuery,作为一款广泛应用于前端开发的JavaScript库,以其简洁的API、强大的功能和广泛的浏览器兼容性赢得了开发者们的喜爱。对于初学者来说,掌握jQuery的基础知识和常见操作是步入Web开发...

    jQuery使用手册 jquery入门教程

    jquery入门教程 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery 包装集 从零开始学习jQuery (四) 使用jQuery 操作元素的属性与样式 从零开始...

    JQuery入门经典教材。

    **jQuery入门经典教材** jQuery是一款高效、简洁的JavaScript库,旨在简化HTML文档遍历、事件处理、动画设计和Ajax交互。本教材针对初学者,详细介绍了jQuery的核心概念和实用技巧,帮助开发者快速掌握这一强大的...

    Jquery入门小示例

    **jQuery入门小示例** jQuery 是一款非常流行的 JavaScript 库,它简化了 HTML 文档遍历、事件处理、动画设计和Ajax交互等任务。对于初学者来说,掌握jQuery的基础知识可以大大提高开发效率,减少代码量。本文将...

    jQuery 入门提高速成实例打包

    这个“jQuery 入门提高速成实例打包”集合包含了一系列实用的实例,旨在帮助初学者快速掌握jQuery的基本用法和高级技巧。下面我们将深入探讨jQuery中的关键知识点。 1. **选择器**: jQuery 的核心在于强大的选择器...

    jquery入门文档ppt

    在jQuery入门文档中,首先会介绍jQuery的基本概念。jQuery是一个JavaScript库,它对CSS3兼容,同时兼容多种浏览器,使得开发者能够更加便捷地处理HTML文档、处理事件、实现动画效果,以及在无需刷新页面的情况下与...

    jquery入门培训及案例

    **jQuery入门培训及案例** jQuery是一款广泛应用于前端开发的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。通过学习jQuery,开发者可以更高效地编写代码,提升网页的交互性和用户体验...

    jquery入门教程.pdf

    ### jQuery入门教程精要 #### 一、简介与重要性 **jQuery**,作为一款流行的JavaScript库,自2006年诞生以来,迅速成为Web开发者们的首选工具。它简化了HTML文档遍历、事件处理、动画以及与服务器交互的过程。...

    jquery入门基础知识

    ### jQuery入门基础知识详解 #### 一、jQuery简介与特点 **jQuery** 是一款非常流行的 JavaScript 库,它的设计目标是让 Web 开发变得更加简洁高效。根据文档中的介绍,我们可以了解到以下几点关键信息: 1. **...

    JQuery入门,JQuery总结

    **jQuery入门与总结** jQuery是一个深受开发者喜爱的JavaScript库,它的出现极大地方便了JavaScript的编程,使得HTML元素的选择、操作和隐藏等任务变得更加简单。jQuery的核心理念是"write less, do more",即用更...

    jquery 入门到精通 学习总结 资源

    《jQuery入门到精通学习资源概览》 jQuery是一款强大的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。本资源集合是针对jQuery从入门到精通的学习资料,旨在帮助初学者快速...

    jQuery入门篇.

    **jQuery入门篇** jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画制作和Ajax交互。这个入门篇将帮助初学者快速理解jQuery的核心概念和功能,以便在网页开发中更高效地操作DOM...

Global site tag (gtag.js) - Google Analytics