什么是JQuery呢,很多都是只闻其名。

jQuery是一个快速、简洁的JavaScript框架,是一个优秀的JavaScript代码库。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

要用JQuery,首先要有一定的JS基础,否则根本看不懂这是个嘛玩意。有了JS基础后,就会发现,哇,JS好复杂,JQuery好简单粗暴

下面就让我们来看一下如何来用JQuery

【Jquery语法】

         1.通过jQuery("选择器").action();通过选择器调用事件函数。

             但JQuery中jQuery可以用$符代替,$("选择器").action();

             ①选择器可以直接使用CSS选择器,选中元素

             ②action表示对元素执行的操作

ps:各种选择器的用法可以自己去查帮助文档

         2.文档就绪函数:防止了文档在完全加载(就绪)之前运行JQuery代码

             $(document).ready(function(){

      
             JQuery代码

      
         });

          
 $(function(){})//这是文档就绪函数简写方式PS

看到文档就绪函数,不免就会想到JS中的window.onload。这里我们来说一下它们俩的区别

①.window.onload需在网页所有内容加载完成后执行,包括图片音频等。 而文档就绪函数只需要在网页DOM结构加载以后便可执行。

②.window.onload只能写一个,写多个只会执行最后一个。 文档就绪函数,可以写多个,也不会被覆盖。

当然,原生DOM对可以与JQuery对象可以相互转化

①原生DOM对象转JQuery对象: $(DOM对象);

            var
p=document.getElementById("p");

            $(P);//转为JQuery对象

②JQuery对象转DOM对象

         $("p").get[0]   或者  $("p")[0]

         例子:$("p").get(0).style.color="red";

当然我们一般也不会这么干,容易弄混了。

JQuery中的事件绑定

时间绑定的快捷方式

$("button:first").click(function(){

})

 使用on进行事件绑定

使用on进行单事件绑定

$("button").on("click",function(){

  //this取到当前调用函数的对象

  console.log($(this).html());

})

使用on同时为多个事件绑定同一函数

$("button").on("mouseover
click",function(){

  console.log($(this).html());

})

调用函数时传入自定义参数

$("button").on("click",{name:"lyx"},function(event){

  //使用event.data.属性名 找到传入的参数

  console.log(event.data.name);

})

使用on进行多函数多事件绑定

$("button").on({

  click:function(){

  console.log("click")

  },

  mouseover:function(){

  console.log("mouseover")

}

})

使用on进行事件委派

>>将原本应该绑定到某元素上的事件还为绑定在父元素乃至根节点上,然后委派给当前元素生效

eg:$("p").click(function({}));

$(document).on("click","p",function(){});

>>默认的绑定方式只能帮顶到页面初始时已有的p元素,当前页面新增p元素时。无法绑定到新元素上;

使用事件委派方式,当页面新增元素时,可以为所有新元素绑定事件

$("button").on("click",function(){

  var
p=$("<p>44444</p>");

  $("p").after(p);

})

$(document).on("click","p",function(){

  alert("1");

})

这段程序中新增的P都会有alert("1") 事件

off取消事件绑定

1.$("p").off(); 取消所有事件

2.$().off("click"); 取消点击事件

3.$("p").off("click mouseover")取消多个事件

4.$(document).off("click","p")取消事件委派

用.one绑定事件,只能执行一次

$("button").one("click",function(){

  alert("1");

})

.trigger("event")自动触发某元素的事件

$("p").click(function(event,arg1,arg2){

  alert("触发了p的click事件"+arg1+arg2);

})

$("button").click(function(){

  $("p").trigger("click",["haha00","hehe"]);

})

JQuery中常见的动画效果



.show

①.不传参:让隐藏的元素直接显示,不进行动画

②传入时间:多少毫秒之间之内完成动画

③传入(时间,函数):完成动画之后,执行回掉函数

.show()动画执行效果:同时修改元素的宽度,高度,opacity属性

.hide()让显示元素隐藏,与show()相反

.slideDown()让隐藏元素显示,效果为从上往下增加高度

.slideUp()让显示元素隐藏,效果,从下往上减小高度

.slideToggle()让现实的隐藏,让隐藏的显示

.fadeOut():让显示元素隐藏,淡出

.fadein();让隐藏元素显示,淡入

.fadeToggle();让现实的隐藏,让隐藏的显示,淡入淡出

.fadeTo(时间,透明度,函数);同.fadeToggle(),但多了透明度参数,可以指定显示的最终透明度

.animate({最终样式属性键值对},动画时间,动画效果"linear"
"swing",回掉函数)   自定义动画

p{

              
 width: 0px;

              
 height: 100px;

              
 background-color: green;

              
 overflow:"hidden";

              
 /*display: none;*/

            }

            $("p").animate({

  
           
 width:"100px",

  
           
 opacity:"0.5"

  
             

  
       
 },3000,"linear",function(){

  
           
 alert("hello")

  
         })

这段JQ代码的效果是使p的宽度在3秒内从0渐变为100px,透明度由1渐变为0.5,

动画效果完成后执行函数,alert("hello")

JQuery这种框架,最需要的是还是学会自己去查帮助文档,了解各种详细的用法这里推荐W3Cschool,有在线版,离线版,手机版,是不是很方便~

JQuery速成大法的更多相关文章

  1. jQuery学习1

    学习jQuery的过程中发现了一个博客把jquery的要点整理的很不错,摘抄其精华以备学习.感谢:http://blog.csdn.net/wph_1129/article/details/59932 ...

  2. JQuery 1.*速成版之二

    过滤选择器简称:过滤器.它其实也是一种选择器,而这种选择器类似与 CSS3(http://t.mb5u.com/css3/)里的伪类,可以让不支持 CSS3 的低版本浏览器也能支持.和常规选择器一样, ...

  3. jQuery动画速成

    引入下面css中样式,然后在需要使用的元素中类上添加相应的效果就可以了 例如 animated固定要添加的类,不然会没有效果,bounceIn是你想要的动画效果,fight是你自己定义的类名,可以写样 ...

  4. 从零开始,DIY一个jQuery(1)

    从本篇开始会陪大家一起从零开始走一遍 jQuery 的奇妙旅途,在整个系列的实践中,我们会把 jQuery 的主要功能模块都了解和实现一遍. 这会是一段很长的历程,但也会很有意思 —— 作为前端领域的 ...

  5. 读jQuery源码 - Callbacks

    代码的本质突出顺序.有序这一概念,尤其在javascript——毕竟javascript是单线程引擎. javascript拥有函数式编程的特性,而又因为javascript单线程引擎,我们的函数总是 ...

  6. 饭团(1):用NABCD大法为项目奠基

    上一篇文章:提升效率的开发工具 提到高效的开发工具就像催化剂,加速项目开发.这篇文章提到的NABCD大法,就像一份地图,指引项目往正确的方法上发展. 选择比努力更重要.一个项目成功自然离不开码农们的努 ...

  7. jQuery分别获取选中的复选框值

    function jqchk(){  //jquery获取复选框值   var s='';   $('input[name="aihao"]:checked').each(func ...

  8. JQuery EasyUI之DataGrid列名和数据列分别设置不同对齐方式(转)

    需求如下 现有数据列三列 Name,Age,CreateDate 数据 张三,18,2000-12-09 :12:34:56 李四,28,2000-12-09 :12:34:56 王麻子,38,200 ...

  9. [jQuery] 自做 jQuery Plugin - Part 1

    有時候寫 jQuery 時,常會發現一些簡單的效果可以重複利用.只是每次用 Copy & Paste 大法似乎不是件好事,有沒有什麼方法可以讓我們把這些效果用到其他地方呢? 沒錯,就是用 jQ ...

随机推荐

  1. css中设置div垂直水平居中的方法

    设置要水平垂直居中的div的position为absolute,left:50%;margin-left为负的这个元素宽度的一半,同理,top:50%;margin-top为负的这个元素的高度的一半. ...

  2. c#调用aapt查看apk文件信息功能实现

    第一篇随笔就此开始. 1. 起源 思路源自于项目开发过程中.需要确认apk文件版本以验证其功能差异以便于定位问题,于是度娘,得到APK信息查看器(APK-info)这个工具,其版本号为0.2.它能显示 ...

  3. NOI全国赛(2001)--食物链

    今天写了道并查集的题,看来并查集的题刷少了,,,,,用法好神奇啊!!!开三倍并查集 用i表示自己,i+n存天敌,i+2*n存可以克制de,再逻辑判断一下即可. 所以,要意识到并查集的分类处理可以开不同 ...

  4. SQL Server跨数据库 增删查改

    比如你在库A ,想查询库B的表.可以用 数据库名.架构名.表名的方式查询 select * from 数据库B.dbo.表1 也可以在存储过程中这样使用. 需要注意的是,如果使用这样的查询方式,你必须 ...

  5. iOS开发之Info.plist文件

    建立一个工程后,会在Supporting files文件夹下看到一个“工程名-Info.plist”的文件,该文件对工程做一些运行期的配置,非常重要,不能删除 在旧版本Xcode创建的工程中,这个配置 ...

  6. c++学习笔记之封装篇(上)

    title: c++学习笔记之封装篇(上) date: 2017-03-12 18:59:01 tags: [c++,c,封装,类] categories: [学习,程序员,c/c++] --- 一. ...

  7. httpclient源码分析之MainClientExec

    MainClientExec是HTTP请求处理链中最后一个请求执行环节,负责与另一终端的请求/响应交互,也是很重要的类. 源码版本是4.5.2,主要看execute方法,并在里面添加注释.接着详细说下 ...

  8. cephfs创建及挂载

    Ceph 文件系统( Ceph FS )是个 POSIX 兼容的文件系统,它使用 Ceph 存储集群来存储数据.Ceph 文件系统要求 Ceph 存储集群内至少有一个 Ceph 元数据服务器. 1.添 ...

  9. Python之路-Linux命令基础(1)

    开启Linux操作系统,要求以root用户登录GNOME图形界面,语言支持选择为汉语               使用快捷键切换到虚拟终端2,使用普通用户身份登录,查看系统提示符,使用命令退出虚拟终端 ...

  10. Android Studio 安装后首次启动的 Config path ...... is invalid 问题(转)

    原文链接:http://m.blog.csdn.net/blog/hnust_xiehonghao/46127775 1. 问题描述: 安装好Android Studio后,启动时弹出如下信息: Co ...