一.jQuery基本功能
1.访问和操作DOM元素:<code>$(".oDiv"").val();</code>
2.控制页面样式.<code>$(".oDiv").click(function{$(this).toggleClass(".oDiv1")});</code>
3.对页面事件的处理.
4.大量插件在页面的运用.
5.与Ajax技术的完美结合.
二.搭建开发环境
1.下载文件库:<code>http://jquery.com</code>
2.引入jQuery文件库:<script language="javascript" type="text/javascript" src=""></script>
三.第一个程序
1.第一个程序:<code>$(document).ready(function(){ $("div").html("你好!欢迎来到jQuery的精彩世界!")});</code>
四.代码风格
1.<code>$</code>美元符号的使用:无论是页面元素的选择,功能函数的前缀都须使用该符号.
2.事件操作链接式书写:使用链接式的方式编写该元素的所有事件.
$(".title").click(function(){
$(this).addclass("curcol")
.next(".content").css("dsplay","block");
});
五.jQuery选择器
1.使用简单:<code>$("#tbStu tr:nth-child(even)").addClass("trOdd");</code>
2.完美的检测机制:<code>不需要检测找元素,不存在也不会报错卡死</code>
3.有4大类型:
基本选择器:<code>#id</code>,<code>element</code>元素,<code>.class</code>,<code>*</code>所有,<code>selector1 selectorN</code>多项选择
层次选择器:<code>ancestor descendant</code>后代,<code>parent>child</code>父子,<code>prev+next</code>prev后相邻,<code>prev~siblings</code>prev后所有兄弟,相当于<code>nextAll()</code>
过滤选择器:
简单: first()或:first第一个,last()或:last最后一个,:no(selector)除选择外,:even偶数,:odd奇数,:eq(index)指定索引,:gt(index)大于索引,:lt(index)小于索引,:header标题类h1 h2..,:animated正在执行动画
内容::contains(text)给定文本,:empty无子或空,:has(selector)内含有,:parent有子或文本.
可见性: :hidden不可见或hidden, :visible可见.
属性:[attribute]属性,[attribute=value]特定属性值,[attribute!=value]无特定属性值,[attribute^=value]某值开始,[attribute$=value] 某值结束,[attribute*=value]包含某值,[selector1][selector2][selectorN]多属性
子元素: :nth-child(eq|even|odd|index)特定位置,:first-child第一个,:last-child最后一个,:only-child只有一个的
表单对象属性: :enabled属性可用,:disabled属性不可用,:checked被选中,:selected选中的option
表单选择器: :input所有input textarea select,:text单行文本,:password密码框,:radio单选,:checkbox复选,:submit:提交,:image图像域,:reset重置,:button按钮,:file文件域<br>
网友评论