?
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
4.属性和样式函数
? 1)属性函数
? ???a.属性操作
? ? ?attr(属性) 返回属性值
? ? ?attr(属性名,属性值) 设置属性值
? ? ?b.value属性操作
? ? ?val() 返回value属性值
? ? ?val(值) 设置value值
? ? ?
?????c.获取文本信息，纯文本
? ? ?div或span等元素的文本信息
? ? ?text() 返回元素中的文本内容
? ? ?text(值) 设置元素中的文本内容
? ? ?
? ? ?d.获取和设置div等元素的信息，html信息处理
? ? ?html();
? ? ?html(值);
? ? ?
? ? ?e.class属性操作
? ? ?addClass(值) ?设置元素class="值"
? ? ?removeClass(值) ?删除class属性中的值
? ?2)css样式函数
? ? ?a.css样式控制
? ? ? ?css(样式属性); ?获取样式属性的值
? ? ? ?css(样式属性,值); ?设置样式属性值
? ? ?b.宽和高的设置
? ? ? ?width(); ?获取元素的宽度
? ? ? ?width(值); ?设置元素的宽度
? ? ? ?height(); ?获取元素的高度
? ? ? ?height(值); ?设置元素的高度
5.事件函数
? 1)页面载入
? ? ?$(document).ready(fn)
? ? ?或$(fn)或$().ready(fn)
? 2)基本事件
? ? ?click() ?触发单击事件，执行单击事件
? ? ?click(fn); ?为元素绑定一个单击处理fn
? ? ?focus(); ?
? ? ?focus(fn);
? ? ?blur(); ?失去焦点
? ? ?blur(fn); ?
? ? ?change();
? ? ?change(fn);
? ? ?unload(fn); ?设置浏览器卸载页面前执行
? ? ?mouseover(); ?鼠标移上去
? ? ?mouseover(fn);
? ? ?mouseout(); ?鼠标移开
? ? ?mouseout(fn);
? ? ?keyup(); 键盘按下
? ? ?keyup(fn);
? ??
? 3)事件切换
??? ?hover(over,out); ?模仿悬停事件
? ? ?toggle(f1,f1,...);?每次点击后依次调用函数
? 4)事件处理函数
? ? ?a.bind("事件类型",fn);
? ? ? ?为元素绑定指定类型的事件处理函数
? ? ? ?$("#btn1").click(fn);
? ? ? ?$("#btn1").bind("click",fn);
? ? ?b.unbind("事件类型")
? ? ? ?为元素取消绑定的处理函数
? ? ? ?$("#btn1").unbind("click");//取消click事件
? ? ? ?$("#btn1").unbind();//取消所以事件
? ? ?c.trigger("事件类型")
? ? ? ?触发元素绑定的事件处理
? ? ? ?$("#btn1").click();
? ? ? ?$("#btn1").trigger("click");
? ? ?d.live("事件类型",fn)
? ? ? ?为现有和将来动态添加的元素绑定指定类型事件
6.文档处理
? 1)创建文档对象
? ? ?$("字符串")
? 2)将文档对象添加到页面
? ? ?append(对象); ?将对象值插入到元素内部末尾出
? ? ?prepend(对象); ?将对象值插入到元素内部的前面
? ? ?after(对象); ?在对象值插入到元素后面
? ? ?before(对象); ?在对象值插入到元素前面
? 3)删除文档元素
? ? ?empty(); ?将元素内容清空
? ? ?remove(); ?将元素删除
? 4)将文档元素复制
? ? ?clone(); ?复制元素
? ? ?clone(true); ?深度复制
? 5)将文档元素用新元素包裹起来
? ? ?wrap(html) 利用指定的html元素将指定的元素包裹起来
? ? ?$("p").wrap("<div></div>");
? ? ?用div把p包裹起来
? 6)将文档元素替换
? ? ?replaceWith(html); ?利用html元素替换原有内容
?