jQuery选择器及jquery案例详解必看.docx
《jQuery选择器及jquery案例详解必看.docx》由会员分享，可在线阅读，更多相关《jQuery选择器及jquery案例详解必看.docx（6页珍藏版）》请在冰豆网上搜索。
jQuery选择器及jquery案例详解必看
jQuery选择器及jquery案例详解（必看）_
本文给大家介绍jquery选择器的相关学问，并通过案例给大家介绍jquery学问，本文介绍的特别具体，具有参考借鉴价值，感爱好的伴侣一起学习吧
JQuery选择器
解析：
为了更好的或者是更快的从简单的DOM树中找到我们需要的一类标签
1.层次选择器
!
--当点击h2元素时，为#menu下的span元素添加色为#09F的颜色背景--
!
--scripttype="text/javascript"
$（function（）{
$（'h2'）.click（function（）{
$（'#menuspan'）.css（'background-color','#09F'）;
}）;
}）;
/script--
2.基本选择器
!
--为标签选择器添加样式--
scripttype="text/javascript"
$（function（）{
$（'h2'）.click（function（）{
$（'h3'）.css（'background-color','#09F'）;
}）;
}）;
/script
3.基本过滤选择器
scripttype="text/javascript"
$（function（）{
$（'h2'）.click（function（）{
//$（'li:
first'）.css（'background-color','#09F'）;//第一个
//$（'li:
last'）.css（'background-color','#09F'）;//最终一个
//$（'li:
not（.three）'）.css（'background-color','#09F'）;//class不为three的元素
//$（'li:
even'）.css（'background-color','#09F'）;//索引值为偶数的元素
//$（'li:
eq
（1）'）.css（'background-color','#09F'）;//索引值为1的元素
//$（'li:
gt
（1）'）.css（'background-color','#09F'）;//索引值大于1的元素
//$（'li:
lt
（1）'）.css（'background-color','#09F'）;//索引值小于1的元素
//$（':
header'）.css（'background-color','#09F'）;//全部标题的元素
$（':
focus'）.css（'background-color','#09F'）;//猎取焦点的元素
}）;
}）;
/script
4.可见性过滤选择器
scriptsrc="js/jquery-1.8.3.js"/script
scripttype="text/javascript"
$（function（）{
//$（'p:
hidden'）.show（）;//显示文字
$（'p:
visible'）.hide（）;//隐蔽文字
}）;
/script
styletype="text/css"
#txt_show
{
display:
none;color:
#00C;
}
#txt_hide
{
display:
block;color:
#F30;
}
/style
/head
body
pid="txt_hide"点击按钮，我会被隐蔽哦~/p
pid="txt_show"隐蔽的我，被显示了，嘿嘿~/p
inputtype="button"name="show"value="点击显示文字"/
inputtype="button"name="hide"value="点击隐蔽文字"/
/body
5.属性选择器
!
--转变class属性的值为odds的元素的背景颜色--
scripttype="text/javascript"
$（function（）{
$（"h2"）.click（function（）{
$（"[class=odds]"）.css（"background-color","#FFFFFF"）;
}）
}）;
/script
Jquery能做什么:
访问和操作DOM元素
掌握页面样式
对页面大事进行处理
扩展新的jQuery插件
与Ajax技术完善结合
Jquery的优势:
体积小，压缩后只有100KB左右
强大的选择器
杰出的DOM封装
牢靠的大事处理机制
杰出的扫瞄器兼容性
用法隐式迭代简化编程
丰富的插件支持
jQuery的学问的分解：
1.关于window.onload和$（function（）{}）区分
解析：
window.onload等待页面上全部资源（html标签，css，img，js）都加载完成后，才执行，包括（文本素材，图片，js，css）
$（function（）{}）:
等待页面上的标签素材加载完成后就开头执行
其次点：
Window.onload只能调用一次
$（function（）{}）可以调用多次
2.怎么通过Jquery设置样式
1）.通过$（“选择器”）.css（“属性名”,”属性值”）;
//这里的书写的属性名和css中书写的全都
2）.$（“选择器”）.html（）:
猎取两个标签之间的html代码
3）.$（“选择器”）.addClass（“属性值”）
可以动态的转变dom文档结构。
进而设置样式。
3.DOM对象和Jquery对象的转换
jquery对象转换成dom对象
jquery供应了两种方法将一个jquery对象转换成一个dom对象，即[index]和get（index）。
arcr=cr=（"#cr"）;//jquery对象
varcr=$cr[0];//dom对象也可写成varcr=$cr.get（0）;
alert（cr.checked）;//检测这个checkbox是否给选中
3.dom对象转换成jquery对象
对于一个dom对象，只需要用$（）把dom对象包装起来，就可以获得一个jquery对象了，方法为$（dom对象）;
代码:
varcr=document.getElementById（"cr"）;//dom对象
varcr=cr=（cr）;//转换成jquery对象
光棒效果案例：
js代码：
$（function（）{
varlis=document.getElementsByTagName（'li'）;
for（vari=0;ilis.length;i++）{
lis[i].onmouseover=function（）{
this.style.background='red';
};
lis[i].onmouseout=function（）{
this.style.background='';
}
}
}）;
jQuery的代码：
$（function（）{
$（'li'）.mouseover（function（）{
$（this）.css（'background','red'）;
}）.mouseout（function（）{
$（this）.css（'background',''）;
}）
}）;
jQuery瀑布流案例：
script
varmargin=10;//这里设置间距
varli=$（"li"）;//这里是区块名称
varli_W=li[0].offsetWidth+margin;//取区块的实际宽度（包含间距，这里用法源生的offsetWidth函数，不适用jQuery的width（）函数是由于它不能取得实际宽度，例如元素内有pandding就不行了）
functionliuxiaofan（）{//定义成函数便于调用
varh=[];//记录区块高度的数组
varn=document.documentElement.offsetWidth/li_W|0;//窗口的宽度除以区块宽度就是一行能放几个区块
for（vari=0;ili.length;i++）{//有多少个li就循环多少次
li_H=li[i].offsetHeight;//猎取每个li的高度
if（in）{//n是一行最多的li，所以小于n就是第一行了
h[i]=li_H;//把每个li放到数组里面
li.eq（i）.css（"top",0）;//第一行的Li的top值为0
li.eq（i）.css（"left",i*li_W）;//第i个li的左坐标就是i*li的宽度
}
else{
min_H=Math.min.apply（null,h）;//取得数组中的最小值，区块中高度值最小的那个
minKey=getarraykey（h,min_H）;//最小的值对应的指针
h[minKey]+=li_H+margin;//加上新高度后更新高度值
li.eq（i）.css（"top",min_H+margin）;//先得到高度最小的Li，然后把接下来的li放到它的下面
li.eq（i）.css（"left",minKey*li_W）;//第i个li的左坐标就是i*li的宽度
}
$（"h3"）.eq（i）.text（"编号：
"+i+"，高度：
"+li_H）;//把区块的序号和它的高度值写入对应的区块H3标题里面
}
}
/*用法forin运算返回数组中某一值的对应项数（比如算出最小的高度值是数组里面的第几个）*/
functiongetarraykey（s,v）{for（kins）{if（s[k]==v）{returnk;}}}
/*这里肯定要用onload，由于图片不加载完就不知道高度值*/
window.onload=function（）{liuxiaofan（）;};
/*扫瞄器窗口转变时也运行函数*/
window.onresize=function（）{liuxiaofan（）;};
/script
以上内容是我给大家介绍的jQuery选择器及jquery案例的相关学问，盼望对大家有所关心
...
升级会员 