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实现在小方框中浏览大图的代码
Aug 14 Javascript
uploadify 3.0 详细使用说明
Jun 18 Javascript
ztree获取当前选中节点子节点id集合的方法
Feb 12 Javascript
jquery实现简单的表单验证
Nov 17 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
May 26 Javascript
jquery对table做排序操作的实例演示
Aug 10 jQuery
详解vue渲染函数render的使用
Dec 12 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
Mar 01 Javascript
vue-router 手势滑动触发返回功能
Sep 30 Javascript
js中位运算的运用实例分析
Dec 11 Javascript
详解js常用分割取字符串的方法
May 15 Javascript
JS实现横向跑马灯效果代码
Apr 20 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
40年前的这部特摄片恐龙特级克塞号80后的共同回忆
2020/03/08 日漫
用PHP将数据导入到Foxmail
2006/10/09 PHP
PHP获取网卡地址的代码
2008/04/09 PHP
PHP中查询SQL Server或Sybase时TEXT字段被截断的解决方法
2009/03/10 PHP
phpmyadmin打开很慢的解决方法
2014/04/21 PHP
php使用fputcsv()函数csv文件读写数据的方法
2015/01/06 PHP
Laravel中使用阿里云OSS Composer包分享
2015/02/10 PHP
js类的静态属性和实例属性的理解
2009/10/01 Javascript
一些技巧性实用js代码小结
2009/10/14 Javascript
select 控制网页内容隐藏于显示的实现代码
2010/05/25 Javascript
js substring从右边获取指定长度字符串(示例代码)
2013/12/23 Javascript
了不起的node.js读书笔记之例程分析
2014/12/22 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
2015/03/18 Javascript
用js编写的简单的计算器代码程序
2015/08/04 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
2015/12/20 Javascript
树结构之JavaScript
2017/01/24 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
2019/09/06 Javascript
[03:47]2015国际邀请赛第三日现场精彩回顾
2015/08/08 DOTA
[00:32]DOTA2上海特级锦标赛 COL战队宣传片
2016/03/04 DOTA
[01:14]TI珍贵瞬间系列(六):冠军
2020/08/30 DOTA
跟老齐学Python之for循环语句
2014/10/02 Python
python 美化输出信息的实例
2018/10/15 Python
Python实现二叉树的最小深度的两种方法
2019/09/30 Python
python实现在线翻译功能
2020/03/03 Python
CSS3中使用RGBA设置透明度的示例
2015/08/04 HTML / CSS
Dillard’s百货官网:Dillards.com
2018/05/26 全球购物
四年大学生活的个人自我评价
2013/12/11 职场文书
公务员诚信承诺书
2014/05/26 职场文书
课例研修方案
2014/05/31 职场文书
供用电专业求职信
2014/07/07 职场文书
合同权益转让协议书模板
2014/11/18 职场文书
技术支持岗位职责
2015/02/13 职场文书
财务总监岗位职责范本
2015/04/03 职场文书
ORACLE数据库对long类型字段进行模糊匹配的解决思路
2021/04/07 Oracle
web前端之css水平居中代码解析
2021/05/20 HTML / CSS
Python用any()函数检查字符串中的字母以及如何使用all()函数
2022/04/14 Python