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=""> 一起使用。