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 相关文章推荐
优化innerHTML操作(提高代码执行效率)
Aug 20 Javascript
基于jQuery的计算文本框字数的代码
Jun 06 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
May 30 Javascript
JS之if语句对接事件动作逻辑(详解)
Jun 28 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
Jul 04 Javascript
浅谈vuex之mutation和action的基本使用
Aug 29 Javascript
Angular实现下载安装包的功能代码分享
Sep 05 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
Jan 11 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
Mar 29 Javascript
浅谈Node.js 中间件模式
Jun 12 Javascript
Vue源码解析之数据响应系统的使用
Apr 24 Javascript
微信小程序云开发实现数据添加、查询和分页
May 17 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类与对象中的private访问控制的疑问
2012/11/01 PHP
php实现utf-8和GB2312编码相互转换函数代码
2013/02/07 PHP
php阻止页面后退的方法分享
2014/02/17 PHP
php去除数组中重复数据
2014/11/18 PHP
简单介绍PHP非阻塞模式
2016/03/03 PHP
php语言的7种基本的排序方法
2020/12/28 PHP
php compact 通过变量创建数组
2016/11/15 PHP
基于jQuery的js分页代码
2010/06/10 Javascript
MooTools 页面滚动浮动层智能定位实现代码
2011/08/23 Javascript
myEvent.js javascript跨浏览器事件框架
2011/10/24 Javascript
禁止页面刷新让F5快捷键及右键都无效
2014/01/22 Javascript
jquery实现触发时更新下拉列表内容的方法
2015/12/02 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
2015/12/03 Javascript
浅谈js的ajax的异步和同步请求的问题
2016/10/07 Javascript
layer实现弹窗提交信息
2016/12/12 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
2017/10/27 Javascript
详解vue静态资源打包中的坑与解决方案
2018/02/05 Javascript
浅析js中mvvm模式实现的原理
2018/10/06 Javascript
vue  directive定义全局和局部指令及指令简写
2018/11/20 Javascript
Vue axios 跨域请求无法带上cookie的解决
2020/09/08 Javascript
python调用cmd复制文件代码分享
2013/12/27 Python
Python编程实战之Oracle数据库操作示例
2017/06/21 Python
详细解读tornado协程(coroutine)原理
2018/01/15 Python
python顺序的读取文件夹下名称有序的文件方法
2018/07/11 Python
完美解决keras保存好的model不能成功加载问题
2020/06/11 Python
html5 移动端视频video的android兼容(去除播放控件、全屏)
2020/03/26 HTML / CSS
营销与策划个人求职信
2013/09/22 职场文书
电子商务专业个人的自我评价
2013/11/19 职场文书
大三学习计划书范文
2014/05/02 职场文书
IT工程师岗位职责
2014/07/04 职场文书
通知的写法
2015/04/23 职场文书
遗愿清单观后感
2015/06/09 职场文书
如何写好开幕词?
2019/06/24 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书
PostgreSQL数据库创建并使用视图以及子查询
2022/04/11 PostgreSQL
HTML中link标签属性的具体用法
2023/05/07 HTML / CSS