学习周记8

最新推荐文章于 2023-05-07 22:41:03 发布

Ddddd_xr

最新推荐文章于 2023-05-07 22:41:03 发布

阅读量61

点赞数

本文链接：https://blog.csdn.net/Ddddd_xr/article/details/116429569

版权

JQuery初步

一、jQuery简介
二、jQuery语法
三、jQuery 选择器
四、jQuery 事件
五、jQuery 效果

一、jQuery简介

jQuery 是一个 JavaScript 函数库。
jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。
jQuery 库包含以下功能：
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
提示：除此之外，jQuery 还提供了大量的插件。

二、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” 的元素
jQuery 函数位于一个 document ready 函数中

$(document).ready(function(){
 
   // 开始写 jQuery 代码...
 
});

简洁写法（与以上写法效果相同）

$(function(){
 
   // 开始写 jQuery 代码...
 
});

三、jQuery 选择器

Query 选择器允许对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。
jQuery 中所有选择器都以美元符号开头：$()。

1、元素选择器

jQuery 元素选择器基于元素名选取元素。
在页面中选取所有 < p > 元素: $(“p”)
实例：隐藏p元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>标题</h2>
<p>段落</p>
<p>另一段落。</p>
<button>点我</button>
</body>
</html>

结果
在这里插入图片描述
点击后

2、#id 选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
通过 id 选取元素语法如下： $("#test")
实例：点击按钮，将 id=“a” 属性的元素隐藏：

<!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(){
    $("#a").hide();
  });
});
</script>
</head>

<body>
<h2>标题</h2>
<p>段落</p>
<p id="a">另一段落</p>
<button>点我</button>
</body>

</html>

结果
在这里插入图片描述
点击后

3、.class 选择器

jQuery 类选择器可以通过指定的 class 查找元素。
语法如下： $(".test")
实例：点击后所有带有 class=“test” 属性的元素都隐藏

<!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();
  });
});
</script>
</head>
<body>

<h2 class="test">标题</h2>
<p class="test">段落。</p>
<p>另一段落。</p>
<button>点我</button>
</body>
</html>

结果
在这里插入图片描述
点击后

其他语法

语法	描述
$("*")	选取所有元素
$(this)	选取当前 HTML 元素
$(“p.intro”)	选取 class 为 intro 的 < p > 元素
$(“p:first”)	选取第一个 < p > 元素
$(“ul li:first”)	选取第一个 < ul > 元素的第一个 < li > 元素
$(“ul li:first-child”)	选取每个 < ul > 元素的第一个 < li > 元素
$("[href]")	选取带有 href 属性的元素
$(“a[target=’_blank’]”)	选取所有 target 属性值等于 “_blank” 的 < a > 元素
$(“a[target!=’_blank’]”)	选取所有 target 属性值不等于 “_blank” 的 < a > 元素
$(":button")	选取所有 type=“button” 的 < input > 元素和 < button > 元素
$(“tr:even”)	选取偶数位置的 < tr > 元素
$(“tr:odd”)	选取奇数位置的 < tr > 元素

四、jQuery 事件

页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
实例：在元素上移动鼠标、选取单选、按钮点击元素等

1、click()

click() 方法是当按钮点击事件被触发时会调用一个函数。
该函数在用户点击 HTML 元素时执行。

2、focus()

当元素获得焦点时，发生 focus 事件。
当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。

3、blur()

当元素失去焦点时，发生 blur 事件。

<!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(){
  $("input").focus(function(){
    $(this).css("background-color","#cccccc");
  });
  $("input").blur(function(){
    $(this).css("background-color","#ffffff");
  });
});
</script>
</head>
<body>

Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email"><br>
Phone: <input type="text" name="phone">

</body>
</html>

结果
鼠标未点击选中元素或通过 tab 键未定位到元素时
在这里插入图片描述
鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点，触发事件focus（）发生

五、jQuery 效果

1、隐藏和显示

通过 jQuery，可以使用 hide() 和 show() 方法来隐藏和显示 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(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
</script>
</head>
<body>
<p>点击隐藏消失，点击显示出现</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
</body>
</html>

结果
在这里插入图片描述

语法:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

2、淡入淡出

jQuery 拥有下面四种 fade 方法：fadeIn()、fadeOut()、fadeToggle()、fadeTo()

jQuery fadeIn() 方法

jQuery fadeIn() 用于淡入已隐藏的元素。
语法:
$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。可选的 callback 参数是 fading 完成后所执行的函数名称。
实例

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

jQuery fadeOut() 方法

jQuery fadeOut() 方法用于淡出可见元素。
语法:
$(selector).fadeOut(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。可选的 callback 参数是 fading 完成后所执行的函数名称。
实例

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

Ddddd_xr

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习周记8

JQuery初步一、jQuery简介二、jQuery语法三、jQuery 选择器1、元素选择器2、#id 选择器3、.class 选择器其他语法四、jQuery 事件1、click()2、focus()3、blur()五、jQuery 效果1、隐藏和显示2、淡入淡出jQuery fadeIn() 方法jQuery fadeOut() 方法一、jQuery简介jQuery 是一个 JavaScript 函数库。jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。jQuery 库
复制链接

扫一扫