精选文章 原生JS和jQuery的对比使用

原生JS和jQuery的对比使用

作者:菜鸟盐 时间: 2020-07-25 04:22:54
菜鸟盐 2020-07-25 04:22:54

1.入口函数

js:
window.onload = function(){js代码}
实质就是一个事件,拥有事件的三要素,事件源,事件,事件处理程序。等到所有内容,以及我们的外部图片之类的文件加载完了之后,才会去执行。只能写一个入口函数。
jq: 
$(function(){})  
$(document).ready(function(){})
在html所有的标签都加在之后就会去执行,可以写多个。

2.获取元素

js:
 document.getElementsByTagName("a") 获取标签是a的,返回的是个集合
 document.getElementById("demo") 获取到ID是demo的对象
 document.getElementsByClassName("class") 获取到类名是一致的所有对象  有兼容性问题
 document.getElementsByTagName("*")  获得所有的标签,用来遍历  html5新增选择器    document.querySelector(selector) 可以通过CSS选择器的语法找到DOM元素,返回第一个满足选择器  条件的元素 一个dom对象  
 document.querySelectorAll('.item');返回所有满足该条件的元素 一个元素类型是dom类型的数组
jq:
$("")
元素 元素
选择器实例选取
*$("*")所有元素
#id$("#lastname")id="lastname" 的元素
.class$(".intro")所有 class="intro" 的元素
element$("p")所有

元素

.class.class$(".intro.demo")所有 class="intro" 且 class="demo" 的元素
   
:first$("p:first")第一个

元素

:last$("p:last")最后一个

元素

:even$("tr:even")所有偶数
:odd$("tr:odd")所有奇数
   
:eq(index)$("ul li:eq(3)")列表中的第四个元素(index 从 0 开始)
:gt(no)$("ul li:gt(3)")列出 index 大于 3 的元素
:lt(no)$("ul li:lt(3)")列出 index 小于 3 的元素
:not(selector)$("input:not(:empty)")所有不为空的 input 元素
   
:header$(":header")所有标题元素

-

:animated 所有动画元素
   
:contains(text)$(":contains('W3School')")包含指定字符串的所有元素
:empty$(":empty")无子(元素)节点的所有元素
:hidden$("p:hidden")所有隐藏的

元素

:visible$("table:visible")所有可见的表格
   
s1,s2,s3$("th,td,.intro")所有带有匹配选择的元素
   
[attribute]$("[href]")所有带有 href 属性的元素
[attribute=value]$("[href='#']")所有 href 属性的值等于 "#" 的元素
[attribute!=value]$("[href!='#']")所有 href 属性的值不等于 "#" 的元素
[attribute$=value]​='.jpg']")所有 href 属性的值包含以 ".jpg" 结尾的元素
   
:input$(":input")所有 元素
:text$(":text")所有 type="text" 的 元素
:password$(":password")所有 type="password" 的 元素
:radio$(":radio")所有 type="radio" 的 元素
:checkbox$(":checkbox")所有 type="checkbox" 的 元素
:submit$(":submit")所有 type="submit" 的 元素
:reset$(":reset")所有 type="reset" 的 元素
:button$(":button")所有 type="button" 的 元素
:image$(":image")所有 type="image" 的 元素
:file$(":file")所有 type="file" 的 元素
   
:enabled$(":enabled")所有激活的 input 元素
:disabled$(":disabled")所有禁用的 input 元素
:selected$(":selected")所有被选取的 input 元素
:checked$(":checked")所有被选中的 input 元素

3.相互转换

js==>jq 得到jQuery对象
var btn = document.querySelector('#btn');
$("btn")
jq==>js 得到DOM对象
$("#btn").get(0)
$("#btn")[0]

4.事件处理程序

js:
var btn = doncument.querySelector('#btn');
btn.οnclick=function(){代码块}
btn.addEventListener('click',function(){代码块})
​
//事件
onclick 单击事件
onblur 失去焦点事件
onchange 当对象或选中区的内容改变时触发。
onmouseover 当用户将鼠标指针移动到对象内时触发。
onmouseout 当用户将鼠标指针移出对象边界时触发。
onsubmit 当表单将要被提交时触发
onload 加载事件
//补充
1、onmouseover、onmouseout:鼠标经过时自身触发事件,经过其子元素时也触发该事件;(父亲有的东西,儿子也有)
2、onmouseenter、onmouseleave:鼠标经过时自身触发事件,经过其子元素时不触发该事件。(父亲的东西就是父亲的,不归儿子所有)
这四个事件两两配对使用,onmouseover、onmouseout一对,onmouseenter、onmouseleave一对,不能混合使用。
jq:
$("#btn").click(function(){代码块})
​
 事件说明
鼠标事件click单击
 dblclick双击
 mouseenter当鼠标指针穿过元素时,会发生 mouseenter 事件。
 mouseleave当鼠标指针离开元素时,会发生 mouseleave 事件
 hoverhover()方法用于模拟光标悬停事件。
 mouseup()当在元素上松开鼠标按钮时,会发生 mouseup 事件。
 mousedown()当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件
键盘事件keypress键被按下
 keydown键按下的过程
 keyup键被松开
表单事件submit当提交表单时,会发生 submit 事件。该事件只适用于
元素。
 change当元素的值改变时发生 change 事件(仅适用于表单字段)。
 focus当元素获得焦点时(当通过鼠标点击选中元素或通过 tab 键定位到元素时),发生 focus 事件
 blur当元素失去焦点时发生 blur 事件。
文档/窗口事件loadload() 方法添加事件处理程序到 load 事件。//jQuery 版本 1.8 中被废弃,在 3.0 版本被移除。
 resize当调整浏览器窗口大小时,发生 resize 事件。
 scroll当用户滚动指定的元素时,会发生 scroll 事件。
 unload当用户离开页面时,会发生 unload 事件。//jQuery 版本 1.8 中被废弃,在 3.0 版本被移除。

5.设置类

js:
document.querySelector('#btn').className="active";
document.querySelector('#btn').classList.add("active")
可以同时设置多个类名。
//补充:
document.querySelector('#xx').setAtrribute('className','class2');
document.querySelector('#xx').classList.add(".xxx");添加一个或多个类
document.querySelector('#xx').classList.remove(".xxx");移除一个或多个类
document.querySelector('#xx').classList.toggle(".xxx");存在就删除,没有就添加
document.querySelector('#xx').classList.contains('className'); 是否有该类

 

jq:
addClass() ==> $(".XX").addClass("xxx"); 添加一个或多个类
removeClass() ==> $(".XX").removeClass("xxx");移除一个或多个类
toggleClass() ==> $(".XX").toggleClass("xxx");存在就删除,没有就添加
hasClass() ==> $(".XX").hasClass("xxx");检查是否存在这个类名
css() ==> $(".XX").css("color","red");
读操作:获取匹配元素集合中第一个元素的指定样式值(一个或多个)、读取多个样式值的操作是在jQuery v1.9才加入的
写操作: 为匹配元素集合中的每一个元素设置一个或多个CSS属性的值、传入的参数可以是单个的键值对、也可以是PlainObject指定的多个值
attr() ==> $(".XX").attr("class","xxx");attr()方法设置或返回被选元素的属性值、根据该方法不同的参数、其工作方式也有所差异
prop() ==> $(".xx").prop("class","xxx")

6.设置内容,html和text

js:
document.querySelector('#xx').innerHTML = "

内容

" document.querySelector('#xx').innerText = "内容" document.querySelector('#xx').value = "" 获取表单元素
jq:
$("#XX").html()
1.普通元素内容html()(相当与原生的innerHTML)
$("#XX").html()//获取元素内容
$("#XX").html("内容")//设置元素的内容
1.普通元素内容text()(相当与原生的innerText)
$("#XX").text()//获取元素内容
$("#XX").text("内容")//设置元素的内容
1.获取表单内容val()(相当与原生的value)/*val() 方法返回或设置被选元素的值。
元素的值是通过 value 属性设置的。该方法大多用于 input 元素。如果该方法未设置参数,则返回被选元素的当前值*/
$("#XX").val()//获取表单的值
$("#XX").val("内容")//设置表单的值

7.属性

js:(一般用于自定义属性)
document.querySelector('#xx').getAttribute('属性名')  获取元素属性
document.querySelector('#xx').setAttrbute('属性名',value)  设置元素属性
document.querySelector('#xx').removeAttrbute('属性名')  移除属性 用于操作自定义属性
jq:
attr() ==> $(".XX").attr("属性名","属性值");attr()方法设置或返回被选元素的属性值、根据该方法不同的参数、其工作方式也有所差异
prop() ==> $(".xx").prop("属性名","属性值")

8.节点

js:
document.createElement("p");//创建一个p标签
ele.appendChild(newNode);//生JS向子节点列表的末尾添加新的子节点
ele.insertBefore(newNode, targetNode);//原生JS在节点的已有子节点之前插入一个新的子节点
ele.parentNode.removeChild(ele);//移除节点
jq:
$('

');//创建一个p标签 $('#xx').append('

Hello World.

');//在匹配元素子节点列表结尾添加内容 $('#xx').appendTo('

Hello World.

');//把匹配元素添加到目标元素子节点列表结尾 $('#xx').prepend('

Hello World.

');//在匹配元素子节点列表开头添加内容 $('#xx').prependTo('

Hello World.

');//把匹配元素添加到目标元素子节点列表开头 $('#xx').before('

Hello World.

');//在目标元素前添加 $('#xx').after('

Hello World.

');//在目标元素后添加 //$('#xx').remove();//删除节点 $("ul").remove(); //可以删除匹配的元素 自杀 $("ul").empty(); // 可以删除匹配的元素里面的子节点 孩子 $("ul").html(""); // 可以删除匹配的元素里面的子节点 孩子

9.数组操作

js:
数组元素的添加  
arrayObj. push();// 将一个或多个新元素添加到数组结尾,并返回数组新长度  
arrayObj.unshift();// 将一个或多个新元素添加到数组开始,数组中的元素自动后移,返回数组新长度 
arrayObj.splice();//将一个或多个新元素插入到数组的指定位置,插入位置的元素自动后移,返回""。 
数组元素的删除  
arrayObj.pop(); //移除最后一个元素并返回该元素值  
arrayObj.shift(); //移除最前一个元素并返回该元素值,数组中元素自动前移  
arrayObj.splice(deletePos,deleteCount); //删除从指定位置deletePos开始的指定数量deleteCount的元素,数组形式返回所移除的元素  
数组的截取和合并
arrayObj.slice(start, [end]); //以数组的形式返回数组的一部分,注意不包括 end 对应的元素,如果省略 end 将复制 start 之后的所有元素  
arrayObj.concat(); //将多个数组(也可以是字符串,或者是数组和字符串的混合)连接为一个数组,返回连接好的新的数组  
数组的拷贝  
arrayObj.slice(0); //返回数组的拷贝数组,注意是一个新的数组,不是指向  
arrayObj.concat(); //返回数组的拷贝数组,注意是一个新的数组,不是指向  
数组元素的排序  
arrayObj.reverse(); //反转元素(最前的排到最后、最后的排到最前),返回数组地址  
arrayObj.sort(); //对数组元素排序,返回数组地址  
数组元素的字符串化  
arrayObj.join(','); //返回字符串,这个字符串将数组的每一个元素值连接在一起,中间用 ,隔开。  
toLocaleString 、toString 、valueOf:可以看作是join的特殊用法,不常用
jq:
jq对数组的封装
$.each(object,[callback])//通用例遍方法,可用于例遍对象和数组。不同于例遍 jQuery 对象的 $().each() 方法,此方法可用于例遍任何对象。回调函数拥有两个参数:第一个为对象的成员或数组的索引,第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false,其它返回值将被忽略。
object:需要例遍的对象或数组。
callback:每个成员/元素执行的回调函数。
​
一、遍历
$.each(arr, callback(key, val));
1、回调函数拥有两个参数:第一个为对象的成员或数组的索引, 第二个为对应变量或内容
2、如果需要退出 each 循环,可使回调函数返回 false,用return false, 其它返回值将被忽略.
​
二、筛选
$.grep(arr, callback, invert)
1、此函数至少传递两个参数,第三个参数为true或false,对过滤函数返回值取反
2、默认invert为false, 即过滤函数返回true为保留元素. 如果设置invert为true, 则过滤函数返回true为删除元素.
3、过滤函数必须返回 true 以保留元素或 false 以删除元素.
​
三、转换
$.map(arr,callback(key,val))
1、将一个数组中的元素转换到另一个数组中。
2、和each函数差不多,  区别就是回调函数可以改变当前元素.返回null则删除当前元素.
​
四、合并
$.merge(arr1,arr2)
1、arr1后面加上arr2后返回arr1
​
五、判断
$.inArray(val,arr)  
1、判断val是否在arr里面
2、确定第一个参数在数组中的位置, 从0开始计数(如果没有找到则返回 -1 ).
3、indexOf()返回字符串的首次出现位置,而$.inArray()返回的是传入参数在数组中的位置,同样的,如果找到的,返回的是一个大于或等于0的值,若未找到则返回-1.
勿删,copyright占位
分享文章到微博
分享文章到朋友圈

上一篇:你经常看的斗鱼直播平台,首次开源了自家项目

下一篇:使用RedisTemplate批量存入数据,100万测试 需要1分钟

您可能感兴趣

  • WebRTC资源

    一、官方资源 官方网站:http://webrtc.org(官网还是最权威的) 2013谷歌I/O大会对WebRTC的介绍:视频(https://www.youtube.com/watch?v=p2HzZkd2A40),ppt(http://io13webrtc.appspot.com/#1)(讲的不错) 2012谷歌I/O大会对WebRTC的介绍:http://youtu.be/E8C8o...

  • JS设计模式之发布订阅者模式

    (本篇文章是我在早高峰上班地铁上刷到了一篇公众号发布的文章,感觉讲的非常好,特分享给大家。每天坚持学习,感谢公众号大佬的分享,公众号:nodejs全栈开发) 首先我们用一个示例来演示一下什么是观察者模式,有这样一个场景,在一个院子里,有一个小偷,和若干条狗,小偷只要一行动,狗就会叫,狗叫的动作是依赖小偷的,如果小偷不行动,狗是不会叫的,也就是说狗的叫的状态依赖小偷的行动,小偷的行动状态发生变...

  • Next.js 9.5 发布:支持 Webpack 5

    作者 | Next.js 团队 译者 | 王强 策划 | 李俊辰 Next.js 9.5 发布,具体有这些内容。 Next.js 9.5 今天正式发布了,其改进包括: 稳定的增量静态再生 :部署后以毫秒为单位重建静态页面 可自定义的基本路径 :在域的子路径上轻松托管 Next.js 项目 支持重写、重定向和标头 :重写虚拟 URL,重定向旧 URL,向静态页面添加标头 URL 中的可选尾斜杠...

  • 如何基于 Electron 开发跨终端的应用

    自我介绍 欢迎大家来到今天的早早聊跨端跨栈专场,今天我分享的主题是《如何基于 Electron 开发跨终端的应用》。先做一下自我介绍,我叫逯子洋,17 年加入政采云,目前主要负责政采云前端工程化平台敦煌以及政采云电子招投标客户端的建设。这边是我们团队的微信公众号,大家如果想对我们团队有更多的了解,可以关注一下我们的公众号。 首先我们分享的第一块叫端的延展。不知道大家对这张图熟不熟悉,前段时间...

  • jQuery Mobile第2课

    Today we continue our lessons about jQuery Mobile. In this lesson we will look at examples of jQuery Mobile initialization, creation of pages, event handlers, page transitions and other. 今天,我们继续关于j...

  • 分享14个有用的Jquery技巧。

    转载自品略图书馆 http://www.pinlue.com/article/2020/06/2513/3910824936506.html 1.通过方法返回Jquery对象实例 用 var someDiv = $(‘#someDiv").hide(); 代替 var someDiv = $(‘#someDiv"); someDiv.hide(); 2.使用find来查找 用 $(‘#som...

  • Web前端招聘要求有哪些 怎么成为前端行业人才

      Web前端招聘要求有哪些?怎么成为前端行业人才?移动互联网的飞速发展以及Angular、React、Vue等框架和Node.js、ES6等新技术的出现带动了前端技术的飞速提升,Web前端工程师价值进一步凸显,薪资待遇一涨再涨。   很多人看好Web前端的市场前景纷纷选择学习入行,但在求职面试时却以失败告终,被狠狠地泼了一盆冷水。为什么会出现这种情况呢?专业技能不达标是根本原因。很多人对技...

  • Node学习总结-基础篇

    1、谈谈js中的变量类型有哪些? 答:值类型:字符串(string)、数值(number)、布尔值(boolean)、undefined、null、symbol(es6) 引用类型:对象(Object)、数组(Array)、函数(Function) 2、谈谈null和undefined的区别? 答:null是一个表示 "无" 的对象,转为数值时为 0;undefined是一个表示 "无" 的...

华为云40多款云服务产品0元试用活动

免费套餐,马上领取!
CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。