概述

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>

【jQuery】初识jQuery_jquery