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(); ① ...
随机推荐
- Spring 通过工厂方法(Factory Method)来配置bean
Spring 通过工厂方法(Factory Method)来配置bean 在Spring的世界中, 我们通常会利用bean config file 或者 annotation注解方式来配置bean. ...
- zip压缩解压缩 项目icsharpcode-SharpZipLib-e012155
大家可以到http://www.icsharpcode.net/opensource/sharpziplib/ 下载SharpZiplib的最新版本,支持Zip, GZip, BZip2 和Tar格式 ...
- linux命令中,执行一个程序,后面加上&, 代表的意思是什么?
后台执行.也就是执行这个程序的同时,你的终端同时还能够做其他的事情,如果不加这个符号,那么你执行这个程序后,你的终端只能等这个程序执行完成才能够继续执行其他的操作 . 如:启动etcd: ./etcd ...
- 【转】重载(overload),覆盖(override),隐藏(hide)的区别
原文网址:http://www.cppblog.com/zgysx/archive/2007/03/12/19662.html 写正题之前,先给出几个关键字的中英文对照,重载(overload),覆盖 ...
- LRU 缓冲池 (不考虑多线程)
lru:(转)LRU算法的实现 什么是LRU算法? LRU是Least Recently Used的缩写,即最近最少使用页面置换算法,是为虚拟页式存储管理服务的.关于操作系统的内存管理,如何节省利用容 ...
- ubuntu中为hive配置远程MYSQL database
一.安装mysql $ sudo apt-get install mysql-server 启动守护进程 $ sudo service mysql start 二.配置mysql服务与连接器 1.安装 ...
- 《锋利的Jquery第二版》读书笔记 第三章
DOM操作的分类 1.DOM Core不专属JavaScript,任何一种支持DOM的程序设计语言都可以使用它,也可以处理XML等标记语言编写出来的文档,getElementById().setAtt ...
- 转载:在Ubuntu系统下装Win7并引导双系统
转载自http://blog.sina.com.cn/s/blog_9f6451990101blef.html 本人的系统原先是就单ubuntu系统,而且是未分区情况下自动安装的,现在又装了个wind ...
- linux下如何执行PHP脚本
Linux 下如何直接执行 php 脚本? 下面是部分 php 命令行参数. 用法 php [-q] [-h] [-s] [-v] [-i] [-f ] | { [args...]} -q 安静模式, ...
- 《神经网络和深度学习》系列文章十二:Hadamard积,s⊙t
出处: Michael Nielsen的<Neural Network and Deep Learning>,点击末尾“阅读原文”即可查看英文原文. 本节译者:哈工大SCIR本科生 王宇轩 ...