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(); ① ...
随机推荐
- statspack系列6
原文:http://jonathanlewis.wordpress.com/2006/12/27/analysing-statspack-6/ 作者:Jonathan Lewis 下面是一段时间以前网 ...
- wikioi 1514 and ZJOI2006 书架
1514 书架 0人推荐 收藏 发题解 提交代码 报错 题目描述 输入描述 输出描述 样例输入 样例输出 提示 题目描述 Description 小 T有一个很大的书柜.这个书柜的构造有些独特,即书柜 ...
- Java I/O学习(一)
写作目的 自学Java,Java中流的概念比较复杂,故专门作一整理.期望开始学习的童鞋,看完本文后对Java流有一个大致的认识.主要分三个小篇: 一.概述.输入/输出字节流 二.输入/输出字符流.装饰 ...
- devpress GridControl控件绑定RepositoryItemImageComboBox 作为下拉框使用 zt
1.拖出gridview控件,然后将字段绑定上去 2.将要做下拉框的控件加入RepositoryItemImageComboBox控件 3.绑定数据 ; i < ; i++) { //如果取值时 ...
- HDU-2521 反素数
反素数 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submis ...
- Windows Server AppFabric 安装文档
安装指南 入门标题页 3 Windows Server AppFabric 安装和配置指南 3 版权 3 版权所有 3 简介 3 清单:规划安装 4 硬件要求 4 使计算机作好安装准备 5 本节内容 ...
- Keepass 2.x 之 同步与触发器
同步 之前用的 Keepass 1.x, 要实现工作电脑和个人电脑上的数据库文件同步,使用的是第三方的网盘同步.但有个问题就是,个人不习惯设置同步网盘开机启动,所以有时候工作电脑上的改动还没有同步上传 ...
- show drop down menu within/from action bar
show drop down menu within/from action bar */--> pre { background-color: #2f4f4f;line-height: 1.6 ...
- 转载:Java多线程中join方法的理解
转载自:http://uule.iteye.com/blog/1101994 thread.Join把指定的线程加入到当前线程,可以将两个交替执行的线程合并为顺序执行的线程.比如在线程B中调用了线程A ...
- 【ACM/ICPC2013】线段树题目集合(一)
前言:前一段时间在网上找了一个线段树题目列表,我顺着做了一些,今天我把做过的整理一下.感觉自己对线段树了解的还不是很深,自己的算法能力还要加强.光练代码能力还是不够的,要多思考.向队友学习,向大牛学习 ...