JavaScript与jQuery的区别

江一帆 2020-02-23 PM 1950℃ 0条 10208字 Site load time is:152 ms 百度:已收录

区别一

1.定位元素

-JS (下面类似)
document.getElementById("abc") 
-jQuery 
$("#abc") 通过id定位 
$(".abc") 通过class定位 
$("div") 通过标签定位 

需要注意的是JS返回的结果是这个元素,jQuery返回的结果是一个JS的对象。以下例子中假设已经定位了元素abc。

2.改变元素的内容

abc.innerHTML = "test";

abc.html("test"); 

3.显示隐藏元素

abc.style.display = "none";        
abc.style.display = "block"; 

abc.hide(); 
abc.show();

abc.toggle();     //在显示和隐藏之间切换、

4.获得焦点

JS和jQuery是一样的,都是abc.focus();

5.为表单赋值

abc.value = "test"; 

abc.val("test"); 

6.获得表单的值

alert(abc.value); 

alert(abc.val()); 

7.设置元素不可用

abc.disabled = true; 

abc.attr("disabled", true);

8.修改元素样式

abc.style.fontSize=size;

abc.css('font-size', 20);
abc.className="test";

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

9.判断复选框是否选中

jQuery
if(abc.attr("checked") == "checked")
注意:网上说的.attr("checked") == true实际上不能用

区别二

①.根据ID取元素

JS:取到的是一个DOM对象。

  例:var div = document.getElementByID("one");

jQuery:取到的是一个jQuery对象。

  例:var div = $("#one");

②.根据class取元素,在数组里面如果要取DOM对象使用索引的方式,如果要取jQuery对象使用eq()

JS:取到的是一个数组

  例:var div = document.ElementsByClassName("test");

jQuery:

  例:var div = $(".test");

③.根据name取元素

JS:返回的是一个数组

  例:var bd = document.getElementsByName(uid);

jQuery:的方式是用方括号,属性=一个值,不限制非要根据name来取值,jQuery是根据属性来取元素

  例:$("[name='uid']");

④.根据标签名取元素

JS:返回的也是一个数组

  例:var div = document.getElementsByTagName("div");

jQuery:和样式表里面给所有div加样式的方法一样,在双引号内直接写标签名

  例:$("div");

组合选取:var div = $("div span");


操作内容

①.非表单元素(如果是文本就用text方法,如果是html代码就用html方法)

jQuery:

  • div.text();——无参数的情况下是取值
  • div.text("aaaa");——有参数的情况下是赋值
  • div.html();——无参数的情况下是取值
  • div.html("aaaa");——有参数的情况下是赋值

②.表单元素

JS:

  • div.value;——取值;
  • div.value = xxx;——赋值

jQuery:

  • div.val();——无参数是取值,有参数是赋值。

操作属性

JS:

  • div.setAttribute("","");——设置属性、修改属性

    • div.removeAttribute("");——移除属性,引号里面写一个属性名
  • div.getAttribute();——获取属性

jQuery:

  • 添加属性:div.attr("test","aa");——给这个attr方法加入参数,属性名叫做test,属性的值是aa
  • 移除属性:div.removeAttr("test");——移除test这条属性
  • 获取属性:div.attr("test");——在attr方法里面直接写入一个属性的名就可以了

操作样式

JS里面操作样式的关键字是style

例:div.style.backgroundColor = "red";——把这个div的背景色设置成为了红色

jQuery里面操作样式的关键字是css

例:div.css("background-color","yellow");——把这个div的背景色变为黄色,在这里CSS里面所有的样式和css样式表里面的样式是一模一样的没有任何变化

JS操作样式的方法只能获取内联样式,不能取内嵌的和外部的,而jQuery操作样式的方法可以是内联的也可以是内嵌的。

给一个节点绑定事件

JQuery:

  ①.事件绑定的快捷方式

<body>
    <button>按钮</button>
</body>
<script src="js/jquery-1.10.2.js"></script>
<script>
     $("button:eq(0)").click(function () {
        alert(123);
     });
</script>

  ②:使用on进行事件绑定

<body>
    <button>按钮</button>
</body>
<script src="js/jquery-1.10.2.js"></script>
<script>
    //①使用on进行单事件的绑定
     $("button:eq(0)").on("click",function () {
        alert(456);
    });
     //②使用on同时给同一对象绑定多个事件
    $("button:eq(0)").on("click dblclick mouseover",function () {
        console.log(123);
    });
    //③使用on,给一个对象绑定多个事件
    $("button:eq(0)").on({
        "click":function () {
            console.log("click");
        },
        "mouseover":function () {
            console.log("mouseover");
        },
        "mouseover":function () {
            console.log("mouseover2");
        }
    });
    //④使用on给回调函数传参,要求是对象格式,传递的参数可以在e.data中取到;jquery中的e只能通过参数传进去,不能用window.event
    $("button:eq(0)").on("click",{"name":"zhangsan","age":15},function (e) {
        console.log(e);
        console.log(e.data);
        console.log(e.data.name);
        console.log(e.data.age);
        console.log(window.event);//js中的事件因子

    });
    
</script>

jquery 的ready() 与JS的onload()的区别

window.onload()$(document).ready()
加载时机必须等待网页全部加载完毕(包括图片等),然后再执行JS代码只需要等待网页中的DOM结构加载完毕,就能执行JS代码
执行次数只能执行一次,如果有第二次,那么第一次的执行会被覆盖可以执行多次,第N次都不会被上一次覆盖
举例以下代码无法正确执行: window.onload = function() { alert(“text1”);}; window.onload = function() {alert(“text2”);}; 结果只输出第二个以下代码正确执行: $(document).ready(function(){alert(“Hello”)}); $(document).ready(function(){alert(“Hello”)});结果两次都输出
简写方案$(function () {})

一般情况下window的load()都是用来设置body标签的onload事件.但onload事件是要在页面的元素全部加载完了才触发的,这也包括页面上的图片,以及大的表格数据。

而Jeuery中的ready()则是在页面的DOM(节点)加载完后就可以做相应的操作,而不用等待全部元素加载完成.比如只知道页面某处有一张图片,而不一定要等它显示出来就可以为它绑定点击方法。

JavaScript对象和JQuery对象的方法不能混用。

1.JavaScript对象和JQuery对象

使用$("")取到的节点为JQuery对象,只能调用JQuery方法,不能调用JavaScript方法;
*   $("#div").click(function(){})√
*   $("#div").onclick = function(){}× 使用JQuery对象调用JavaScript方法
*   同理,使用、document.getElement系列函数取到的对象为JavaScript对象,也不能调用JQery函数

2.JavaScript对象和JQuery对象互转

JQuery ---> JavaScript :

使用get(index)或者[index]选中的就是JavaScript对象

  • $("div").get(0).onclick = function(){}
  • $("div").[0].onclick = function(){}

JavaScript ---> JQuery :

使用$()包裹JavaScript对象(我们发现JQuery不管获得几个对象都是一个数组,可以直接给整个数组都添加某一事件)

  • var div = document.getElementById("div");
  • $(div).click(function(){});

JS查找标签

document.getElementById                               //根据ID获取一个标签
document.getElementsByClassName              //根据class属性获取
document.getElementsByTagName                 //根据标签名获取标签合集
//上面得到一个对象或者多个对象的集合
//根据js对象可以调用下面方法进行间接查找
对象.parentElement                                           // 父节点标签元素
对象.children                                                      //所有子标签
对象.firstElementChild                                       //第一个子标签元素
对象.lastElementChild                                       //最后一个子标签元素
对象.nextElementSibling                                   //下一个兄弟标签元素
对象.previousElementSibling                            //上一个兄弟标签元素

jQuery查找标签(获得jQuery对象)

$("#id")                                                    //根据id查找
$("tagName")                                          //根据标签查找
$(".className")                                     //根据类名查找
$("div.c1")                                              // 找到有c1 class类的div标签
$("#id, .className, tagName")               //组合查找
$("x y");                                                    // x的所有后代y(子子孙孙)
$("x > y");                                                 // x的所有儿子y(儿子)
$("x + y")                                                  // 找到所有紧挨在x后面的y
$("x ~ y")                                                  // x之后所有的兄弟y

//基本筛选器
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素,从 0 开始计数
:odd // 匹配所有索引值为奇数的元素,从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
//例子
$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签
//属性选择器
[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于
// 示例
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签

//表单筛选器:
:text
:password
:file
:radio
:checkbox

:submit
:reset
:button
//例子:

$(":checkbox")  // 找到所有的checkbox
例子:

找到可用的input标签

<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>

$("input:enabled")  // 找到可用的input标签
 找到被选中的option:

<select id="s1">
  <option value="beijing">北京市</option>
  <option value="shanghai">上海市</option>
  <option selected value="guangzhou">广州市</option>
  <option value="shenzhen">深圳市</option>
</select>

$(":selected")  // 找到所有被选中的option

jQuery筛选器

下一个元素:

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
上一个元素:

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
父亲元素:

$("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止。
儿子和兄弟元素:

$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们
查找

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

$("div").find("p")
等价于$("div p")

筛选

筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。

$("div").filter(".c1")  // 从结果集中过滤出有c1样式类的
等价于 $("div.c1")

补充:

.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素,去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素

标签操作

jQuery

//样式类

addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名,如果有就移除,如果没有就添加。
//示例:开关灯和模态框

//CSS

css("color","red")//DOM操作:tag.style.color="red"
//示例:

$("p").css("color", "red"); //将所有p标签的字体设置为红色

JS

class的操作
className  获取所有样式类名(字符串)

classList.remove(cls)  删除指定类
classList.add(cls)  添加类
classList.contains(cls)  存在返回true,否则返回false
classList.toggle(cls)  存在就删除,否则添加
指定CSS操作
obj.style.backgroundColor="red"
JS操作CSS属性的规律:

1.对于没有中横线的CSS属性一般直接使用style.属性名即可。如:

obj.style.margin
obj.style.width
obj.style.left
obj.style.position
2.对含有中横线的CSS属性,将中横线后面的第一个字母换成大写即可。如:

obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

参考文章:

https://blog.csdn.net/xueshuai0922/article/details/81108834

https://www.cnblogs.com/ytsbk/p/9033837.html

https://www.cnblogs.com/Kingfan1993/p/9821914.html

标签: JavaScript

本文最后更新于:2020-03-02 21:10,可能因经年累月而与现状有所差异。

非特殊说明,本博所有文章均为博主原创。

评论啦~


召唤看板娘