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 相关文章推荐
node.js中的fs.truncateSync方法使用说明
Dec 15 Javascript
第三篇Bootstrap网格基础
Jun 21 Javascript
微信小程序  modal详解及实例代码
Nov 09 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
Dec 31 Javascript
原生js实现无限循环轮播图效果
Jan 20 Javascript
基于vue 实现token验证的实例代码
Dec 14 Javascript
详解vue文件中使用echarts.js的两种方式
Oct 18 Javascript
详解js删除数组中的指定元素
Oct 31 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
Feb 18 Javascript
js设置默认时间跨度过程详解
Jul 17 Javascript
vue学习笔记之作用域插槽实例分析
Feb 01 Javascript
如何使用vue slot创建一个模态框的实例代码
May 24 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
php版微信开发之接收消息,自动判断及回复相应消息的方法
2016/09/23 PHP
深入浅出讲解:php的socket通信原理
2016/12/03 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
PHP实现浏览器格式化显示XML的方法示例
2019/01/22 PHP
laravel-admin解决表单select联动时,编辑默认没选上的问题
2019/09/30 PHP
jQuery 1.2.x 升? 1.3.x 注意事项
2009/05/06 Javascript
js replace 与replaceall实例用法详解
2013/08/03 Javascript
JSON 数字排序多字段排序介绍
2013/09/18 Javascript
基于NodeJS的前后端分离的思考与实践(三)轻量级的接口配置建模框架
2014/09/26 NodeJs
iscroll碰到Select无法选择下拉刷新的解决办法
2016/05/21 Javascript
Bootstrap Table使用整理(二)
2017/06/09 Javascript
使用SVG基本操作API的实例讲解
2017/09/14 Javascript
JS实现div模块的截图并下载功能
2017/10/17 Javascript
jQuery实现左右滑动的toggle方法
2018/03/03 jQuery
webpack4.x CommonJS模块化浅析
2018/11/09 Javascript
JavaScript中的一些实用小技巧总结
2019/04/07 Javascript
Vue商品控件与购物车联动效果的实例代码
2019/07/21 Javascript
webpack打包html里面img后src为“[object Module]”问题
2019/12/22 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
2020/02/15 Javascript
js实现简单的无缝轮播效果
2020/09/05 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
2020/12/04 Vue.js
[03:01]DOTA2英雄基础教程 露娜
2014/01/07 DOTA
python实现word 2007文档转换为pdf文件
2018/03/15 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
python构建基础的爬虫教学
2018/12/23 Python
python爬虫实现中英翻译词典
2019/06/25 Python
python实现密度聚类(模板代码+sklearn代码)
2020/04/27 Python
个人房屋买卖协议书(范本)
2014/10/04 职场文书
会计工作总结范文2014
2014/12/23 职场文书
玄武湖导游词
2015/02/05 职场文书
小学教师党员承诺书
2015/04/27 职场文书
廉政承诺书2015
2015/04/28 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
负责培养人意见
2015/06/05 职场文书
2016年党课培训学习心得体会
2016/01/07 职场文书
MySQL分区表管理命令汇总
2022/03/21 MySQL