第八周周记

最新推荐文章于 2024-08-11 21:19:32 发布

Michael681

最新推荐文章于 2024-08-11 21:19:32 发布

阅读量67

点赞数

本文链接：https://blog.csdn.net/Michael681/article/details/117997952

版权

前言

本周学习了jQuery，以下是我学到的内容

一、jQuery

jQuery 是一个 JavaScript 库。

二、jQuery 选择器

jQuery 选择器允许对 HTML 元素组或单个元素进行操作。 jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。 jQuery 中所有选择器都以美元符号开头：$()。

语法

与css选择器名字类似，分为id与class型

语法	描述实例
$("*")	选取所有元素
$(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 事件

1、jQuery 事件方法语法

$(“p”).click();
或
$(“p”).click(function(){
// 动作触发后执行的代码
});

2、常用的 jQuery 事件方法

$(document).ready()
$(document).ready() 方法允许我们在文档完全加载完后执行函数。
click() ； dblclick()
单击元素；双击元素
mouseenter() ； mouseleave()
光标穿过元素；光标离开元素
mousedown() ； mouseup()
当光标移动到元素上方，并按下鼠标按键；当在元素上松开鼠标按钮时
hover()
hover()方法用于模拟光标悬停事件
当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)
focus()
当元素获得焦点
当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点
blur()
当元素失去焦点

四、jQuery 效果- 隐藏和显示

语法

1-jQuery hide() 和 show()

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


<script>
$(document).ready(function(){
  $(".hidebtn").click(function(){
    $("div").hide(1000,"linear",function(){
      alert("Hide() 方法已完成!");
    });
  });
});
</script>

原始样子
在这里插入图片描述
结果

第二个参数是一个字符串，表示过渡使用哪种缓动函数

2-jQuery toggle()

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

五、jQuery 效果- 动画

jQuery animate() 方法允许您创建自定义的动画

1、语法

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是动画完成后所执行的函数名称。

2、相对值

需要在值的前面加上 += 或 -=

3、预定义的值

可以把属性的动画值设置为 “show”、“hide” 或 “toggle”

4、队列功能

可编写多个 animate() 调用，但有顺序
语法：

var div=$("div");
div.animate({      );

六、jQuery DOM 操作——获取内容和属性

1、获得内容 - text()、html() 以及 val()

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

<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
  $("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });
});
</script>
</head>

<body>
<p id="test">这是段落中的 <b>粗体</b> 文本。</p>

在这里插入图片描述

<script>
$(document).ready(function(){
  $("button").click(function(){
    alert("值为: " + $("#test").val());
  });
});
</script>
</head>

<body>
<p>名称: <input type="text" id="test" ></p>