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

来源：互联网发布：索尼降噪豆软件更新编辑：程序博客网时间：2024/05/16 08:34

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页面加载完成之后！11111jquery页面加载完成之后！22222jquery页面加载完成之后！33333jquery页面加载完成之后！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];

0 0