1.用事件触发表单提交,取代表单中的submit按钮

$(元素).事件(function(){
    $(表单ID).submit();
});

2.控制表单中原有的submit按钮

$(表单ID).submit(function(){
    if(条件){
        return true;
    }else{
        return false;
    }
});

阻止执行默认事件
$(表单ID).submit(function(event){
    event.preventDefault();
});
Tags:

<html>
<head>
<title>on</title>
<style type="text/css">
.fur,.furC{width:400px;border:1px solid #000;padding:5px;margin:5px;}
</style>
</head>
<body>
<h1>向元素附加事件-on方法</h1>

<hr/>
<br/>
<div id="fuDiv"><div class="furC">点击,创建新元素!</div></div>
<br/><br/>
<hr/>
<br/>
<input type="button" id="offOn" value="移除方法"/>
<br/>
<hr/>
<pre>
☆1.7后live被移除,替代方法为on,用于向创建的元素添加事件,同样可以替代bind,delegate方法

☆为新创建的元素附加方法时,语法为:
    $(document).on("事件","元素",function(){
  ...
  });
  
☆如果不向新创建元素绑定方法,用法可类似于bind方法

☆解绑元素上的事件,如:
    $(document).off("事件","元素");  
  
</pre>
</body>
</html>
<script type="text/javascript" src="./jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function(){    
   $(".furC").on("click",function(){
      $("#fuDiv").append('<div class="fur">这新创建的元素,点击,该元素将被移除</div>');
  });
  $(document).on("click",".fur",function(){
      $(this).remove();
  });
  $(document).on("click","#offOn",function(){
      $(document).off("click",".fur");
  });
});
</script>
Tags:
<html>
<head>
<title>bind</title>
<style type="text/css">
ul{list-style-type:none;}
li{float:left;padding:5px 10px;border:1px solid #000;cursor:pointer;}
</style>
</head>
<body>
<h1>向元素附加事件</h1>
<hr/>
<label for="textInput">文本输入框</label>
<input type="text" id="textInput"/>
<input type="button" id="btInput" value="submit">
<hr/>
<ul>
    <li>导航一</li>
  <li>导航二</li>
  <li>导航三</li>
  <li>导航四</li>
  <li>导航五</li>
</ul>
<br/><br/>
<hr/>
<pre>
1.bind方法接受两个参数,第一个参数是要附加的事件类型,以字符串格式传入;
第二个参数是回调函数,将在事件触发时执行,该函数可以是匿名函数,也可以是具体函数。如:
  $(element).bind("事件:如单击click",function(){
      匿名函数内需执行的代码;
  });
  
2.同时附加多个事件,如:
  $(element).bind({
  事件1:function(){
      ...
  },
  事件2:function(){
      ...
  }
  });
  
3.快捷附加一个事件,如:
    $(element).事件名(function(){
     ...
  });
  
4.解绑元素上的事件,如:
    $(element).unbind("可选事件名,留空则解绑所有事件");  
</pre>
</body>
</html>
<script type="text/javascript" src="./jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function(){
    $("#textInput").val('请输入文本内容!');
    $("#textInput").bind({
  blur:function(){
      var textContent=$(this).val();
    if(textContent==""){
          $(this).val('请输入文本内容!');
    }
  },
  focus:function(){
      $(this).val('');
  }
  });

  $("#btInput").bind("click",function(){
      var textContent=$("#textInput").val();
    alert(textContent);
  });
  
  $("li").bind({
  mouseover:function(){
      $(this).css("background-color","#000");
    $(this).css("color","#fff");
  },
  mouseout:function(){
      $(this).css("background-color","#fff");
    $(this).css("color","#000");
  }  
  });
});
</script>
Tags:


<html>
<head>
<title>ready</title>
</head>
<body>
<h1>先加载再执行</h1>
<pre>
1.使用ready方法传递函数,如:
    $(document).ready(functionName);
    function functionName(){
        ...
    }
  
2.函数可以是匿名函数或具体函数,如:
    $(document).ready(function(){
      ...
  });
  
3.省略ready方法的变形写法,如:
    $(function(){
      ...
  });
4.该方法可以重复使用。
</pre>
</body>
</html>
<script type="text/javascript" src="./jquery-1.9.1.js"></script>
<script type="text/javascript">
//$(document).ready(myAlert);
//$(myAlert);
//function myAlert(){
//   alert("good");
//}
//$(function(){
//    alert("hello");
//});
$(document).ready(function(){
    alert("hello world!");
});
$(function(){
    alert("hello js!");
});
</script>

Tags:

jQuery学习笔记(1)

seatop , 2011年7月23日 , 计算机与网络 , 评论(0) , 引用(0) , 阅读(1682) , Via 本站原创
jQuery是什么

jQuery是一个比较容易学习使用的javasript函数库(开发框架),所以我选择了她。

Highslide JS


她由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入,包括来自德国的Jörn Zaefferer,罗马尼亚的Stefan Petre等等。jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。

jQuery能做什么

HTML元素的选取与操作,CSS操作,HTML事件,JS特效与动画,AJAX等等

在哪儿下载jQuery

推荐官网下载 http://docs.j...oading_jQuery

怎样引用jQuery

与引用外部JS文件一样,在
<head></head>
标签内使用script标签,如:
<script  type="text/javascript" src="jquery.js"></script>


一个简单的、基本的例子

建议使用外部JS文件,这样便于修改和管理。

在example.js(也需在html文件中引用的)中写如下代码:
$(document).ready(function(){
          $("p.example").click(function(){
                 $(this).hide();
          });
});


在example.html中有如下代码:
<p class="example">点击此处就会消失!</p>


这个例子的效果是,鼠标点击文字后,这段文件将隐藏。

当中的
$(document).ready()
$("p.example").click()
$(this).hide()

代表着jQuery的语法:什么(对象).怎么样(操作、动作)

怎样选取对象?$(对象名),document对象为每个载入浏览器的HTML文档,是window对象的一部分;this对象代表当前HTML对象;"p.example"为class名为example的p对象。

ready()函数为文档完全加载后才发生的事件,一般都应该使用。它仅能用于当前文档,所以无需选择器,因此有三种语法:
1.$(document).ready(function)
2.$().ready(function)
3.$(function)


click(function)事件为点击元素后发生。

hide(speed,callback)为jQuery的效果方法,如果被选元素已被显示,则隐藏该元素。speed为隐藏的速度,可选,默认为“0”,可为毫秒数,如hide(1000),"slow”,"normal","fast"。callback,可选,hide函数执行完毕后要执行的函数。

与hide函数相对的就是show函数,它们的参数及用法相同。
Tags: ,
分页: 1/1 第一页 1 最后页 [ 显示模式: 摘要 | 列表 ]
百度搜索
最新日志
主机推荐
热门Tags