1、基础:

Jquery类库定义了一个全局函数:JQuery(); 别名$.是JQuery在全局命名空间中定义的唯一两个变量。返回一个新创建的JQuery对象;

另:JQuery中定义的许多方法返回值都是JQuery对象(方法的调用者);JQuery中函数:$.each() JQuery中方法:**.each()没有$符号;

JQuery方法的4种不同调用方式:

  • 参数是字符串表示的CSS选择器:$('.class')返回当前文档中匹配到的元素集。第二个参数是可选的,值为一个元素或JQuery对象;这时返回的是特定元素的子元素中匹配到的元素集;
  • 参数是Element、Document或Window对象,返回这些对象封装成的JQuery对象;
  • 参数是HTML文本字符串:(不能是纯文本,会被当做CSS字符串的)返回文本创建好的HTML元素并封装成的JQuery对象;此方式接受可选的第二个参数;1、可以用Document对象来指定与所创建元素相关联的文档。2、可以使用object对象,该对象的属性名是Jquery关键字时,可用于传入属性值;
  • 参数为一个函数:文档加载完毕时调用;相当于onLoad()函数;形如$(function(){})或JQuery(function(){});

JQuery遍历用的几个基础方法:

  • each(): 例$('div').each(function(index,this){});此方法唯一参数为一个回调函数,回调函数的有两个参数:索引值和this(指代当前元素Element,原生文档对象),this使用JQuery方法时需要封装一下$(this); 如果回调函数返回false时,遍历将中断;
  • map(); 例$(':checkbox').map(function(){return this.name}).toArray();   参数与以上方法基本相同,回调函数中的参数可以不写,且回调函数返回null或undefined时,此值将被忽略;map的返回值为新的包含回调函数所有返回值的JQuery对象;
  • index() : 参数为一个元素或字符串(当做CSS选择器使用),返回值为该元素在此JQuery对象中的索引值,找不到返回-1;
  • is() : 例:$(div).each(function(){if($(this).is(':hidden')) return;}); 参数是一个选择器,匹配到就返回true;

2、JQuery中的属性操作:

   JQuery使用同一个方法来获取和设置属性,区别是参数的不同,类似于重载;

  setter(设置)时返回的是JQuery对象;getter(获取)时返回单个值(元素);所以链式调用不能使用getter;

  setter接受对象参数:{key:value;k:v} 里面是属性名与属性值的k-v形式;

  • HTML属性:设置:$("id class ele...").attr('name','value'),获取:$('').attr('name'); 移除:$().removeAttr('name');
  • CSS属性:  设置:$().css(k,v) ; 获取:$().css(key);
  • CSS类:     设置:$("h1").addClass('classname1,name2'); 删除:$("h1").removeClass('name1,name2');               切换(如果存在就删除,不存在就添加):$('div').toggleClass('name1,name2'); 检测:$('div').hasClass('name');或 $('#di').is('name');只接受单个类名;
  • HTML表单: 设置:$("#inputname").val('text'); $('input:checkbox').val(["v1","v2"]); 获取:$("#ipname").val();
  • HTML元素: 设置:text():纯文本;html():HTML内容格式; x.html() === x[0].innerHTML;
  • 元素数据:   设置与获取与文档、元素、window对象相关联的数据 $('div').data("x",1); 获取$('div').data('x');

3、文档操作:

  

4、JQuery中的处理事件:

  1.事件简单注册:$("p").click(function(){$(this).css('''')});  //以click为例,其他如blur() change() dbclick() mousedown()等;

  2.事件高级注册:$("p").bind('click',function(){$(this).css('''')});   $("p").one('click',function(){$(this).css('''')});

     bind():一般有两个参数,第一个参数为事件名称,可为多个且用空格分开,第二个参数为处理函数;

         可以有三个参数,第一个参数和第三个参数为事件名与处理函数,第二个参数可为任何值,被设置为Event对象的data属性;

         其一特性是允许为注册事件处理程序指定多个命名空间,方便后续触发和卸载;$("p").bind("click.mymod.ym",f);

        另:第一个参数可为对象$('a').bind({mouseup:f,mousedown:g}); 如果有第二个参数,则为函数f与g的参数;

     one() : 原理与bind()一样,只是注册的事件触发一次后会自动注销;

  3.触发事件:手动触发 $("#form").sumbit() === $("#form").trigger("sumbit");

        $('p').trigger("click.my"); //触发特定命名空间下的处理程序;

        $('p').trigger("click!");   //触发没有命名空间的单击处理程序;

        $('p').trigger('click','true'/[]);  //第二个参数为触发的处理程序的参数,传入数组时为多个参数;

  4.注销事件:$('p').unbind('click');  $('p').unbind('.my'); 解绑命名空间my下的所有绑定事件

        //注销click事件,只会注销bind的事件;

  5.实时事件:便于给新创建的元素注册事件处理程序;绑定:$(document).delegate('a','mouseover',f);

        解绑:$(document).undelegate('a');

5、动画效果:

  1、简单Jquery动画:

    

  2、自定义动画:aniamte()方法,此方法接收两个参数:

    第一个指定动画内容,包括要变化的css属性和它们的目标值;

    第二个参数是可选的,指定如何定制动画;主要属性有 时长:duration,回调:complete ,每帧:step ,缓动:easing

    缓动函数名有:swing 正弦函数 linear:线性; $("img").animate({wiidth:100},{da...:100,easing:"swing"});

  3、动画的取消:stop():停止选中元素的当前正在执行的动画;  delay():延迟动画,参数为延迟时间;

    

JavaScript类库---JQuery(一)的更多相关文章

  1. JavaScript类库---JQuery(二)

    接上: 6.Ajax:  一个基础底层函数:jQuery.ajax();  //高级工具函数都会调用此函数:  一个高级工具方法:load() ;  四个高级工具函数:jQuery.getScript ...

  2. 编写Javascript类库(jQuery版) - 进阶者系列 - 学习者系列文章

    这些年主要关注于项目管理方面的工作,编码就比较少了.这几天比较空闲,就想把原来的经验沉淀下来,一个是做好记录,以后如果忘记了还能尽快找回来,第二个是写写博文,算是练练手笔吧. 言归正传,这次写的是Ja ...

  3. 编写Javascript类库(jQuery版

    编写Javascript类库(jQuery版) - 进阶者系列 - 学习者系列文章 Posted on 2014-11-13 09:29 lzhdim 阅读(653) 评论(1) 编辑 收藏 本系列文 ...

  4. 【javascript类库】zepto和jquery的md5加密插件

    [javascript类库]zepto和jquery的md5加密插件 相信很多人对jQuery并不陌生,这款封装良好的插件被很多开发者使用. zepto可以说是jQuery在移动端的替代产品,它比jQ ...

  5. javascript 框架、根基技巧、布局、CSS、控件 JavaScript 类库

    预筹备之 JavaScript 今朝支流的 JavaScript 框架排名中,jQuery 和 Ext 可算是佼佼者,得到了用户的普遍好评.海内的一些框架许多也是模仿 jQuery 对 JavaScr ...

  6. 支持Json进行操作的Javascript类库TAFFY DB

    前段时间工作中用到Json数据,希望将一些简单的增删改查放到客户端来做,这样也能减少服务器端的压力.分别查找了几个可以对Json进行操作的javascript 类库,最终选定了TAFFY DB.原因如 ...

  7. 曾经的超级明星类库jQuery未来也许不再会被前端程序猿追捧了!

    作为火了十多年的老牌明星类库jQuery, 相信做前端的小伙伴肯定都或多或少的使用和追捧过,当然我也不例外, 作为第一个学习的js类库,我曾经也觉得它是真正的唯一, 帮助你处理恶心的浏览器CSS/JS ...

  8. 12个非常不错的javascript类库

    Javascript是一个解释性的编程语言.最初作为浏览器的一部份在浏览器中运行,可以和用户交互,并且控制浏览器,异步通讯,修改显示的document.在这篇文章中,我们收集了12款最新的Javasc ...

  9. jQuery学习之路(7)- 用原生JavaScript实现jQuery的某些简单功能

    ▓▓▓▓▓▓ 大致介绍 学习了妙味,用原生的JavaScript实现jQuery中的某些部分功能 定义自己的函数库lQuery ▓▓▓▓▓▓ $()选择器的实现 jQuery是面向对象的,所以自己编写 ...

随机推荐

  1. MyEclipse 2016 CI 3发布

    JSjet 语法高亮 受够了Eclipse中的JavaScript编码体验?那就来试试MyEclipse 2016 CI 3.JSjet改进了JavaScript编码的语法高亮功能,大大提升了代码的可 ...

  2. Linux学习心得之 Linux下命令行Android开发环境的搭建

    作者:枫雪庭 出处:http://www.cnblogs.com/FengXueTing-px/ 欢迎转载 Linux学习心得之 Linux下命令行Android开发环境的搭建 1. 前言2. Jav ...

  3. shiro 实现单用户登录,一个用户同一时刻只能在一个地方登录

    我这里 shiro 并没有集成 springMVC,直接使用 ini 配置文件. shiro.ini [main] # Objects and their properties are defined ...

  4. windows下安装web服务器

    有条件下还是在linux下部署.window上真心问题挺多的. 推荐安装Visual-NMP,轻量级.组件升级方面等. Nginx绑定IPv4和IPv6的方法 listen 80; listen [: ...

  5. IOS 页面间跳转

    常用的就两种 一种通过导航,一种直接跳 第一种 直接跳转 思路大致就是new一个目的页面,然后设置下页面跳转动画 中间还可以做点目的页面的数据初始化: ValueInputView *valueVie ...

  6. Android自定义控件5--轮播图广告ViewPager基本实现

    本文地址:http://www.cnblogs.com/wuyudong/p/5918021.html,转载请注明源地址. 本文开始实现轮播图广告系列,这篇文章首先实现让图片滑动起来(ViewPage ...

  7. iOS程序破解——ARM汇编基础

    原文在此:http://www.cnblogs.com/mddblog/p/4951650.html 一.Thumb指令与ARM指令 Thumb指令为16位,因此存储代码的密度高,节省存储空间.但是功 ...

  8. 【转】Flex 布局语法教程

    网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...

  9. Linux FHS

    学习linux有必要了解FHS的知识,FHS英文全称是Filesystem Hierarchy Standard.中文翻译就是文件系统层次结构标准.关于这个详细的介绍参考官方的文档和鸟哥linux书. ...

  10. Jenkins部署到远程(Linux服务器)

    接着上次的说,上次只是实现了本地自动化部署,这种情况只是针对开发环境和部署环境在同一台机器时适用.不过,一般情况下,我们都会要把项目部署到远程Linux服务器上,所以这节的主要内容是: 1.部署开发环 ...