JQuery常用

zengshaotao

浏览: 787999 次
性别:
来自: 上海

最近访客更多访客>>

njdccy

AK1343794853

chehaoj

jstl1point0

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JQuery

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="JQuery/jquery-1.6.1.min.js"></script>
<title>Insert title here</title>
<style type="text/css">
   div.animate{
  width:140px;
  height:140px;
  margin:5px;
  background:#aaa;
  border:#000 1px solid;
  position:relative;
  cursor:pointer;
  }
</style>
</head>
<script type="text/javascript">

var selfDefinFun = {
  yes:function(){
   alert("this is the self-succe function!");
  },
  no:function(){
   alert("this is the self-error function");
  }
};
//selfDefinFun.yes();

function Work(task,person){
this.task = task;
this.person = person;
}
Work.prototype.display = function(){
return this.person + " is doing " + this.task;
};

function Sched(workArr){
this.work = workArr;
}
Sched.prototype.display = function(){
var str = "";
for(var i = 0;i<this.work.length;i++){
str+=this.work[i].display()+"\n";
}
return str;
};

var disStr = new Sched([new Work("task1","person1"),new Work("task2","person2")]);
//alert(disStr.display());

$(function(){

//$("ul.ulid :only-child");这样写，就是默认ul的子元素是li，因为它们存在着包含的关系
//var $ulObjArr = $("ul.ulid li:only-child");//注意之间不能有空格 ok
//alert($ulObjArr.length);ok

//alert($ulObjArr.html());ok

$("#initTest").click(function(){
  alert("fffff");
});
//$("#initTest").trigger("click");ok

var $p = $("P");
//只获得第一个元素
//var title = $p.attr("title");
$p.each(function(index,ele){

  //这里ele等价于this
  //alert(index+"--"+$(this).attr("title"));

  //因为attr是jquery的方法，所以必须是jquery的对象才能调用
  //这里ele代表的是dom对象，需要用$()进行包装，转换成jquery对象
  //alert(index+"--"+$(ele).attr("title"));

});

$('ul li').click(function(){
  //clone方法里的true参数表示复制出的节点也有原节点的参数
  $(this).clone(true).appendTo($("#clone"));
});

//checkbox也可以有value，设置的值一致时被选中
$(":checkbox").val(['c2','c4','c5']);
//只要是非空值或者非false，就相当于true，即选中
$("#re").attr("checked","dfdd");

$("span").bind("click",function(event){
  var clue = $("#msg").html()+"<p>内层span元素被点击</p>";
  $("#msg").html(clue);
  //停止冒泡行为，当然也可以return false
  //使得事件的传播特性停止，包括事件本身的默认行为
  event.stopPropagation();
});

$("#content").bind("click",function(){
  var clue = $("#msg").html()+"<p>外层div元素被点击</p>";
  $("#msg").html(clue);
});

$("body").bind("click",function(){
  //var clue = $("#msg").html()+"<p>body元素被点击</p>";ok
  //$("#msg").html(clue);ok

});

$("a").click(function(event){
   //alert(event.type);//获取事件类型
   //alert(event.target.href);
   $(".animate").toggle();
   return false;//阻止链接跳转
});

//不能对本身要显示和隐藏的元素进行事件绑定
//否则隐藏之后无法再次触发事件
//toggle是对连续的单击动作进行响应，并循环执行绑定的函数
$("#bindmul").toggle(function(){
  //$(".animate").hide();修改多种样式高度，宽度，和不透明度
  //$(".animate").fadeIn();只修改透明度
  //$(".animate").hide(1000);
  //$(".animate").slideDown();//只改变高度
},function(){
  //$(".animate").show();
  //$(".animate").fadeOut();
  //$(".animate").show(1000);
  //$(".animate").slideUp();
});

$("#bindmul").bind("click",function(){
  //alert("绑定的第一个方法");
  $(".animate").animate({left:"500px"},3000)
  .animate({height:"200px"});
}).bind("click",function(){
  //alert("绑定的第二个方法");
});

$(".animate").hover(function(){
  //$(this).stop().animate({height:"200px"},1000)//如果在此时触发了移出事件
        // .animate({width:"200px"},1000);//执行的是本行的动画，而不是光标移出的事件动画

  $(this).stop(true).animate({height:"200px"},1000)//如果在此时触发了移出事件
         .animate({width:"200px"},1000);//执行的是本行的动画，而不是光标移出的事件动画
},function(){
  //$(this).stop().animate({height:"50px"},1000)
          // .animate({width:"50px"},1000);

  $(this).stop(true).animate({height:"50px"},1000)
     .animate({width:"50px"},1000);
});

    $('[name=item]:checkbox:checked').each(function(){
      //对每一个name=item的选中复选框进行操作
    });
});

</script>
<body>

<hr>

<ul class="ulid">ddd
<li>31fdfdf</li>
</ul>

<input id="initTest" type="button" value="模拟事件" />
<p title="p1">p1</p>
<p title="p2">p2</p>
<hr>
<div id="content">
  外层div元素<br>
       <span>内层span元素</span>
   <br>
   外层div元素
</div>
<div id="msg"></div>
<a href="www.baidu.com">链接调整</a>
<input type="button" id="bindmul" value="绑定多个方法测试">
<div class="animate"></div>
</body>
</html>

分享到：

select 手动构造option的选中状态 | 前端脚本练习

2013-01-10 13:20
浏览 958
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JQuery常用

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JQuery常用

评论

发表评论

相关推荐

input 隐藏 方法传入字符串参数

JQuery 之empty and remove

easyui dialog隐藏与显示

cookie操作 JQuery

表单参数一并提交

JQuery解析XML

表格动态展示与下钻

JQuery tree的使用

兄弟frame之间控制页面

easy ui 树的常用功能

attr（），css()

$.browser.msie为空

jOrgChart 后端取数--递归构建map

jOrgChart 后端取数--手工构建map

jOrgChart横向的组织机构树--手工构造json数据

jOrgChart的调试模式

jOrgChart横向的组织机构数插件

easy ui data grid

JQuery easy ui 图标扩展

获取页面高度

最近访客更多访客>>

input 隐藏方法传入字符串参数