概述

JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库。它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery2.0及兴许版本号将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为站点提供AJAX交互。jQuery另一个比較大的优势是，它的文档说明非常全，并且各种应用也说得非常具体，同一时候还有很多成熟的插件可供选择。jQuery可以使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，仅仅须要定义id就可以。

jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得很多其它)。jQuery在2006年1月由美国人John Resig在纽约的barcamp公布。吸引了来自世界各地的众多JavaScript高手增加，由Dave Methvin率领团队进行开发。现在。jQuery已经成为最流行的javascript库。在世界前10000个訪问最多的站点中。有超过55%在使用jQuery。

jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计能够使开发人员更加便捷，比如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其它功能。

除此以外。jQuery提供API让开发人员编写插件。

其模块化的使用方式使开发人员能够非常轻松的开发出功能强大的静态或动态网页。

jQuery，顾名思议，也就是JavaScript和查询（Query）。即是辅助JavaScript开发的库。

选择器

层叠选择器

$("form input")         选择全部的form元素中的input元素

$("#main > *")          选择id值为main的全部的子元素

$("label + input")     选择全部的label元素的下一个input元素节点，经測试选择器返回的是label标签后面直接跟一个input标签的全部input标签元素

$("#prev ~ div")       同胞选择器，该选择器返回的为id为prev的标签元素的全部的属于同一个父元素的div标签

基本过滤选择器

$("tr:first")               选择全部tr元素的第一个

$("tr:last")                选择全部tr元素的最后一个

$("input:not(:checked) + span")

ID

类

$("#myELement")    选择id值等于myElement的元素。id值不能反复在文档中仅仅能有一个id值是myElement所以得到的是唯一的元素

$("div")           选择全部的div标签元素，返回div元素数组

$(".myClass")      选择使用myClass类的css的全部元素

$("*")             选择文档中的全部的元素。能够运用多种的选择方式进行联合选择：比如$("#myELement,div,.myclass")

属性过滤选择器

$("div[id]")              选择全部含有id属性的div元素

$("input[name='newsletter']")    选择全部的name属性等于'newsletter'的input元素 

$("input[name!='newsletter']") 选择全部的name属性不等于'newsletter'的input元素 

$("input[name^='news']")         选择全部的name属性以'news'开头的input元素

$("input[name$='news']")         选择全部的name属性以'news'结尾的input元素

$("input[name*='man']")          选择全部的name属性包括'news'的input元素 

$("input[id][name$='man']")    能够使用多个属性进行联合选择，该选择器是得到全部的含有id属性而且那么属性以man结尾的元素

表单元素选择器

$(":input")                  选择全部的表单输入元素。包含input, textarea, select 和 button 

$(":text")                     选择全部的text input元素

$(":password")           选择全部的password input元素

$(":radio")                   选择全部的radio input元素

$(":checkbox")            选择全部的checkbox input元素

$(":submit")               选择全部的submit input元素

$(":image")                 选择全部的image input元素

$(":reset")                   选择全部的reset input元素

$(":button")                选择全部的button input元素

$(":file")                     选择全部的file input元素

$(":hidden")               选择全部类型为hidden的input元素或表单的隐藏域

事件绑定

jQuery 给全部匹配的元素附加一个事件处理函数，即使这个元素是以后再加入进来的也有效。

这种方法是基本是的 .bind() 方法的一个变体。

使用 .bind() 时。选择器匹配的元素会附加一个事件处理函数。而以后再加入的元素则不会有。为此须要再使用一次 .bind() 才行。比方说
<body>

  <div class="clickme">Click here</div>

</body>
能够给这个元素绑定一个简单的click事件：
$('.clickme').bind('click', function() {

  alert("Bound handler called.");

});
当点击了元素，就会弹出一个警告框。然后。想象一下这之后有还有一个元素加入进来了。
$('body').append('<div class="clickme">Another target</div>');
虽然这个新的元素也可以匹配选择器 ".clickme" ，可是因为这个元素是在调用 .bind() 之后加入的。所以点击这个元素不会有不论什么效果。

.live() 就提供了相应这样的情况的方法。假设我们是这样绑定click事件的：
$('.clickme').live('click', function() {

  alert("Live handler called.");

});
然后再加入一个新元素：
$('body').append('<div class="clickme">Another target</div>');
然后再点击新增的元素，他依旧可以触发事件处理函数。

事件冒泡

冒泡事件就是点击子节点。会向上触发父节点，祖先节点的点击事件。

以下是html代码部分：

<body>

<div id="content">

    外层div元素

    <span>内层span元素</span>

    外层div元素

</div>

<div id="msg"></div>

</body>

相应的jQuery代码例如以下：

<script type="text/javascript">

$(function(){

    // 为span元素绑定click事件

    $('span').bind("click",function(){

        var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";//获取html信息

        $('#msg').html(txt);// 设置html信息

    });

    // 为div元素绑定click事件

    $('#content').bind("click",function(){

        var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";

        $('#msg').html(txt);

    });

    // 为body元素绑定click事件

    $("body").bind("click",function(){

        var txt = $('#msg').html() + "<p>body元素被点击.<p/>";

        $('#msg').html(txt);

    });

})

</script>

当点击span时，会触发div与body 的点击事件。点击div时会触发body的点击事件。

怎样防止这样的冒泡事件发生呢？

改动例如以下：

<script type="text/javascript">

$(function(){

       // 为span元素绑定click事件

    $('span').bind("click",function(event){

        var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";

        $('#msg').html(txt);

        event.stopPropagation();    //  阻止事件冒泡

    });

    // 为div元素绑定click事件

    $('#content').bind("click",function(event){

        var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";

        $('#msg').html(txt);

        event.stopPropagation();    //  阻止事件冒泡

    });

    // 为body元素绑定click事件

    $("body").bind("click",function(){

        var txt = $('#msg').html() + "<p>body元素被点击.<p/>";

        $('#msg').html(txt);

    });

})

</script>

event.stopPropagation();
// 阻止事件冒泡

有时候点击提交button会有一些默认事件。

比方跳转到别的界面。可是假设没有通过验证的话，就不应该跳转。这时候能够通过设置event.preventDefault(); //阻止默认行为 ( 表单提交 )。

以下是案例：

<script type="text/javascript">

$(function(){

   $("#sub").bind("click",function(event){

         var username = $("#username").val();  //获取元素的值。val() 方法返回或设置被选元素的值。

         if(username==""){     //推断值是否为空

             $("#msg").html("<p>文本框的值不能为空.</p>");  //提示信息

             event.preventDefault();  //阻止默认行为 ( 表单提交 )

         }

   })

})

</script>

html部分：

<body>

<form action="test.html">

用户名：<input type="text" id="username" />

<br/>

<input type="submit" value="提交" id="sub"/>

</form>

<div id="msg"></div>

</body>

另一种防止默认行为的方法就是return false。

效果一样。

代码例如以下：

<script type="text/javascript">

$(function(){

   $("#sub").bind("click",function(event){

         var username = $("#username").val();  //获取元素的值

         if(username==""){     //推断值是否为空

             $("#msg").html("<p>文本框的值不能为空.</p>");  //提示信息

             return false;

         }

   })

})

</script>

同理，上面的冒泡事件也能够通过return false来处理。

<script type="text/javascript">

$(function(){

       // 为span元素绑定click事件

    $('span').bind("click",function(event){

        var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";

        $('#msg').html(txt);

        return false;

    });

    // 为div元素绑定click事件

    $('#content').bind("click",function(event){

        var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";

        $('#msg').html(txt);

        return false;

    });

    // 为body元素绑定click事件

    $("body").bind("click",function(){

        var txt = $('#msg').html() + "<p>body元素被点击.<p/>";

        $('#msg').html(txt);

    });

})

</script>

事件托付

概念

什么是事件托付：通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件。托付呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做。完毕这个事件。

　　举个列子：有三个同事估计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递。二是托付给前台MM代为签收。现实其中，我们大都採用托付的方案（公司也不会容忍那么多员工站在门口就为了等快递）。

前台MM收到快递后，她会推断收件人是谁。然后依照收件人的要求签收。甚至代为付款。这样的方案另一个优势，那就是即使公司里来了新员工（无论多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。

原理

利用冒泡的原理，把事件加到父级上，触发运行效果。

作用

性能要好

针对新创建的元素，直接能够拥有事件

事件源

跟this作用一样(他不用看指向问题。谁操作的就是谁),event对象下的

使用情景

为DOM中的非常多元素绑定同样事件

为DOM中尚不存在的元素绑定事件

JQUERY事件托付
$(function(){

    $('#ul1,#ul2').delegate('li','click',function(){

        if(!$(this).attr('s')) {

        $(this).css('background','red');

        $(this).attr('s',true);

        }else {

            $(this).css('background','#fff');

            $(this).removeAttr('s');

        }

    })

});
最新on()方法取替了delegate()方法
$(function(){

        $('#ul1,#ul2').on('click','li',function(){

                if(!$(this).attr('s')) {

                $(this).css('background','red');

                $(this).attr('s',true);

                }else {

                        $(this).css('background','#fff');

                        $(this).removeAttr('s');

                }

        })

});

事件监听

事件监听准确一点讲能够说是js引擎对用户鼠标、键盘、窗体事件等动作的监视进行的操作，也就是针对用户对应的操作进行附加事件，经常使用的类似 btnAdd.onclick="alert(’51obj.cn’)"就是一种简单的附加事件，仅仅只是这样的方法不支持附加多个事件以及删除事件。下面代码将实现附加事件后删除事件（IE下）

总结

这篇对jquery的理解。主要解说基础知识，原理性的东西比較多

jquery的一点点认识的更多相关文章

JQuery初识
一.什么是JQuery JQuery官方网站上是这样解释的:JQuery是一个快速简洁的JavaScript库,它可以简化HTML文档的元素遍历.事件处理.动画及Ajax交互,快速开发We ...
深入解析Underscore.js源码架构
Underscore.js是很有名的一个工具库,我也经常用他来处理对象,数组等,本文会深入解析Underscore源码架构,跟大家一起学习下他源码的亮点,然后模仿他写一个简单的架子来加深理解.他的源码 ...
jQuery关于文字内容溢出用点点点(…)省略号表示
1.jQuery限制字符字数的方法代码很简单,使用也很方便,如下: $(document).ready(function(){//限制字符个数$(“.zxx_text_overflow”).each( ...
每天一点点之vue框架开发 - 引入Jquery
1. 安装jquery npm install jquery --save-dev 2.在build/webpack.base.conf.js中添加如下内容 var webpack = require ...
jquery控制文字内容溢出用点点点(…)省略号表示
jQuery限制字符字数的方法 $(function(){ //限制字符个数 $(“.text”).each(function(){ var maxwidth=23; if($(this).text( ...
文字超过字符长度显示… 点点点 jquery
在 script脚本区域里面定义如下方法 jQuery.fn.limit = function() { var self = $("[limit]"); self.each(fun ...
jquery a标签的锚点点击的时候页面上缓慢滚动
a标签增加一个名字触发效果: $(".transition").click(function(){ if (location.pathname.replace(/^\//, '') ...
ECharts 初识（基于MVC+jQuery+Angularjs实现的Demo）
一.背景: 我们这行做web开发的,很多时候都需要做数据统计报表,现在我所使用的是来自百度团队的ECharts.官方网址:http://echarts.baidu.com/ 我们知 ...
动态生成二维码插件 jquery.qrcode.js
前段时间做项目,需要动态生成一个二维码,于是就在网上找了一下发现一个jquery插件jquery.qrcode.js,所以今天就简单说一下这个插件的使用: jquery.qrcode.js是依赖jqu ...

随机推荐

[uiautomator篇][9]遇到问题
1 (1) 修改apk的存储权限,不要创建文件会提示:文件找不到 (2) 退出应用 mDevice.executeShellCommand("am force-stop com.antutu ...
TOJ2712: Atlantis
小数据求面积并 There are several ancient Greek texts that contain descriptions of the fabled island Atlanti ...
poj1236 Tarjan算法模板详解
思想: 做一遍DFS,用dfn[i]表示编号为i的节点在DFS过程中的访问序号(也可以叫做开始时间)用low[i]表示i节点DFS过程中i的下方节点所能到达的开始时间最早的节点的开始时间.初始时dfn ...
Welcome-to-Swift-08枚举 (Enumerations)
枚举为一系相关联的值定义了一个公共的组类型.同时能够让你在编程的时候在类型安全的情况下去使用这些值. 如果你对C语言很熟悉,你肯定知道在C语言中枚举类型就是一系列具有被指定有关联名称的的整数值.但在S ...
设计模式（Java随笔）—装饰模式
装饰模式(Decorator Pattern):为已有功能动态地添加更多功能的一种方式Attach additional responsiblities to an object dynamicall ...
BZOJ 2330 [SCOI2011]糖果 ——差分约束系统 SPFA
最小值求最长路. 最大值求最短路. 发现每个约束条件可以转化为一条边,表示一个点到另外一个点至少要加上一个定值. 限定了每一个值得取值下界,然后最长路求出答案即可. 差分约束系统,感觉上更像是两个变量 ...
BZOJ1879 [Sdoi2009]Bill的挑战【状压dp】
题目输入格式本题包含多组数据. 第一行:一个整数T,表示数据的个数. 对于每组数据: 第一行:两个整数,N和K(含义如题目表述). 接下来N行:每行一个字符串. T ≤ 5,M ≤ 15,字符串长 ...
Milk Patterns（poj 3261）
题意:找出出现k次的可重叠的最长子串的长度. /* 求出height数组,二分答案,将height分组,看有没有一组个数大于K. WA了很多遍,最后看别人的题解,发现往字符串后面填了一个0,就可以AC ...
巧克力（zoj 1363）
2100年,ACM牌巧克力将风靡全球. “绿的,橘红的,棕色的,红的…”,彩色的糖衣可能是ACM巧克力最吸引人的地方.你一共见过多少种颜色?现在,据说ACM公司从一个24种颜色的调色板中选择颜色来装饰 ...
java并发框架Executor介绍
Executor框架是指java 5中引入的一系列并发库中与executor相关的一些功能类,其中包括线程池,Executor,Executors,ExecutorService,Completion ...

jquery的一点点认识

概述

选择器