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表单验证要注意的事项
Sep 29 Javascript
浅谈Javascript的静态属性和原型属性
May 07 Javascript
jquery实现触发时更新下拉列表内容的方法
Dec 02 Javascript
javascript实现PC网页里的拖拽效果
Mar 14 Javascript
微信小程序 自己制作小组件实例详解
Dec 22 Javascript
微信小程序授权获取用户详细信息openid的实例详解
Sep 20 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
Jan 15 Javascript
使用vuepress搭建静态博客的示例代码
Feb 14 Javascript
解决layui表格的表头不滚动的问题
Sep 04 Javascript
nuxt 每个页面head标签内容设置方式
Nov 05 Javascript
JavaScript中条件语句的优化技巧总结
Dec 04 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
Feb 08 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中批量替换文件名的实现代码
2011/07/20 PHP
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
PHP实现删除非站内外部链接实例代码
2014/06/17 PHP
PHP操作MySQL的mysql_fetch_* 函数的常见用法教程
2015/12/25 PHP
PHP关键特性之命名空间实例详解
2017/05/06 PHP
javascript forEach通用循环遍历方法
2010/10/11 Javascript
基于JQuery实现的类似购物商城的购物车
2011/12/06 Javascript
javascript判断iphone/android手机横竖屏模式的函数
2011/12/20 Javascript
分享十五款 jQuery 社交网络分享插件
2015/05/16 Javascript
学习JavaScript设计模式之装饰者模式
2016/01/19 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
微信小程序 新建登录页并实现tabBar隐藏
2017/06/13 Javascript
js数字滑动时钟的简单实现(示例讲解)
2017/08/14 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
2017/09/07 Javascript
JS中promise化微信小程序api
2018/04/12 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
2018/09/05 jQuery
vue.js父子组件通信动态绑定的实例
2018/09/28 Javascript
mocha的时序规则讲解
2019/02/16 Javascript
Angular8 实现table表格表头固定效果
2020/01/03 Javascript
Vue发布订阅模式实现过程图解
2020/04/30 Javascript
[03:28]2014DOTA2国际邀请赛 走近EG战队天才中单Arteezy
2014/07/12 DOTA
[02:16]深扒TI7聊天轮盘语音出处2
2017/05/11 DOTA
python读取html中指定元素生成excle文件示例
2014/04/03 Python
使用Python脚本实现批量网站存活检测遇到问题及解决方法
2016/10/11 Python
浅析Python 引号、注释、字符串
2019/07/25 Python
wxPython实现绘图小例子
2019/11/19 Python
python 线性回归分析模型检验标准--拟合优度详解
2020/02/24 Python
python 引用传递和值传递详解(实参,形参)
2020/06/05 Python
Pandas对DataFrame单列/多列进行运算(map, apply, transform, agg)
2020/06/14 Python
CSS3动画animation实现云彩向左滚动
2014/05/09 HTML / CSS
详解HTML5中的manifest缓存使用
2015/09/09 HTML / CSS
竞赛口号大全
2014/06/16 职场文书
高中生学习计划书
2014/09/15 职场文书
2016反腐倡廉警示教育心得体会
2016/01/13 职场文书
2016年“我们的节日·端午节”活动总结
2016/04/01 职场文书
MySQL 发生同步延迟时Seconds_Behind_Master还为0的原因
2021/06/21 MySQL