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 是一个广泛应用于前端开发的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。这个经典教程将带你深入理解jQuery的核心概念,帮助你快速上手并...
### jQuery入门精要 #### 一、jQuery概览与崛起 **标题与描述解析:** "jquery 入门帮助.pdf"这一标题明确指向了对jQuery初学者的指导资料,而描述“对于了解ajax并初识jq的人很有帮助”则暗示了内容会涵盖jQuery...
本篇将作为jQuery入门的起点,带领初学者逐步理解并掌握这个强大的工具。 ### 1. jQuery 的安装与引入 在开始学习jQuery之前,首先需要在项目中引入jQuery库。最常见的方式是通过CDN(内容分发网络)链接,这样...
一、jQuery入门 1. 引入jQuery库:在HTML文件中,可以通过在`<head>`标签内添加`<script>`标签来引入jQuery库,通常从CDN(内容分发网络)获取,如`https://code.jquery.com/jquery-latest.min.js`。 2. jQuery...
**jQuery入门手册1.3.2** jQuery是一个广泛使用的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。这个“jQuery入门手册1.3.2”是针对初学者的指导性资料,旨在帮助读者快速...
jQuery入门到精通,前端开发技术,前端javaScript
《jQuery入门Demo详解》 jQuery,作为一款广泛应用于前端开发的JavaScript库,以其简洁的API、强大的功能和广泛的浏览器兼容性赢得了开发者们的喜爱。对于初学者来说,掌握jQuery的基础知识和常见操作是步入Web开发...
jquery入门教程 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery 包装集 从零开始学习jQuery (四) 使用jQuery 操作元素的属性与样式 从零开始...
**jQuery入门经典教材** jQuery是一款高效、简洁的JavaScript库,旨在简化HTML文档遍历、事件处理、动画设计和Ajax交互。本教材针对初学者,详细介绍了jQuery的核心概念和实用技巧,帮助开发者快速掌握这一强大的...
**jQuery入门小示例** jQuery 是一款非常流行的 JavaScript 库,它简化了 HTML 文档遍历、事件处理、动画设计和Ajax交互等任务。对于初学者来说,掌握jQuery的基础知识可以大大提高开发效率,减少代码量。本文将...
本系列从零开始的jQuery入门文档旨在系统性地介绍这个强大的库,帮助初学者快速掌握其核心概念和常见用法。 首先,从"开天辟地入门篇"开始,我们将了解到jQuery的基本使用,包括如何引入jQuery库,以及如何使用...
这个“jQuery 入门提高速成实例打包”集合包含了一系列实用的实例,旨在帮助初学者快速掌握jQuery的基本用法和高级技巧。下面我们将深入探讨jQuery中的关键知识点。 1. **选择器**: jQuery 的核心在于强大的选择器...
在jQuery入门文档中,首先会介绍jQuery的基本概念。jQuery是一个JavaScript库,它对CSS3兼容,同时兼容多种浏览器,使得开发者能够更加便捷地处理HTML文档、处理事件、实现动画效果,以及在无需刷新页面的情况下与...
**jQuery入门培训及案例** jQuery是一款广泛应用于前端开发的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。通过学习jQuery,开发者可以更高效地编写代码,提升网页的交互性和用户体验...
### jQuery入门教程精要 #### 一、简介与重要性 **jQuery**,作为一款流行的JavaScript库,自2006年诞生以来,迅速成为Web开发者们的首选工具。它简化了HTML文档遍历、事件处理、动画以及与服务器交互的过程。...
### jQuery入门基础知识详解 #### 一、jQuery简介与特点 **jQuery** 是一款非常流行的 JavaScript 库,它的设计目标是让 Web 开发变得更加简洁高效。根据文档中的介绍,我们可以了解到以下几点关键信息: 1. **...
**jQuery入门与总结** jQuery是一个深受开发者喜爱的JavaScript库,它的出现极大地方便了JavaScript的编程,使得HTML元素的选择、操作和隐藏等任务变得更加简单。jQuery的核心理念是"write less, do more",即用更...
《jQuery入门到精通学习资源概览》 jQuery是一款强大的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。本资源集合是针对jQuery从入门到精通的学习资料,旨在帮助初学者快速...