首页 > 代码库 > jQuery基础知识
jQuery基础知识
什么是jQuery，有什么特点，有什么好处
jQuery是一个js文件，它是一个JavaScript框架或脚本库。
特点是，将一些原始js脚本封装。利用选择器查找要操作的节点，并且将这些节点封装成jQuery对象，只需要调用jQuery对象的方法或者属性，就可以实现对节点的操作。
这样做的好处是：可以兼容不同的浏览器（解决了大部分的兼容性问题），另外，代码也得到简化。便于脚本开发。类似jQuery框架很多,例如prototype,ExtJs,yahoo,等都是JavaScript框架。
jQuery编程的基本步骤
1. 利用选择器查找要操作的节点。 var $obj=$(‘#d1’);
2. 调用jQuery对象的方法或者属性。 $obj.css(‘color’,’red’);
jQuery对象
什么是jQuery对象
利用jQuery选择器选出的对象才是jQuery对象。jQuery对象是一个集合,集合元素是原有js中DOM对象。注意：只有jQuery对象才可以使用jQuery提供的函数
对象类型的转换
1. 将一个DOM对象转换成jQuery对象 $(DOM对象)
//原始js实现 function f1(){ var a1=document.getElementById("a1"); alert(a1.innerHTML); var $a1=$(a1);//将dom a1对象转换成jQuery对象 alert($a1.html()); }
2. 将一个jQuery对象转换成DOM对象
获取jQuery对象集合中的第一个DOM对象，jQuery对象[0] 或者jQuery对象.get(0)
//jQuery实现 function f2(){ //获取id=a1的HTML元素 var a1=$("#a1");//利用id选择器选择$("#id值") //获取a1中的html文本 alert(a1.html());//利用html()函数获取信息 //将jQuery对象转换成DOM对象 alert(a1[0].innerHTML);//a1[0] dom对象 //a1.get(0) jQuery函数,得到第一个元素 是DOM对象 alert(a1.get(0).innerHTML); }
3. 将一个字符串转换成jQuery对象 $(字符串)
function f3(){ var opt=‘<option value="http://www.mamicode.com/1">北京</option>‘; var $opt=$(opt);//将一个字符串转换成jQuery对象 alert($opt.html()); }
页面载入完毕执行指定函数fn
$(document).ready(function(){}); 或者 $(function(){});
//页面载入完毕后执行alert(),等价于onload事件 $(document).ready(function(){ alert($("#a1").html()); }); //更简洁写法 在页面载入完毕后执行 $(function(){ alert($("#a1").html()); })
jQuery选择器(参考文档)
什么是选择器？
jQuery借鉴了css选择器的语法，用来方便地查找要操作的节点。
基本选择器
1. 按id属性值选择 $("#id值")
2. 按class属性值选择 $(".class值")
3. 按元素名称选择 $("元素名称")
4. 选取所有元素 $(“*”)
5. 选取多个元素,用逗号隔开选择器 $("#c1,#c2")//选取id=c1和id=c2的元素
层级选择器
1. 父子关系 $("选择器1>选择器2")“>”代表父子关系
2. 祖先后代关系 $("选择器1 选择器2") （）
3. 前后关系 $("pre+next");(pre next紧挨着)
4. 兄弟关系(平级关系) $("pre ~ siblings")
简单选择器
1. 选第一个 :first
2. 选最后一个 :last
3. 选基数元素 :even
4. 选偶数元素 :odd
5. 选指定元素 :eq(索引)
6. 选大于指定值的元素 :gt(索引)
7. 选小于指定值的元素 :lt(索引)//索引值从0开始
内容选择器
1. 根据指定文本信息选择 :contains(text);
2. 匹配没有子元素或者文本为空 :empty
（6）可见性选择器
a.选择不可见元素 :hidden （input的type是hidden的，样式diplay：none的）
b.选择可见元素 :visible
（7）属性选择器
a.按属性值做条件选择 [属性名=属性值]
（8）表单元素选择器
a.选择所有表单元素,例如text,textarea,select :input
b.选择type="text"类型的输入框 :text
c.选择type="checkbox"类型元素 :checkbox
d.其他:password,:hidden,:radio,:button,:image,:file
（9）表单对象属性选择器
a.选择可用表单元素 :enabled
b.选择不可用表单元素 :disabled <input type=”text” disabled=”disabled”/>
c.选择被选中的checkbox,radio :checked <input type=”checkbox” checked=”checked”/>
d.选择被选中的select的option :selected
<option value=http://www.mamicode.com/”2” selected=”selected”>fdfgsgd
5、jQuery的dom操作
（1）查询节点
$(“选择器”);
找到一个节点以后，可以通过以下四个方法来访问节点的html内容、文件内容、属性值、值。
html() text() attr() val()
（2）创建节点
$(html);
（3）插入节点
append();作为最后一个孩子追加
5、jQuery属性和样式函数
（1）属性函数
a.属性操作
attr(属性名);//返回属性值
attr(属性名,属性值);//设置属性名=属性值
b.value属性操作
val();//返回value属性值
val(值);//设置value=http://www.mamicode.com/值
c.获取div或span等元素文本信息操作 (纯文本(即字符串))
text();//返回元素中的文本内容 相当于属性innerText
text(值);//设置元素中的文本内容
d.获取和设置div等元素的信息,内容当作HTML信息处理
html(); 相当于属性innerHTML
html(值);
e.class属性操作
addClass(值);//设置元素class="值"
removeClass(值);//删除class属性中的值
2)css样式函数
a.css样式控制
css(样式属性)://获取样式属性的值
css(样式属性,值);//设置样式属性值
b.宽和高的控制
width();//获取元素的宽
width(值);//设置元素的宽度
height();//获取元素的高
height();//设置元素的高度
5.jQuery事件函数
1)页面载入
$(document).ready(function(){}) 或 $(function(){})
2)基本事件
click();//触发单击事件,执行单击事件
click(fn);//为元素绑定一个单击处理
focus();//获取焦点
focus(fn);
blur();//失去焦点
blur(fn);
change();//选项改变 用于select中option选项改变时发生该事件
change(fn);
unload(fn);//设置浏览器卸载页面前执行
mouseover();//鼠标移上去
mouseover(fn);
mouseout();//鼠标移开
mouseout(fn);
3)事件切换函数
a.hover(over,out);鼠标移上去和移开两个事件,移上去执行over函数,移开执行
out函数
b.toggle(f1,f2,f3....);
为一个元素绑定多个不同的单击处理事件,每次单击调用不同的fn
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);//利用指定的元素将文档元素包裹起来
6)将文档元素替换
replaceWith(html);//利用html元素替换原有的
7.特效函数
主要实现隐藏和显示功能.
1)基本效果
show();//将元素显示
show(speed);//在指定speed时间内完成显示
speed:参数值可以为‘slow‘,‘normal‘,‘fast‘
也可以使用数字1000,2000(毫秒)
hide();//将元素隐藏
hide(speed);在指定时间内隐藏
toggle();//切换隐藏和显示.
2)滑动效果(改变元素高)
slideDown(speed);//将元素显示
slideUp(speed);//将元素隐藏
3)淡入淡出效果(改变元素的透明度)
fadeIn(speed);//将元素显示
fadeOut(speed); //将元素隐藏
4)自定义动画：animate();
8.筛选函数
基于现有jQuery元素对象查找其他元素.
1)过滤
a.eq(索引)
获取jQuery对象集合中某一个元素
b.not(选择器)
从jQuery对象集合中将符合选择器的元素排除
返回剩下的元素.
c.is(选择器)
从jQuery对象集合中获取符合选择器的元素
d.slice(begin,[end])
从jQuery对象集合中获取begin-end的子元素
2)查找
a.find(选择器)
从当前jQuery集合中将符合选择器的后代元素
返回.
b.children(选择器)
从当前jQuery集合中将符合选择器的子元素返回
c.parent()
获取当前jQuery对象的父元素
d.siblings()
获取当前jQuery对象的兄弟
9.工具函数
a.$.trim(str)
字符串过滤空格,只过滤前后空格
b.$.each(集合,fn)
循环操作,每一个元素触发fn处理
===========================练习=======================
1.筛选表格中的内容
选择器 内容选择器 可见性选择器
<body>:
<table>
<tr><td>魏晨参加了快乐男声</td><td>2009-9-14</td></tr>
<tr><td>我们都是乐橙</td><td>2009-9-14</td></tr>
<tr><td>魏晨在2007年出道</td><td>2009-9-14</td></tr>
<tr><td>love vision</td><td>2009-9-14</td></tr>
<tr><td>魏晨现在在韩国</td><td>2009-9-14</td></tr>
</table>
<input type="button" id="btn1" value="http://www.mamicode.com/筛选">
<input type="button" id="btn2" value="http://www.mamicode.com/恢复">
<script>:
//将标题带有"魏晨"的加背景色
$(function(){$("td:contains(‘魏晨‘)").css("background-color","red");});
//筛选按钮的处理
$(function(){
$("#btn1").click(function(){//单击处理
$("tr").hide(2000);//将所有tr隐藏
$("tr:contains(‘魏晨‘)").show(2000);//将带有魏晨的标题显示出来
});
});
//恢复按钮的处理
$(function(){
$("#btn2").click(function(){
//$("tr").show();//将所有tr显示
$("tr:hidden").show();//将所有隐藏的tr显示
});
});
2.多选框，点击全选实现全部选中或者全部不选的
选择器 属性选择器 表单元素选择器 表单对象属性选择器
<body>:
<input type="checkbox" id="checkall" name="checkall">全选<br/>
<input type="checkbox" name="loves" value="http://www.mamicode.com/旅游">旅游
<input type="checkbox" name="loves" value="http://www.mamicode.com/交友">交友
<input type="checkbox" name="loves" value="http://www.mamicode.com/打游戏">打游戏
<input type="checkbox" name="loves" value="http://www.mamicode.com/吃喝">吃喝<br>
<input type="button" id="btn1" value="http://www.mamicode.com/获取爱好"><br>
<span id="s1"></span>
<script>:
$(function(){
//为全选checkbox追加单击处理
$("#checkall").click(function(){
//单击处理逻辑,修改属性值
var flag=$("#checkall").attr("checked");//读取checkall选中状态值
//为name=loves的设置状态值
$(":checkbox[name=‘loves‘]").attr("checked",flag);
});
});
//为获取爱好按钮追加单击处理
$(function(){
$("#btn1").click(function(){
//获取选中的checkbox,返回的是jquery对象 本质是DOM对象
var $chks=$(":checkbox[name=‘loves‘]:checked");//获取信息
//循环访问$chks中的DOM对象
var str="";
for(var i=0;i<$chks.length;i++){
//$chks[i]是DOM对象,需要转换成jQuery对象才可以使用val()函数
str+=$($chks[i]).val();
}
$("#s1").html(str);//设置信息
});
});
3.属性函数 attr(); val(); text(); html();
<body>:
用户名:<input type="text" name="name" id="name"><br>
爱好:
<select id="love">
<option value="http://www.mamicode.com/旅游">旅游</option>
<option value="http://www.mamicode.com/上网">上网</option>
<option value="http://www.mamicode.com/聊天">聊天</option>
</select><br>
<input type="button" id="btn2" value="http://www.mamicode.com/获取信息"><br>
<div id="d1"><span>你好!我是纯的文本</span></div>
<div id="d2"></div>
<script>:
//获取信息按钮处理
$(function(){
$("#btn2").click(function(){
alert($("#name").val());//获取用户名
$("#name").val("vision");//修改用户名
alert($("#love").val());//获取爱好选中项的value
$("#love").val("看电视");//修改选中项
alert($("#d1").text());//获取纯文本
alert($("#d1").html());//获取元素中的html
//向设置id=d2的div中添加html信息
$("#d2").html("<font color=‘red‘>你好,我是纯爷们</font>");
//$("#d2").text("<font color=‘red‘>你好,我是纯爷们</font>");
});
});
<body>:
<input type="button" id="btn1" value="http://www.mamicode.com/切换"><br/>
<img id="image1" width="200" height="200" src="http://www.mamicode.com/images/001.jpg"/>
<script>:
//切换按钮的处理
$(function(){
//切换按钮的处理
$("#btn1").click(function(){
alert($("#image1").attr("src"));//获取元素的src属性值
//修改img的src属性值
//$("#image1").attr("width","300");
$("#image1").width(500);//修改宽
//$("#image1").attr("height","300");
$("#image1").height(500);//修改高
$("#image1").attr("src","images/002.jpg");
});
});
4.表格隔行变色 鼠标一上去变色 移开恢复原来颜色
addClass(值); removeClass(值);
mouseover(fn); mouseout(fn);
hover(over,out); toggle(f1,f2,f3....);
<body>:
<table border="1">
<tr><td>乐天派</td><td>2007-07-07</td></tr>
<tr><td>千方百计</td><td>2007-07-07</td></tr>
<tr><td>破晓</td><td>2007-07-07</td></tr>
<tr><td>分身情人</td><td>2007-07-07</td></tr>
<tr><td>疯人院</td><td>2007-07-07</td></tr>
</table>
<style>:
.t1 {background-color:#FFAACC;}
.t2 {background-color:#AACCFF;}
.t3 {background-color:#FFFF00;font-style:italic;}
<script>:
//隔行变色
$(function(){
$("tr:even").addClass("t1");
$("tr:odd").addClass("t2");
});
//鼠标移动背景色
$(function(){
//移上tr的处理
$("tr").mouseover(function(){
//为鼠标移上去的tr追加t3样式
$(this).addClass("t3");
}).mouseout(function(){//移开tr的处理,去除t3样式
$(this).removeClass("t3");
});
})
//利用hover事件函数实现=mouseover+mouseout
$(function(){
$("tr").hover(
function(){//over
$(this).addClass("t3");
},
function(){//out
$(this).removeClass("t3");
});
})
//toggle事件处理
$(function(){
$("#btn1").toggle(
function(){
alert("你敢点我,再点一次试试");
},
function(){
alert("再点,有种再点一次");
},
function(){
alert("再点一次,弄死你");
}
);
});
5.文档处理 $("字符串") append(对象) after(对象) remove();
<body>:
<input type="text" name="content" id="content"/><br/>
<input type="button" id="btn1" value="http://www.mamicode.com/添加"/><hr/>
城市:<select id="c1"></select>
<script>:
var cities = [
{"id":1,"name":"北京"},
{"id":2,"name":"上海"},
{"id":3,"name":"广州"}];
$(function(){
for(var i=0;i<cities.length;i++){
var opt_str = "<option
value=http://www.mamicode.com/‘"+cities[i].id+"‘>"+cities[i].name+"</option>";
var $opt = $(opt_str);//根据字符串创建一个option对象
$("#c1").append($opt);//将$opt添加到select内部末尾处
}
});
//添加按钮的单击处理
$(function(){
$("#btn1").bind("click",function(){
//将文本框信息得到,添加到select中
var value = http://www.mamicode.com/$("#content").val();//获取文本框信息
//非空检查
$("#s1").remove();//清除输入框后面的span
if(value =http://www.mamicode.com/=""){
//提示错误
var $s1 = $("<span id=‘s1‘>不能为空!</span>");
$("#content").after($s1);//将$s1放到输入框后面
return;
}
var opt_str = "<option>"+value+"</option>";//拼成option
var $opt = $(opt_str);//将opt_str变成jQuery文档对象
$("#c1").append($opt);//将$opt追加到select
});
});
6.文档处理 clone();
<body>:
<ul id="u1"><li>西瓜</li><li>苹果</li><li>草莓</li></ul>
<script>:
为水果项添加单击处理 利用live实现
$(function(){//为现有和将来生成的li元素添加单击处理
$("li").live("click",function(){
var $li = $(this).clone();
$("#u1").append($li);
});
});
7.显示与隐藏功能
<body>:
<input type="button" id="btn1" value="http://www.mamicode.com/隐藏(基本)">
<input type="button" id="btn2" value="http://www.mamicode.com/显示(基本)">
<input type="button" id="btn3" value="http://www.mamicode.com/切换(基本)"><br>
<input type="button" id="btn4" value="http://www.mamicode.com/隐藏(滑动)">
<input type="button" id="btn5" value="http://www.mamicode.com/显示(滑动)"><br>
<input type="button" id="btn6" value="http://www.mamicode.com/隐藏(淡入淡出)">
<input type="button" id="btn7" value="http://www.mamicode.com/显示(淡入淡出)"><br>
<img id="image1">
<script>:
//页面出现时,显示指定图片,设置大小.宽150,高200
$(function(){
$("#image1").attr("src","images/002.jpg").width(150).height(200);
});
//基本特效
$(function(){
//隐藏处理
$("#btn1").bind("click",function(){
$("#image1").hide(5000);//隐藏
});
//显示处理
$("#btn2").click(function(){
$("#image1").show(5000);//隐藏
});
//切换
$("#btn3").click(function(){
$("#image1").toggle(2000);
});
});
//滑动效果
$(function(){
//隐藏
$("#btn4").click(function(){
$("#image1").slideUp(2000);
});
//显示
$("#btn5").click(function(){
$("#image1").slideDown(2000);
});
});
//淡入淡出
$(function(){
//隐藏
$("#btn6").click(function(){
$("#image1").fadeOut(2000);
});
//显示
$("#btn7").click(function(){
$("#image1").fadeIn(5000);
});
});
8.animate()函数
(1)<body>:
<input type="button" id="btn1" value="http://www.mamicode.com/放大"><br>
<div id="d1">你好,要学好编程,需要不断学习!</div>
<script>:
$(function(){
$("#btn1").click(function(){
//经过5秒时间字体放大到10em
$("#d1").animate({fontSize:‘10em‘},5000)
.animate({fontSize:‘1em‘},5000);
});
});
(2)<body>:
<input type="button" id="btn1" value="http://www.mamicode.com/开始运动"><br>
<div id="d1" style="position: relative">
<img src="http://www.mamicode.com/images/002.jpg" border="5" width="50" height="50">
</div>
<script>:
$(function(){
$("#btn1").click(function(){
f1();
setInterval(f1,800);
});
});
function f1(){
$("#d1").animate({left:"500px"},200)
.animate({top:"200px"},200)
.animate({left:"5px"},200)
.animate({top:"5px"},200);
}
9.工具函数 $.trim(str) $.each(集合,fn)
<body>:
<div>hello jQuery </div>
<div>tom</div>
<div>rose</div>
<div> jack</div><br>
<ul id="u1"></ul>
<script>:
//将div中的内容,生成li添加到ul列表中
$(function(){
$.each(
$("div"),//div元素集合
function(i,div){//i:元素索引,div:循环的当前元素(DOM对象)
//将div中的文本获取,封装生成li对象
var txt=$(div).text();//获取文本
txt=$.trim(txt);//去掉空格
var $li=$("<li>"+txt+"</li>");//编程jQuert对象
$("#u1").append($li);//将li对象添加到ul内部
});
});
10.not(选择器) find(选择器) children(选择器) parent() siblings()
(1)
<style>:
.h1 {background-color:#00BBBB;}
.s1 {background-color:#FFAABB;}
.s2 {background-color:#AAFFBB;}
.selected {background-color:#AABBCC;}
<body>:
<table>
<tr class="h1">
<td></td><td>姓名</td><td>性别</td><td>年龄</td>
</tr>
<tr>
<td><input type="radio" name="id"></td>
<td>张三</td><td>男</td><td>20</td>
</tr>
<tr>
<td><input type="radio" name="id"></td>
<td>张三</td><td>男</td><td>20</td>
</tr>
<tr>
<td><input type="radio" name="id"></td>
<td>张三</td><td>男</td><td>20</td>
</tr>
<tr>
<td><input type="radio" name="id"></td>
<td>张三</td><td>男</td><td>20</td>
</tr>
</table>
<script>:
//隔行变色
$(function(){
//选择index>0的tr
//$("tr:gt(0):even").addClass("s1");//奇数行设置s1样式
//$("tr:gt(0):odd").addClas("s2");//偶数行设置s2样式
//选择所有tr,排除class="h1"
$("tr:not(.h1):even").addClass("s1");
$("tr:not(.h1):odd").addClass("s2");
});
//选中效果
$(function(){
//如果有radio选中,将当前行设置selected样式
$(":radio:checked").parent().parent().addClass("selected");
//添加tr单击事件,第一行不加
$("tr:not(.h1)").click(function(){
$("tr").removeClass("selected");//清除tr选中样式
//为选中行设置selected样式,其他行清除selected样式
$(this).addClass("selected").siblings().removeClass("selected");
$(this).find(":radio").attr("checked",true);//将当前行的radio选中
});
});
(2)
<style>:
#menu{width:300px;}
.has_children{background:#555;color:#fff;cusor:pointer;}
.highlight{color:#fff;background:green;}
div{padding:0;}
div a{background:#888;display:none;float:left;width:300px;}
<body>:
<div id="menu">
<div class="has_children">
<span>用户管理</span>
<a>添加用户</a><a>更新用户</a>
<a>删除用户</a><a>查询用户</a>
</div>
<div class="has_children">
<span>权限管理</span>
<a>创建权限</a><a>更改权限</a>
<a>分配权限</a><a>浏览权限</a>
</div>
<div class="has_children">
<span>产品管理</span>
<a>添加产品</a><a>删除产品</a>
<a>浏览产品</a><a>更新产品</a>
</div>
</div>
<script>:
$(function(){
//为span添加单击处理
$(".has_children span").click(function(){
//将span的兄弟元素a显示
$(this).siblings().show();
//隐藏其他div的a元素
$(this).parent().siblings().find("a").hide();
//为span父元素div添加hightlight样式
$(this).parent().addClass("highlight");
//将其他div的highlight样式取消
$(this).parent().siblings().removeClass("highlight");
});
});
11.部门员工切换隐藏显示
<style>:
.dept{background-color:#AAFFCC;}
.emp{background-color:#FFCCFF}
<body>:
<table>
<tr class="dept" id="1">
<td colspan="3">开发部</td>
</tr>
<tr class="emp e1">
<td>jack</td><td>男</td><td>5000</td>
</tr>
<tr class="emp e1">
<td>tom</td><td>男</td><td>4000</td>
</tr>
<tr class="dept" id="2">
<td colspan="3">测试部</td>
</tr>
<tr class="emp e2">
<td>tom</td><td>女</td><td>4000</td>
</tr>
<tr class="emp e2">
<td>tom</td><td>女</td><td>3500</td>
</tr>
<tr class="dept" id="3">
<td colspan="3">销售部</td>
</tr>
<tr class="emp e3">
<td>lily</td><td>女</td><td>6000</td>
</tr>
<tr class="emp e3">
<td>sisi</td><td>女</td><td>6500</td>
</tr>
</table>
<script>:
$(function(){
//为部门tr添加单击事件
$(".dept").click(function(){
//将员工信息隐藏或显示
var id=this.id;//获取部门tr的id属性
var express=".e"+id;//拼成一个类选择器".e1",".e2"
$(express).toggle();//按".e1"格式选择员工tr,执行切换工作
});
});
12.颜色变换
<body>:
<ul id="skin">
<li id="skin_0" title="灰色" class="selected">灰色</li>
<li id="skin_1" title="紫色" >紫色</li>
<li id="skin_2" title="红色" >红色</li>
<li id="skin_3" title="天蓝色" >天蓝色</li>
<li id="skin_4" title="橙色" >橙色</li>
<li id="skin_5" title="淡绿色" >淡绿色</li>
</ul>
<div id="div_side_0">
<div id="news">
<h1 class="title">体育新闻,南非世界杯,冷门不断</h1>
</div>
</div>
<div id="div_side_1">
<div id="game">
<h1 class="title">娱乐新闻,赵薇产后复出,片酬大涨</h1>
</div>
</div>
<script>:
<script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.4.4.js"></script>
<script type="text/javascript">
$(function(){
//li添加单击处理
$("#skin li").click(function(){
//将当前li设置成selected,其他的取消selected
$(this).addClass("selected").siblings().removeClass("selected");
//引入li相应的css样式文件
var file="css/"+this.id+".css";
$("#cssfile").attr("href",file)
});
});
</script>
<link>:
<link href="http://www.mamicode.com/css/default.css" rel="stylesheet" type="text/css" />
<link href="http://www.mamicode.com/css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" />
13.图片变大
<body>:
<ul>
<li>
<a href="http://www.mamicode.com/images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod">
<img src="http://www.mamicode.com/images/apple_1.jpg" alt="苹果 iPod" />
</a>
</li>
<li>
<a href="http://www.mamicode.com/images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano">
<img src="http://www.mamicode.com/images/apple_2.jpg" alt="苹果 iPod nano"/>
</a>
</li>
<li>
<a href="http://www.mamicode.com/images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone">
<img src="http://www.mamicode.com/images/apple_3.jpg" alt="苹果 iPhone"/>
</a>
</li>
<li>
<a href="http://www.mamicode.com/images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac">
<img src="http://www.mamicode.com/images/apple_4.jpg" alt="苹果 Mac"/>
</a>
</li>
</ul>
<script>:
$(function(){
//为a元素添加mouseover
$("img").mouseover(function(e){
//动态添加一个div,div中显示大图
//获取当前a元素的href值
var image_url = $(this).parent().attr("href");
var $div = $("<div id=‘tooltip‘><img src=http://www.mamicode.com/‘"+image_url+"‘/></div>");
//设置$div样式,指定显示的位置left,top
$div.css("left",e.pageX);//设置div显示的left值
$div.css("top",e.pageY);//设置div显示的top值
$("body").append($div);//将div添加chuch到页面中
$div.show();//将div大图显示
}).mouseout(function(){//鼠标移开mouseout事件处理
$("#tooltip").remove();//将动态添加的div删除
alert("affga");
});
});
<style>:
/* tooltip */
#tooltip{
position:absolute;
}
jQuery基础知识