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 相关文章推荐
TextArea 控件的最大长度问题(js json)
Dec 16 Javascript
js去除重复字符串两种实现方法
Jan 09 Javascript
阻止子元素继承父元素事件具体思路及实现
May 02 Javascript
用C/C++来实现 Node.js 的模块(二)
Sep 24 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
Oct 14 Javascript
AngularJs bootstrap详解及示例代码
Sep 01 Javascript
微信开发 微信授权详解
Oct 21 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
Mar 08 Javascript
Vue.js 图标选择组件实践详解
Dec 03 Javascript
怎么使用javascript深度拷贝一个数组
Jun 06 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
Jul 06 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
Mar 06 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
PHP导入Excel到MySQL的方法
2011/04/23 PHP
PHP简单日历实现方法
2016/07/20 PHP
Laravel第三方包报class not found的解决方法
2019/10/13 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
基于jquery的无缝循环新闻列表插件
2011/03/07 Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
2013/04/08 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
2013/07/08 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
2016/05/19 Javascript
关于vue-router的beforeEach无限循环的问题解决
2017/09/09 Javascript
浅析Vue项目中使用keep-Alive步骤
2018/07/27 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
2018/10/12 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
2018/12/18 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
2019/08/08 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
2020/02/09 Javascript
JS实现手写 forEach算法示例
2020/04/29 Javascript
[07:20]2014DOTA2西雅图国际邀请赛 选手讲解积分赛第二天
2014/07/11 DOTA
[01:25:38]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第一场 1月19日
2021/03/11 DOTA
实例讲解Python中SocketServer模块处理网络请求的用法
2016/06/28 Python
学习python可以干什么
2019/02/26 Python
python操作日志的封装方法(两种方法)
2019/05/23 Python
django云端留言板实例详解
2019/07/22 Python
python3 实现函数写文件路径的正确方法
2019/11/27 Python
浅析Python迭代器的高级用法
2020/07/16 Python
CSS3 clip-path 用法介绍详解
2018/03/01 HTML / CSS
Bench加拿大官方网站:英国城市服装品牌
2017/11/03 全球购物
简历的自我评价范文
2014/02/04 职场文书
《临死前的严监生》教学反思
2014/02/13 职场文书
入党积极分子评语
2014/05/04 职场文书
义务教育学校标准化建设汇报材料
2014/08/16 职场文书
立案决定书范文
2015/06/24 职场文书
外出考察学习心得体会
2016/01/18 职场文书
2016年庆“七一”主题党日活动总结
2016/04/05 职场文书
演讲稿:​快乐,从不抱怨开始!
2019/04/02 职场文书
基于python定位棋子位置及识别棋子颜色
2021/07/26 Python
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android