好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

前端-js与jq操作dom

一、什么是jquery?

定义:jQuery是通过js封装起来的一个库,它的哲理就是write less,do more

1、解决了window.onload事件的事件覆盖问题,可多次导入入口函数

2、提高了代码的容错性

3、浏览器兼容性问题

4、原生js书写繁琐,代码冗余,jq更加的简洁

5、代码杂乱,各个也main到处都是,可读性差

6、动画效果很难实现

jquery是一个文件,用的时候通过引用到我们的页面就可以使用其封装好的各种方法:

 jquery的相关学习资料

官网:http://jquery测试数据

官网API文档:http://api.jquery测试数据/

汉化API文档:http://HdhCmsTestcss88测试数据/jqapi-1.9/

jquery库下载地址参考

BootCDN:https://HdhCmsTestbootcdn.cn/jquery/ 

二、如何使用jquery?

应用jq步骤

1、下载jq文档到本地或获得网上cdn地址

2、引包:在调用jq前导入jq库 <script src='jquery.js'></script>

3、在script标签中写入逻辑,先导入入口函数,再遵循获取dom对象三步骤 3.1、jq入口函数简写版:$(function){操作dom};

 3.1.1、jq入口函数标准版:$(document).ready(function(){操作dom})

3.1.2、获取jq对象:$(选择器),返回的是jquery对象

3.1.3、绑定事件及事件驱动程序:$(选择器).事件名(function(){事件驱动程序) 

三、jq与js对象的转化

js对象与jq对象的转化

 js转jq:(js对象)即(this)

jq转js:(选择器)[index] 即(this)[0] 

注:jq对象内部会做遍历,那怕只有一个元素也遍历,且每次事件驱动完成后都会再次返回jq对象,这就实现链式编程

四、原生Js和jQuery入口函数加载模式不同

1、原生Js会等到DOM元素加载完毕,并且图片也加载完毕才会执行;

2、jQuery会等到DOM元素加载完毕,但不会等到图片加载完毕就会执行。

五、编写多个入口函数的区别

1、原生Js如果编写多个入口函数,后面编写的会覆盖前面编写的;

2、JQuery中编写多个入口函数,后面的不会覆盖前面的。

原生JS的入口函数只能写一个 写多个就层叠覆盖

window.onload= function () {

 alert(“我是原生第一个入口函数”); 

}  

window.onload= function () {

 alert(“我是原生第二个入口函数”); 

} 

六、jquery入口函数三种方式

jQ 的入口函数 多个不会覆盖:

$(document).ready(function () { // 文档加载出来以后执行

 alert(“入口函数1”); 

}); 

$(window).ready(function () { //文档和图片全部加载完 执行

 alert(“window加载完”); 

}) 

$(function () {

 //文档和图片都加载完成 相当于原生的 window.onload 

alert(“JQ的第一个入口”); 

}); 

查看更多关于前端-js与jq操作dom的详细内容...

  阅读:44次