jQuery快速上手:写jQuery与直接写JS的区别详细解析


Posted in Javascript onAugust 26, 2013

要使用jQuery,首先要在HTML代码最前面加上对jQuery库的引用,比如:
<script language="javascript" src="/js/jquery.min.js"></script>

库文件既可以放在本地,也可以直接使用知名公司的CDN,好处是这些大公司的CDN比较流行,用户访问你网站之前很可能在访问别的网站时已经缓存在浏览器中了,所以能加快网站的打开速度。另外一个好处是显而易见的,节省了网站的流量带宽。

jQuery代码具体的写法和原生的Javascript写法在执行常见操作时的区别如下:

1 定位元素
JS
document.getElementById("abc")

jQuery
$("#abc") 通过id定位
$(".abc") 通过class定位
$("div") 通过标签定位

需要注意的是JS返回的结果是这个元素,jQuery返回的结果是一个JS的对象。以下例子中假设已经定位了元素abc。

2 改变元素的内容
JS
abc.innerHTML = "test";
jQuery
abc.html("test");

3 显示隐藏元素
JS
abc.style.display = "none";
abc.style.display = "block";

jQuery
abc.hide();
abc.show();

abc.toggle();
//在显示和隐藏之间切换(2012.4.21更新)

4 获得焦点
JS和jQuery是一样的,都是abc.focus();

5 为表单赋值
JS
abc.value = "test";
jQuery
abc.val("test");

6 获得表单的值
JS
alert(abc.value);
jQuery
alert(abc.val());

7 设置元素不可用
JS
abc.disabled = true;
jQuery
abc.attr("disabled", true);

8 修改元素样式
JS
abc.style.fontSize=size;
jQuery
abc.css('font-size', 20);

JS
abc.className="test";
JQuery
abc.removeClass();
abc.addClass("test");

9 Ajax
JS
自己创建对象,自己处理浏览器兼容等乱七八糟的问题,略去不表
jQuery
$.get("abc.php?a=1&b=2", recall);
postvalue = "a=b&c=d&abc=123";
$.post("abc.php", postvalue, recall);

function recall(result) {
alert(result);
//如果返回的是json,则如下处理
//result = eval('(' + result + ')');
//alert(result);
}

10 判断复选框是否选中
jQuery
if(abc.attr("checked") == "checked")

Javascript 相关文章推荐
jquery插件开发注意事项小结
Jun 04 Javascript
在Linux上用forever实现Node.js项目自启动
Jul 09 Javascript
javascript获取当前鼠标坐标的方法
Jan 10 Javascript
JavaScript重载函数实例剖析
May 13 Javascript
收藏AngularJS中最重要的核心功能
Jul 09 Javascript
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
Koa2 之文件上传下载的示例代码
Mar 29 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
Apr 20 Javascript
用react-redux实现react组件之间数据共享的方法
Jun 08 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
Nov 28 Javascript
微信小程序页面上下滚动效果
Nov 18 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
Apr 20 Javascript
使用js实现雪花飘落效果
Aug 26 #Javascript
JS预览图像将本地图片显示到浏览器上
Aug 25 #Javascript
点击弹出层外区域关闭弹出层jquery特效示例
Aug 25 #Javascript
jquery cookie实现的简单换肤功能适合小网站
Aug 25 #Javascript
javascript jq 弹出层实例
Aug 25 #Javascript
jQuery选择器中含有空格的使用示例及注意事项
Aug 25 #Javascript
JS操作JSON要领详细总结
Aug 25 #Javascript
You might like
操作Oracle的php类
2006/10/09 PHP
IIS下PHP连接数据库提示mysql undefined function mysql_connect()
2010/06/04 PHP
php获取当前网址url并替换参数或网址的方法
2010/06/06 PHP
php eval函数一句话木马代码
2015/05/21 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
laravel 解决paginate查询多个字段报错的问题
2019/10/22 PHP
Gambit vs CL BO3 第一场 2.13
2021/03/10 DOTA
文本框只能选择数据到文本框禁止手动输入
2013/11/22 Javascript
单击和双击事件的冲突处理示例代码
2014/04/03 Javascript
Node.js的特点和应用场景介绍
2014/11/04 Javascript
谈谈jQuery Ajax用法详解
2015/11/27 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
2016/10/19 Javascript
javascript实现消灭星星小游戏简单版
2016/11/15 Javascript
jQuery学习之DOM节点的插入方法总结
2017/01/22 Javascript
ndm:NPM的桌面GUI应用程序
2018/10/15 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
2018/10/20 Javascript
vue.js的状态管理vuex中store的使用详解
2019/11/08 Javascript
详解react组件通讯方式(多种)
2020/05/06 Javascript
[00:49]完美世界DOTA2联赛10月28日开团时刻:随便打
2020/10/29 DOTA
python中使用sys模板和logging模块获取行号和函数名的方法
2014/04/15 Python
python中的五种异常处理机制介绍
2014/09/02 Python
Python中如何优雅的合并两个字典(dict)方法示例
2017/08/09 Python
python创建列表和向列表添加元素的实现方法
2017/12/25 Python
python绘制直方图和密度图的实例
2019/07/08 Python
Python 闭包,函数分隔作用域,nonlocal声明非局部变量操作示例
2019/10/14 Python
python中绕过反爬虫的方法总结
2020/11/25 Python
pycharm最新激活码有效期至2100年(亲测可用)
2021/02/05 Python
css3翻牌翻数字的示例代码
2020/02/07 HTML / CSS
HTML5实现一个能够移动的小坦克示例代码
2013/09/02 HTML / CSS
整理HTML5移动端开发的常用触摸事件
2016/04/15 HTML / CSS
Crocs卡骆驰洞洞鞋日本官方网站:Crocs日本
2016/08/25 全球购物
美国著名珠宝品牌之一:Jared The Galleria Of Jewelry
2016/10/01 全球购物
Gweniss格温妮丝女包官网:英国纯手工制造潮流包包品牌
2018/02/07 全球购物
导游词之贵州织金洞
2019/10/12 职场文书
vite+vue3.0+ts+element-plus快速搭建项目的实现
2021/06/24 Vue.js