JQuery学习一

JQuery学习一

文章目录

  • 前言
  • 一、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尺寸方法
  • 总结


前言


一、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" 的 
元素。 $("p:first") // 第一个

元素 $("h1, p") // 所有

和所有

元素 $("div p") // 所有

元素后代的

元素 $("*") // DOM的所有元素 $("ul li:first") //选取第一个

    元素的第一个
  • 元素

JQuery学习一_第1张图片

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 textp>
div>

JS:

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

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

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

$(function(){ 
  $("#demo").html("Hi"); 
}); 

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">hellop>

js:

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

before() 和 after()

html:

<p id="demo">hellop>

js:

$(function () {
        $("#demo").before("Some Title");
        $("#demo").after("Welcome");
    });

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

html:

<p id="demo">hellop>

js:

$(function() {
  var txt = $("

"
).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 textdiv>

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()​方法返回元素的高度(​包括内边距和边框​)。

JQuery学习一_第2张图片

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

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

总结

–2023-12-8

你可能感兴趣的:(python篇,jquery,学习,前端)