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 相关文章推荐
Script的加载方法小结
Jan 12 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
Dec 09 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
Apr 06 Javascript
JavaScript实现添加、查找、删除元素
Jul 02 Javascript
手机端转盘抽奖代码分享
Sep 10 Javascript
BootStrap Typeahead自动补全插件实例代码
Aug 10 Javascript
Vue.JS入门教程之事件监听
Dec 01 Javascript
jQuery弹出窗口打开链接的实现代码
Dec 24 Javascript
帝国cms首页列表页实现点赞功能
Oct 30 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
Jul 11 Javascript
使用webpack搭建pixi.js开发环境
Feb 12 Javascript
JavaScript嵌入百度地图API的最详细方法
Apr 16 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
ThinkPHP php 框架学习笔记
2009/10/30 PHP
PHP微信支付结果通知与回调策略分析
2019/01/10 PHP
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
2007/05/03 Javascript
权威JavaScript 中的内存泄露模式
2007/08/13 Javascript
jquery插件jquery倒计时插件分享
2013/12/27 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
2014/05/19 Javascript
详解Javascript动态操作CSS
2014/12/08 Javascript
Bootstrap每天必学之进度条
2015/11/30 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
2016/10/04 Javascript
javascript入门之数组[新手必看]
2016/11/21 Javascript
高效的jQuery代码编写技巧总结
2017/02/22 Javascript
详谈表单格式化插件jquery.serializeJSON
2017/06/23 jQuery
vue使用$emit时,父组件无法监听到子组件的事件实例
2018/02/26 Javascript
nuxt配置通过指定IP和端口访问的实现
2020/01/08 Javascript
Python编写的com组件发生R6034错误的原因与解决办法
2013/04/01 Python
Python异常处理总结
2014/08/15 Python
python实现剪切功能
2019/01/23 Python
selenium python 实现基本自动化测试的示例代码
2019/02/25 Python
pyQT5 实现窗体之间传值的示例
2019/06/20 Python
python覆盖写入,追加写入的实例
2019/06/26 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
Python转换itertools.chain对象为数组的方法
2020/02/07 Python
如何基于python把文字图片写入word文档
2020/07/31 Python
Manduka官网:瑜伽垫、瑜伽毛巾和服装
2018/07/02 全球购物
Tretorn美国官网:瑞典外套和鞋类品牌,抵御风雨
2018/07/19 全球购物
餐饮主管岗位职责
2013/12/10 职场文书
促销活动总结报告
2014/04/26 职场文书
2014年校长工作总结
2014/12/11 职场文书
色戒观后感
2015/06/12 职场文书
2016春季小学开学寄语
2015/12/03 职场文书
教师学习十八届五中全会精神心得体会
2016/01/05 职场文书
导游词之丹东鸭绿江
2019/10/24 职场文书
如何使用Maxwell实时同步mysql数据
2021/04/08 MySQL
CSS中Single Div 绘图技巧的实现
2021/06/18 HTML / CSS
4种方法python批量修改替换列表中元素
2022/04/07 Python