jquery学习随笔（一）

最新推荐文章于 2023-03-01 09:06:34 发布

xxjoy_777

最新推荐文章于 2023-03-01 09:06:34 发布

阅读量665

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/xxjoy_777/article/details/39052191

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.基本的语法

实例中的所有函数基本上都是以这样的形式存在的。如下所示：

<pre name="code" class="html">

$(document).ready(function(){

--- jQuery functions go here ----

});

需要注意这段代码的写法，首先$符号代表了jquery，$()括号中的东西是选择器，ready()是一个action，即对元素执行的操作。几乎所有的jquery都是这样的基本语法来实现的。

即

$(selector).action()

选择器有很多的表示方法，如：

$("p").hide(); 将隐藏所有p元素；

$(".test").hide(); 将隐藏所有class为test的元素

$("#test").hide();将隐藏所有id为test的元素

$(this).hide();将隐藏当前元素。

这边几个例子的选择器各不相同，但是action都是hide()。还有其他的action,比如ready()，click(),focus()等等。

2.一段jquery代码。

通过一段jquery代码来认识jquery,如下：

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
</script>
</head>


<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<button type="button">Click me</button>
</body>

</html>

这段代码的意思浅显易懂，就是当点击按钮click me的时候，段落的内容会自动隐藏。我们主要关注的是它的语法和结构。首先，注意每个括号后面都要以分号结束，其次，function(){}后面跟的是花括号。花括号里面写代码，而且是层层嵌套的。千万不能乱了。事实上，只要记住（）和{}都是成对出现的，每次都成对写出来，就不会乱的。
3.选择器selector的介绍。
具体的选择器可以参考：http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
4.触发事件的介绍
关于触发事件可以参考：http://www.w3school.com.cn/jquery/jquery_ref_events.asp
5.Jquery命名冲突
我们一般用美元符号$来代表Jquery，但是有时候其他的语言也会有这个符号，如果我们在一个html页面中同时用了jquery和另外一种也使用美元符号的语言的话，将会造成混淆，这时候，我们需要把Jquery的符号重新命名。使用以下代码可以做到这点。
var jq=jQuery.noConflict();这句话可以把美元符号换成jq。
6.jquery编程的原则。
第一，将所有的代码置于事件处理函数中，如上面的$("button").click()事件。
第二，将事件处理函数置于文件就绪事件处理函数中，如上面的$("document").ready()函数。
第三，如果有命名冲突，需要进行重命名。
第四，把jquery代码置于单独的js文件中。
7.jquery的效果
接下来我们来看看jquery的效果。
显示隐藏效果

<!doctype html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $("#show").click(function(){
     $("p").show();
   });
   $("#hide").click(function(){
     $("p").hide();
   });
});
</script>
</head>
<body>
<p>this is a paragraph</p>
<button id="show" type="button">show</button>
<button id="hide" type="button">hide</button>
</body>
</html>

很简单，单击show则显示，单击hide则隐藏。

Toggle()方法是上述二者的综合，当元素处于隐藏时会使他显示，否则会使他隐藏。

淡入淡出效果

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
});
</script>
</head>

<body>
<p>演示带有不同参数的 fadeIn() 方法。</p>
<button>点击这里，使三个矩形淡入</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>

上述代码演示了淡入，很容易理解，同样的，fade类的方法也具有speed和callback两个参数，此处不再赘述。值得注意的是，这三个矩形框刚开始的display是none，就是隐藏的。所以才能淡入。

淡出的与淡入类似，不再赘述。

fadeToggle（）与上面讲的Toggle()方法类似，已经淡入的元素会淡出，已经淡出的元素会淡入。

fadeTo()方法允许渐变为给定的透明度，它的语法是fadeTo(speed,opacity,callback);

如：

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

滑动效果

jquery滑动元素可以使元素上下滑动，它有三种方法sideUp(),sideDown(),sideToggle()。

以下是例子。

sideDown()用于使元素向下滑。如下代码

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel").slideDown("slow");
  });
});
</script>
 
<style type="text/css"> 
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
 
<body>
 
<div class="panel">
<p>W3School - 领先的 Web 技术教程站点</p>
<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
</div>
 
<p class="flip">请点击这里</p>
 
</body>
</html>

点击flip的时候，可以看到panel向下滑并显示出来。

sideUp（）d的作用是让元素向上滑，也就是收起来。代码如下：

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel").slideUp("slow");
  });
});
</script>
 
<style type="text/css"> 
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
}
</style>
</head>
 
<body>
 
<div class="panel">
<p>W3School - 领先的 Web 技术教程站点</p>
<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
</div>
 
<p class="flip">请点击这里</p>
 
</body>
</html>

点击后，div元素会向上收。

sideToggle()方法顾名思义，不再赘述。

$("#flip").click(function(){
  $("#panel").slideToggle();
});

动画效果

Jquery通过animate()方法来实现动画效果。

语法是：

$(selector).animate({params},speed,callback);

必须将参数params定义成css属性，一个例子。

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left:'250px'});
  });
});
</script> 
</head>
 
<body>
<button>开始动画</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>

这个动画是让这块正方形向右移动，因为本来的left属性为0，变为250，说明向右移动了。