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(); ① ...
随机推荐
- [QuickX]xcode运行Quick-cocos2d-x项目时自动更新lua资源文件
1.项目设置 build settings ->build options ->Scan all source files and Includes = YES 2.加入script (1 ...
- Perl脚本学习经验(四)--Perl中sftp的使用
使用sftp,需要使用Except模块,该模块需要下载安装在perl目录下,可以上http://www.cpan.org/上下载对应的安装包:1. 用root用户登录环境:2. cd /usr/lib ...
- 数据挖掘十大经典算法(5) 最大期望(EM)算法
在统计计算中,最大期望(EM,Expectation–Maximization)算法是在概率(probabilistic)模型中寻找参数最大似然估计的算法,其中概率模型依赖于无法观测的隐藏变量(Lat ...
- EditPlus+MinGW搭建简易的C/C++开发环境
EditPlus+MinGW搭建简易的C/C++开发环境 有时候想用C编点小程序,但是每次都要启动那难用又难看的VC实在是不情愿,而且老是会生成很多没用的中间文件,很讨厌,后来看到网上有很多人用Edi ...
- bzoj1263
观察可得,最大的拆分方法是尽量拆成3,特殊的,如果最后剩下了1,那么就把3+1变成2+2 然后高精度计算即可 var s2,s3,i,n,l:longint; a:..] of longint ...
- 比较详细的利用虚拟机对SD卡FAT32+EXT4+Ext4分区图解教程
如果大家嫌虚拟机复杂,我这里提供一个我没用虚拟机之前的分区方法:这个方法实际是可行的 我在没有用虚拟机之前,我是这样操作的1.首先在分区软件分好fat32+ext2+ext22.然后用recovery ...
- Lua运算符
+ 加- 减* 乘/ 除^ 幂% 求余# 求长度= 赋值< 小于> 大于== 等于<= 不大于=> 不小于~= 不等于and 逻辑与or 逻辑或not 逻辑非.. 连接字符串
- 英语之路 zt
各位为英语而郁闷的兄弟姐妹们: 自从考完GRE和TOEFL以后,心有所感,本想写点心得,但是因为太懒没写成.今日风雨如晦,心中又有所感,于是一舒笔墨,写下我学英语的方法.俺知道有很多兄弟姐妹们和曾经的 ...
- 使用VisualStudio进行单元测试之二
借着工作忙的借口,偷了两天懒,今天继续单元测试之旅.前面说了如何进行一个最简单的单元测试,这次呢就跟大家一起来熟悉一下,在visual studio中如何进行数据驱动的单元测试. 开始之前先来明确一下 ...
- JavaScript---网络编程(9-2)--DHTML技术演示(2-2)-表格加强
对上篇博客的最后那个表格隔行高亮显示加了个功能,鼠标监听和年龄从小到大排序. 演示代码: <html> <head> <title>DHTML技术演示---表格中页 ...