两分钟了解jQuery与JavaScript、JS三者间的区别

$("#abc") 通过id定位 
$(".abc") 通过class定位 
$("p") 通过标签定位

注意：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(&＃39;font-size&＃39;, 20);

JS：

abc.className="test";

JQuery：

abc.removeClass(); 
abc.addClass("test");

9 判断复选框是否选中
jQuery

if(abc.attr("checked") == "checked")

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

JS和JQUERY的区别

1. 根据ID取元素
JS:取到的是一个DOM对象。
例：

var p = document.getElementByID("one");

JQUERY:取到的是一个JQUERY对象。
例：

var p = $("#one");

2. 根据class取元素[在数组里面如果要取DOM对象使用索引的方式，如果要取JQUERY对象使用eq()]
JS:取到的是一个数组
例：

var p = document.ElementsByClassName("test");

JQUERY:
例：

var p = $(".test");

3. 根据name取元素
JS：返回的是一个数组
例：

var bd = document.getElementsByName(uid);

JQUERY：的方式是用 方括号，属性=一个值，不限制非要根据name来取值，JQUERY是根据属性来取元素
例：

$("[name=&＃39;uid&＃39;]");

4. 根据标签名取元素
JS：返回的也是一个数组
例：

var p = document.getElementsByTagName("p");

JQUERY：和样式表里面给所有p加样式的方法一样，在双引号内直接写标签名
例：

$("p");

Eg:指定子目录元素对象获取：var p = $("p span");——有很多组合方式

操作内容

1. 非表单元素（如果是文本就用text方法，如果是html代码就用html方法）

例：
1.1. 无参数的情况下是取值
p.text();
p.html();
1.2. 有参数的情况下是赋值
p.text("aaaa");
p.html("aaaa");
2. 表单元素
JS：
2.1. 取值
p.value;
2.2. 赋值
p.value = &＃39;xxx&＃39;;
JUQERY：
2.3. 取值
p.val();
3.4. 赋值
p.val(&＃39;xxx&＃39;);

操作属性

JS操作属性

设置|修改属性：

p.setAttribute("","");

删除属性

p.removeAttribute("");

获取属性

p.getAttribute();

JQUERY里面用来操作属性的方法
添加属性：

p.attr("width","20%");

移除属性：

p.removeAttr("width");

获取属性：

p.attr("width");

操作样式
JS操作样式-关键字是[style]
例：

p.style.backgroundColor = "red";

JQUERY里面操作样式的关键字是css
例：

p.css("background-color","yellow");

——把这个p的背景色变为黄色，在这里CSS里面所有的样式和css样式表里面的样式是一模一样的没有任何变化
JS操作样式的方法只能获取内联样式，不能取内嵌的和外部的！！！！！
JQUERY操作样式的方法可以是内联的也可以是内嵌的

感谢大家的阅读，希望大家收益多多。

本文转自：https://blog.csdn.net/dalei9243/article/details/79804789

推荐教程：《JS教程》

以上就是两分钟了解jQuery与Javascript、JS 三者间的区别的详细内容，更多请关注 第一PHP社区 其它相关文章！