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 精粹笔记
May 09 Javascript
php的文件上传入门教程(实例讲解)
Apr 10 Javascript
jQuery创建DOM元素实例解析
Jan 19 Javascript
使用jQuery获得内容以及内容的属性
Feb 26 Javascript
JS中Location使用详解
May 12 Javascript
jquery实现全选、全不选以及单选功能
Mar 23 jQuery
jQuery Position方法使用和兼容性
Aug 23 jQuery
详解vue-cli与webpack结合如何处理静态资源
Sep 19 Javascript
vue cli webpack中使用sass的方法
Feb 24 Javascript
详解封装基础的angular4的request请求方法
Jun 05 Javascript
bootstrap-table+treegrid实现树形表格
Jul 26 Javascript
如何在postman中添加cookie信息步骤解析
Jun 30 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图片处理之图片背景、画布操作
2014/11/19 PHP
php获取远程文件大小
2015/10/20 PHP
php实现将HTML页面转换成word并且保存的方法
2016/10/14 PHP
JavaScript与函数式编程解释
2007/04/27 Javascript
js 代码优化点滴记录
2012/02/19 Javascript
JS和函数式语言的三特性
2014/03/05 Javascript
jquery实现用户打分评分特效
2015/05/28 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
2015/08/06 Javascript
微信小程序多列选择器range-key使用详解
2020/03/30 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
2017/08/16 Javascript
vue.js 使用axios实现下载功能的示例
2018/03/05 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
2018/08/28 Javascript
angular 实现同步验证器跨字段验证的方法
2019/04/11 Javascript
Vue-cli3多页面配置详解
2020/03/22 Javascript
vue使用Sass时报错问题的解决方法
2020/10/14 Javascript
vue 实现element-ui中的加载中状态
2020/11/11 Javascript
Vue3 实现双盒子定位Overlay的示例
2020/12/22 Vue.js
Python实现读取文件最后n行的方法
2017/02/23 Python
python+matplotlib实现鼠标移动三角形高亮及索引显示
2018/01/15 Python
python3 tkinter实现点击一个按钮跳出另一个窗口的方法
2019/06/13 Python
python实现对服务器脚本敏感信息的加密解密功能
2019/08/13 Python
Python 读取用户指令和格式化打印实现解析
2019/09/02 Python
python+adb+monkey实现Rom稳定性测试详解
2020/04/23 Python
踩坑:pytorch中eval模式下结果远差于train模式介绍
2020/06/23 Python
利用python 读写csv文件
2020/09/10 Python
python3.7中安装paddleocr及paddlepaddle包的多种方法
2020/11/27 Python
详解Python中openpyxl模块基本用法
2021/02/23 Python
利用Node实现HTML5离线存储的方法
2020/10/16 HTML / CSS
德国最大的服装、鞋子和配件在线商店之一:Outfits24
2019/07/23 全球购物
Java面试题:请说出如下代码的输出结果
2013/04/22 面试题
计算机网络毕业生自荐信
2013/10/01 职场文书
高三自我鉴定
2013/10/23 职场文书
销售合作意向书范本
2015/05/08 职场文书
党支部意见范文
2015/06/02 职场文书
Python加密技术之RSA加密解密的实现
2022/04/08 Python
Python使用DFA算法过滤内容敏感词
2022/04/22 Python