jQuery简介

作者: 月光在心中 | 来源:发表于2017-08-01 11:44 被阅读9次

    jQuery:jquery是一个js框架(代码库),为用户提供了很好的浏览器兼容和大量的dom操作接口。(它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互)

    API:应用程序编程接口(Application Programming Interface)

    jQuery框架默认为外部环境提供两个变量 jQuery 和 $(简写形式),jQuery本质是一个函数
    jQuery本质是一个函数,所有jQuery的使用都围绕该函数对象进行(jquery将js中dom节点封装成对象)

    jQuery的优势:(写更少的代码,做更多的事情) write Less,Do More.

    jQuery为我们提供了良好的浏览器兼容和丰富的dom操作API。

    选择器: 字符串形式的查找 过滤:二次筛选 查找:基于集合查找新的东西
    jQuery选择器

    加载顺序:从上到下 从外到内

    单词:hide隐藏 show显示 end结束 find发现

    方法:slideDown向下滑动 slideUp向上滑动

    jQuery底层属性 camelCase 自动装换- 如:$("div").css("border-color","red") 底层$.camelCase("border-color")--结果为:borderColor 所以$("div").css("borderColor","red") ;写时最好就是驼峰式

    迭代即循环 隐士迭代即背后循环处理

    jQuery函数传入的参数: 可对象 字符串 如:$(dom) $("#box")

    节点获取 所指dom对象是一致的 vae dom1=document.getElementById("box");var dom2=document.getElementById("box"); dom1 === dom2 /true

    而jQuery对象不一致 $("#box") === $("#box") /false 相当于函数jQuery()每次创建jQuery对象传入选择器表达式时开辟一个空间

    将jQuery对象转化为dom对象
    var domObj=document.getElementById("third");
    var jqObj=$("#third");
    1.jqObj.get(0) 2.jqObj[0]

    将domObj转化为jQuery对象 $(dom)
    $(domObj)

    display:flex; 弹性布局

    $(callback)

        $(document).ready(function(){
            $(".inner").on("mouseover", function(){
                $(this).css("background-color", "pink");
            })
        });
    
        //以上函数可以简写成
        $(function(){
            $(".inner").on("mouseover", function(){
                $(this).css("background-color", "pink");
            })
        });
    

    当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件。
    由于该事件在文档就绪后发生,因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。正如上面的例子中那样。
    ready() 函数规定当 ready 事件发生时执行的代码。
    ready() 函数仅能用于当前文档,因此无需选择器。

    语法三种:
    $(document).ready(function)
    $().ready(function)
    $(function)

    ready() 函数不应与 <body onload=""> 一起使用。

    相关文章

      网友评论

        本文标题:jQuery简介

        本文链接:https://www.haomeiwen.com/subject/blkjlxtx.html