W7-jQuery基础

最新推荐文章于 2024-07-25 11:26:35 发布

小红帽的狼外婆_x

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量59

点赞数

文章标签： jquery html

本文链接：https://blog.csdn.net/reL_iuhgc34n_x/article/details/116024701

版权

W7-jQuery

jQuery

jQuery

1 jQuery简介

jQuery 是一个 JavaScript 函数库。

jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。

2 jQuery安装

有两种方法：

下载jQuery
jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的

<head>
<script src="jquery-1.10.2.min.js"></script>
</head>

通过 CDN（内容分发网络）引用它

<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">//根据引用站点的不同，更换相应的链接地址即可
</script>
</head>

3 jQuery语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()

美元符号定义 jQuery
选择符（selector）“查询"和"查找” HTML 元素
jQuery 的 action()执行对元素的操作

实例:

$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class=“test” 的 <p> 元素
$("#test").hide() - 隐藏 id=“test” 的元素

4 jQuery选择器

jQuery 选择器对单个元素进行选择，基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

4.1 元素选择器

jQuery 元素选择器基于元素名选取元素。
选取页面中所有的<p>元素。
$("p")

4.2 #id 选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
选取id为test的元素、
$("#test")

4.3 .class 选择器

jQuery 类选择器可以通过指定的 class 查找元素。
$(".test")

5 jQuery事件

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。

例如，页面中指定一个点击事件：

$("p").click();

下一步是定义什么时间触发事件。您可以通过一个事件函数实现：

$("p").click(function(){
    // 这里加要执行的代码
});

常用事件：
$(document).ready() 方法允许我们在文档完全加载完后执行函数。
dblclick() 当双击元素时，会发生 dblclick 事件。
mouseenter()当鼠标指针穿过元素时，会发生 mouseenter 事件。
mouseleave()当鼠标指针离开元素时，会发生 mouseleave 事件。
mousedown()当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
mouseup()当在元素上松开鼠标按钮时，会发生 mouseup 事件。
hover()方法用于模拟光标悬停事件。
focus()当元素获得焦点时，发生 focus 事件。
blur()当元素失去焦点时，发生 blur 事件。

6 jQuery效果

6.1 隐藏/显示

jQuery hide() 和 show()
通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素。
jQuery toggle()
通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。显示被隐藏的元素，并隐藏已显示的元素。

语法:

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

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

这是一个让小可爱走开、回来的实例：

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
   $("#toggle").click(function(){
    $("p").toggle();
  });
});
</script>
</head>
<body>
<p>hi，我是你的小可爱！(●'◡'●)</p>
<button id="hide">小可爱走开！(╯▔皿▔)╯</button>
<button id="show">小可爱回来！/(ㄒoㄒ)/~~</button>
<button id="toggle">小可爱走开/回来！</button>
</body>
</html>

注：

<button>标签如果想进行不同操作的话，一定要加id哦~。
引用id时要加#，例如"#show"
引用标签时直接用，例如"button"

6.2 淡入淡出

通过 jQuery，您可以实现元素的淡入淡出效果。

jQuery 拥有下面四种 fade 方法：

fadeIn()

<!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();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
});
</script>
</head>

<body>
<p>以下实例演示了 fadeIn() 使用了不同参数的效果。</p>
<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>

fadeOut()

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

fadeToggle()

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

fadeTo()

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

6.3 滑入

通过 jQuery，您可以在元素上创建滑动效果。

jQuery 拥有以下滑动方法：

slideDown()
slideUp()
slideToggle()
jQuery slideDown() 方法用于向下滑动元素

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

jQuery slideUp() 方法用于向上滑动元素。

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

jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们。

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

6.4 动画

jQuery animate() 方法用于创建自定义动画。下面的例子演示 animate() 方法的简单应用。它把 <div>
元素往右边移动了 250 像素：

$("button").click(function(){
  $("div").animate({left:'250px'});
});

jQuery animate() - 操作多个属性

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

jQuery animate() - 使用相对值

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

jQuery animate() - 使用预定义的值

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

6.5操作DOM

DOM = Document Object Model（文档对象模型）
三个简单实用的用于 DOM 操作的 jQuery 方法：

text() - 设置或返回所选元素的文本内容 html()
设置或返回所选元素的内容（包括 HTML 标记） val()
设置或返回表单字段的值

下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容：

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

下面的例子演示如何通过 jQuery val() 方法获得输入字段的值：

$("#btn1").click(function(){
  alert("值为: " + $("#test").val());
});

获取属性 - attr()
jQuery attr() 方法用于获取属性值。

下面的例子演示如何获得链接中 href 属性的值：

$("button").click(function(){
  alert($("#runoob").attr("href"));
});

小红帽的狼外婆_x

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
W7-jQuery基础

W8-jQueryjQuery1 jQuery简介2 jQuery安装3 jQuery语法jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。4 jQuery选择器5 jQuery事件6 jQuery效果6.1jQuery1 jQuery简介jQuery 是一个 JavaScript 函数库。jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。2 jQuery安装有两种方法：下载jQueryjQuery 库是一个 JavaScript 文件，您
复制链接

扫一扫