`

JQuery基础教程学习第三章笔记

阅读更多

1、$(document).ready()的书写形式
(1)$(document).ready(function(){
    //这个写代码
   });
(2)$().ready(function(){
 //这里写代码
 });
(3) $(function(){
 //这里写代码
 });
2、bind()方法为每个页面元素制定javaScript事件
$(document).ready(function(){
 $('#switch-lagre').bind('click',function(){
  $('body').addClass('large');
 });
});
3、$(this)表示由选中项生成的jQuery对象。
4、去除bind()方法,简化为具体的形式

以单击事件为例:
$('#switch-lagre').click(function(){
 $('body').addClass('large');
});
5、复合事件处理:截取用户的符合操作,并且以多个函数作为响应操作。
(1)toggle()方法接受2个参数,当第一次触发时调用第一个,而再次触发会调用第二个
$(document).ready(function(){
 $('#switcher h3').toggle(function(){
  $('#switcher .button').addClass('hidden');
 },function(){
  $('#switcher .button').removeClass('hidden');
 });
});
该功能的简写
$(document).ready(functiion(){
 $('#switcher .button').toggleClass('hidden');
})
(2)hover()函数,实现停留和离开时的效果
$(document).ready(function(){
 $('#switcher .button').hover(function(){
  $('#switcher .bitton').addClass('hightLight');
  },function(){
  $('#switcher .bitton').removeClass('hightLight');
  })
});
6、事件捕获:允许多个元素响应单击事件的策略叫做事件捕获。事件捕获先交给最外层的元素,

然后再交给里面的元素。为了防止事件捕获和事件冒泡,引入了事件对象的概念。
(1)、采用事件目标的方式阻止事件冒泡的发生
 $(document).ready(function(){
 $('#switcher').click(funtion(event){
  if(event.target==this){
   $('#switcher .button').toggleClass('hidden');
  }
 });
});
(2)禁止事件的传播,在处理完的事件最后面添加如下的代码:
event.stopPropagation();
(3)终止默认操作事件:例如在用户按回车键时会触发submit事件,为了阻止这样事件的发生,

我们采用如下的方法:此时采用。preventDefault()进行处理。
7、移除事件处理程序
$(document).ready(function(){
 var toggleStyleSwither=function(){
  $('#switcher .button').toggleClass('hidden');
 };)
 $('#switcher').click(toggleStyleSwither);
});
$('#siwither .button').unbind('click' toggleStyleSwitcher);
注意:unbind第一个参数是驱动类型,而第二个参数是移除的函数名。
8、模拟用户的触发事件,在初始化的时候可以预先执行某个方法,此时就是触发事件
在程序中可以触发事件的,例如给一个元素指定单击事件
  设置单击事件:
$("#testDiv").click(function(event) { alert("test div clicked ! "); });
  等效于:
$("#testDiv").bind("click", function(event) { alert("test div clicked ! "); 

});
  触发单击事件:
$("#testDiv").click();单击事件不带参数时,就是触发事件,它等同于如下的操作:
  等效于
$("#testDiv").trigger("click");

分享到:
评论

相关推荐

    jquery 学习笔记源码 1-3章

    总结来说,《jQuery学习笔记源码1-3章》提供了从基础到实践的全面教程,通过学习和实践这些源码,你将能够熟练掌握jQuery的基本操作,如选择元素、处理事件和创建动画,为后续的Web开发工作打下坚实基础。...

    jquery学习笔记.rar

    这一部分的学习将为你构建坚实的jQuery基础。 接着,"jQ学习第二季(1).rar"与"jQ学习第二季(2).rar"、"jQ学习第二季(3).rar"可能深入讲解jQuery的事件处理和动画效果。事件处理是jQuery中的关键特性,你可以学习到...

    jQuery基础教程笔记适合js新手第1/2页

    这些是jQuery基础教程中的一些关键点,对于JS新手来说,理解和掌握这些概念将有助于更好地利用jQuery进行网页开发。通过实践和不断学习,你可以更熟练地运用jQuery来提升网页交互性和用户体验。

    JQuery教程-从零开始学习jQuery

    该教程不仅仅是一份学习笔记,而是希望能够系统地、深入浅出地教授JQuery的知识,并且尽量做到全面。大部分知识点来自图灵出版社出版的《JQuery实战》一书,这本书被推荐给读者作为深入学习的参考。 ##### 什么是...

    千峰python课件笔记+源码 (凯哥)

    千锋python基础教程:3、字符串与循环中的while '千锋python基础教程:4、布尔&list;与条件循环语句与trutle' '千锋python基础教程:5、元组&字符串&字典' 千锋python基础教程:6、函数基础 '千锋python基础教程:...

    李炎恢66讲视频教程 jquery PDF文件完整版全集资源

    第1章至第3章主要介绍了jQuery的基础知识,包括jQuery的引入、选择器的使用以及基本的DOM操作。这部分内容是学习jQuery的基石,帮助初学者快速入门,理解如何通过jQuery选取和操作HTML元素。 第4章至第7章重点讲解...

    杨中科.Net培训实况教学视频学习笔记+视频地址1-13季

    在杨中科的课程中,学员将从基础开始学习C#,如创建第一个控制台程序、理解变量、数据类型和基本运算。 3. **开发工具Visual Studio**: 作为.NET开发的主要IDE,Visual Studio提供了强大的代码编辑、调试、版本控制...

    jquery动画笔记

    本篇主要针对jQuery的动画功能进行深入探讨,结合“笨人的学习笔记”中的视频教程,我们将一起学习如何运用jQuery实现各种动画效果。 一、jQuery动画基础 jQuery的动画功能主要通过几个核心函数实现,包括`fadeIn...

    jQuery上学时候的笔记(私人珍藏,全是精华)

    不过,核心概念和大部分的API设计是一致的,所以即使版本更新,这些基础知识依然是学习和应用jQuery的重要参考。 通过上述内容的介绍,我们可以了解到jQuery提供的核心功能和操作方法。对于前端开发人员来说,掌握...

    李炎恢JavaScript-pdf文档笔记

    《李炎恢JavaScript-pdf文档笔记》是一份详细记录了JavaScript编程语言基础知识至高级应用的教程,涵盖了从第一章到第三十四章的丰富内容。这个压缩包包含了一份PDF文档,旨在帮助学习者深入理解并掌握JavaScript的...

    复习资料jquery

    总的来说,这个压缩包提供了一个全面复习jQuery的框架,包括官方API参考、基础教程、可能的面试准备和实际应用示例。通过深入研究这些材料,开发者可以提升其jQuery技能,理解如何更有效地利用这个强大的库来创建...

    15天学会jquery_完整版_

    **第1天:jQuery基础知识** - **jQuery选择器**:学习如何使用ID选择器、类选择器、元素选择器等,以及更复杂的组合选择器和伪类选择器。 - **DOM操作**:了解如何使用jQuery选取元素、添加或删除元素,并进行属性...

    jQuery适应手机mobile左右全屏幻灯片切换插件.zip

    4. **jQuery插件**:这是一个为jQuery框架开发的第三方组件,扩展了其原有功能。 5. **jQuery实例**:表示这个插件是一个实际的应用示例,可以直接在项目中使用或学习参考。 根据压缩包内的文件名称,我们可以推测...

    jQuery单选按钮和复选按钮美化效果.zip

    1. **jQuery基础**:jQuery库通过选择器、事件处理、动画和AJAX等特性,简化了DOM操作。在这个项目中,jQuery被用来改变HTML元素的样式和行为,尤其是单选按钮和复选按钮。 2. **选择器**:jQuery的选择器允许...

    Javaweb(3)学习资料

    "Javaweb(3)"可能表示这是关于JavaWeb学习的第三个部分,或者是一个系列教程的第三章,重点在于进阶知识。标题和描述虽然简洁,但暗示了我们将深入学习JavaWeb的高级概念,可能是建立在对基础如Servlet、JSP的理解之...

    tj12401101前端开发笔记

    【标题】"tj12401101前端开发笔记" 提示我们这是一个关于前端开发的学习资源,可能是某位开发者的学习记录或者教程集合。前端开发是构建互联网应用程序的重要部分,涉及到用户与网站交互的所有视觉元素。在这个笔记...

    千锋教育Python入门教程.pdf

    2. **Python 3.x进阶与第三方库**:进阶内容可能涉及异常处理、面向对象编程、文件操作以及如何使用Python的众多第三方库,如Numpy用于科学计算,Pandas用于数据分析,Matplotlib用于数据可视化等。 3. **PyQt开发*...

    java优秀教程大集合

    "ext教程.rar"可能涉及Java的扩展库或框架的学习,如JQuery、EXTJS或其他第三方库。这些库通常能够提升开发效率,为Java应用添加丰富的功能和界面元素。 "java技术从入门到精通(孙鑫)学习笔记.rar"是基于知名Java...

    Javascript入门学习资料收集整理篇

    Javascript入门学习第一篇 js基础Javascript入门学习第二篇 js类型...js dom实例操作Javascript入门学习第八篇 js dom节点属性说明Javascript入门学习第九篇 Javascript DOM 总结jQuery基础教程笔记适合js新手

    Angular4学习笔记之新建项目的方法

    在Angular4的学习过程中,新建项目是开发者的第一步。本文将详细介绍如何从零开始创建一个Angular4项目,并在项目中引入jQuery和Bootstrap库。首先,确保你已经安装了Node.js,这是开发Angular应用的基础。 安装...

Global site tag (gtag.js) - Google Analytics