jQuery中$()函数的⽤法总结
摘要
jQuery对象: 具有jquery框架设置的所有功能的调⽤者, 就是该框架的对象
$⼜是什么?: $就是jQuery对象, jQuery对象为window的全局属性, 所以可以直接使⽤
如何⾃定义jQuery对象: 如⽤ JQ 替换 jQuery | $
var JQ = Conflict(); //这是jquery源码中提供的⽅法
JQ('.box').html("<b>哈哈</b>");
jQuer y(selec to r,c o ntext)
简要的说是:接收⼀个css选择器表达式(selector)和可选的选择器上下⽂(context),返回⼀个包含了匹配的DOM元素的jQuery对象
默认情况下,对匹配元素的查都是从根元素ducument对象开始,也就是说查范围是整棵⽂档树。但是如果给定了上下⽂context,则在指定上下⽂中查
html
<span>body span</span>
<span>body span</span>
<span>body span</span>
<div class="wrap">
<span>wrap span</span>
<span>wrap span</span>
<span>wrap span</span>
</div>
js
$('span').css('background-color','red');//所有的span都会变红
$('span','.wrap').css('background-color','red');//只有.wrap中的span会变红
jQuer y(html,o w ner Do c um ent) ,jQuer y(html,pro ps)
ent) ,jQuery(htm l,pro
⽤所提供的html代码创建DOM元素对于jQuery(html,ownerDocument),参数html可以是单标签或者是多层标签之间的嵌套。
第⼆个参数⽤于创建新DOM元素的⽂档对象,如果不传⼊则默认为当前的⽂档对象
//单标签两种⽅式都可以往body中插⼊div
/*
* 1 $('<div>').appendTo('body');
* 2 $('<div></div>').appendTo('body');
*/
// 多标签嵌套
$('<div><span>dfsg</span></div>').appendTo('body');
另外:对于单标签,jQuery(html,props),props是⼀个包含属性和事件的普通的对象,⽤法如下
$('<div>我是div</div>',{
title:'我是新的div',
click:function(){
$(this).css('color','red');
console.log(this);
}
}).appendTo('body');
jQuer y(element o r elem entsArr a y)
y(elem ent o entsArra
如果传⼊⼀个DOM元素或者是DOM元素的数组,则把DOM元素封装到jQuery对象中并返回。
html
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
js
// 传⼊DOM元素
$('li').each(function(index,ele){
$(ele).on('click',function(){
$(this).css('background','red');//这⾥的DOM元素就是this
})
})
//传⼊DOM数组
var ElementsByTagName('li');
aLi=[].slice.call(aLi);//集合转数组
var $aLi=$(aLi);
$aLi.html('我是jQuery对象');//所有的li的内容都变成'我是jQuery对象'
jQuer y(o bjec t)
jquery源码在线
如果传⼊的是⼀个object对象,则把该对象封装到jQuery对象中并返回
var obj={name:'谦龙'};
var $obj=$(obj);//封装成jQuery对象
//绑定⾃定义事件
$('say',function(){
console.log(this.name)//输出谦龙
});
$igger('say');
jQuer y(c a llba c k)
当传进去的参数是函数的时候,则在document对象上绑定⼀个ready事件监听函数,当DOM结构加载完成的时候执⾏
$(function(){
})
//以上代码和下⾯的效果是⼀样的
$(document).ready(function(){
...//代码
})
jQuer y(jQuer y o bjec t)
y(jQuery o
当传进去的参数是⼀个jQuery对象的时候,则创建该jQuery对象的⼀个副本并返回。副本与传⼊的jQuery对象引⽤完全相同的元素
var aLi=$('li');
var copyLi=$(aLi);//创建⼀个aLi的副本
console.log(aLi);
console.log(copyLi);
console.log(copyLi===aLi);
jQuer y()
如果不传⼊任何的参数,则返回⼀个空的jQuery对象,属性length为0注意这个功能可以⽤来复⽤jQuery对象,
例如可以创建⼀个空的jQuery对象,然后在需要的时候先⼿动修改其中的元素,然后在调⽤jQuery⽅法。从⽽避免重复创建jQuery对象
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论