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 相关文章推荐
Javascript new关键字的玄机 以及其它
Aug 25 Javascript
jquery实现excel导出的方法
Apr 04 Javascript
JavaScript中对象属性的添加和删除示例
May 12 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
May 04 Javascript
JavaScript-html标题滚动效果的简单实现
Sep 08 Javascript
jQuery实现页面顶部下拉广告
Dec 30 Javascript
JS FormData上传文件的设置方法
Jul 05 Javascript
JavaScript使用Ajax上传文件的示例代码
Aug 10 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
Dec 22 Javascript
关于ES6箭头函数中的this问题
Feb 27 Javascript
详解vue.js移动端配置flexible.js及注意事项
Apr 10 Javascript
vue.js iview打包上线后字体图标不显示解决办法
Jan 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
PHP中的一些常用函数收集
2015/05/26 PHP
Yii框架中sphinx索引配置方法解析
2016/10/18 PHP
PHP explode()函数用法讲解
2019/02/15 PHP
深入分析PHP设计模式
2020/06/15 PHP
textarea中的手动换行处理的jquery代码
2011/02/26 Javascript
javascript实现window.print()去除页眉页脚
2014/12/30 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
2016/01/22 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
2016/01/27 Javascript
Treegrid的动态加载实例代码
2016/04/29 Javascript
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
Vue.js实现网格列表布局转换方法
2017/08/25 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
2017/10/12 Javascript
详解Vue路由钩子及应用场景(小结)
2017/11/07 Javascript
Vue用v-for给src属性赋值的方法
2018/03/03 Javascript
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
JS匿名函数内部this指向问题详析
2019/05/10 Javascript
微信小程序实现传递多个参数与事件处理
2019/08/12 Javascript
element-ui 本地化使用教程详解
2019/10/28 Javascript
JS实现简单的表格增删
2020/01/16 Javascript
Python的Bottle框架中返回静态文件和JSON对象的方法
2015/04/30 Python
Python编程之黑板上排列组合,你舍得解开吗
2017/10/30 Python
python 读取txt中每行数据,并且保存到excel中的实例
2018/04/29 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
numpy和pandas中数组的合并、拉直和重塑实例
2019/06/28 Python
Python 类方法和实例方法(@classmethod),静态方法(@staticmethod)原理与用法分析
2019/09/20 Python
python 爬虫 实现增量去重和定时爬取实例
2020/02/28 Python
python opencv图像处理(素描、怀旧、光照、流年、滤镜 原理及实现)
2020/12/10 Python
伦敦剧院门票:London Theatre Direct
2018/11/21 全球购物
来自世界各地的饮料:Flavourly
2019/05/06 全球购物
季度思想汇报
2014/01/01 职场文书
计算机大学生职业生涯规划书范文
2014/02/19 职场文书
追悼会主持词
2014/03/20 职场文书
《祁黄羊》教学反思
2014/04/22 职场文书
机械工程及其自动化专业求职信
2014/08/08 职场文书
预备党员自我评价范文
2015/03/04 职场文书
2016年百日安全生产活动总结
2016/04/06 职场文书