JQuery 之从 $（核心函数）加载事件入门

最新推荐文章于 2022-10-22 18:30:50 发布

NoBugNoCode

最新推荐文章于 2022-10-22 18:30:50 发布

阅读量1.4k

点赞数

分类专栏： JQuery 文章标签： JQuery

本文链接：https://blog.csdn.net/lxf512666/article/details/52901879

版权

JQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JQuery 代码少而多实现的JS类库就是这么6

一、关于JQuery

（一）、什么是JQuery ?

《1》jQuery，顾名思义，也就是JavaScript和查询（Query），它就是辅助JavaScript开发的js类库。

1、使用jquery一定要引入jquery库吗？

要使用JQury首先必须导入jquery类库

2、jquery中的$到底是什么？

$是JQuery类库的核心函数 $()即调用这个核心函数

3、怎么为按钮添加点击响应函数的？   

1）查询元素，2）绑定事件

《2》JQuery好处！！！

jQuery是免费、开源的，jQuery的语法设计可以使开发更加便捷

例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能

（二）JQuery使用步骤：

1）第一步，先使用script标签引入Jquery源文件。

//js放在 WebContent/script/jquery-1.7.2.js
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>

2）第二步，在文档加载完成之后，给按钮动态绑定事件。

二、用JQuery和js的页面加载完成事件来分析入门JQuery

<1>、JQuery 实现与JavaScript 比较它有什么强大的地方？

<1>简单的页面加载完成函数体会JQuery 与js

example：使用JQuery与js进行页面加载事件（onload）的比较

$(function(){});     //JQuery实现
和

window.onload = function(){}   //js实现
的区别？

<2>它们的三个区别如下

他们分别是在什么时候触发？

Jquery的页面加载完成之后。是指在整个html页面的标签被解析然后创建好dom对象之后。
也就是大多数人常用说的。整个dom树被创建好之后。

window.onload的页面加载完成之后。是指整个html页面中所有的元素都被加载完成。

他们触发的顺序？

先执行jquery的页面加载完成
再执行window.onload的方法

他们执行的次数？

window.onload只会执行最后一次的绑定。

Jquery的页面加载完成之后。会根据注册的顺序依次全部执行。

代码测试：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"></script>
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">

// 他们分别是在什么时候触发？

//一、window.onload是在页面中所有元素加载完成之后

window.onload = function() {
    alert("这是window.onload事件1号");
}

window.onload = function() {
    alert("这是window.onload事件2号");
}

window.onload = function() {
    alert("这是window.onload事件3号");
}

// 这个window.onload事件只会执行一次执行3号事件。


// 二、   $(function(){
//      alert("jquery页面加载完成之后！");
//  });
// 在整个页面被浏览器加载解析完成。整个Dom树创建完成之后

$(document).ready(function(){
    alert("jquery页面加载完成之后！11111");
});
$(document).ready(function(){
    alert("jquery页面加载完成之后！22222");
});
$(document).ready(function(){
    alert("jquery页面加载完成之后！33333");
});
$(document).ready(function(){
    alert("jquery页面加载完成之后！444444");
});

// Jquery的页面加载完成之后。每注册一次。jquery都会缓冲一个function到集合中。当页面加载完成之后。它会
// 按照这个事件注册的顺序依次执行。

// 先执行jquery的页面加载完成之后，再执行window.onload的加载完成

</script>
</head>
<body>
<button>我是按钮</button>

<iframe src="http://www.baidu.com"></iframe>
<img src="http://www.baidu.com/1.jpg" alt="图片找不到" />

</body>
</html>

分析如下：

上述为js和JQuery的比较和JQueryd $ 核心函数使用

依次弹出为：

jquery页面加载完成之后！11111
jquery页面加载完成之后！22222
jquery页面加载完成之后！33333
jquery页面加载完成之后！44444
这是window.onload事件3号

其中js实现的window.onload = function(){}事件1被事件2覆盖，事件2被事件3覆盖最后执行事件3

而JQuery实现的$(document).ready(function(){}每次都执行

三、Jquery 核心函数 $()

<1> $是jquery的核心函数，能完成jquery的很多功能。$ ()就是调用$这个函数

<2>

1、传入参数为 [ 函数 ] 时：$( function(){} )

文档加载完成后执行此方法等价于window.onload = function() {}

2、传入参数为 [ HTML 字符串 ] 时： $(“12“);

根据字符串创建元素的dom节点对象 <span>

3、传入参数为 [ 选择器字符串 ] 时：$(“#id”)

根据选择器查找出元素节点对象

4、传入参数为 [ DOM对象 ] 时： $(this)

将dom对象包装为jquery对象返回

四、JQuery对象和dom对象比较分析

1、什么是jquery对象，什么是dom对象

（一）Dom对象：
1.通过getElementById()查询出来的标签对象是Dom对象
2.通过getElementsByName()查询出来的标签对象是Dom对象
3.通过getElementsByTagName()查询出来的标签对象是Dom对象
4.通过createElement() 方法创建的对象，是Dom对象

（二）JQuery对象
5.通过JQuery提供的API创建的对象，是JQuery对象
$(“ <span>12</span> ”)

6.通过JQuery核心函数包装的Dom对象，也是JQuery对象
var dom对象；
var $jquery对象 =  $(dom对象)

7.通过JQuery提供的API查询到的对象，是JQuery对象
$(“#id属性值”)
$(“标签名”)

两者特征：
JQuery对象：其实就是 （Dom对象数组和一系列JQuery方法）

Dom对象，不能调用JQuery对象的方法和属性。
JQuery对象、也不能调用Dom对象的属性和方法。

2、dom与jquery对象之间的转换

    1.将dom对象转为JQuery对象
    var $Jquery对象 = $(dom对象);

    2、jquery对象转为dom对象
    var dom对象 = $Jquery[0];

NoBugNoCode

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JQuery 之从 $（核心函数）加载事件入门

JQuery 代码少而多实现的JS类库就是这么6一、关于JQuery（一）、什么是JQuery ?《1》jQuery，顾名思义，也就是JavaScript和查询（Query），它就是辅助JavaScript开发的js类库。1、使用jquery一定要引入jquery库吗？要使用JQury首先必须导入jquery类库2、jquery中的$到底是什么？$是JQuery类库的核心函数 $()即调用这个核
复制链接

扫一扫