jQuery
标签(空格分隔):
jQuery 特点
- 快速获取文档元素
- 提供漂亮的页面动态效果
- 创建AJAX无刷新网页
jQuery 选择器
* | $("*") | 所有元素 |
---|---|---|
#id | $("#lastname") | id=“lastname” 的元素 |
:first | $(“p:first”) | 第一个 元素 |
:last | $(“p:last”) | 最后一个 元素 |
:input | $(":input") | 所有 元素 |
:text | $(":text") | 所有 type=“text” 的 元素 |
<form>
<input type="text" name="1" id="" value="1">
<input type="password" name="2" id="" value="2">
<input type="text" name="3" id="" value="3">
<input type="submit" name="4" id="" value="4">
</form>
<script>
var $title = $("#title");
//console.log($title);
var $lis = $("ul>li");
//console.log($lis);
//console.log($lis.first());
$lis.each(function(index,element){
//console.log(element.innerHTML);
});
var $inputs =$(":input");
$inputs.each(function(index,element){
console.log(element.type);
});
var $input4 = $(":input[name=4]");
//console.log($input4);
</script>
事件
live事件
jQuery 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效。
轮播代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播效果</title>
<script src="js/jquery-1.8.3.min.js"></script>
<style>
*{
margin: 0 auto;
padding: 0;
}
#father{
width: 320px;
height: 180px;
overflow: hidden;
position: relative;
}
#ul1{
width: 1280px;
height: 180px;
position: absolute;
top: 0;
left: 0;
}
#ul1>li{
width: 320px;
height: 180px;
float: left;
}
#ul2{
width: 108px;
height: 36px;
position: absolute;
bottom: 5px;
right: 5px;
}
#ul2>li{
width: 26px;
height: 26px;
margin: 5px;
float: left;
line-height: 26px;
font-size: 18px;
color: white;
text-align: center;
cursor: pointer;
border-radius: 50%;
background-color: rgba(0,0,0,0.6);
}
#son1{
width: 26px;
height: 26px;
position: absolute;
top: 77px;
left: 0;
background-color: rgba(0,0,0,0.5);
line-height: 26px;
font-size: 15px;
color: white;
text-align: center;
cursor: pointer;
}
#son2{
cursor: pointer;
width: 26px;
height: 26px;
position: absolute;
top: 77px;
right: 0;
background-color: rgba(0,0,0,0.5);
line-height: 26px;
font-size: 15px;
color: white;
text-align: center;
}
li{
list-style-type: none;
}
</style>
</head>
<body>
<div id="father">
<ul id="ul1">
<!--最后多出第一张图片-->
<li><img src="1.jpg" width="320" height="180" /></li>
<li><img src="2.jpg" width="320" height="180" /></li>
<li><img src="3.jpg" width="320" height="180" /></li>
<li><img src="1.jpg" width="320" height="180" /></li>
</ul>
<ul id="ul2">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div id="son1"><</div>
<div id="son2">></div>
</div>
<script>
var isAnimate = false;
var playTime = null;
var points = [0,-320,-640,-960];
father.onmouseover = stop;
father.onmouseout = play;
$("#son1").click(function(){
if(!isAnimate){
isAnimate=true;
var leftPont = parseInt($("#ul1").css("left"));
if(leftPont==0)
$("#ul1").css("left","-960px");
$("#ul1").animate({"left":parseInt($("#ul1").css("left"))+320+"px"},1000,function(){
isAnimate = false;
})
}
});
$("#son2").click(function(){
myAnimate();
});
function myAnimate(toPoint){
if(!isAnimate){
isAnimate=true;
if(parseInt($("#ul1").css('left'))-320<-960)
$("#ul1").css("left","0");
if(toPoint==null)
toPoint=parseInt($("#ul1").css("left"))-320;
$("#ul1").animate({'left':toPoint+'px'},1500,function(){isAnimate=false;});
}
}
$("#ul2>li").each(function(index,element){
$(element).click(function(){
myAnimate(points[index])
});
});
function play(){
playTime = setInterval(function(){
myAnimate();
}),2000
}
function stop(){
if(playTime!=null){
clearInterval(playTime);
}
}
play();
</script>
</body>
<html>
ajax
jQuery 库拥有完整的 Ajax 兼容套件。其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据
- 返回值:XMLHttpRequestjQuery.get(url, [data], [callback], [type])
url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式,xml, html, script, json, text, _default。 - 返回值:XMLHttpRequestjQuery.post(url, [data], [callback], [type]) 同上
$("#out").click(function(){
$.post("/web05/seletLikeCommodityServlet?c_name="+$("#in").val(), function(data){
//console.log(data);
for(var i=0;i<data.length;i++){
$("div:first").append($("<p>").html(data[i].c_name));
}
}, "json")
});