jquery学习笔记

最新推荐文章于 2025-03-18 18:22:50 发布

Tankpt

最新推荐文章于 2025-03-18 18:22:50 发布

阅读量886

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： jQuery

本文链接：https://blog.youkuaiyun.com/Tankpt/article/details/14125887

jquery 专栏收录该内容

6 篇文章

订阅专栏

之前在项目的空闲时间去jquery的官网学习了下基本的东西，现在顺便来记录以下，一点点的东西，之前编辑了好多次。这回终于可以发布了，泪崩

部分是自己写的，还有一些是从基本经典的书籍中摘录的

3.1关于jquery 对象和Dom对象的一些区别

（1）Dom元素代表着html中的元素，这些元素有着类似js对象的

（2）jquery对象优点：a．兼容性 b.便捷性。jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，其可以使用jQuery里的方法，但是不能使用DOM的方法；例如$("#img").attr("src","test.jpg");这里的$("#img")就是jQuery对象； DOM对象就是Javascript固有的一些对象操作。DOM对象能使用Javascript固有的方法，但是不能使用jQuery里的方法。例如：document.getElementById("img").src="test.jpg";这里的document.getElementById("img")就是DOM对象；

（3）两者的转化

a．DOM对象转成jQuery对象: 对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象) 如varv=document.getElementById("v"); //DOM对象 var $v=$(v); //jQuery对象转换后，就可以任意使用jQuery的方法了。

b. jQuery对象转成DOM对象: 两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index); (1)jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象，如：var $v =$("#v") ; //jQuery对象var v=$v[0];//DOM对象 alert(v.checked)//检测这个checkbox是否被选中;(2)jQuery本身提供，通过.get(index)方法，得到相应的DOM对象 ,如：var $v=$("#v"); //jQuery对象 var v=$v.get(0);//DOM对象 ,alert(v.checked)//检测这个checkbox是否被选中 ,通过以上方法，可以任意的相互转换jQuery对象和DOM对象。需要再强调注意的是：DOM对象才能使用DOM中的方法，jQuery对象是不可以用DOM中的方法。

（4）并不是所有的jquery对象都是一致的，即每个包装集对象都是独一无二的，比如如下例子

	var logo1 = $( "#logo" );
	var logo1Elem = logo1.get( 0 );
	var logo2 = $( "#logo" );
	var logo2Elem = logo2.get( 0 );
	alert( $( "#logo" ) === $( "#logo" ) ); // alerts "false"
	alert( logo1Elem === logo2Elem ); // alerts "true"其中的错误信息

其中的错误信息 event.target.closest is nota function"' and "TypeError: Object [object Object] has nomethod'setAttribute'" 正是由这个问题引起的

（5）jquery对象不具有live的状态，它不会随着文档进行动态的调整\

3.2Event

对于事件的监听，之前一直是使用类似$(“button”).click(function(){**})的方法，但是在实际的项目中有次遇到了在一个效果绑定到一个表格中的表项中去比如点击表格中按钮对表格数据进行修改等操作，同时该表格又需要有动态添加表项的能力。

但是在实际的使用中，出现的实际情况是一开始页面加载完毕时的那些表项具有这些效果，而在后续中动态添加进去的那些表项不具有之前所说的效果，在网上搜索之后的结果才得知，绑定的事件是在一个页面加载完毕时绑定的（具体的比如在$(“document”).ready(function(){***})绑定），故在后续动态添加的行中不具有绑定的效果，在没有看一些资料之前，选了一种比较不好但是还是能实现该功能的方法，就是在动态添加到表格中的数据的后面也加上这段jquery的效果。

后来网上查找了资料后，发现了有一个live的函数可以实现动态的绑定，但是按照网上说的方法去实现的时候用浏览器去调试发现有错误，查看之后才知道，live函数在jquery的某个版本里已经停用了，现在最新的是on（），他同时实现了之前的类似bind，live等的功能，官方的建议是直接使用on去替代之前的函数，on的更为效率也更为简单，具体见如下的例子：

（1）on只能创建在元素上的监听仅当你将该元素已经创建下，相似的元素在建立该事件监听之后建立讲不会采用之前设置的时间处理行为

（2）对于如下的一段html代码

若只是普通的读取链接a中的内容以下可以实现

但若是在文中又添加了一些新的li

则新的这个内容中没有事件处理函数，这个问题就是之前所遇到的并没有动态的添加进去，排除之前那个投机的方法，用这个则可以处理

这第二个参数告诉监听器去监听指定的时间，当他听到的时候，检查是否触发相应事件的元素匹配改事件，如上面的例子一样，他将标签a绑定在了list上，这样会去监听这个满足条件的标签a。

3.3关于事件

在页面上发生一个事件的时候，每个层次上的DOM元素都有机会处理这个事件，允许多个元素响应单击事件的策略叫做事件捕获，在事件捕获的过程中，事件会首先交给最外层的元素，接着再交给里面更具体的元素。而另外一种相反的策略是事件冒泡，即在事件发生的过程中会首先发给最具体的元素，在这个元素获得相应的机会之后，事件会向上冒泡到更加一般的元素。关于这俩者不同的事件处理机制，是分别由Netscape和微软提出的两种相反的事件传播模型。

在最后出台的DOM标准中规定了可以使用这两种机制。

（1）关于事件冒泡的副作用，在实际的项目实践中也遇到了这样的情况，比如说在页面中为个顶部的div添加一个具有mouseover和mouseout效果，当鼠标推出这个div的时候。确实会触发之前设定的事件效果，但是如果当你在div内部的一个链接上移过去的时候，他会把这一事件传递冒泡到上面的div中，同时也会触发这一事件效果，这并不是咱们所期望遇到的。

（2）阻止事件的冒泡，有时候我们可以利用好冒泡的性质来完成很多事，但是有些时候咱们得想办法去避开他，jquery中可以利用event.stopPropagation()来阻止事件的发生；

（3）默认操作，有时候我们会把单击事件处理程序链接到一个a去，但是当用户单击后，a元素的默认操作是让浏览器加载一个新的页面，这个就是锚元素a的默认操纵，类似的还有按钮标签<button>也有类似的效果，为了阻止这些事件的默认操作行为，jquery中还提供了一个event.preventDefault()的方法。

（4）自定义事件，它提供了一种全新的方法来考虑事件驱动js，与以往的集中在一个元素上触发一个动作不同，自定义事件将注意力集中在被操作元素本身，它有以下几个优点：a.利用自定义事件可以用一样的代码来触发不同标签元素上的行为，b.可以同时触发多个类似的标签行为，c.动作跟标签有更清晰的联系在代码中，使得更有易读性和良好的可维护性。特别是如果你习惯与面向对象的编程方法，你将会发现考虑会自定义事件作为对象的方法会有很有用。

而且在有些时候，你会发现你想添加的东西是不在用户点击页面上的某个按钮来触发的，这个时候利用自定义事件的处理方法就能很好的解决这一问题。