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
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元素替换原有内容