跟我学jQuery教程目录:

  1. 跟我学jQuery(一)    前言
  2. 跟我学jQuery(二)    初识jQuery
  3. 跟我学jQuery(三)    无所不能的选择器1
  4. 跟我学jQuery(四)    无所不能的选择器2
  5. 跟我学jQuery(五)    给页面添砖加瓦1

一.必备条件

1.下载jQuery类库

jQuery的最新类库放在google code上,下载地址如下:

http://code.google.com/p/jqueryjs/downloads/list

里面有很多版本,大致有以下几种:

min:压缩版本,在项目发布的时候使用 jquery-1.3.2.min.js

release:未压缩版本包,包括没有压缩的jQuery库,文档和相关事例 jquery-1.3.2-release.zip

vsdoc2:此版本是Visual Studio 2008中专门用于智能感应的版本(强烈推荐) jquery-1.3.2-vsdoc2.js

2.如何使用Visual Studio 2008支持jQuery的智能感应

值得欣慰的是在Visual Studio 2008中已经支持jQuery的智能感应,我们后面的例子将使用Visual Studio 2008进行书写,现在我来讲解一下jQuery中Visual Studio 2008智能感应的配置.当然你如果没有Visual Studio 2008其他的多可以,可以直接省去下面几个步骤.

先决条件:

1.下载Visual Studio 2008安装SP1补丁

下载地址:http://msdn.microsoft.com/en-us/vstudio/cc533448.aspx

[注意]:打了这个补丁后,有很多以前写代码出现的智能感应内容变成英文的了,这里等装好SP1补丁后在从这个地址下载一个还原补丁(一定要要选择下VS90SP1-KB957507-v2-CHS-x86.exe这个文件)http://code.msdn.microsoft.com/KB957507/Release/ProjectReleases.aspx?ReleaseId=1854

2.去google code下载相对应的js文件

3.然后在代码中引入必须带vsdoc的jQuery库(切记)

<script type="text/javascript" src="jquery-1[1].3.2-vsdoc2.js"></script>

现在我们来看看VS08里面的智能感应效果

呵呵!已经出现智能感应效果了.

3.书写第一个jQuery程序

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %><!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 runat="server">    <title>表格交替行和光棒效果</title>    <style type="text/css">        .odd{ background-color:#fcc;}        .even{ background-color:#cef;}        .light{ background-color:#dfc;}    </style>    <script language="javascript" type="text/javascript" src="jquery-1[1].3.2-vsdoc2.js"></script>    <script language="javascript" type="text/javascript">        $(document).ready(function() {            $("tr:odd").addClass("odd");            $("tr:even").addClass("even");            $("tr:odd").bind("mouseout", function(event) { $(this).addClass("odd"); $(this).removeClass("light"); });            $("tr:even").bind("mouseout", function(event) { $(this).addClass("even"); $(this).removeClass("light"); });            $("tr").bind("mouseover", function(event) { $(this).addClass("light"); });        });      </script></head><body>    <form id="form1" runat="server">        <table id="tbTest" width="300px" border="1">            <tr>                <td>1</td>                <td>2</td>            </tr>            <tr>                <td>3</td>                <td>4</td>            </tr>            <tr>                <td>5</td>                <td>6</td>            </tr>            <tr>                <td>7</td>                <td>8</td>            </tr>            <tr>                <td>9</td>                <td>10</td>            </tr>            <tr>                <td>11</td>                <td>12</td>            </tr>        </table>    </form></body></html>

效果如下图:

上面我们就实现了表格交替行和光棒效果5行代码就搞定了,简洁吧

上面运用到了:

(1)元素选择器   $(“tr”)

(2)事件绑定方法 bind()

(3)给元素添加样式  addClass()

在这里我要提醒大家上面我用$取得的结果是一个jQuery对象,当我们想要实际的操纵在页面中找到的原始就可以通过jQuery会非常的简单.这里要注意区别的是jQuery对象与常规的DOM对象是不通的.我们在后面会专门讲到两者的区别,刚入门我觉得没有必要对这2个概念扣的太死.

转载于:https://www.cnblogs.com/yoowo/archive/2009/05/19/1460555.html

跟我学jQuery(二) 初识jQuery相关推荐

  1. jQuery入门-初识jQuery

    目录 什么是jQuery? 下载jQuery jQuery的入口函数 对比JavaScript的入口函数jQuery的入口函数,执行时机 jQuery对象和DOM对象的区别 jQuery对象和DOM对 ...

  2. [jQuery基础] 初识jQuery

    为什么要使用jQuery? 强大选择器: 方便快速查找DOM元素 链式调用: 可以通过.不断调用jQuery对象的方法 隐式遍历(迭代): 一次操作多个元素 读写合一: 读数据/写数据使用是一个函数 ...

  3. 初识--jQuery

    初识–jQuery jQuery基础 初识jQuery jQuery是什么? jQuery是一款优秀的JavaScript库,最主要的用途是用来做查询,还能让我们对HTML文档遍历和操作.事件处理.动 ...

  4. 初识jQuery，八字真言“选择元素，对其操作”

    jQuery在我印象中,就是很多类似$(),然后昨天开始接触了,觉得很和谐,获取元素比JavaScript简单很多,有意思. 一.开始学习jQuery,下载jQuery库的文件 http://jque ...

  5. 从零开始学习jQuery (二) 万能的选择器

    本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery ( ...

  6. 第5章 初识JQuery

    JQuery是对JavaScript的封装,简化了JS代码,是主流框架的基础(VUE,EasyUI,Bootstrap) 它是2006年推出的 JQuery的优势: 体积小,压缩后只有100KB左右 ...

  7. jQuery (二)

    使用jQuery处理事件 事件处理 一个栗子,单击p时背景变成灰色 由于es6的箭头函数不支持this的绑定,所以无法使用箭头函数,只能使用匿名函数 html <!DOCTYPE html> ...

  8. 品尝Android（二）jQuery Mobile初探

    时间过得好快,手机刚刷2.3.3没多久,Google已经放出了2.3.4.3.1的ROM,发布了2.4的代号,尽管较高版本面向的群体非常小众,但是Android仍然在不遗余力的追赶着iPhone.iP ...

  9. jQuery学习（十二）—jQuery中对象的查找方法总结

    jQuery学习(十二)-jQuery中对象的查找方法总结 一.find方法 作用:在元素1中查找元素2,类似于选择器中的后代选择器 格式:元素1.find(元素2),元素2为CSS选择器或者jQue ...

最新文章

  1. 楷书书法规则_硬笔书法入门学习“三步法”，让练字不再难
  2. 高端华为笔记本敲代码就是爽！！包邮送！
  3. 【知识星球】这几年人脸都有哪些有意思的数据集？
  4. Linux常用的20条运维命令，值得收藏！
  5. 图解TCPIP-传输层 UDP
  6. JAVA实用教程(第六版)——期末复习1
  7. Skyline软件二次开发初级——11如何在WEB页面中的三维地图上加载和保存工程文件...
  8. 万能DLL1.3发布 ——您的编程好帮手
  9. Vbs 脚本编程简明教程之一
  10. 基于open scene graph的虚拟校园系统的设计与实现
  11. vs2013_update5下载链接(请使用迅雷下载)
  12. 函的红头文件格式制作_如何利用Word“智能函头”简单制作“红头文件”公文模板...
  13. Hexo next主题修改背景报 failed to locate @import file F:\blog\source\_data\styles.styl
  14. C语言小技巧之如何求平均数
  15. 感应加热电源-谐振移相-感性移相
  16. Win11十二月系统更新了什么内容？
  17. cookie、sesion
  18. RTThread 挂载SD卡 init SD card failed
  19. 计算机应用杂志-投稿经历
  20. 数据通讯中的心跳信号

热门文章

  1. 理解JavaScript继承（二）
  2. [iOS] tableView中实现底部button出现时tableView的bottom自动向上偏移
  3. Linux android studio :'tools.jar' seems to be not in Android Studio classpath.
  4. Redhat GRUB配置错误修复
  5. 获取某一扩展名的文件集合
  6. mysql代表单个字符_mysql字符编码以及字符序
  7. mysql 服务无法启动 没有报告任何错误_My SQL学习之路（一）
  8. mysql 优化表的作用_mysql实战优化之三：表优化
  9. 逻辑漏洞——会话管理问题
  10. ‘ping‘ 不是内部或外部命令，也不是可运行的程序或批处理文件。