JS与JQuery

53次阅读

共计 2400 个字符,预计需要花费 6 分钟才能阅读完成。

原生 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 remove contains toggle
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

正文完
 0