全栈开发我爱编程

jQuery简介

2017-08-01  本文已影响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=""> 一起使用。

上一篇 下一篇

猜你喜欢

热点阅读