jQuery基础教程-优快云博客

一、基本语法

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

$(function(){    --等价于上面的写法--
  $("p").click(function(){
  $(this).hide();
  });
});

</script></head><body>If you click on me, I will disappear.</body></html>

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。
（一）基础语法：$(selector).action()
1.$是jQuery的别名，$();相当于jQuery();
2.选择符（selector）“查询”和“查找” HTML 元素

3.jQuery 的 action() 执行对元素的操作

eg:$(this).hide(); --隐藏当前元素

$(p).hide(); --隐藏标签元素

$(.jake).hide(); --隐藏所有class="jake"的元素

$(#jake).hide() --隐藏所有id="jake"的元素

（二）文档就绪函数

$(document).ready(function(){

----jQuery functions -----

});

作用：防止在DOM文档未加载完全之前运行jQuery代码，DOM包括form、images、links、script、body等内容。

为了进一步简化jQuery代码，直接用$()来表示这个函数。

二、 jQuery选择器

jQuery允许我们通过标签名、属性名、或内容对HTML内容进行选择

jQuery元素选择器：

jQuery使用CSS选择器来选取HTML元素，

$(p)选取元素

$(p.intro)选取所有class="intro"的元素

$(p#demo)选取所有id="demo"的元素

-----js与jQuery对比-----

js提供了原生的方法获取获取DOM中指定id值得元素：getElementById("id");

var element = document.getElementById("id"); 这个方法返回得是所匹配的元素的对象

jQuery对这个方法进行了简化，通过简单的“#”标识前缀快速匹配id所指定的元素对象。

jQuery("#id"); 等价于 $("#id");

jQuery属性选择器

jQuery使用Xpath表达式来选择带有给定属性的元素

$([href])选取带有href属性的元素。

$([href='#'])选取带有href值等于"#"的元素。

$([href!='#'])选取带有href值不等于“#”的元素。

$([href$='.jpg'])选取所有href值以“.jpg”结尾的元素

jQueryCSS选择器

jQuery CSS选择器可用于改变HTML元素的CSS属性

$(p).css("background-color","red");将p元素的背景颜色修改为红色

三、jQuery事件

（一）jQuery事件函数

jQuery事件处理方法是jQuery中的核心函数。

事件处理程序是指当HTML中发生某些事件时所调用的方法。

通常把jQuery代码放在<head>部分的事件处理方法中：

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

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>

</html>

eg:

$("button").click(

function(){

----- some code ---

})

当按钮的点击事件被触发时会调用以函数。

（二）jQuery事件

三、jQuery效果

（一）隐藏和显示

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#hide").click(function(){
  $("p").hide();
  });
  $("#show").click(function(){
  $("p").show();
  });
});
</script>
</head>
<body>
<p id="p1">如果点击“隐藏”按钮，我就会消失。</p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
</body>
</html>

语法：$(selector).hide(speed,callback);

$(selector).show(speed,callback);

speed参数可控制隐藏和显示的速度，常用值：slow、fast、毫秒。

callback参数是执行完隐藏和显示后的还要执行函数名称。

toggle()方法：

在jQuery中可以通过toggle()方法来切换show()和hide()。

语法：$(selector).toggle(speed,callback);

（二）淡入淡出

（三）动画