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 相关文章推荐
为EasyUI的Tab标签添加右键菜单的方法
Jul 14 Javascript
使用apply方法实现javascript中的对象继承
Dec 16 Javascript
jQuery Easyui 验证两次密码输入是否相等
May 13 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
May 30 Javascript
基于JS实现类似支付宝支付密码输入框
Sep 02 Javascript
jQuery版AJAX简易封装代码
Sep 14 Javascript
vue-cli安装使用流程步骤详解
Nov 08 Javascript
JS实现获取数组中最大值或最小值功能示例
Mar 02 Javascript
createObjectURL方法实现本地图片预览
Sep 30 Javascript
超详细小程序定位地图模块全系列开发教学
Nov 24 Javascript
微信小程序实现电影App导航和轮播
Nov 30 Javascript
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
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
第三节--定义一个类
2006/11/16 PHP
php过滤HTML标签、属性等正则表达式汇总
2014/09/22 PHP
php接口数据加密、解密、验证签名
2015/03/12 PHP
微信公众号OAuth2.0网页授权问题浅析
2017/01/21 PHP
laravel 解决crontab不执行的问题
2019/10/22 PHP
用ADODB.Stream转换
2007/01/22 Javascript
用jscript实现新建和保存一个word文档
2007/06/15 Javascript
js下拉菜单语言选项简单实现
2013/09/23 Javascript
js的toLowerCase方法用法实例
2015/01/27 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
2015/03/20 Javascript
JavaScript常用标签和方法总结
2015/09/01 Javascript
封装好的javascript前端分页插件pagination
2016/01/04 Javascript
jQuery中deferred对象使用方法详解
2016/07/14 Javascript
jQuery中fadein与fadeout方法用法示例
2016/09/16 Javascript
JS中动态创建元素的三种方法总结(推荐)
2016/10/20 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
2018/09/28 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
2018/11/14 Javascript
element-ui中Table表格省市区合并单元格的方法实现
2019/08/07 Javascript
JS代码优化的8点建议
2020/02/04 Javascript
[01:08:29]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第一场 1月9日
2021/03/11 DOTA
Python实现统计单词出现的个数
2015/05/28 Python
Python实现从log日志中提取ip的方法【正则提取】
2018/03/31 Python
对python中的logger模块全面讲解
2018/04/28 Python
使用TensorFlow实现简单线性回归模型
2019/07/19 Python
django框架cookie和session用法实例详解
2019/12/10 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
使用JS+CSS3技术:让你的名字动起来
2013/04/27 HTML / CSS
波比布朗英国官网:Bobbi Brown英国
2017/11/13 全球购物
英国奢华护肤、美容和Spa品牌:Temple Spa
2019/11/02 全球购物
成功的酒店创业计划书
2013/12/27 职场文书
酒店销售经理岗位职责
2014/01/31 职场文书
临床护士自荐信
2014/01/31 职场文书
利群广告词
2014/03/20 职场文书
公司行政专员岗位职责
2014/08/24 职场文书
乡镇党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
七年级数学教学反思
2016/02/17 职场文书