信息管理创新实践学习周记8——jQuery

最新推荐文章于 2021-06-16 22:36:02 发布

芝芝莓莓少少冰

最新推荐文章于 2021-06-16 22:36:02 发布

阅读量57

点赞数

分类专栏：信息管理创新实践学习笔记

本文链接：https://blog.csdn.net/weixin_48813559/article/details/116607752

版权

信息管理创新实践学习笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

信息管理创新实践学习周记8——jQuery

1、jQuery语法
- 基础语法
- 实例
2、jQuery选择器
3、jQuery事件

1、jQuery语法

基础语法

$(selector).action()

美元符号定义 jQuery

选择符（selector）“查询"和"查找” HTML 元素

jQuery 的 action() 执行对元素的操作

实例

$(this).hide() - 隐藏当前元素

$(“p”).hide() - 隐藏所有

元素

$(“p.test”).hide() - 隐藏所有 class=“test” 的

元素

$("#test").hide() - 隐藏 id=“test” 的元素

2、jQuery选择器

元素选择器

jQuery 元素选择器基于元素名选取元素。

在页面中选取所有 <p> 元素：$("p")

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</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>

.id 选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。

通过 id 选取元素语法如下：$("#test")

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</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>这是一个标题</h2>
<p>这是一个段落</p>
<p id="test">这是另外一个段落</p>
<button>点我</button>
</body>

</html>

.class 选择器

jQuery 类选择器可以通过指定的 class 查找元素。

语法如下：$(".test")

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</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>

3、jQuery事件

页面对不同访问者的响应叫做事件。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

实例：
· 在元素上移动鼠标。
· 选取单选按钮
· 点击元素
click事件

 $("p").click(function(){
  $(this).hide();
});

dblclick双击

$("p").dblclick(function(){
  $(this).hide();
});

mousedown鼠标点击

$("#p1").mousedown(function(){
    alert("鼠标在该段落上按下！");
});

hover（）模拟光标悬停

$("#p1").hover(
    function(){
        alert("你进入了 p1!");
    },
    function(){
        alert("拜拜! 现在你离开了 p1!");
    }
);

芝芝莓莓少少冰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
信息管理创新实践学习周记8——jQuery

信息管理创新实践学习周记8——jQuery1、jQuery语法基础语法实例2、jQuery选择器元素选择器.id 选择器.class 选择器jQuery事件1、jQuery语法基础语法$(selector).action()美元符号定义 jQuery选择符（selector）“查询"和"查找” HTML 元素jQuery 的 action() 执行对元素的操作实例$(this).hide() - 隐藏当前元素$(“p”).hide() - 隐藏所有元素$(“p.test”).hide
复制链接

扫一扫