jq01--概述

jq:jQuery,是一个JavaScript函数库,为了简化js开发与编码而封装的js库,是一个“写得更少,做得更多”的js函数库,为事件处理而特别设计的。现在我们来学习一下它。

1.jq库:为事件处理特别设计的
    production version:已被精简,用在实际开发中
    development version:未压缩,可读,用于测试与开发中
    
2.下载jq库或者使用CDN(内容分发网络):

    //Google CDN:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
    </script>
    
   //Microsoft CDN:
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
    </script>

    使用微软或者Google的CDN优势:
        很多用户在访问其他站点时,已经从微软或者Google加载过js库。现在再访问你的站点,就
    可以使用缓存。而且CDN可以确保从最近的服务器加载文件。
    
3.jq语法:

    $(selector).action();
    
    $(this).hide(); $("p").hide();    $("#eid").hide();    $(".eclass").hide();

    
4.文档就绪函数:
    为了防止文档在完全加载之前就运行js代码,操作可能失败。如:隐藏不存在的元素,获取未加载图片尺寸

    $(document).ready(function(){
        ...
    });
    //简写
    $().ready(function(){
        ...
    });
    //或者
    $(function(){
        ...
    });

   
5.jq选择器:

    元素选择器(CSS选择器):
        $("p") $("p.intro") $("p#intro")    
        $("ul li:first")    //每个ul中的第一个li
        $("div#intro .head")
    
    属性选择器:
        $("[href]")    $("[href='#']")

    
6.jq名称冲突:
    jQuery使用"$"符号作为jQuery的简介方式。某些其他js库中的函数(Prototype)同样使用"$"符号。
    为了避免冲突,使用noConflict()

    var jq=jQuery.noConflict()    //使用jq代替$

    
7.为了易于维护,使用jq原则:
    将js代码放在函数中    
    将函数放在就绪处理函数中($(document).ready(...))
    将js代码.js文件中
    如果存在名称冲突,重命名jQuery库

8.jq事件:

    $(document).ready()    文档完成加载
    $().click()            点击事件
    $().dbclick()        双击事件
    $().focus()            获取焦点
    $().mouseover()        鼠标悬停

 



posted @ 2019-04-17 19:38  快与慢  阅读(390)  评论(0编辑  收藏  举报