JQuery 学习一
?
JQuery 学习一1.什么是JQery，有什么好处? JQuery是一个JavaScript框架或脚本库。它将一些原始js脚本封装，? 提供了一些函数，便于脚本开发.? 类似JQuery框架很多，例如prototype,ExtJs,yahoo? 好处：应用方便,便于客户端JavaScript和Ajax编程.??2.JQuery框架原理??JQuery提供了很多功能函数和多种类型选择器? 1)使用JQuery编程步骤? ? a.先利用选择器就爱那个页面中的元素获取? ? b.然后使用函数进行操作? 2)什么是JQuery对象? ? 利用JQuery选择器选出的对象? 3)对象类型的转换? ? a.将一个DOM对象转换成JQuery对象? ? ? $(DOM对象)? ? b.将一个JQuery对象转换成DOM对象? ? ??//获取对象集合中的第一个DOM对象? ? ? JQuery对象[0]或者JQuery对象.get(0)? ? c.将字符串转换成JQuery对象? ? ? $(字符串)? 4)?在页面载入完成执行?
$(document).ready(function() { //利用html()函数获取innerHTML alert($( "#a1").html()); }); //上面的简写 $(function() { alert($( "#a1").html()); });?3.JQuery选择器
?
? 1)基本选择器? ? ?a.按id属性值选择? ? ? ?$("#id值") $("#a1")?? ? b.按class属性值选择? ? ? ?$(".class值")$("#d1").css( "font-size","50px" );//第一行字体变成50px$( ".d").css("font-size" ,"50px" );//将class=d的元素字体变成50px$( "div").css("font-size" ,"50px" );//所有div$( "#d1,span").css("font-size" ,"50px" );?? ? c.按元素名称选择? ? ? ?$("元素名称")$(span);?? ? d.选取所有元素
$(*)? ? ?e.选取多个元素
$("#c1,#c2")$("#d1,span")??2)层级选择器HTML 代码:?
<form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset></form><input name="none" />? ?a.父子关系,在给定的父元素下匹配所有的子元素
?
??????????$("选择器1 > 选择器2")jQuery 代码:$("form > input")结果:<input name="name" />???b.祖先后代关系,在给定的祖先元素下匹配所有的后代元素?? ? ? ? ??$("选择器1 选择器2")jQuery 代码:
?
$("form input")?
结果:<input name="name" />, <input name="newsletter" />?c.前后关系,匹配所有紧接在 prev 元素后的 next 元素
?
? ? ? ? ? $("prev + next");jQuery 代码:$("label + input")结果:[ <input name="name" />, <input name="newsletter" /> ]??d.兄弟关系,匹配 prev 元素之后的所有 siblings 元素? ? ? ?$("pre ~ sibling")jQuery 代码:
?
$("form ~ input")??
结果:?
<input name="none" />
?
?
?
?3)简单选择器? ? ?a.选第一个 :first? ? ?b.选最后一个 ?:last? ? ?c.选奇数元素 ?:even? ? ?d.选偶数元素 ?:odd? ? ?e.选指定元素 ?:eq(索引)? ? ?f.选大于指定元素 ?:gt(索引)?
?
?
<html> <head > <script type= "text/javascript" src="jquery-1.8.1.js" ></script> <script type= "text/javascript"> $(function() { //父子关系选择器 $( "#u2 > li").css("font-size" , "50px" ); //祖先后代选择器 $( "#u2 li").css("font-size" , "50px" ); $( "div>#u2").css("font-size" , "50px" ); //选择第一个li元素 $( "#u1>li:first").css("background-color" , "#888"); $( "#u1>li:last").css("background-color" , "blue"); $( "#u1>li:even").css("background-color" , "#888"); $( "#u1>li:odd").css("background-color" , "#555" ); $( "#u2>li:eq(1)").css("background-color" , "#555"); $( "#u2>li:gt(2)").css("background-color" , "#555"); });</script> </head > <body > <div> <h2> 体育新闻</h2 > <ul id= "u1"> <li> 标题1</li > <li> 标题2</li > <li> 标题3</li > <li> 标题4</li > <li> 标题5</li > </ul> </div> <div> <h2> 社会新闻</h2 > <ul id= "u2"> <li> 标题1</li > <li> 标题2</li > <li> 标题3</li > <li> 标题4</li > <li> 标题5</li > </ul> </div> </body ></html>??4)内容选择器? ? ?a.根据指定文本信息选择? ? ? ?$("div:contains('jack')")? ? ?<div>jack123</div>? ? ?b.匹配没有子元素或者文本为空的元素? ? ? ?$("div:empty")? ? ? ?<div></div>? ? ? ?<div/>? 5)可见性选择器? ? ?a.选择不可见元素? ? ? ?$("div:hidden")? ? ?b.选择可见元素? ? ? ?$("div:visible")? 6)属性选择器? ? ?a.按属性值做选择条件? ? ? ?[属性名=属性值]? ? ? ?$("input=[name='newsletter']")? 7)表单选择器? ? ?a.选择所有表单元素，例如text,textarea,select? ? ? ?:input? ? ?b.选择type="text"类型的输入框? ? ? ?:text? ? ?c.选择type="checkbox"类型元素? ? ? ?:checkbox? ? ?d.其他:password,:hidden,:radio,:button,:image,:file? 8)表单对象属性选择器? ? ?a.选择可用表单元素? ? ? ?:enabled? ? ?b.选择所有不可用元素? ? ? ?:disable? ? ?c.选择所有选中的元素? ? ? ?:checked? ? ?d.选择被选中的select的option? ? ? ?:selected?