gavanwanggw

导航

jquery的一点点认识

概述

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的理解。主要解说基础知识，原理性的东西比較多




posted on 2017-07-24 11:09  gavanwanggw  阅读(173)  评论(0)  编辑  收藏  举报