JQuery学习一

JQuery学习一

---

前言

---

一、JQuery是什么？

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

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

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

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

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

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

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

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

二、属性和内容

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

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

2.1. jQuery选择器

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

$("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()方法用于获取属性的值。

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

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

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

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

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

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

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

2.3. text()方法

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

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

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

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

HTML：

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

JS:

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

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

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

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

2.4. val()方法

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

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

HTML：

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

JS:

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

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

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

2.5. 小结

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

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

2.6. 添加内容

正如我们在以前的课程中所看到的，​html() ​和​ text()​ 方法可以用于​获取和设置​所选元素的​内容​。
然而，这些方法用于​设置内容​时，现有内容将​被覆盖​。

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

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

​append() ​

html:

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

js:

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

before() 和 after()

html:

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

js:

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

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

html:

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

js:

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

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

三、操作CSS

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

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

3.1. addClass() 方法

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

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

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

HTML:

<div>Some text</div>

CSS:

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

JS:

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

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

3.2. ​removeClass() ​方法

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

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

从div元素中删除​“header”​类。

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

3.3. toggleClass() 方法

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

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

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

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

HTML:

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

CSS:

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

JS:

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

3.4. CSS()方法

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

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

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

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

HTML:

<p>一些文本</p>

CSS:

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

JS:

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

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

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

3.5. jQuery尺寸方法

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

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

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

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

---

总结

–2023-12-8