【jQuery】初识jQuery

概述

jQuery 是一个 JavaScript 库，包含了大量的函数。

jQuery 极大地简化了 JavaScript 编程。

jQuery 很容易学习。

使用

cdn引入：<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>

语法：

$(selector).action()

selector：选择器，选取html元素时和css选择器语法一致，也可以写document对象。

action()：操作，比如click()事件、hide()隐藏、css()

//隐藏当前的 HTML 元素。
$(this).hide()

//隐藏 id="test" 的元素。
$("#test").hide()

//隐藏所有 class="test" 的所有元素
$(".test").hide() 

//隐藏所有 <p> 元素。
$("p").hide()

//隐藏所有 class="test" 的元素。
$(".test").hide()

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

//选择所有p标签，修改其背景颜色
$("p").css("background-color","red");

事件

鼠标事件、键盘事件，其他事件

Event 函数	绑定函数至
$(document).ready(function(){})	将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)	触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)	触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)	触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)	触发或将函数绑定到被选元素的鼠标悬停事件

注：

• $(document).ready(function) 可以简写为$(function(){})
• 事件的函数一般可以接收一个参数保存事件的一些信息，如$(document).mousemove(function(event){})的event.pageX是鼠标的x坐标。

操作DOM

节点文本操作:

$('#a').text();//获得值
$('#a').text('设置值');//设置值
$('#a').html();//获得值
$('#a').html('<strong>123</strong>');//设置值

css操作：

$('#a').css({"color","red"});

元素的隐藏与显示

本质是操作：display：none

$('#a').show();
$('#a').hide();

jQuery的淡入淡出：

• fadeIn() 淡入
• fadeOut() 淡出
• fadeToggle() 自动判断是淡入还是淡出
• fadeTo() 淡入或淡出到某种程度（调整透明度）

$(selector).fadeIn(speed,callback);
$(selector).fadeTo(speed,opacity,callback);
//speed :可选参数，规定效果时长，可选值有slow、fast或毫秒
//callback：可选参数，规定完成后执行的函数
//opacity：透明度 0-1

<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>



</p><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>