JQuery Study Notes 学习笔记(一)

1. 使用jquery
　　到jquery.com下载jquery.js当前版本是1.4.2
　　新建一个html页面


代码如下:

<!DOCTYPE html><BR><html lang="en"><BR><head><BR>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><BR>  <script type="text/javascript" src="<SPAN style="COLOR: #ff0000"><STRONG>jquery.js</STRONG></SPAN>"></script></PRE>
<PRE class=brush>   <script type="text/javascript"><BR>    <SPAN style="COLOR: #ff0000"> $(document).ready(function(){</SPAN><BR><SPAN style="COLOR: #ff0000">       $("a").click(function(event){</SPAN><BR><SPAN style="COLOR: #ff0000">         alert("As you can see, the link no longer took you to jquery.com");</SPAN><BR><SPAN style="COLOR: #ff0000">         event.preventDefault();</SPAN><BR><SPAN style="COLOR: #ff0000">       });</SPAN><BR><SPAN style="COLOR: #ff0000">     });</SPAN><BR>     <BR>   </script><BR></head><BR><body><BR>   <a href="<A class="external free" href="http://jquery.com/">http://jquery.com/</A>">jQuery</a><BR></body><BR></html>

代码解释：
　　$(document).ready(function(){...})在页面加载完时添加function()函数内容
　　$("a").click(function(event){...})设置a标签的click事件函数
　　event.preventDefault()阻止原事件执行
　　代码功能：点击<a>标签只弹出alert信息后，页面并不跳转到http://jquery.com/。
2. 添加和移除HTML class
　　首先在<head>中添加一些样式,例如：


代码如下:

<style type="text/css">
a.test { font-weight: bold; }
</style>

在script中使用addClass和removeClass来添加和移除HTML class，例如：


代码如下:

$("a").addClass("test");//所有a标记粗体
$("a").removeClass("test");//取消所有a标记粗体

3.特效
　　jQuery提供了一些非常方便的特效


代码如下:

$("a").click(function(event){
event.preventDefault();
$(this).hide("slow");
});

点击<a>标签后，标记慢慢消失
4.回调与函数
　　无参数回调


代码如下:

$.get('myhtmlpage.html', myCallBack);

带参数回调


代码如下:

$.get('myhtmlpage.html', function(){
myCallBack(param1, param2);
});

赞 (0)

相关推荐

  • jQuery Study Notes学习笔记 (二)

    1. 使用class与id选择HTML元素 选择id为"myDivId"的元素.由于id是唯一的,所以总是选择到1个或0个元素 复制代码 代码如下: $('#myDivId') 选择class为"myCssClass". 可以选择任何多个class为"myCssClass"的元素. 复制代码 代码如下: $('.myCssClass') 获取或设置元素的值 复制代码 代码如下: var myValue = $('#myDivId').val();

  • jquery学习笔记二 实现可编辑的表格

    jquery学习笔记二 实现可编辑的表格

    实现可编辑的表格demo: 实例图: 代码: 复制代码 代码如下: <!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 runa

  • JavaScript 学习笔记一些小技巧

    一.JavaScript 基础 1.try...catch 使用小写字母.大写字母会出错. 2.Throw 声明 throw 声明的作用是创建 exception(异常).你可以把这个声明与 try...catch 声明配合使用,以达到控制程序流并产生精确错误消息的目的. 语法:throw(exception)exception 可以是字符串.整数.逻辑值或者对象. 注意:使用小写字母编写 throw.使用大写字母会出错! 3.反斜杠用来在文本字符串中插入省略号.换行符.引号和其他特殊字符. 下

  • jquery 学习笔记一

    jquery 学习笔记一

    jquery基本信息 jquery的官方网站:www.jquery.com jquery解释: jquery是javascript的类库,提供了大量的javascript的类库和API,方便javascript开发. jquery API中文参考手册: http://jquery-api-zh-cn.googlecode.com/svn/trunk/index.html 前台数据提交到后台demo: 实例图:   功能点: 1.使用$("#UserName")获取id为UserName

  • JQuery 学习笔记01 JQuery初接触

    一.下载官方网址是http://jquery.com/官方下载地址:http://docs.jquery.com/Downloading_jQuery里边有当前版本和历史版本的下载,可以下载下来部署在自己的服务器上上面也有Google\Microsoft\jQuery的CDN(Content Delivery Network)地址,由于目前jQuery的广泛使用,选择CDN地址可以充分利用缓存和这些互联网大佬们的带宽和服务器资源.官网上下载有两种版本Compressed(Minified ver

  • JavaScript 学习笔记二 字符串拼接

    var str="hello"; str+="world"; 实际上,这段代码在幕后执行的步骤如下: (1) 创建存储"hello"的字符串. (2) 创建存储"world"的字符串. (3) 创建存储连接结果的字符串. (4) 把str的当前内容复制到结果中. (5) 把"world"复制到结果中. (6) 更新str,使它指向结果. 每次完成字符串连接都会执行步骤2到6,使得这种操作非常消耗资源.如果重

  • JQuery Study Notes 学习笔记(一)

    1. 使用jquery 到jquery.com下载jquery.js当前版本是1.4.2 新建一个html页面 复制代码 代码如下: <!DOCTYPE html><BR><html lang="en"><BR><head><BR>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"&

  • jquery中ajax学习笔记3

    摘要: ajax学习1中介绍了使用jquery封装的ajax来接收服务器端的文本数据以及使用XMLHttpReques对象来接收服务器端的文本数据 ajax学习2中介绍了使用XMLHttpReques来接收服务器的端XML数据,本节主要介绍使用jqery封装的ajax使用XML格式接收服务器端的数据. 由于很多知识都已经做了详细介绍,本节只介绍需要修改的代码,使用jqery封装的ajax使用XML格式接收服务器端的数据,web.xml.后台的servet都不用改, 只是ajax.html中调用的

  • jquery中ajax学习笔记4

    缓存问题: 何谓缓存问题?即当浏览器的输入内容相同,即请求的URL相同,这样浏览器就会去读缓存,两次的内容一样,就不会和服务器端进行交互. 解决方式:在请求的url中加上时间戳. 通过我的测试,IE.360两次用户名输入一致时不会和服务器端交互,firefox即使两次用户名输入的一样,仍然会和服务器端交互. 即:firefox的中服务器端返回的temp值会每次加1,IE.360就不会改变.故加上时间戳在这三种浏览器中都不会再有缓存问题. 修改的代码: AJAXServer.java 缓存问题 复

  • 分享jQuery插件的学习笔记

    插件(Plugin)也成为 jQuery 扩展(Extension),是一种遵循一定规范的应用程序接口编写出来的程序.目前 jQuery 插件已超过几千种,由来自世界各地的开发者共同编写.验证和完善.而对于jQuery开发者而言,直接使用这些插件将快速稳定架构系统,节约项目成本. 一． 插件概述 插件是以 jQuery 的核心代码为基础,编写出复合一定规范的应用程序.也就是说,插件也是 jQuery 代码,通过 js 文件引入的方式植入即可. 插件的种类很多,主要大致可以分为:UI 类.表单及验

  • jquery中ajax学习笔记一

    jquery中ajax学习笔记一

    AJAX简单介绍: AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML),是指一种创建交互式网页应用的网页开发技术.通过 AJAX,JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信.通过这个对象,您JavaScript 可在不重载页面的情况与 Web 服务器交换数据. jQuery是一种javascript框架,是对javascript的一种轻量级的封装,容易理解. A

  • jquery动画效果学习笔记（8种效果）

    1.元素的显示和隐藏 display:none; 隐藏 display:block; 显示 简单显示和隐藏方法 a) show() 显示 b) hide() 隐藏 c) toggle() 开关,显示则隐藏,隐藏则显示 <script type="text/javascript"> function f1(){ //隐藏 $("div").hide();//display:none //document.getElementById('id').style

  • JQuery中attr属性和jQuery.data()学习笔记【必看】

    用html直接data-key来存放,key必须全部小写. <div data-mydata="123"></div> consoloe.log($("div").data("mydata")); //output 123 二避免在key中使用短横线 <a id="bar" data-foo-bar-baz="fizz-buzz" href="#">f

  • jQuery学习笔记之回调函数

    1.回调函数定义 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数时,我们就说这是回调函数.回调函数不是由该函数的实现方直接调用,而是在特定的事件或条件发生时由另外的一方调用的,才会真正的执行回调函数内部的方法. 2.代码 JS代码 (function($){ $.fn.shadow = function(opts){ //定义的默认的参数 var defaults = { copies: 5, opacity:0.1

  • 那些年，我还在学习jquery 学习笔记

    原来Jquery就是一个javascript写的一个库,它给我们提供了很多常用的方法,使用这些方法可以兼容多种浏览器,使用它可以达到很好的动画效果,下面就来看看那些年的学习笔记吧一.$符号 1.选择器 可以选择html标签,也可选择ID,Class等 如下: 复制代码 代码如下: <script type="text/javascript"> $( function() { $("table.datalist tr:nth-child(odd)").ad

随机推荐