JQuery Study Notes 学习笔记(一)


Posted in Javascript onAugust 04, 2010

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); 
});
Javascript 相关文章推荐
服务器端的JavaScript脚本 Node.js 使用入门
Mar 07 Javascript
简单实用jquery版三级联动select示例
Jul 04 Javascript
jquery教程ajax请求json数据示例
Jan 13 Javascript
JS更改select内option属性的方法
Oct 14 Javascript
JavaScript中的this使用详解
Jul 27 Javascript
JQuery遍历元素的后代和同胞实现方法
Sep 18 Javascript
jQuery动态产生select option下拉列表
Mar 15 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
Mar 21 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
Sep 26 Javascript
图片加载完成再执行事件的实例
Nov 16 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
Mar 31 Javascript
利用JS判断元素是否为数组的方法示例
Jan 08 Javascript
jQuery dialog 异步调用ashx,webservice数据的代码
Aug 03 #Javascript
基于jquery的让textarea自适应高度的插件
Aug 03 #Javascript
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
Aug 03 #Javascript
jQuery的实现原理的模拟代码 -3 事件处理
Aug 03 #Javascript
SlideView 图片滑动(扩展/收缩)展示效果
Aug 01 #Javascript
JavaScript和ActionScript的交互实现代码
Aug 01 #Javascript
JavaScript判断窗口是否最小化的代码(跨浏览器)
Aug 01 #Javascript
You might like
vBulletin HACK----关于排版的两个HACK
2006/10/09 PHP
php+mysql开源XNA 聚合程序发布 下载
2007/07/13 PHP
php UTF-8、Unicode和BOM问题
2010/05/18 PHP
使用XHGui来测试PHP性能的教程
2015/07/03 PHP
CodeIgniter框架常见用法工作总结
2017/03/16 PHP
XHTML-Strict 内允许出现的标签
2006/12/11 Javascript
定义select的边框颜色
2008/04/28 Javascript
jquery URL参数判断,确定菜单样式
2010/05/31 Javascript
通过url查找a元素应用案例
2014/04/29 Javascript
浅谈javascript的Touch事件
2015/09/27 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
2015/12/01 Javascript
Node.js Addons翻译(C/C++扩展)
2016/06/12 Javascript
JavaScript接口的实现三种方式(推荐)
2016/06/14 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
2016/12/13 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
2017/03/09 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
2017/05/12 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
2017/06/02 Javascript
JS实现提交表单前的数字及邮箱校检功能
2017/11/13 Javascript
代码详解Vuejs响应式原理
2017/12/20 Javascript
JS实现时间校验的代码
2020/05/25 Javascript
vue select 获取value和lable操作
2020/08/28 Javascript
ant design vue 表格table 默认勾选几项的操作
2020/10/31 Javascript
js实现简易计算器小功能
2020/11/18 Javascript
[48:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 VG vs KG
2018/03/31 DOTA
Python中的面向对象编程详解(下)
2015/04/13 Python
Python中自定义函数的教程
2015/04/27 Python
python实现redis三种cas事务操作
2017/12/19 Python
用pycharm开发django项目示例代码
2019/06/13 Python
解决使用Pandas 读取超过65536行的Excel文件问题
2020/11/10 Python
html5拖拽应用记录及注意点
2020/05/27 HTML / CSS
Melijoe美国官网:法国奢侈童装购物网站
2017/04/19 全球购物
一套软件开发工程师笔试题
2015/05/18 面试题
2014年党的群众路线教育实践活动总结
2014/04/25 职场文书
门卫岗位职责
2015/02/09 职场文书
2019广播稿怎么写
2019/04/17 职场文书
python 逐步回归算法
2021/04/06 Python