【java失业择业中】失业第四天:准备面试
2013-08-06 17:58
190 查看
1.jQuery基础
学好jquery的一个基础条件是学好css层叠样式,因为很多时候这2个是一块配合使用的。
页面中很多需要jquery实现的效果只是通过jquery的选择器,选中要操作的元素,添加一些css特效而已。当然jquery也有一些自己的特效,像fadeIn(),fadeOut()等。
1. 基础实例:
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
2. jQuery选择器:
2.1 jQuery元素选择器
使用css选择器来选取HTML元素
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
2.2 jQuery属性选择器
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
2.3 jQuery CSS选择器
$("p").css("background-color","red");
粘贴一段昨儿看书敲的网络相册的代码,实现相册翻页的功能
学好jquery的一个基础条件是学好css层叠样式,因为很多时候这2个是一块配合使用的。
页面中很多需要jquery实现的效果只是通过jquery的选择器,选中要操作的元素,添加一些css特效而已。当然jquery也有一些自己的特效,像fadeIn(),fadeOut()等。
1. 基础实例:
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
2. jQuery选择器:
2.1 jQuery元素选择器
使用css选择器来选取HTML元素
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
2.2 jQuery属性选择器
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
2.3 jQuery CSS选择器
$("p").css("background-color","red");
粘贴一段昨儿看书敲的网络相册的代码,实现相册翻页的功能
var currentSre; var bMargin; //单击”上一幅“链接 $("#prev").click(function(){ currentSre = $("#showPic").find("img").attr("src");//目前图片的地址 //根据目前图片地址获取上一幅图片的地址 var iNum = parseInt(currentSre.substring(currentSre.lastIndexOf("/") + 1 , currentSre.lastIndexOf(".jpg"))) ; var iPre = (iNum == 1)?iPicNum:(iNum - 1); var preSrc = "photo/" + iPre.toString() + ".jpg"; $("#showPic").find("img").attr("src",preSrc); bMargin = $("div:has(img[src$=/"+iPre.toString()+".jpg])").hasClass("ls"); //根据缩略图的属性对应调整大图的位置 if(bMargin) $("#showPic").find("img").css("margin-top","170px"); else $("#showPic").find("img").css("margin-top","0px"); }); //单击"下一幅"链接 $("#next").click(function(){ currentSre = $("#showPic").find("img").attr("src");//目前图片的地址 //根据目前图片地址获取上一幅图片的地址 var iNum = parseInt(currentSre.substring(currentSre.lastIndexOf("/") + 1 , currentSre.lastIndexOf(".jpg"))) ; var iPre = (iNum == iPicNum)?1:(iNum + 1); var preSrc = "photo/" + iPre.toString() + ".jpg"; $("#showPic").find("img").attr("src",preSrc); bMargin = $("div:has(img[src$=/"+iPre.toString()+".jpg])").hasClass("ls"); //根据缩略图的属性对应调整大图的位置 if(bMargin) $("#showPic").find("img").css("margin-top","170px"); else $("#showPic").find("img").css("margin-top","0px"); });
相关文章推荐
- 【java失业择业中】失业第四天:准备面试
- 【java失业择业中】失业第四天:准备面试
- 【java失业择业中】失业第三天:准备面试
- 【java失业择业中】失业第三天:准备面试
- 【java失业择业中】失业第二天:准备面试
- 【java失业择业中】失业第二天:准备面试
- Java面试准备
- 【java失业择业中】失业第一天:华为PM
- 回答阿里社招面试如何准备,顺便谈谈对于Java程序猿学习当中各个阶段的建议
- 如何准备BAT技术面试答案(中)——Java研发方向
- Java面试准备十二:存储过程
- Java面试准备十一:JDBC
- Java面试准备八:Java基础
- Java面试准备十四:数据库——MySQL四种事务隔离级别和锁的关系
- Java面试准备之Java基础
- java web轻量级开发面试教程摘录,java web面试技巧汇总,如何准备Spring MVC方面的面试
- 最近在准备面试,总结了几个java中面向对象的几个问题,问题本事还不够全面,要想知道还是要自己去找,但是在面试上应该是没多大问题了
- 准备java面试资料
- 为面试准备的超经典的Java面试题,总会碰到那几道
- Java面试前的准备