JQuery与js具体使用的区别(不全,初学)

jQuery能大大简化Javascript程序的编写

要使用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(); 
//在显示和隐藏之间切换
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")

注意:网上说的.attr("checked") == true实际上不能用,上面这个测试过能用

时间: 2024-08-07 19:38:25

JQuery与js具体使用的区别(不全,初学)的相关文章

Jquery和js取数据的区别以及引用Jquery文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

jQuery和JS入口函数的区别

1.通过原生的JS入口函数和jQuery入口函数都可以拿到DOM元素 2.通过原生的JS入口函数可以拿到DOM元素的宽高,jQuery入口函数不可以拿到DOM元素的宽高 3.原生JS和jQuery入口函数的加载模式不同 原生JS会等到DOM元素加载完毕,并且图片也加载完毕才会执行 jQuery会等到DOM元素加载完毕,但不会等到图片也加载完毕就会执行 4.原生的JS如果编写了多个入口函数,后面编写的会覆盖前面编写的,jQuery中编写多个入口函数,后面的不会覆盖前面的 原文地址:https://

JQuery之JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案

JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案 JQuery的版本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery的版本</title> <

jquery和Js的区别和基础操作

jquery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jquery的话,先要引入一下jquery包,jquery包从网上下一个就可以,一般用带有min的,是压缩版的,如果还要引用其他js文件的话,一定要jquery包在上面,其他的引用放在他下面 先来看看如果使用Jquery的话,怎么来引用Jquery包 这样来引用,然后就可以用Jquery方法了 和js的语法一样,都是写在<script type = "text/j

jQuery与js的区别,并有基本语法详解,

通过过一下对比,我们能很清楚的发现jquery与js的区别,运用jquery能大量减少代码量,不过js里面关于时间的setinterval和settimeout只能用js <script src="jquery-1.11.2.min.js"></script>: 引用文件的语句一定要放在最前面,即使写了新的js方法和引用的js文件,也要把Jquery文件的引用语句放在最前面.下面就说一下Jquery和js的区别: 1.找元素(两种方法一一对应): js方法: v

jQuery和js区别

1.加载DOM区别 JavaScript: window.onload function first(){ alert('first'); } function second(){ alert('second'); } window.onload = first; window.onload = second; //只会执行第二个window.onload:不过可以通过以下方法来进行改进: window.onload = function(){ first(); second(); } Jque

JQuery的ready函数与JS的onload的区别

JQuery的ready函数与JS的onload的区别:1.执行时间window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2.编写个数不同window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个$(document).ready()可以同时编写多个,并且都可以得到执行 3.简化写法window.onload没有简化写法$(document).r

JQUERY与JS的区别

JQUERY与JS的区别 <style type="text/css"> #aa { width:200px; height:200px; } </style> <script src="jquery-1.11.2.min.js"></script> </head> <body> <div id="aa" style="">hello</

JQuery之append和appendTo的区别,还有js中的appendChild用法

JQuery之append和appendTo的区别 append()前面是要选择的对象,后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容且为Jquery对象,而后面是要选择的对象 实例: $('#a').append('content'); $('<div>content</div>').appendTo($('#a')); 注意appendTo前面一定要是Jquery对象. appendChild(Node)这个 方法一般是在指定元素节点的最后一个子节点