一、下载jQuery Starterkit(从官网,或者csdn下载)
打开starterkit.html和custom.js这两个文件
starterkit.html中导入了这两个js,选择自己的是Jquery1.2.6还是1.3.2或者更新
<script src="jquery.js" type="text/javascript"></script>
<script src="custom.js" type="text/javascript"></script>
在custom.js中写自己的代码,For Example
jQuery(document).ready(function()
{
// do something here
$("a").click(function()
{
alert("hello world");
});
});
二、根据API的方法写自己的逻辑
将starterkit中的一个CSS样式red附加到了orderedlist上
$(document).ready(
function()
{
$("#orderedlist").addClass("red");
});
将所有orderedlist中的li都附加了样式"blue"
$(document).ready(
function()
{
$("#orderedlist > li").addClass("blue");
});
当把鼠标放在li对象上面和移开时进行样式切换,但只在list的最后一个element上生效
$(document).ready(
function()
{
$("#orderedlist li:last").hover(
function()
{
$(this).addClass("green");
},
function()
{
$(this).removeClass("green");
});
});
Find me:使用选择器和事件,对Element进行迭代
$(document).ready(
function()
{
$("#orderedlist2").find("li").each(
function(i)
{
$(this).html($(this).html()+"hello"+i);
});
});
点击Reset链接后,就选择了文档中所有的form元素,并对它们都执行了一次reset()。
$(document).ready(
function()
{
$("#reset").click(function()
{
$("form").each(function()
{
this.reset();
});
});
});
filter()以过滤表达式来减少不符合的被选择项, not()则用来取消所有符合过滤表达式的被选择项
$(document).ready(
function()
{
$("li").not("[ul]").css("border","1px solid black");
});
分享到:
相关推荐
**jQuery学习笔记--1** jQuery是一个轻量级的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。本篇笔记将深入探讨jQuery的基础知识,包括其核心概念、选择器、DOM操作、事件...
2. **jQuery学习笔记**:jQuery是JavaScript库,简化了DOM操作、事件处理和动画创建。笔记将深入介绍选择器、事件、插件、AJAX等方面,帮助读者掌握高效前端开发的工具。 3. **正则表达式**:正则表达式是处理字符...
ExtJS4学习笔记(一)---window的创建 ExtJS4学习笔记(七)---带搜索的Grid(SearchGrid) ExtJS4学习笔记(三)---VBox的使用 ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid) ExtJS4学习笔记(二)---HBox的使用 ...
这个“JavaScript学习笔记集和代码库”涵盖了该语言的基础知识、进阶技巧以及实用示例,对于想要深入理解和掌握JavaScript的初学者或有经验的开发者来说,都是一个宝贵的资源。 首先,让我们来讨论JavaScript的基础...
这个项目包含了所有必要的前期准备,因此开发者无需从零开始,可以直接进入环境搭建和编码阶段。对于想要提升自己在云服务和前端开发方面技能的人来说,这是一个非常理想的学习平台。 在云笔记应用中,静态资源通常...
### JavaScript 和 jQuery 知识点 #### JavaScript 对象 ...以上是EasyUI的学习笔记,详细介绍了JavaScript和jQuery的基础知识,EasyUI框架的优势、如何学习和使用EasyUI以及搭建开发环境的具体步骤。
这个压缩包“jQuery+HTML5+CSS3积木搭建房子动画特效”就是一个很好的实例,展示了如何利用这三个核心技术来创建引人入胜的网页互动体验。 首先,HTML5是现代网页的基础,它引入了许多新的标签和API,使得开发者...
在"EasyUI 学习笔记简书1"中,主要介绍了 EasyUI 的边框布局(Border Layout)。 边框布局是 EasyUI 提供的一种常见布局模式,它将页面划分为五个区域:east(东)、west(西)、north(北)、south(南)和 center...
在本压缩包中,你将找到所有必要的资源来快速搭建一个功能完善的 Banner 切换效果。 首先,`index.html` 是示例网页的入口文件,它包含了HTML结构,用于展示jQuery.flipster插件的实际效果。在HTML中,你需要定义一...
### Bootstrap 学习笔记知识点详解 #### 一、Bootstrap简介 Bootstrap是一款非常流行的前端开发框架,它基于HTML、CSS及JavaScript构建,旨在帮助开发者快速搭建响应式的网站和应用。通过预定义的样式和布局,...
在“前端学习笔记,做一个简单的网站,模仿携程网站.html”这个项目中,HTML用于定义页面的布局、标题、段落、链接、图像等元素。例如,`<html>`标签是文档的根元素,`<head>`包含元数据(如标题),`<body>`则容纳...
此外,为了提升用户体验,你可能还需要学习一些**前端框架**,如**jQuery**,它简化了DOM操作和事件处理。或者,如果你希望构建更复杂的应用,可以考虑使用**React**、**Vue.js**或**Angular**等现代前端框架。它们...
### AgileLite学习笔记 #### 一、基础知识概览 在开始深入探讨AgileLite之前,我们首先需要了解一些基础知识,这些知识将为后续的学习奠定坚实的基础。 ##### CSS基础 CSS(Cascading Style Sheets)是一种样式...
- **DWZ**:一款基于 jQuery 的开源框架,专注于快速搭建 Web 应用程序,尤其适合于企业级应用。 - **ExtJS**:一个完整的企业级前端框架,支持多种设备和平台,提供丰富的 UI 组件和工具。 #### 五、兼容性问题 *...
### appweb嵌入式WebServer服务器学习笔记 #### 一、概述 本文档主要介绍了如何构建一个基于HTML和JavaScript的简单嵌入式WebServer服务器,特别聚焦于使用Appweb框架来实现这一目标。通过本篇笔记,我们将了解...
对于熟悉jQuery的开发者来说,这个代码包提供了一个很好的起点,可以快速搭建起一个功能完备且具有吸引力的抽奖活动。 这个项目不仅适合初学者学习jQuery的实践应用,也适合有一定经验的开发者作为基础,进行更复杂...
掌握JavaSE开发环境的搭建、基础语法、面向对象编程概念、数组操作、常用类的使用、异常处理、集合框架、多线程编程以及IO流的操作至关重要。同时,理解Java的反射机制和注解(Annotation)的运用也是提高编程灵活性...
react不像jquery一样能通过src直接使用它需要一系列的辅助工具的支持,我们在学习react之前需要初步了解 nodejs 以及 babel。 另外还需要掌握 jsx 函数式编程 等知识。 1、 安装。 2、 新建项目文件夹 例如这个仓库...
【jQuery人物关系拓扑图代码.zip】是一个包含jQuery特效实现的人物关系展示的代码资源。这个压缩包中的核心是"jiaoben7637"文件,它可能是一个HTML、CSS和JavaScript组合的项目,用于创建一个交互式的人物关系拓扑图...