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 相关文章推荐
网上应用的一个不错common.js脚本
Aug 08 Javascript
Node.js开源应用框架HapiJS介绍
Jan 14 Javascript
JS数组合并push与concat区别分析
Dec 17 Javascript
node-sass安装失败的原因与解决方法
Sep 04 Javascript
angular4模块中给标签添加背景图的实现方法
Sep 15 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
Oct 30 Javascript
使用JavaScript解析URL的方法示例
Mar 01 Javascript
7个好用的JavaScript技巧分享(译)
May 07 Javascript
vue动态注册组件实例代码详解
May 30 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
Aug 07 Javascript
Vue实现图片与文字混输效果
Dec 04 Javascript
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 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
php学习笔记 PHP面向对象的程序设计
2011/06/13 PHP
php 批量查询搜狗sogou代码分享
2015/05/17 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
jQuery Tools Dateinput使用介绍
2012/07/14 Javascript
js模仿html5 placeholder适应于不支持的浏览器
2013/01/13 Javascript
javascript常见用法总结
2014/05/22 Javascript
Javascript核心读书有感之词法结构
2015/02/01 Javascript
JavaScript限定图片显示大小的方法
2015/03/11 Javascript
jQuery实现网页顶部固定导航效果代码
2015/12/24 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
2016/05/31 Javascript
javascript cookie基础应用之记录用户名的方法
2016/09/20 Javascript
深入理解JavaScript中的预解析
2017/01/04 Javascript
jquery+css实现下拉列表功能
2017/09/03 jQuery
bootstrap响应式工具使用详解
2017/11/29 Javascript
JS实现图片拖拽交换效果
2018/11/30 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
2019/07/19 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
2019/09/24 Javascript
js实现简单选项卡制作
2020/08/05 Javascript
python实现k均值算法示例(k均值聚类算法)
2014/03/16 Python
Python中编写ORM框架的入门指引
2015/04/29 Python
python更改已存在excel文件的方法
2018/05/03 Python
python简单实现AES加密和解密
2019/03/28 Python
pandas 对group进行聚合的例子
2019/12/27 Python
keras 使用Lambda 快速新建层 添加多个参数操作
2020/06/10 Python
用python发送微信消息
2020/12/21 Python
html table呈现个人简历以及单元格宽度失效的问题解决
2021/01/22 HTML / CSS
应聘医药代表职位求职信
2013/10/21 职场文书
销售会计工作职责
2013/12/02 职场文书
单位消防安全制度
2014/01/12 职场文书
后备干部考察材料
2014/02/12 职场文书
治庸问责心得体会
2014/09/12 职场文书
2015年世界无烟日活动方案
2015/05/04 职场文书
Vue实现下拉加载更多
2021/05/09 Vue.js
解决Mysql的left join无效及使用的注意事项说明
2021/07/01 MySQL