网站建设资讯

NEWS

网站建设资讯

JQuery基本选择器

最近看看JQuery,整理下学习的内容

创新互联公司拥有一支富有激情的企业网站制作团队,在互联网网站建设行业深耕10年,专业且经验丰富。10年网站优化营销经验,我们已为千余家中小企业提供了做网站、成都网站设计解决方案,按需求定制网站,设计满意,售后服务无忧。所有客户皆提供一年免费网站维护!

jsp页面

<%@ page language="java" contentType="text/html; charset=GB18030"  
pageEncoding="GB18030"%>  
  
  
  
  
  
  
  
div,span{  
width: 140px;  
height: 140px;  
margin: 20px;  
background: #9999CC;  
border: #000 1px solid;  
float:left;  
font-size: 17px;  
font-family:Roman;  
}  
div.mini{  
width: 30px;  
height: 30px;  
background: #CC66FF;  
border: #000 1px solid;  
font-size: 12px;  
font-family:Roman;  
}  
  
Insert title here  
  
  

  
  
 的所有元素的背景色为 #00FFFF" id="b2" />  
  
  
元素和 id 为 two 的元素的背景色为 #3399FF" id="b5" />  
  

天气冷了

天气又冷了

id为one
id为two class是 mini class是 mini
class是 one class是 mini
class是 mini class是 one class是 mini01 class是 mini
动画
span span

Js代码

$(document).ready(function(){  
//  
$("#b1").click(function(){ //为b1按钮添加点击事件  
$("#one").css("background", "#0000FF");  
});  
//  
$("#b2").click(function(){  
$("div").css("background", "#0000FF");  
});  
//  
$("#b3").click(function(){  
$(".mini").css("background", "#0000FF");  
});  
//  
$("#b4").click(function(){  
$("*").css("background", "#0000FF");  
});  
//  
$("#b5").click(function(){  
$("span,#two").css("background", "#0000FF");  
});  
//   
$("#b6").click(function(){  
$("#mover").toggle("slow", function(){  
//动画结束后的回调函数  
alert("动画结束");  
});  
});  
});


分享文章:JQuery基本选择器
文章源于:http://cdweb.net/article/jhhdcg.html