javascript 和 jquery 语法上的一些区别
jQuery 能大大简化 Javascript 程序的编写,我最近花时间了解了一下 jQuery,把我上手过程中的笔记和大家分享出来,希望对大家有所帮助。
要使用 jQuery,首先要在 HTML 代码最前面加上对 jQuery 库的引用,比如:
- <script language="javascript" src="/js/jquery.min.js"></script>
库文件既可以放在本地,也可以直接使用知名公司的 CDN,好处是这些大公司的 CDN 比较流行,用户访问你网站之前很可能在访问别的网站时已经缓存在浏览器中了,所以能加快网站的打开速度。另外一个好处是显而易见的,节省了网站的流量带宽。
Google 提供的http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js
jQuery 官方的http://code.jquery.com/jquery-1.6.min.js
jQuery 代码具体的写法和原生的 Javascript 写法在执行常见操作时的区别如下:
1 定位元素
- // JS
- document.getElementById("abc")
- // jQuery
- $("#abc") //通过id定位
- $(".abc") //通过class定位
- $("div") //通过标签定位
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(); //在显示和隐藏之间切换
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 语法上的一些区别的更多相关文章
- Javascript和Jquery语法对比总结
目的 相信大家都知道jq是js的一个类库,是为了方便我们开发前端,但是笔者在刚开始学习js和jq时经常将两者的语法记混和混用,所以整理下两者实现相同功能之前的语法区别. 声明变量 javascript ...
- JavaScript、Jquery选择题
尚学堂Java EE软件工程师认证考试 试题库-选择题 一. 选择题(包括单选和双选) 1.B 在JavaScript中,以下变量命名非法的是( )(选择一项) A. numb_1 ...
- 使用javaScript和JQuery制作经典面试题:光棒效果
使用javaScript与jQuery添加CSS样式的区别和步骤 使用javaScript制作光棒效果 --首先是javaScript <script> $(function () { v ...
- JavaScript和JQuery的区别
一.本质上的区别 1.JavaScript 是通过<script></script>标签插入到HTML页面,可由所有的现代浏览器执行的一种轻量级的编程语言. 2.JQuery是 ...
- 前端笔记之jQuery(上)加载函数的区别&对象&操作HTML/CSS&动画&选择器
一.jQuery简介 1.0 JavaScript编程比较恶心的地方 恶心1:选择元素麻烦,全线兼容的方法只有getElementById()和getElementsByTagName()两个.其他的 ...
- Web前端学习笔记之JavaScript、jQuery、AJAX、JSON的区别
官网的英文解释: javascript和jQuery有点关系,js是一种脚本语言,主要用于客户端,现在主要用于实现一些网页效果. jquery是js的一个库,你可以认为是对js的补充,提供了很多方便易 ...
- Python和JavaScript在使用上有什么区别?
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文出处:https://www.freecodecamp.org/news/python-vs-javas ...
- Jquery 复习练习(02)Javascript 与jquery 互转 onclick 与click区别
Javascript 与jquery 互转 jquery 为<script src="jquery-1.8.3.js"></script> 以checkbo ...
- JQuery语法 JQuery对象与原生对象互转 文档就绪函数与window.onload的区别
[JQuery语法] 1.jQuery("选择器").action();通过选择器调用事件函数,但是jquery中,jquery可以用$(“选择器”).action(); ① ...
随机推荐
- Yii modules中layout文件的调用
在YII中,如果我们使用了modules区分了前后台,那么在不同的modules中需要使用各自的layout文件,在使用中发现经常会调用不到modules中的layout,下面介绍一下如何才能正确的调 ...
- Benefits of Cold Showers: 7 Reasons Why Taking Cool Showers Is Good For Your Health
Benefits of Cold Showers: 7 Reasons Why Taking Cool Showers Is Good For Your Health Most of us have ...
- wcf中netTcpBinding的元素构成
<security> of <netTcpBinding> <transport> of <netTcpBinding> <message> ...
- Docker在云环境中的应用实践初探:优势、局限性与效能评测
作者 商之狄 发布于 2014年11月10日 本文依据笔者所在团队的一些近期开发和应用的实践,整理出一些有意义的信息,拿出来和社区分享.其中既包括在云端应用Docker与相关技术的讨论,同时也有实施过 ...
- 从零开始学习jQuery
转自:http://www.cnblogs.com/zhangziqiu/archive/2009/04/30/jQuery-Learn-1.html 本系列文章导航 从零开始学习jQuery (一) ...
- (转载)按行合并两个sql的查询结果
(转载)http://blog.csdn.net/wxwstrue/article/details/6784774 Union all join 是平行合并 为水平连接 Union all 是垂直合并 ...
- Web性能测试基本性能指标
Web性能测试的部分概况一般来说,一个Web请求的处理包括以下步骤: (1)客户发送请求 (2)web server接受到请求,进行处理: (3)web server向DB获取数据: (4)webse ...
- [CODEVS1014]装箱问题
题目描述 Description 有一个箱子容量为V(正整数,0<=V<=20000),同时有n个物品(0<n<=30),每个物品有一个体积(正整数). 要求n个物品中,任取若 ...
- UVA 10256 The Great Divide (凸包,多边形的位置关系)
题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=34148 [思路] 凸包 求出红蓝点的凸包,剩下的问题就是判断两个凸 ...
- Tomcat内存不足的解决办法
Tomcat增加内存 -Xms512m -Xmx512m -XX:PermSize=128M -XX:MaxPermSize=512m -DCOM.HUATENG.PRODUCTION_MODE=fa ...