本篇是学习jQuery部分内容,用于总结记录,后期继续学习后会补充修改。
日期:2020/12/29
- 简介
- jQuery函数
- jQuery术语
- jQuery对象详解
- 相关函数详解
简介
Jquery和DOM相互置换
$(DOM)=>jQuery对象
$(“#xx”)[0]=>DOM对象(#xx表示CSS选择器)
$(“#xx”)===>DOM对象
$是全局函数jquery的快捷别名
引入方式
1:下载源码+
jQuery函数
生成jquery类库的$()函数传入可以传入如下四种参数:
1:CSS选择器
2:Element、Document、Window对象
3:HTML文本字符串 eg:var img = $(“”);当使用这种方式传入参数时,第二个参数时可选的,第二参数是Object对象,用来表示HTML属性的键值对。
4: 传入一个函数(匿名函数)
新版:
jQuery(function(){//文档加载完毕时调用
//所有的jquery代码放这里
})。
老版(完整版)
(document).ready(function())jQuery(function((document).ready(function(){})
jQuery(function((document).ready(function())jQuery(function(){//唯一的参数指向,意味着可以释放全局的,意味着可以释放全局的,意味着可以释放全局的函数。
Console.info(this);//结果是document对象
Console.info($);//结果是jQuery对象
})
jQuery术语
Jquery对象:类数组,有jquery函数返回的对象(表示一组文档元素),可以通过toArray转化为真实数组,也叫jquery结果/jquery集/包装集
选中元素:$(“#xx”)====>描述:选中元素 attr():选中元素的HTML属性
JQuery函数:jquery命名空间中的函数,
eg:jQuery.noConflict(),jQuery函数也叫静态函数。
jQuery方法:jQuery函数返回的jQuery对象的方法。
jQuery对象详解
length属性:KaTeX parse error: Expected 'EOF', got '#' at position 3: (“#̲test”)[0]===>(“#test”).get(0)代替索引
selector属性: 创建jQuery时的选择器字符串
context属性:上下文对象,是()的第二参数,eg:()的第二参数,eg:()的第二参数,eg:(“script”,document.body)中context就是body,如果没有传递,默认是Document对象
Jquery属性:字符串形式的jQuery版本号
相关函数详解
noConflict:
jQuery.noConflict():还原$()为初始值。
jQuery()与querySelectorAll(DOM)
不同:jQuery返回的类数组对象比NodeList更加好用。each返回false时等同for循环的break。
Each遍历和ECMAScript5的forEach的区别:
//第一参数:index--DOM在类数组中的索引。第二参数:this----DOM
$("div").each(function(index){
$(this).prepend(index + “:”);
If(this.id === “last”) return false;
})
Map()和 ES5的Array.prototype.map()很相近
Index()
接受一个元素作为参数,返回值是该元素在jQuery对象中的索引值,如果找不到的话,返回-1.,如果传递参数是jQuery,则,会对该对象第一个元素进行搜索,如果是字符串,会当成CSS选择器,并返回该jQuery对象的第一个元素。如果什么都不传入,则返回jQuery对象中第一个毗邻元素的值
Is()
匹配至少一个,返回true,否则返回false。
Eg:$(this).is(“:hidden”):如果当前元素是隐藏的,如果是true,否则false
jQuery对象上最常见的是 get/set---->HTML属性,CSS样式,元素内容,位置宽高
即是get又是set,get:不传参数,返回当前值
Set:传参数,传入要设置的值。