jQuery 简介

jQuery 是一个 JavaScript 函数库。

安装

方法一：下载安装
点击 jQuery 进行下载安装
方法二：从 CDN 中载入 jQuery, 如从Staticfile CDN、百度、又拍云、新浪、谷歌或微软中加载 jQuery

此处推荐使用Staticfile CDN:

<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
</head>

例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>例：消失消失</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
     
     
  $("#p2").click(function(){
     
     
    $(this).hide();
  });
	$("h1").click(function(){
     
     
    $(this).hide();
  });
});
</script>
</head>
<body>
<p>如果你点我，我就会消失。</p>
<p id="p2">继续点我!（只有我会消失哦！）</p>
<p>接着点我!</p>
	<h1>dianwo哈哈哈</h1>
</body>
</html>

运行结果如图：
~初始状态是这个样子：

~点击第二行，第二行内容消失啦：
第二行消失
~点击最后一行，“dianwo哈哈哈”也消失啦：
最后一行消失

jQuery 选择器

class选择器 & id选择器

#id 选择器通过 HTML 元素的 id 属性选取指定的元素。
类选择器通过指定的 class 查找元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>选择器</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
     
     
  $("button").click(function(){
     
     
    $(".test").hide();
  });
  $("#test2").click(function(){
     
     
	$(".test").show();
  });
});
</script>
</head>
<body>
<h2 class="test">这是一个标题</h2>
<p class="test">这是一个段落。</p>
<p>这是另外一个段落。</p>
<button class="test">点我</button>
<button id="test2">回来</button>
</body>
</html>

运行效果如图：
~初始效果：

~点击按钮“点我”后，变成这个样子啦：

~点击按钮“回来”后，回到初始效果图

jQuery 事件

click() 方法是当按钮点击事件被触发时会调用一个函数。
dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数。
当鼠标指针穿过元素时，会发生 mouseenter 事件。
mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数。
当鼠标指针离开元素时，会发生 mouseleave 事件。
mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数。
当元素获得焦点时，发生 focus 事件。
当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数
blur()当元素失去焦点时，发生 blur 事件。
blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数

jQuery 效果

隐藏和显示

隐藏和显示交替进行，来回切换

淡入淡出

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
     
     
  $("button").click(function(){
     
     
    $("#div1").fadeIn(5000);<!--5s-->
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
  $("button").click(function(){
     
     
    $("#div1").fadeOut();
    $("#div2").fadeOut();
    $("#div3").fadeOut();
  });
});
</script>
</head>
<body>
<button>点击淡入淡出 div 元素。</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>

运行效果如图：
~这是初始效果图：

~点击按钮后，出现如下效果图并消失回到初始效果图状态

动动动动画

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
     
     
  $("button").click(function(){
     
     
    $("div").animate({
     
     left:'+=40px',height:'+=40px',width:'+=40px'});
  });
});
</script> 
</head>
<body>
<button>开始动画</button>
<br></br>
<!--默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!-->
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

效果展示：
~点一下我是这个样子的：

~再点一下我是这个样子的：

~点第三下我变成了这个样子：
在这里插入图片描述
★jQuery是不是超级好玩呢……学习并没有随本篇文章结束哦，敬请期待下一篇更精彩有趣的内容吧★

！喜欢的话不要忘记【一键三连】哦！

jQuery基础——学习周记9

酷炫好玩的jQuery基础