JQuery学习一

JQuery学习一

文章目录

前言
一、JQuery是什么？
二、属性和内容
- [2.1. jQuery选择器](#2.1. jQuery选择器)
- [2.2. attr() 方法](#2.2. attr() 方法)
- [2.3. text()方法](#2.3. text()方法)
- [2.4. val()方法](#2.4. val()方法)
- [2.5. 小结](#2.5. 小结)
- [2.6. 添加内容](#2.6. 添加内容)
三、操作CSS
- [3.1. addClass() 方法](#3.1. addClass() 方法)
- [3.2. removeClass() 方法](#3.2. removeClass() 方法)
- [3.3. toggleClass() 方法](#3.3. toggleClass() 方法)
- [3.4. CSS()方法](#3.4. CSS()方法)
- [3.5. jQuery尺寸方法](#3.5. jQuery尺寸方法)
总结

前言

一、JQuery是什么？

jQuery是一个快速，小巧，功能丰富的JavaScript库。

jQuery 使HTML文档遍历和操作，事件处理和动画等操作变得更加简单。

jQuery的所有功能都是通过JavaScript访问的，因此掌握JavaScript对于理解，构建和调试代码至关重要。

首先，让我们看一下分别使用原生js和使用jQuery操作 HTML 的示例。

原生js的使用：要获取id="start" 的元素并将其html更改为"出发吧,骚年"，我们需要执行以下操作：

javascript 复制代码

var el = document.getElementById("start");
el.innerHTML = "出发吧,骚年!";

使用jQuery进行相同的操作，我们只需要一行代码：

javascript 复制代码

$("#start").html("出发吧，骚年!");

二、属性和内容

可以从www.jquery.com下载jQuery库的副本，或者从 CDN （内容分发网络）（如BootCDN或百度CDN）中引用

javascript 复制代码

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

2.1. jQuery选择器

jQuery 通过选择器允许您对 DOM 元素组或单个 DOM 节点进行操作，如下：

javascript 复制代码

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

2.2. attr() 方法

我们可以通过jQuery轻松的操作分配给HTML元素的属性。

比如元素的 href,src,id,class,style 属性。

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

javascript 复制代码

//返回属性的值：
$(selector).attr(attribute)

attr() 方法还用于设置属性值，则为匹配元素设置一个或多个属性/值对。

javascript 复制代码

//设置属性和值：
$(selector).attr(attribute,value)

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

removeAttr() 方法从被选元素移除一个或多个属性。如需移除若干个属性，请使用空格分隔属性名称。

javascript 复制代码

//语法：
$(selector).removeAttr(attribute)

//在下面的示例中，我们删除了表的边框和类属性：
$("table").removeAttr("border");
$("table").removeAttr("class");

2.3. text()方法

text() 方法设置或返回被选元素的文本内容

当该方法用于返回一个值时，它会返回所有匹配元素的组合的文本内容（会删除 HTML 标记）。

javascript 复制代码

//语法：
$(selector).text()

可以使用 html() 和 text() 方法来更改HTML元素的内容

HTML：

html 复制代码

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

JS:

javascript 复制代码

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

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

如果设置的内容包含HTML标记，则应使用 html() 方法而不是 text()

javascript 复制代码

$(function(){ 
  $("#demo").html("<b>Hi</b>"); 
});

2.4. val()方法

允许我们获取和设置表单字段的值

javascript 复制代码

//语法：
$(selector).val(value)

HTML：

html 复制代码

<input type="text" id="name" value="名字">

JS:

javascript 复制代码

$(function() {
  alert($("#name").val());
});
//弹出 "名字"

获取表单字段的值, 并将值赋给 id="demo" 的元素中

javascript 复制代码

$(function(){
    var t=$("#user").val();
    $("#demo").text(t);
});

2.5. 小结

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

text() 设置或返回的是标签中包含的仅仅是文本值，并不包含标签内的任何元素。text()方法不能使用在表单元素上
html() 设置或返回的是标签中的内部的一切，包括文本。html()方法使用在多个元素上时，只读取第一个元素。
val() 设置或返回的仅仅是标签中的value属性的值。val()只能使用在表单元素上
attr() 设置或返回标签中任意属性的值。
removeAttr() 删除指定的属性。

2.6. 添加内容

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

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

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

append() - 在被选元素的结尾插入内容（还在元素内）
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容（即在元素之外）
before() - 在被选元素之前插入内容

append()

html:

html 复制代码

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

js:

javascript 复制代码

$(
        function (){
            $("#demo").append(" world")
        }
    );

before() 和 after()

html:

html 复制代码

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

js:

javascript 复制代码

$(function () {
        $("#demo").before("<i>Some Title</i>");
        $("#demo").after("<b>Welcome</b>");
    });

也可用于添加新创建的元素，如下将新创一个内容为"Hi" 的p元素

html:

html 复制代码

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

js:

javascript 复制代码

$(function() {
  var txt = $("<p></p>").text("Hi");
  $("#demo").after(txt);
});

上面提到的用于创建元素的语法可以用来创建任何新的HTML元素，例如$("< div >< /div >")可以创建一个新的div。

三、操作CSS

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

3.1. addClass() 方法

该方法不会移除已存在的 class 属性，仅仅添加一个或多个类名到 class 属性。

javascript 复制代码

//语法：
$(selector).addClass(classname)

如下所示，为div元素指定了一个"header"类。

HTML:

html 复制代码

<div>Some text</div>

CSS:

css 复制代码

.header {
  color: blue;
  font-size:x-large;
}

JS:

javascript 复制代码

$("div").addClass("header");

要在 addClass() 方法中指定多个类, 只需使用空格分隔它们。例如$("div").addClass("class1 class2 class3")

3.2. removeClass() 方法

removeClass() 方法从被选元素移除一个或多个类。

注意：如果没有规定参数，则该方法将从被选元素中删除所有类。

从div元素中删除"header"类。

javascript 复制代码

$("div").removeClass("header");

3.3. toggleClass() 方法

toggleClass() 方法对添加和移除被选元素的一个或多个类进行切换。

该方法检查每个元素中指定的类。

如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。

我们将处理一个按钮单击事件来切换一个类

HTML:

html 复制代码

<p id="demo2">一些文本</p>
<button>切换类</button>

CSS:

css 复制代码

.red { 
  color:red; 
  font-weight: bold;
}

JS:

javascript 复制代码

 $(function (){
        $("button").click(function () {
            $("#demo2").toggleClass("red");
        });
    });

3.4. CSS()方法

与 html() 方法类似，可以使用 css() 方法来获取和设置被选元素的一个或多个样式属性。

该方法返回第一个匹配元素的指定 CSS 属性值。

css 复制代码

/*设置 CSS 属性和值：*/
$(selector).css(property,value)

代码弹出获取的段落 background-color 属性值，然后将其值设置为blue。

HTML:

html 复制代码

<p>一些文本</p>

CSS:

css 复制代码

p {
  background-color:red;
  color: white;
}

JS:

javascript 复制代码

$(function() {
  alert($("p").css("background-color"));
  $("p").css("background-color", "blue");
});

css（）方法可以使用JSON语法设置多个CSS属性。

javascript 复制代码

$("p").css({"color": "red", "font-size": "200%"});

3.5. jQuery尺寸方法

jQuery 提供多个处理尺寸的重要方法：

width()方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height()方法设置或返回元素的高度（不包括内边距、边框或外边距）。
innerWidth()方法返回元素的宽度（包括内边距）。
innerHeight()方法返回元素的高度（包括内边距）。
outerWidth()方法返回元素的宽度（包括内边距和边框）。
outerHeight()方法返回元素的高度（包括内边距和边框）。

下面代码中我们将div的宽度和高度设置为100px，并为其设置背景颜色：

javascript 复制代码

$("div").css("background-color", "red");
$("div").width(100);
$("div").height(100);

总结

--2023-12-8

文章目录

前言

一、JQuery是什么？

二、属性和内容

2.1. jQuery选择器

2.2. attr() 方法

2.3. text()方法

2.4. val()方法

2.5. 小结

2.6. 添加内容

三、操作CSS

3.1. addClass() 方法

3.2. ​removeClass() ​方法

3.3. toggleClass() 方法

3.4. CSS()方法

3.5. jQuery尺寸方法

总结

3.2. removeClass() 方法