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 相关文章推荐
JS中style属性
Oct 11 Javascript
在javascript中对于DOM的加强
Apr 11 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
Aug 09 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
Oct 17 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
js实现方块上下左右移动效果
Aug 17 Javascript
浅谈JavaScript 代码整洁之道
Oct 23 Javascript
微信小程序:数据存储、传值、取值详解
May 07 Javascript
用Vue.js在浏览器中实现裁剪图像功能
Jun 18 Javascript
JavaScript生成随机验证码代码实例
Sep 28 Javascript
vue路由切换之淡入淡出的简单实现
Oct 31 Javascript
Vue.js中Line第三方登录api的实现代码
Jun 29 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版本的cron定时任务执行器使用实例
2014/08/19 PHP
laravel实现上传图片,并且制作缩略图,按照日期存放的代码
2019/10/16 PHP
Javascript调用XML制作连动下拉列表框
2006/06/25 Javascript
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
2007/01/29 Javascript
当达到输入长度时表单自动切换焦点
2014/04/06 Javascript
IE浏览器中图片onload事件无效的解决方法
2014/04/29 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
2016/01/28 Javascript
jquery通过name属性取值的简单实现方法
2016/06/20 Javascript
JavaScript的兼容性与调试技巧
2016/11/22 Javascript
详解Vue.js动态绑定class
2016/12/20 Javascript
vue.js加载新的内容(实例代码)
2017/06/01 Javascript
BootStrap selectpicker后台动态绑定数据的方法
2017/07/28 Javascript
p5.js入门教程之鼠标交互的示例
2018/03/16 Javascript
如何解决js函数防抖、节流出现的问题
2019/06/17 Javascript
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
jQuery实现可编辑的表格
2019/12/11 jQuery
vue内置组件component--通过is属性动态渲染组件操作
2020/07/28 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
2020/10/29 Javascript
详解vue 组件的实现原理
2020/11/12 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
2021/02/07 Vue.js
pandas 转换成行列表进行读取与Nan处理的方法
2018/10/30 Python
Python  Django 母版和继承解析
2019/08/09 Python
python 数据生成excel导出(xlwt,wlsxwrite)代码实例
2019/08/23 Python
PyQT5 emit 和 connect的用法详解
2019/12/13 Python
Python实现区域填充的示例代码
2021/02/03 Python
html5调用app分享功能示例(WebViewJavascriptBridge)
2018/03/21 HTML / CSS
html svg生成环形进度条的实现方法
2019/09/23 HTML / CSS
Bobbi Brown芭比波朗美国官网:化妆师专业彩妆保养品品牌
2016/08/18 全球购物
护理专业优质毕业生自荐书
2014/01/31 职场文书
建筑安全标语
2014/06/07 职场文书
培训通知
2015/04/17 职场文书
致接力运动员加油稿
2015/07/21 职场文书
2016十一国庆节感言
2015/12/09 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
2016简单的租房合同范本
2016/03/18 职场文书
MySQL插入数据与查询数据
2022/03/25 MySQL