JS与JQuery

原生js和jQuery主要异同点

1、入口函数的不同

js:window.onload = function(){内部放js}

实质就是一个事件,拥有事件的三要素,事件源,事件,事件处理程序。等到所有内容,以及我们的外部图片之类的文件加载完了之后,才会去执行。只能写一个入口函数。

jQuery:$(function(){})或者$(document).ready(function(){})

是在 html所有标签都加载之后,就回去执行。可以写多个。

2、获取元素的方式不同

js:常用的以下几个,除了id,其他的结果都是伪数组

[HTML] 纯文本查看 复制代码

?

document.getElementsByTagName("a")

document.getElementById("demo")
document.getElementsByClassName("class")  有兼容性问题
document.getElementsByTagName("*")  获得所有的标签,用来遍历

html5新增选择器

document.querySelector(selector) 可以通过CSS选择器的语法找到DOM元素,返回

第一个满足选择器条件的元素 一个dom对象

document.querySelectorAll('.item');返回所有满足该条件的元素 一个元素类型是dom类

型的数组

jQuery:

$(" ")通过和css雷同的选择器方式来获取元素。得到的是jquery对象(dom元素的数组,外加其他一些成员)

。即使写的是id,唯一的,得到的对象都不是单一的。

本质上jquery方式和qs方式都是获取DOM数组, 只不过jquery会多一些其他成员,

DOM数组的每一个成员注册事件不能像jquery一样直接注册, 必须分别给每个元素注册

3、DOM对象和jquery对象的相互转换

jQuery对象转换成DOM对象:

方式一:$(“#btn”)[0]

方式二:$(“#btn”).get(0)得到dom对象。

eq(0)得到jquery对象

DOM对象转换成jQuery对象:

$(document) -> 把DOM对象转成了jQuery对象

var btn = document.getElementById(“btn”);

btn -> $(btn);$(this)

Jquery得到的元素类型都是对象,内容是伪数组,无论是不是唯一的元素。

4、事件处理程序不同

[HTML] 纯文本查看 复制代码

?

js:

document.getElementById(“id”).onclick = function(){// 语句}

document.getElementById(“id”).addEventListener("click",function(){})

onclick,onfoucs,onblur,fouce(自动获得),select(自动选择文本域内容),onmouseover,onmouseout,

oninput/onpropertychange用户输入事件,onchange(下拉菜单select内容发生改变时发生事件,如果内容为几,那么做出什么反应)

jquery

$(“#id”).click(function(){ // 语句 });

5、设置类

js:document.getElementById(“btn”).className = "wrong1 wrong2"

可以同时设置多个类名。

classList属性(是数组),方法add removecontainstoggle

jquery:

6、设置value

7、设置内容,html和text

js:document.getElementById(“btn”).innerHTML = "内容不能为空"

可以是文本,可以是<p>内容不能为空</p>。

jquery:

8、属性

js:object.getAttribute(attribute)获取元素属性

object.setAttrbute(attribute,value)设置元素属性

9、节点操作

js:childNodes属性element.childNodes所有子元素,包括元素节点,文本节点,属性节点,甚至包括空格等,所以这个不怎么用。

nodeType属性node.nodeType返回结果是数字。1代表元素节点,2属性节点,3文本节点,

以上这两个属性都不建议使用,建议直接使用children。

10、对数组的增删改查

js:

增:push()最后追加返回新的长度。

unshift ()开头添加,返回新的长度。即操作后如果输出,结果是长度,不是新数组。

删:pop()删除最后一个,并返回删掉的值,此方法无参数。

shift()删除第一个元素,并返回删掉的值,无参数。

连接数组:concat()连接两个或多个。它不会改变现有的数组,而仅仅会返回被连接数组的一个副本

aa.concat(bb); 结果: [1,3,5,“a”,”b”,”c”];

转换:join() 数组转字符串arrayObject.join([separator]) ,返回新字符串,原数组不会有任何变化。

split() 字符串转数组返回新数组,原字符串没有变化

stringObject.split(separator,howmany) 两个参数均是可选的,默认是逗号分隔,第二个指定数组最大长度。

更多技术资讯可关注:gzitcast
我来评几句
登录后评论

已发表评论数()

相关站点

热门文章