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 相关文章推荐
js查找父节点的简单方法
Jun 28 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
Jan 24 Javascript
JavaScript加强之自定义event事件
Sep 21 Javascript
asm.js使用示例代码
Nov 28 Javascript
javascript面向对象特性代码实例
Jun 12 Javascript
javascript实现删除前弹出确认框
Jun 04 Javascript
jQuery实现链接的title快速出现的方法
Feb 20 Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
Feb 22 Javascript
微信小程序switch组件使用详解
Jan 31 Javascript
Bootstrap实现的表格合并单元格示例
Feb 06 Javascript
vue router 跳转后回到顶部的实例
Aug 31 Javascript
bootstrap Table实现合并相同行
Jul 19 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 fputcsv命令 写csv文件遇到的小问题(多维数组连接符)
2011/05/24 PHP
php object转数组示例
2014/01/15 PHP
去掉destoon资讯内容页keywords关键字自带的文章标题的方法
2014/08/21 PHP
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
2014/12/20 Javascript
Javascript 多物体运动的实现
2014/12/24 Javascript
JavaScript编写连连看小游戏
2015/07/07 Javascript
js如何实现淡入淡出效果
2020/11/18 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
jquery实现列表上下移动功能
2016/02/25 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
2016/07/07 Javascript
jQuery实现自动输入email、时间和域名的方法
2016/08/24 Javascript
JavaScript 控制字体大小设置的方法
2016/11/23 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
2018/02/18 jQuery
Node.js的Koa实现JWT用户认证方法
2018/05/05 Javascript
JS Math对象与Math方法实例小结
2019/07/05 Javascript
nuxt.js写项目时增加错误提示页面操作
2020/11/05 Javascript
python使用smtplib模块通过gmail实现邮件发送的方法
2015/05/08 Python
Python中字典映射类型的学习教程
2015/08/20 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
python tkinter实现屏保程序
2019/07/30 Python
django 装饰器 检测登录状态操作
2020/07/02 Python
Python 如何对文件目录操作
2020/07/10 Python
python 获取剪切板内容的两种方法
2020/11/28 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
关于前端上传文件全面基础扫盲贴(入门)
2019/08/01 HTML / CSS
特罗佩亚包官方网站:Tropea
2017/01/03 全球购物
台湾前三大B2C购物网站:MOMO购物网
2017/04/27 全球购物
以设计师精品品质提供快速时尚:Mostata
2019/05/10 全球购物
硕士研究生自我鉴定
2013/11/08 职场文书
档案接收函
2014/01/13 职场文书
生产操作工岗位职责
2014/09/16 职场文书
2014年高中班主任工作总结
2014/11/08 职场文书
结婚典礼主持词
2015/06/29 职场文书
Python包argparse模块常用方法
2021/06/04 Python
Python 类,对象,数据分类,函数参数传递详解
2021/09/25 Python