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 相关文章推荐
从新浪弄下来的全屏广告代码 与使用说明
Mar 15 Javascript
javascript 原型模式实现OOP的再研究
Apr 09 Javascript
JQuery团队打造的javascript单元测试工具QUnit介绍
Feb 26 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
Mar 24 Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
Nov 30 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
Sep 24 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 Javascript
浅谈es6中export和export default的作用及区别
Feb 07 Javascript
微信小程序中遇到的iOS兼容性问题小结
Nov 14 Javascript
Vue批量图片显示时遇到的路径被解析问题
Mar 28 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
Jul 22 Javascript
VUE组件中的 Drawer 抽屉实现代码
Aug 06 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 Mssql操作简单封装支持存储过程
2009/12/11 PHP
PHP中将网页导出为Word文档的代码
2012/05/25 PHP
php生成过去100年下拉列表的方法
2015/07/20 PHP
ThinkPHP进程计数类Process用法实例详解
2015/09/25 PHP
基于JQuery的Select选择框的华丽变身
2011/08/23 Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
2013/04/26 Javascript
JavaScript之IE的fireEvent方法详细解析
2013/11/20 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
2014/01/22 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
2015/09/27 Javascript
详解AngularJS实现表单验证
2015/12/10 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
2016/06/08 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
2018/02/09 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
2018/06/01 Javascript
微信小程序下拉框组件使用方法详解
2018/12/28 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
2019/05/22 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
2019/07/13 Javascript
js设计模式之代理模式及订阅发布模式实例详解
2019/08/15 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
在python的类中动态添加属性与生成对象
2016/09/17 Python
Python 通过pip安装Django详细介绍
2017/04/28 Python
Python模块结构与布局操作方法实例分析
2017/07/24 Python
在cmd中查看python的安装路径方法
2019/07/03 Python
Python GUI编程学习笔记之tkinter界面布局显示详解
2020/03/30 Python
浅谈Python中的模块
2020/06/10 Python
python代码能做成软件吗
2020/07/24 Python
美体小铺美国官网:The Body Shop美国
2017/11/10 全球购物
便携式太阳能系统的创新者:GOAL ZERO
2018/02/04 全球购物
运动服饰每月订阅盒:Ellie
2018/04/29 全球购物
STUBHUB日本:购买和出售全球活动门票
2018/07/01 全球购物
周鸿祎:教你写创业计划书
2013/12/30 职场文书
家长学校工作方案
2014/05/07 职场文书
体育比赛口号
2014/06/09 职场文书
小学生感恩老师演讲稿
2014/08/28 职场文书
钱塘江大潮导游词
2015/02/03 职场文书
2015年毕业实习工作总结
2015/05/29 职场文书
漫画《尖帽子的魔法工坊》宣布动画化
2022/04/06 日漫