Heim >Web-Frontend >js-Tutorial >JQuery Study Notes 学习笔记(一)_jquery

JQuery Study Notes 学习笔记(一)_jquery

WBOY
WBOYOriginal
2016-05-16 18:22:021126Durchsuche

1. 使用jquery
  到jquery.com下载jquery.js当前版本是1.4.2
  新建一个html页面

复制代码 代码如下:




  
  
   <script type="text/javascript"><BR>    <SPAN style="COLOR: #ff0000"> $(document).ready(function(){<BR><SPAN style="COLOR: #ff0000">       $("a").click(function(event){<BR><SPAN style="COLOR: #ff0000">         alert("As you can see, the link no longer took you to jquery.com");<BR><SPAN style="COLOR: #ff0000">         event.preventDefault();<BR><SPAN style="COLOR: #ff0000">       });<BR><SPAN style="COLOR: #ff0000">     });<BR>     <BR>   </script><br><br><br>   <a href="<A%20class=" external free>http://jquery.com/</a>">jQuery<br><br> <br>

代码解释:
  $(document).ready(function(){...})在页面加载完时添加function()函数内容
  $("a").click(function(event){...})设置a标签的click事件函数
  event.preventDefault()阻止原事件执行
  代码功能:点击标签只弹出alert信息后,页面并不跳转到http://jquery.com/。
2. 添加和移除HTML class
  首先在中添加一些样式,例如:
复制代码 代码如下:



在script中使用addClass和removeClass来添加和移除HTML class,例如:
复制代码 代码如下:

$("a").addClass("test");//所有a标记粗体
$("a").removeClass("test");//取消所有a标记粗体

3.特效
  jQuery提供了一些非常方便的特效
复制代码 代码如下:

$("a").click(function(event){
event.preventDefault();
$(this).hide("slow");
});

点击标签后,标记慢慢消失
4.回调与函数
  无参数回调
复制代码 代码如下:

$.get('myhtmlpage.html', myCallBack);

带参数回调
复制代码 代码如下:

$.get('myhtmlpage.html', function(){
myCallBack(param1, param2);
});
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn