JQuery学习_w3cSchool微课笔记

最新推荐文章于 2022-12-05 18:06:24 发布

易不挂科

最新推荐文章于 2022-12-05 18:06:24 发布

阅读量215

点赞数

分类专栏：前端编程自学文章标签： JQuery

本文链接：https://blog.csdn.net/qq_39944559/article/details/102689968

版权

编程自学同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

前端

5 篇文章 0 订阅

订阅专栏

#JQuery
###定义
jQuery是一个快速，小巧，功能丰富的JavaScript库。
jQuery 使HTML文档遍历和操作，事件处理和动画等操作变得更加简单.
jQuery的所有功能都是通过JavaScript访问的,是js库
###入门指南
可以从www.jquery.com下载jQuery库的副本，或者从CDN（内容分发网络）（如BootCDN或百度CDN）中引入。
我们将使用BootCDN上的CDN。
要开始使用jQuery，我们首先需要使用 script 标签将其添加到我们的HTML文档的头部：

<head>
        <title>页面标题</title>
        <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
    </head>

jQuery是一个JavaScript库，所以它具有.js文件扩展名

在使用HTML文档之前等待HTML文档完全加载并准备就绪是一种很好的做法。为此，我们使用 document(文档) 对象的 ready 事件：

$(document).ready(function() {
    // 在这写 jQuery 代码
});

$ 用于访问jQuery。
从这里开始，代码访问document对象，并定义了当 document 的 ready 事件触发时要调用的函数。
可以防止任何jQuery代码在文档加载完成之前运行(使用ready事件)

快捷方式替代上面代码:

$(function() {
   // 在这写 jQuery 代码
});

###选择器
jQuery选择器以美元符号和圆括号开头:$()
元素选择器，它根据元素名称选择所有元素
$(“div”)
id和类选择器，它们通过id和类名来选择元素：

$("#test") // 选择id="test"的元素
$(".menu") //选择class="menu"的所有元素

$("div.menu")  // 所有<div>元素与class="menu"
$("p:first")  // 第一个<p>元素
$("h1, p") // 所有<h1>和所有<p>元素
$("div p") // 所有<div>元素后代的<p>元素
$("*")  // DOM的所有元素

选择器比纯JavaScript更容易访问HTML DOM元素。
常用选择器方法
###属性
####获取/设置属性值

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

html

<a href="www.w3cschool.cn">
   点击这里
</a>

$(function() {
  var val = $("a").attr("href");
  alert(val);
});
// 弹出提醒 "www.w3cschool.cn"

attr() 方法还允许我们通过第二个参数来给属性设置一个值。

$(function() {
  $("a").attr("href", "https://www.jquery.com");
});

####删除属性

removeAttr() 方法用于删除元素的任何属性。
删除了表的边框和类属性：

$("table").removeAttr("border");
$("table").removeAttr("class");

####获取/设置内容
#####获取内容
html() 方法用于获取所选元素的内容，包括HTML标记
只需要文本内容，不需要HTML标签，可以使用 text() 方法：

$(function() {
  var val = $("p").text();
  alert(val);
});

#####设置内容
######可以使用 html() 和 text() 方法来更改HTML元素的内容。
要设置的内容作为方法的参数提供

html

<div id="test">
   <p>some text</p>
</div>

$(function() {
  $("#test").text("hello!");
});

上面的代码将 id=“test” 的元素的内容更改为"hello!"。

######val()
另一个有用的方法是val()方法，它允许我们获取和设置表单字段的值，例如: 文本框(input)，下拉列表(select) 等。

类似地，你可以在val()方法传入参数来设置该字段的值。
当需要处理表单事件和验证时，获取和设置表单域的值非常有用。

总结
以下jQuery方法可用于获取和设置所选HTML元素的内容和属性：

text() 设置或返回所选元素的文本内容。
html() 设置或返回所选元素的内容（包括HTML标签）。
val() 设置或返回表单字段的值。
attr() 设置或返回属性的值。
removeAttr() 删除指定的属性。

###添加内容

正如我们在以前的课程中所看到的，html() 和 text() 方法可以用于获取和设置所选元素的内容。

然而，这些方法用于设置内容时，现有内容将被覆盖。

#####jQuery具有用于向所选元素添加新内容而不删除现有内容的方法：

append() 在所选元素的末尾插入内容。

prepend() 在所选元素的开头插入内容。

after() 插入所选元素后的内容。

before() 在所选元素之前插入内容。

在这里插入图片描述

<p id="demo">Hi </p>

$(function() {
  $("#demo").append("David");
});
//最终输出 "Hi David"

类似地，prepend()方法将插入所选元素的开始内容。
你还可以插入带有HTML标签的内容。

#####添加新元素
append()，prepend()，before() 和 after() 方法也可用于添加新创建的元素。

易不挂科

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery学习_w3cSchool微课笔记

#JQuery###定义jQuery是一个快速，小巧，功能丰富的JavaScript库。jQuery 使HTML文档遍历和操作，事件处理和动画等操作变得更加简单.jQuery的所有功能都是通过JavaScript访问的,是js库###入门指南可以从www.jquery.com下载jQuery库的副本，或者从CDN（内容分发网络）（如BootCDN或百度CDN）中引入。我们将使用Boo...
复制链接

扫一扫