jQuery学习进阶篇

最新推荐文章于 2024-05-14 07:21:49 发布

chongshangyunxiao321

最新推荐文章于 2024-05-14 07:21:49 发布

阅读量3.3k

点赞数 1

分类专栏： Web前端开发文章标签： jquery html 应用

本文链接：https://blog.csdn.net/chongshangyunxiao321/article/details/51152335

版权

Web前端开发专栏收录该内容

12 篇文章 3 订阅

订阅专栏

JQuery选择器
学习JQuery选择器是如何准确地选取你所希望应用效果的元素。JQuery元素选择器和属性选择器允许你通过标签名、属性名或内容对HTML元素进行选择。选择器允许你对HTML元素或单个元素进行操作。

jQuery 选择器参考表
这里写图片描述

这里写图片描述

JQuery事件方法

jQuery 是为事件处理特别设计的。
jQuery 事件函数
1、JQuery 事件处理方法是 jQuery 中的核心函数。
2、事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。
3、通常会把 jQuery 代码放到部分的事件处理方法中：

单独文件中的函数
1、如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。
2、当我们在教程中演示 jQuery 时，会将函数直接添加到部分中。不过，把它们放到一个单独的文件中会更好，就像这样（通过 src 属性来引用文件）：

由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：
1、把所有 jQuery 代码置于事件处理函数中
2、把所有事件处理函数置于文档就绪事件处理器中
3、把 jQuery 代码置于单独的 .js 文件中
4、如果存在名称冲突，则重命名 jQuery 库

事件方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件。

$("button#demo").click()

上面的例子将触发id =“demo“的button的click事件。
这里写图片描述

JQuery效果函数

这里写图片描述

jQuery 方法链接
直到现在，我们都是一次写一条 jQuery 语句（一条接着另一条）。不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。

提示：这样的话，浏览器就不必多次查找相同的元素。
如需链接一个动作，您只需简单地把该动作追加到之前的动作上

下面的例子把 css(), slideUp(), and slideDown() 链接在一起。”p1” 元素首先会变为红色，然后向上滑动，然后向下滑动：

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function()
  {
  $("button").click(function(){
    $("#p1").css("color","red").slideUp(2000).slideDown(2000);
  });
});
</script>
</head>

<body>

<p id="p1">jQuery 乐趣十足！</p>
<button>点击这里</button>

</body>
</html>