Jquery 知识点总结
来源:互联网 发布:开淘宝用什么软件好 编辑:程序博客网 时间:2024/06/05 11:00
**DOM对象和jquery对象相互转化。
var
var dom=
$(“p”) 所有
元素
$(“p.intro”) 所有 class=”intro” 的
元素
(“#intro”) id=”intro” 的第一个元素(“ul > li”) ul下的所有li节点
$(“ul li:first”) 每个
- 的第一个
- 元素
("[href =’.jpg’]”) 所有带有以 “.jpg” 结尾的 href 属性的属性
$(“div#intro .head”) id=”intro” 的元素中的所有 class=”head” 的元素
$(li[a:contains(‘Register’)]”) 内容包含Register的元素
(“input[@name=bar]”)name是bar的元素 (“input[@type=radio][@checked]”) type是radio的元素
(“li”).not(“ul”)li下没有包含ul节点的节点元素 (“span[@id]”) 包含id属性的元素
$(“[@id=span1]”) id为span1的节点元素
2、Jquery事件器的介绍 $(selector).click() 被选元素的点击事件 $(selector).dblclick() 被选元素的双击事件 $(selector).focus() 被选元素的获得焦点事件 $(selector).mouseover() 被选元素的鼠标悬停事件 $(selector).css(); 被选元素的CSS事件 $(selector). hide(); 被选元素的隐藏事件 $(selector). show('slow'); 被选元素的显示事件
<style type="text/css"> div ,span { width:140px; height:140px; margin:5px; background:#aaa; border:#000 1px solid; float:left; font-size:17px; font-family:Verdana; } div.mini{ width:55px; height:55px; background-color:#aaa; font-size:12px; } div.hide{ display:none; } </style><script type="text/javascript">//基本选择器。$(function(){$(function(){$('#one').css("background","#bbffaa");$('.one').css("background","#bbffaa");//层次选择器$('body div').css("background","#bbffaa");$('body >div').css("background","#bbffaa");$('.one+div').css("background","#bbffaa");//=$('#two').next('div').css("background","#bbffaa")$('#two').nextAll('div').css("background","#bbffaa");//=$('#two~div').css("background","#bbffaa");//选取class为one 所有的同辈元素div,无论前后位置.$('.one').siblings('div').css("background","#bbffaa");//基本过滤选择器//改变第一个<div>元素的背景色$('div:first').css("background","#bbffaa");//改变最后一个的<div>元素的背景色$('div:last').css("background","#bbffaa");//改变class不为one的<div>元素的背景色$('div:not(.one)').css("background","#bbffaa");//改变索引值为偶数的<div>元素的背景色$("div:even").css("background","#bbffaa");//改变索引值为奇数的<div>元素的背景色$("div:odd").css("background","#bbffaa");//改变索引值等于3的<div>元素的背景色$("div:eq(3)").css("background","#bbffaa");//改变索引值大于3的<div>元素的背景色$("div:gt(3)").css("background","#bbffaa");//改变索引值小于3的<div>元素的背景色$("div:lt(3)").css("background","#bbffaa");//改变所有标题元素<div>元素的背景色$(":header").css("background","#bbffaa");//改变正在执行动画的元素的背景色$(":animated").css("background","#bbffaa");//改变当前获取焦点的元素的背景色$(":focus").css("background","#bbffaa");//内容过滤选择器-----------------------------------------------//改变含有文本'di'的<div>元素的背景色$("div:contains(di)").css("background","#bbffaa");//改变不包含子元素的的<div>空元素的背景色$("div:empty").css("background","#bbffaa");//改变含有class为mini的<div>元素的背景色而不是class为mini 的div的背景色.$("div:has('.mini')").css("background","#bbffaa");//改变含有子元素的<div>元素的背景色$("div:parent").css("background","#bbffaa");//可见性过滤选择器--------------------------------//改变所有可见的<div>元素的背景色$("div:visible").css("background","#bbffaa");//显示隐藏的<div>元素并改变他的背景色$("div:hidden").css("background","#bbffaa").show(3000);//属性过滤选择器------------------------------------//改变含有属性title的<div>背景色.$("div[title]").css("background","#bbffaa");//改变属性title值等于test的<div>元素背景色.$("div[title=test]").css("background","#bbffaa");//改变属性title值不等于test的<div>元素背景色.$("div[title!=test]").css("background","#bbffaa");//改变属性title值以“te”开始的<div>元素背景色.$("div[title^=te]").css("background","#bbffaa");//改变属性title值含有“es”的<div>元素背景色.$("div[title*=es]").css("background","#bbffaa");//改变属性title值等于“en”或以en为前缀(该字符串后跟一个连字符'-')的<div>元素背景色.$("div[title|=en]").css("background","#bbffaa");//改变属性title用空格分隔的值中包含字符uk的<div>元素背景色.$("div[title~=uk]").css("background","#bbffaa");//子元素过滤选择器-----------------------------------//改变每个class为one的<div>父元素下的第二个子元素的背景色.$("div.one:nth-child(2)").css("background","#bbffaa");//改变每个class为one的<div>父元素下的第1个子元素的背景色.$("div.one :first-child").css("background","#bbffaa");//改变每个class为one的<div>父元素下的只有1个子元素的背景色.$("div.one :only-child").css("background","#bbffaa");}); </script><div id="one" class="one">id为one,class为one的div。 <div class="mini">class 为mini</div></div><div id="two" class="one" title="testle为other的div </div> <div class="mini" title="test">class为mini,"> id为two,class为one,title 为test的div。 <div class="mini" title="other">class为mini,tittitle为test的div </div></div><div class="one"> <div class="mini"> class为mini </div> <div class="mini"> class为mini </div> <div class="mini"> class为mini </div> <div class="mini"></div></div><div class="one"> <div class="mini"> class为mini </div> <div class="mini"> class为mini </div> <div class="mini"> class为mini </div> <div class="mini" title="tesst"> class为mini,title为tesst的div </div></div><div style="display:none;" class="none"> style 的display为none的div。</div><div class="hide"> class为"hide"的div <h1>标题元素</h1> <p>p标签</p></div><div id="" class=""> 包含input 的type为"hidden"的div<input type="hidden" size="8"></div><span id="mover">正在执行动画的span。</span>
**
选择器中含有空格的注意事项:对于过滤选择器加上空格,他所获取的是其子元素的过滤。而对于过滤选择器没有加上空格的来说
,他所获取的是其自身元素的过滤。**
0 0
- jquery知识点总结
- jquery知识点总结
- JQuery知识点总结
- jquery知识点总结
- Jquery 知识点总结
- jQuery Mobile知识点总结
- jQuery UI知识点总结
- jQuery知识点总结
- jquery知识点总结
- jQuery 知识点总结
- jquery中的知识点总结
- jquery总结知识点
- jQuery知识点总结
- 【jQuery实战知识点总结】
- jQuery视频知识点总结
- jQuery 知识点总结
- jquery知识点总结
- JQuery知识点总结
- 第一章 初识JAVA学习总结(15-6-16)
- 【华为OJ】求int型数据在内存中存储时1的个数
- iOS-项目开发,细节,报错,处理(3)
- ubuntu 修改环境变量导致的错误 登录失败
- 贪心算法初练
- Jquery 知识点总结
- 第六章第一题(其余类似上次派生继承题)
- 用位运算实现四则运算之加减乘除(用位运算求一个数的1/3)
- C++第六章第五题
- android 电子词典
- Android系统Intent,系统Action调用大全
- 7-2
- 常见邮件服务器(接收服务器和发送邮件服务器)地址
- Direct-X学习笔记--光照&材质&DX自带几何体绘制